39 lines
1.4 KiB
TypeScript
39 lines
1.4 KiB
TypeScript
|
import {DishType} from "@/types/DishType";
|
||
|
|
|
||
|
|
import {PencilIcon, TrashIcon} from '@heroicons/react/24/solid'
|
||
|
|
import Link from "next/link";
|
||
|
|
import useRoutes from "@/hooks/useRoutes";
|
||
|
|
import {UserType} from "@/types/UserType";
|
||
|
|
import Card from "@/components/layout/Card";
|
||
|
|
|
||
|
|
const Dish = ({ dish }: { dish: DishType}) => {
|
||
|
|
const routes = useRoutes();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Card>
|
||
|
|
<div className="flex-1 flex items-center">
|
||
|
|
<p className="text-bold text-xl font-bold">{ dish.name }</p>
|
||
|
|
<span className="mx-2"></span>
|
||
|
|
{
|
||
|
|
dish.users.map((user: UserType) => (
|
||
|
|
<div key={user.id} className="text-accent-yellow mx-1">{user.name.slice(0, 1)}</div>
|
||
|
|
))
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
<div className="flex-none flex gap-2">
|
||
|
|
<Link href={routes.dish.edit(dish)}>
|
||
|
|
<div className="border border-foreground p-2 rounded">
|
||
|
|
<PencilIcon width="14" />
|
||
|
|
</div>
|
||
|
|
</Link>
|
||
|
|
<Link href={routes.dish.delete(dish)}>
|
||
|
|
<div className="border border-red-500 p-2 rounded">
|
||
|
|
<TrashIcon width="14" className="text-red-500" />
|
||
|
|
</div>
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
</Card>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Dish
|