53 lines
1.6 KiB
TypeScript
53 lines
1.6 KiB
TypeScript
import React from "react";
|
|
import Image from "next/image";
|
|
import { MenuItem as MenuItemType } from "@/data/menu";
|
|
|
|
export function MenuItem({ item, onClick }: { item: MenuItemType; onClick?: () => void }) {
|
|
return (
|
|
<div
|
|
className="py-3.5 border-b last:border-b-0 cursor-pointer transition-colors hover:bg-black/5"
|
|
style={{ borderColor: "rgba(140, 108, 72, 0.08)" }}
|
|
onClick={onClick}
|
|
>
|
|
<div className="flex justify-between items-start gap-4">
|
|
<div className="flex-1 min-w-0">
|
|
<h3
|
|
className="text-[13.5px] font-semibold leading-snug font-sans"
|
|
style={{ color: "var(--stone-ink)" }}
|
|
>
|
|
{item.name}
|
|
</h3>
|
|
{item.description && (
|
|
<p
|
|
className="mt-0.5 text-[11.5px] leading-relaxed font-sans line-clamp-2"
|
|
style={{ color: "var(--stone-muted)" }}
|
|
>
|
|
{item.description}
|
|
</p>
|
|
)}
|
|
{item.price && (
|
|
<div
|
|
className="mt-1 text-[13px] font-semibold font-sans tabular-nums"
|
|
style={{ color: "var(--amber)" }}
|
|
>
|
|
{item.price}
|
|
</div>
|
|
)}
|
|
</div>
|
|
{item.image && (
|
|
<div className="shrink-0 relative w-20 h-20">
|
|
<Image
|
|
src={item.image}
|
|
alt={item.name}
|
|
fill
|
|
sizes="80px"
|
|
unoptimized={item.image.startsWith('/')}
|
|
className="object-cover rounded-lg shadow-sm"
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|