additional frontend changes for recipe cards

kumarkrishh · Dec 6, 2024 · 051c420 · 051c420
1 parent f131809
commit 051c420
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 23 deletions.
diff --git a/components/EditRecipeCard.tsx b/components/EditRecipeCard.tsx
@@ -174,7 +174,7 @@ export default function EditRecipeCard({
       <Navbar />
       <div className="text-center">
         <CardHeader>
-          <CardTitle className="font-semibold text-4xl mb-2 bg-gradient-to-r from-purple-600 to-indigo-800 text-transparent bg-clip-text">
+          <CardTitle className="font-semibold text-4xl mb-2 bg-gradient-to-r from-purple-600 to-indigo-600 text-transparent bg-clip-text">
             Recipe for {editedRecipe.title}
           </CardTitle>
         </CardHeader>
@@ -239,13 +239,13 @@ export default function EditRecipeCard({
           <div className="flex items-center gap-2 mt-3 justify-end">
             <Button
               onClick={handleAddIngredient}
-              className="bg-indigo-600 bg-gradient-to-r from-purple-600 to-indigo-600 hover:bg-indigo-700 text-white"
+              className="bg-indigo-600 bg-gradient-to-r from-purple-600 to-indigo-600 text-white"
             >
               <Plus className="h-4 w-4 mr-2" /> Add Ingredient
             </Button>
             <Button
               onClick={handleUpdateRecipe}
-              className="bg-indigo-600 bg-gradient-to-r from-indigo-600 to-purple-600 hover:bg-indigo-700 text-white w-full"
+              className="bg-indigo-600 bg-gradient-to-r from-purple-600 to-indigo-600 hover:bg-indigo-700 text-white w-full"
               disabled={isUpdating}
             >
               {isUpdating ? (

diff --git a/components/RecipeCard.tsx b/components/RecipeCard.tsx
@@ -97,25 +97,50 @@ export default function RecipeCard({
 
       {/* Recipe Title and Basic Info */}
       <CardHeader>
-        <CardTitle className="text-xl">{recipe.title}</CardTitle>
-        <CardDescription className="flex items-center gap-2 text-sm">
-          <span>🕒 {recipe.readyInMinutes} mins</span>
-          <span>•</span>
-          <span>👥 Serves {recipe.servings}</span>
-        </CardDescription>
-        {recipe.diets?.length > 0 && (
-          <div className="flex flex-wrap gap-1.5">
-            {recipe.diets.slice(0, 2).map((diet: string) => (
-              <Badge key={diet} variant="secondary" className="capitalize">
-                {diet}
-              </Badge>
-            ))}
-            {recipe.diets.length > 2 && (
-              <Badge variant="secondary">+{recipe.diets.length - 2}</Badge>
-            )}
-          </div>
-        )}
-      </CardHeader>
+  <CardTitle className="text-xl">{recipe.title}</CardTitle>
+  <CardDescription className="flex items-center gap-2 text-sm">
+    <span className="flex items-center gap-1">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="h-5 w-5 text-purple-600"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+      >
+        <path
+          fillRule="evenodd"
+          d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 101.414-1.414L11 9.586V5z"
+          clipRule="evenodd"
+        />
+      </svg>
+      {recipe.readyInMinutes} mins
+    </span>
+    <span>•</span>
+    <span className="flex items-center gap-1">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="h-7 w-7 text-purple-600"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+      >
+        <path d="M13 7a3 3 0 11-6 0 3 3 0 016 0zM4 13a4 4 0 014-4h4a4 4 0 014 4v1H4v-1z" />
+      </svg>
+      Serves {recipe.servings}
+    </span>
+  </CardDescription>
+  {recipe.diets?.length > 0 && (
+    <div className="flex flex-wrap gap-1.5">
+      {recipe.diets.slice(0, 2).map((diet: string) => (
+        <Badge key={diet} variant="secondary" className="capitalize">
+          {diet}
+        </Badge>
+      ))}
+      {recipe.diets.length > 2 && (
+        <Badge variant="secondary">+{recipe.diets.length - 2}</Badge>
+      )}
+    </div>
+  )}
+</CardHeader>
+
 
       <CardContent className="space-y-4">
         {/* Quick Nutrition Facts */}
@@ -137,7 +162,7 @@ export default function RecipeCard({
         {/* Expand/Collapse Button */}
         <Button
           variant="outline"
-          className="w-full"
+          className="w-full text-white hover:text-white bg-gradient-to-r from-purple-600 to-indigo-600"
           onClick={() => setIsExpanded(!isExpanded)}
         >
           <span className="flex items-center gap-2">