x

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

@@ -1,4 +1,5 @@
 import Image from 'next/image'
+import { ArrowRight, CakeSlice, Cookie, Croissant, Gift, type LucideIcon } from 'lucide-react'
 import Link from '../LocalizedLink'
 import type { CustomBlockComponentProps } from '../../config/customRegistry'
 import { resolveLocalized } from '../../lib/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
   }, [])
@@ -97,7 +117,7 @@ export default function BakeryCategories({ props, lang }: CustomBlockComponentPr
               href={item.href}
               className="group overflow-hidden rounded-2xl border border-line-primary/20 bg-surface-card shadow-card transition hover:-translate-y-1 hover:shadow-card-hover"
             >
-              <div className="relative flex aspect-[4/3] items-center justify-center overflow-hidden bg-surface-muted">
+              <div className="relative flex aspect-[16/9] items-center justify-center overflow-hidden bg-surface-muted">
                 {item.imageUrl ? (
                   <Image
                     src={item.imageUrl}
@@ -112,9 +132,18 @@ export default function BakeryCategories({ props, lang }: CustomBlockComponentPr
                   </span>
                 )}
               </div>
-              <div className="space-y-3 p-6">
-                <h3 className="text-xl font-semibold text-text-main">{item.title}</h3>
-                <p className="text-sm leading-relaxed text-muted-text">{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-brand-primary/30 bg-surface-card text-brand-primary shadow-card">
+                  {(() => {
+                    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-text-main">{item.title}</h3>
+                  <p className="truncate text-sm leading-tight text-muted-text">{item.description}</p>
+                </div>
+                <ArrowRight className="mb-2 h-4 w-4 shrink-0 text-text-main transition group-hover:translate-x-1 group-hover:text-brand-primary" />
               </div>
             </Link>
           ))}