/** @jsxImportSource https://esm.sh/react@18.2.0 */ import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import React from "https://esm.sh/react@18.2.0"; const cocktails = [ { name: "Holiday Cranberry Bourbon Cocktail", description: "A bright holiday cocktail with cranberry, bourbon, and orange", ingredients: ["Bourbon", "Cranberry Juice", "Cranberry Syrup", "Fresh Cranberries", "Orange"], image: "https://i.postimg.cc/Lsnzw51s/temp-Image-YIRTcd.avif", }, { name: "Apple Butter Bourbon Old Fashioned", description: "A winter twist on a classic cocktail with real apple butter", ingredients: ["Bourbon", "Apple Butter", "Apple Cider", "Bitters"], image: "https://i.postimg.cc/YvWL946f/temp-Image7-Rqk-YF.avif", }, { name: "Gingerbread Cookie Old Fashioned", description: "A boozy spiced cocktail that tastes like a liquid gingerbread cookie", ingredients: ["Bourbon", "Gingerbread Syrup", "Bitters"], image: "https://i.postimg.cc/hh2d3R4x/temp-Image-Fj-Qf-F3.avif", }, { name: "Bourbon Maple Eggnog", description: "The perfect winter flavored cocktail featuring everyones favorite holiday drink", ingredients: ["Bourbon", "Eggnog", "Maple Syrup", "Bitters", "Nutmeg"], image: "https://i.postimg.cc/hfh7kZhY/temp-Image6hm-XTL.avif", }, { name: "Bourbon Milk Punch", description: "Classic milkpunch that will have you singing carols in no time", ingredients: ["Bourbon", "Honey", "Milk", "Vanilla", "Heavy Creme", "Nutmeg"], image: "https://i.postimg.cc/3d6DYjvx/temp-Imagei6-TIGn.avif", }, ]; const wines = [ { name: "St. Christopher Gluewein", description: "A hot, spiced wine that's a popular Christmas tradition in German speaking countries", region: "Germany", }, { name: "House Red Classic", description: "A red wine with a nostalgic hint of Welch's grape juice", region: "Milwaukee Suburbs, Wisconsin", }, ]; function CocktailMenu() { return (

🍸 Holiday Cocktail Wonderland 🍷

Festive Libations to Warm Your Spirit

Signature Cocktails

{cocktails.map((cocktail, index) => (

{cocktail.name}

{cocktail.description}

{ingredient}

))}

Wine Selection

{wines.map((wine, index) => (

{wine.name}

{wine.description}

Region: {wine.region}

))}

); } function App() { return ; } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response( ` Holiday Cocktail Menu

`, { headers: { "content-type": "text/html", }, }, ); } const css = ` body { font-family: 'Georgia', serif; background-color: #f0f0f0; color: #333; line-height: 1.6; max-width: 800px; margin: 0 auto; padding: 20px; background: linear-gradient(to bottom, #e6e6fa, #ffffff); } .holiday-menu { background-color: white; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 30px; } header { text-align: center; border-bottom: 2px solid #dc143c; padding-bottom: 20px; margin-bottom: 30px; } h1 { color: #dc143c; font-size: 2.5em; } .cocktails, .wines { margin-bottom: 30px; } .cocktail-item, .wine-item { background-color: #fff9f2; border: 1px solid #ffdab9; border-radius: 8px; padding: 20px; margin-bottom: 20px; display: flex; align-items: center; } .cocktail-image-container { width: 200px; height: 200px; border-radius: 50%; overflow: hidden; margin-right: 20px; flex-shrink: 0; } .cocktail-image-container img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .cocktail-details h3 { color: #b22222; margin-top: 0; } ul { list-style-type: none; padding: 0; } footer { text-align: center; padding-top: 20px; border-top: 2px solid #dc143c; } footer a { color: #b22222; text-decoration: none; } `;

holidayCocktailMenu