mstfyldzandClaude Sonnet 4.6
d369c9e258
19 categories can't fit in a fixed bottom tab bar. Replace with a sticky horizontal pill strip that sits below the header, auto-scrolls active tab into view via Intersection Observer, and shows emoji + label at a readable size with teal active highlight. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
61 lines
1.6 KiB
TypeScript
61 lines
1.6 KiB
TypeScript
import type { MenuItem } from '@/data/menu'
|
|
|
|
type Props = {
|
|
item: MenuItem
|
|
lang: string
|
|
currency: string
|
|
index: number
|
|
isLast?: boolean
|
|
}
|
|
|
|
export default function MenuItemRow({ item, lang, currency, index, isLast }: Props) {
|
|
const l = lang as 'tr' | 'en'
|
|
|
|
return (
|
|
<div
|
|
className={`menu-item-row flex items-center gap-3.5 py-3.5 rounded-xl px-2 -mx-2 ${
|
|
!isLast ? 'border-b border-dashed border-beige' : ''
|
|
}`}
|
|
style={{ '--item-index': index } as React.CSSProperties}
|
|
>
|
|
{/* Emoji circle with gradient */}
|
|
<div
|
|
className="w-11 h-11 rounded-xl flex items-center justify-center flex-shrink-0 text-[1.2rem]"
|
|
style={{
|
|
background:
|
|
'linear-gradient(135deg, #F0E8D8 0%, #E8DCC8 100%)',
|
|
border: '1px solid rgba(212,200,176,0.80)',
|
|
boxShadow: 'inset 0 1px 2px rgba(255,255,255,0.8)',
|
|
}}
|
|
>
|
|
{item.emoji || '✨'}
|
|
</div>
|
|
|
|
{/* Text */}
|
|
<div className="flex-1 min-w-0">
|
|
<p
|
|
className="font-display text-coffee font-semibold leading-snug"
|
|
style={{ fontSize: '0.9rem' }}
|
|
>
|
|
{item.name[l]}
|
|
</p>
|
|
{item.description && (
|
|
<p
|
|
className="font-body text-muted leading-relaxed mt-0.5 line-clamp-2"
|
|
style={{ fontSize: '0.72rem' }}
|
|
>
|
|
{item.description[l]}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Price pill */}
|
|
{item.price !== undefined && (
|
|
<span className="price-pill flex-shrink-0">
|
|
{currency}{item.price}
|
|
</span>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|