\n {/* URL Import Form */}\n \n\n {/* Recipe List */}\n {loading ? (\n

Loading recipes...

\n ) : recipes.length === 0 ? (\n

\n No recipes yet. Import one from a URL above!\n

\n ) : (\n

\n {recipes.map((recipe) => (\n onSelectRecipe(selectedRecipeId === recipe.id ? null : recipe.id)}\n className={`w-full text-left p-4 rounded-lg shadow transition-colors ${\n selectedRecipeId === recipe.id\n ? \"bg-blue-50 border-2 border-blue-500\"\n : \"bg-white hover:bg-gray-50 border-2 border-transparent\"\n }`}\n >\n

{recipe.title}

\n {recipe.servings} serving{recipe.servings !== 1 ? \"s\" : \"\"}\n {recipe.prep_time_minutes && (\n Prep: {formatTime(recipe.prep_time_minutes)}\n )}\n {recipe.cook_time_minutes && (\n Cook: {formatTime(recipe.cook_time_minutes)}\n )}\n

\n {recipe.source_url && (\n

\n {new URL(recipe.source_url).hostname}\n

\n )}\n \n ))}\n

\n )}\n

\n );\n}\n","deleted","label",[179,180,162],"frontend","components","permalink","https://www.val.town/x/drewmcdonald/Recipes/code/frontend/components/RecipeList.tsx","extension","actionData","errors"]