78 lines
3.7 KiB
TypeScript
78 lines
3.7 KiB
TypeScript
|
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>
|
||
|
|
}
|