73 lines
2.1 KiB
TypeScript
73 lines
2.1 KiB
TypeScript
import type { Category } from '@/data/menu'
|
|
import MenuItemRow from './MenuItemRow'
|
|
|
|
type Props = {
|
|
category: Category
|
|
lang: string
|
|
currency: string
|
|
}
|
|
|
|
export default function CategorySection({ category, lang, currency }: Props) {
|
|
const l = lang as 'tr' | 'en'
|
|
|
|
return (
|
|
<section id={category.id} className="category-section category-reveal px-4 pt-12 pb-2">
|
|
{/* Category header */}
|
|
<div className="mb-6">
|
|
<div className="flex items-center gap-3 mb-3">
|
|
{/* Subtle minimal Emoji badge */}
|
|
<div className="relative flex-shrink-0">
|
|
<div
|
|
className="w-12 h-12 rounded-full flex items-center justify-center text-2xl shadow-sm"
|
|
style={{
|
|
background: '#FDFCF8',
|
|
border: '1px solid rgba(212,200,176,0.40)',
|
|
}}
|
|
>
|
|
{category.emoji}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Title */}
|
|
<div className="flex-1 min-w-0 flex items-center gap-2">
|
|
<h2
|
|
className="font-display font-semibold text-coffee uppercase tracking-wide leading-tight"
|
|
style={{ fontSize: '1.25rem' }}
|
|
>
|
|
{category.label[l]}
|
|
</h2>
|
|
{/* Item count badge */}
|
|
<span
|
|
className="font-body text-[0.65rem] font-semibold tracking-widest text-muted mt-0.5"
|
|
>
|
|
({category.items.length})
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Minimalist divider */}
|
|
<div
|
|
className="w-full h-px"
|
|
style={{
|
|
background: 'linear-gradient(90deg, rgba(61,43,31,0.15) 0%, transparent 100%)',
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
{/* Items list (no background card) */}
|
|
<div className="flex flex-col gap-1">
|
|
{category.items.map((item, i) => (
|
|
<MenuItemRow
|
|
key={item.id}
|
|
item={item}
|
|
lang={lang}
|
|
currency={currency}
|
|
index={i}
|
|
isLast={i === category.items.length - 1}
|
|
/>
|
|
))}
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|