69 lines
1.9 KiB
TypeScript
69 lines
1.9 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-start gap-4 py-4 rounded-xl px-2 -mx-2 transition-colors ${
|
|
!isLast ? 'border-b border-[rgba(61,43,31,0.06)]' : ''
|
|
}`}
|
|
style={{ '--item-index': index } as React.CSSProperties}
|
|
>
|
|
{/* Image or Emoji circle */}
|
|
<div
|
|
className="w-16 h-16 rounded-full flex items-center justify-center flex-shrink-0 text-3xl overflow-hidden shadow-sm mt-0.5"
|
|
style={{
|
|
background: '#FDFCF8',
|
|
border: '1px solid rgba(212,200,176,0.30)',
|
|
}}
|
|
>
|
|
{item.image ? (
|
|
<img src={item.image} alt={item.name[l]} className="w-full h-full object-cover" />
|
|
) : (
|
|
item.emoji || '✨'
|
|
)}
|
|
</div>
|
|
|
|
{/* Text Content */}
|
|
<div className="flex-1 min-w-0 pt-0.5">
|
|
<div className="flex justify-between items-start gap-2">
|
|
<h3
|
|
className="font-display text-coffee font-semibold leading-tight mb-1"
|
|
style={{ fontSize: '1.05rem' }}
|
|
>
|
|
{item.name[l]}
|
|
</h3>
|
|
|
|
{/* Price */}
|
|
{item.price !== undefined && (
|
|
<span
|
|
className="flex-shrink-0 font-medium text-coffee mt-0.5"
|
|
style={{ fontSize: '1rem' }}
|
|
>
|
|
{item.price} {currency}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{item.description && (
|
|
<p
|
|
className="font-body text-muted leading-relaxed line-clamp-2"
|
|
style={{ fontSize: '0.85rem' }}
|
|
>
|
|
{item.description[l]}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|