fix(frontend): adjust styles of ingredients in recipe card

mst-mkt · Sep 12, 2024 · eceaf5f · eceaf5f
1 parent b644da8
commit eceaf5f
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 17 deletions.
diff --git a/apps/frontend/src/routes/_app/recipe/.recipe-card.tsx b/apps/frontend/src/routes/_app/recipe/.recipe-card.tsx
@@ -1,5 +1,6 @@
 import { Link } from '@tanstack/react-router'
 import type { FC } from 'react'
+import { twMerge } from 'tailwind-merge'
 
 type RecipeCardProps = {
   id: string
@@ -15,21 +16,31 @@ export const RecipeCard: FC<RecipeCardProps> = ({ id, title, image, ingredients,
     params={{ recipeId: id }}
     search={{ search }}
     key={id}
-    className="group block rounded-md transition-colors hover:bg-background-100"
+    className="block rounded-md transition-colors hover:bg-background-100"
   >
-    <div className="flex h-fit gap-x-2 sm:gap-x-4">
+    <div className="flex h-fit items-center gap-x-2 sm:gap-x-4">
       <img
         src={image}
         alt={title}
-        className="block aspect-1 h-24 rounded-md object-cover shadow-md sm:h-32"
+        className="block aspect-1 h-24 rounded-md object-cover shadow-md md:h-36"
       />
-      <div className="flex shrink grow flex-col justify-center gap-y-2 overflow-hidden px-4">
-        <h3 className="truncate font-bold transition-colors group-hover:text-accent sm:text-lg">
-          {title}
-        </h3>
-        <p className="line-clamp-2 text-sm transition-colors sm:text-base">
-          {ingredients.join(', ')}
-        </p>
+      <div className="flex shrink grow flex-col justify-center gap-y-2 overflow-hidden p-4 sm:gap-y-4">
+        <h3 className="truncate font-bold transition-colors sm:text-lg">{title}</h3>
+        <div className="line-clamp-2">
+          {ingredients
+            .toSorted((a) => (search?.some((s) => a.includes(s)) ? -1 : 1))
+            .map((ingredient) => (
+              <p
+                key={ingredient}
+                className={twMerge(
+                  'mr-2 mb-1 inline-block rounded-full bg-background-100/10 px-2 py-1 text-xs last:mr-0',
+                  search?.some((s) => ingredient.includes(s)) && 'bg-accent-50/50 font-bold',
+                )}
+              >
+                {ingredient}
+              </p>
+            ))}
+        </div>
       </div>
     </div>
   </Link>

diff --git a/apps/frontend/src/routes/_app/recipe/.skelton-card.tsx b/apps/frontend/src/routes/_app/recipe/.skelton-card.tsx
@@ -1,17 +1,20 @@
 import type { FC } from 'react'
 
 export const SkeltonCard: FC = () => (
-  <div className="group block rounded-md transition-colors hover:bg-background-100">
-    <div className="flex h-fit gap-x-2 sm:gap-x-4">
-      <div className="aspect-1 h-20 animate-pulse rounded-md bg-foreground/30 shadow-md sm:h-32" />
-      <div className="flex shrink grow flex-col justify-center gap-y-2 overflow-hidden px-4">
+  <div className="block rounded-md transition-colors hover:bg-background-100">
+    <div className="flex h-fit items-center gap-x-2 sm:gap-x-4">
+      <div className="aspect-1 h-24 animate-pulse rounded-md bg-foreground/30 shadow-md sm:h-36" />
+      <div className="flex shrink grow flex-col justify-center gap-y-2 overflow-hidden p-4 sm:gap-y-4">
         <div className="truncate font-bold transition-colors group-hover:text-accent sm:text-lg">
           <div className="h-[1lh] w-full animate-pulse rounded bg-foreground/30" />
         </div>
-        <div className="line-clamp-2 flex flex-wrap gap-2 text-sm transition-colors sm:text-base">
+        <div className="line-clamp-2">
           {[...Array(Math.floor(Math.random() * 3 + 4))].map((_, i) => (
-            // biome-ignore lint/suspicious/noArrayIndexKey: This is a skeleton component, so index key is not a problem
-            <div key={i} className="h-[1lh] w-8 animate-pulse rounded bg-foreground/30" />
+            <div
+              // biome-ignore lint/suspicious/noArrayIndexKey: This is a skeleton component, so index key is not a problem
+              key={i}
+              className="mr-2 mb-1 box-content inline-block h-[1lh] w-8 animate-pulse rounded-full bg-foreground/30 px-2 py-1 text-xs last:mr-0"
+            />
           ))}
         </div>
       </div>