DishCard.tsx
1,537 bytes
| 1 | import { Check, Flame, Leaf, Plus } from "lucide-react"; |
|---|---|
| 2 | import type { Dish } from "../types"; |
| 3 | import { useQuickTaste } from "./QuickTaste"; |
| 4 | |
| 5 | export function DishCard({ dish, tried = false, compact = false }: { |
| 6 | dish: Dish; |
| 7 | tried?: boolean; |
| 8 | compact?: boolean; |
| 9 | }) { |
| 10 | const { openTaste } = useQuickTaste(); |
| 11 | return ( |
| 12 | <article className={`dish-card ${tried ? "dish-card-tried" : ""} ${compact ? "dish-card-compact" : ""}`}> |
| 13 | <div className="dish-card-band" style={{ backgroundColor: dish.destinationAccent }}> |
| 14 | <span>{dish.destinationCode}</span> |
| 15 | <span>{dish.categoryLabel}</span> |
| 16 | </div> |
| 17 | <div className="dish-card-body"> |
| 18 | <div className="dish-card-title"> |
| 19 | <div> |
| 20 | <h3>{dish.name}</h3> |
| 21 | {dish.localName && dish.localName !== dish.name && <p>{dish.localName}</p>} |
| 22 | </div> |
| 23 | {tried && <span className="tried-seal" title="Tried"><Check size={16} /></span>} |
| 24 | </div> |
| 25 | {!compact && <p className="dish-description">{dish.description}</p>} |
| 26 | <div className="dish-meta"> |
| 27 | {dish.vegetarian && <span><Leaf size={13} /> Vegetarian</span>} |
| 28 | {dish.spicyLevel > 0 && <span><Flame size={13} /> Heat {dish.spicyLevel}/3</span>} |
| 29 | <span>Importance {dish.importance}/5</span> |
| 30 | </div> |
| 31 | {!tried && ( |
| 32 | <button className="text-button" type="button" onClick={() => openTaste({ dish })}> |
| 33 | <Plus size={15} /> Log this dish |
| 34 | </button> |
| 35 | )} |
| 36 | </div> |
| 37 | </article> |
| 38 | ); |
| 39 | } |
| 40 | |