mstfyldzandClaude Sonnet 4.6
bc8bd747ff
- Body: radial gradient orbs (teal + green) + dot grid overlay + grain - Header: dark mesh gradient, shimmer logo animation, animated gradient tagline, frosted glass lang-switcher pill - CategorySection: glow-ring emoji badge, gradient top line, frosted glass card container, teal/gold decorative divider - MenuItemRow: gradient emoji circle, magic-card CSS hover spotlight, price pill with green gradient border - BottomTabBar: blur/glass tabbar, active emoji glow + scale + pill bg - Page: welcome strip with teal gradient border, hero fade from header Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
57 lines
1.5 KiB
TypeScript
57 lines
1.5 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>
|
|
<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 */}
|
|
<span className="price-pill flex-shrink-0">
|
|
{currency}{item.price}
|
|
</span>
|
|
</div>
|
|
)
|
|
}
|