simple-kiosk-app/components/menu.tsx

78 lines
3.7 KiB
TypeScript
Raw Permalink Normal View History

2024-04-20 19:58:18 +09:00
import { MenuItem } from "@/lib/readCsv";
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs";
import { Dispatch } from "react";
import { OrderAction } from "@/hooks/useOrder";
import { cn } from "@/lib/utils";
import { Button } from "./ui/button";
export default function Menu({
menus,
categories,
dispatch
}: {
menus: MenuItem[];
categories: string[];
dispatch: Dispatch<OrderAction>
}) {
const menu = menus;
return <Tabs defaultValue={categories[0]}>
<TabsList>
{[...categories].map(category => (
<TabsTrigger key={category} value={category}>{category}</TabsTrigger>
))}
</TabsList>
{
[...categories].map(category => (
<TabsContent key={category} value={category}>
<Card>
<CardHeader>
<CardTitle>{category}</CardTitle>
</CardHeader>
<CardContent>
<ul className="w-full flex flex-col">
<li className="flex gap-2">
<span className="w-80 text-lg">Name</span>
<span className="w-12 text-lg">HOT</span>
<span className="w-12 text-lg">COLD</span>
</li>
<hr className=""/>
{menu.filter(item => item.category === category).map((item,index) => (
<li key={item.name} className={cn("flex h-10 items-center gap-2", index % 2 === 0 ? "bg-accent" : "")}>
<span className="w-80">{item.name}</span>
<span className="w-12">{item.HOT}</span>
<span className="w-12">{item.COLD}</span>
<Button variant="outline" className="bg-sky-400 hover:bg-sky-500"
disabled={!item.COLD}
onClick={() => {
dispatch({ type: "ADD_ORDER", order: {
name: item.name,
HOT: false,
price: item.COLD ?? 0,
quantity: 1,
}});
}}
>ICE Order</Button>
<Button variant="outline" className="bg-red-400 hover:bg-red-500"
disabled={!item.HOT}
onClick={() => {
dispatch({ type: "ADD_ORDER", order: {
name: item.name,
HOT: true,
price: item.HOT ?? 0,
quantity: 1,
}});
}}
>HOT Order</Button>
</li>
))}
</ul>
</CardContent>
</Card>
</TabsContent>
))
}
</Tabs>
}