x

apps/spa/src/components/custom/BakeryCategories.tsx

@@ -1,5 +1,6 @@
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
+import { ArrowRight, CakeSlice, Cookie, Croissant, Gift, type LucideIcon } from 'lucide-react';
 import type { CustomBlockComponentProps } from '../../config/customRegistry';
 import { getLocalizedField } from '../../utils/localization';
 
@@ -10,6 +11,7 @@ type BakeryCategory = {
   description?: LocalizedValue;
   href: string;
   imageUrl?: string;
+  icon?: string;
 };
 
 type ResolvedBakeryCategory = {
@@ -17,6 +19,19 @@ type ResolvedBakeryCategory = {
   description: string;
   href: string;
   imageUrl?: string;
+  icon: string;
+};
+
+const iconMap: Record<string, LucideIcon> = {
+  bakery: Croissant,
+  bread: Croissant,
+  cake: CakeSlice,
+  cakes: CakeSlice,
+  dessert: Cookie,
+  cookie: Cookie,
+  cookies: Cookie,
+  gift: Gift,
+  gifts: Gift,
 };
 
 const defaultItems: BakeryCategory[] = [
@@ -24,21 +39,25 @@ const defaultItems: BakeryCategory[] = [
     title: 'Breads',
     description: 'Daily loaves, sourdough, and soft sandwich breads.',
     href: '/shop',
+    icon: 'bakery',
   },
   {
     title: 'Pastries',
     description: 'Layered butter pastries for breakfast and gifting.',
     href: '/shop',
+    icon: 'dessert',
   },
   {
     title: 'Cakes',
     description: 'Celebration cakes and slices for quiet afternoons.',
     href: '/shop',
+    icon: 'cake',
   },
   {
     title: 'Cookies',
     description: 'Small-batch cookies with crisp edges and soft centers.',
     href: '/shop',
+    icon: 'cookie',
   },
 ];
 
@@ -66,6 +85,7 @@ function readItems(value: unknown, lang: string): ResolvedBakeryCategory[] {
       description: readLocalized(record.description, lang, ''),
       href: readString(record.href, '/shop'),
       imageUrl: typeof record.imageUrl === 'string' ? record.imageUrl : undefined,
+      icon: readString(record.icon, 'bakery'),
     });
     return acc;
   }, []);
@@ -101,7 +121,7 @@ export default function BakeryCategories({ props }: CustomBlockComponentProps) {
               to={item.href}
               className="ui-shell-card ui-shell-card-hover group overflow-hidden"
             >
-              <div className="relative flex aspect-[4/3] items-center justify-center overflow-hidden bg-pop-black/5">
+              <div className="relative flex aspect-[16/9] items-center justify-center overflow-hidden bg-pop-black/5">
                 {item.imageUrl ? (
                   <img
                     src={item.imageUrl}
@@ -114,9 +134,18 @@ export default function BakeryCategories({ props }: CustomBlockComponentProps) {
                   </span>
                 )}
               </div>
-              <div className="space-y-3 p-6">
-                <h3 className="text-xl font-semibold text-pop-black">{item.title}</h3>
-                <p className="text-sm leading-relaxed text-pop-black/70">{item.description}</p>
+              <div className="relative flex min-h-20 items-end gap-4 px-5 pb-4 pt-7">
+                <div className="absolute -top-8 left-5 flex h-14 w-14 items-center justify-center rounded-full border border-pop-pink/30 bg-pop-bg text-pop-pink shadow-sm">
+                  {(() => {
+                    const Icon = iconMap[item.icon] ?? Croissant;
+                    return <Icon className="h-7 w-7" strokeWidth={1.7} />;
+                  })()}
+                </div>
+                <div className="min-w-0 flex-1">
+                  <h3 className="truncate text-lg font-semibold leading-tight text-pop-black">{item.title}</h3>
+                  <p className="truncate text-sm leading-tight text-pop-black/70">{item.description}</p>
+                </div>
+                <ArrowRight className="mb-2 h-4 w-4 shrink-0 text-pop-black transition group-hover:translate-x-1 group-hover:text-pop-pink" />
               </div>
             </Link>
           ))}