/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; const SALON_SERVICES = [ { id: 1, name: "Haircut", price: 45, duration: 45 }, { id: 2, name: "Color", price: 85, duration: 90 }, { id: 3, name: "Highlights", price: 120, duration: 120 }, { id: 4, name: "Blowout", price: 35, duration: 30 }, { id: 5, name: "Styling", price: 55, duration: 60 } ]; const STYLISTS = [ { id: 1, name: "Emma", specialty: "Color Expert" }, { id: 2, name: "Sophia", specialty: "Cutting Specialist" }, { id: 3, name: "Olivia", specialty: "Bridal Styling" } ]; function App() { const [selectedService, setSelectedService] = useState(null); const [selectedStylist, setSelectedStylist] = useState(null); const [bookingDate, setBookingDate] = useState(""); const [bookingTime, setBookingTime] = useState(""); const handleSubmit = async (e) => { e.preventDefault(); const bookingDetails = { service: selectedService, stylist: selectedStylist, date: bookingDate, time: bookingTime }; try { const response = await fetch("/book", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(bookingDetails) }); if (response.ok) { alert("Booking successful! 💇‍♀️"); } else { alert("Booking failed. Please try again."); } } catch (error) { console.error("Booking error:", error); } }; return (

💇‍♀️ Chic Cuts Salon Booking

View Source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); const KEY = new URL(import.meta.url).pathname.split("/").at(-1); await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_bookings_1 ( id INTEGER PRIMARY KEY AUTOINCREMENT, service TEXT NOT NULL, stylist TEXT NOT NULL, booking_date DATE NOT NULL, booking_time TIME NOT NULL, created_at DATETIME DEFAULT CURRENT_TIMESTAMP ) `); if (request.method === "POST") { const booking = await request.json(); await sqlite.execute( `INSERT INTO ${KEY}_bookings_1 (service, stylist, booking_date, booking_time) VALUES (?, ?, ?, ?)`, [ JSON.stringify(booking.service), JSON.stringify(booking.stylist), booking.date, booking.time ] ); return new Response(JSON.stringify({ status: "Booking successful" }), { status: 200, headers: { "Content-Type": "application/json" } }); } return new Response(` Chic Cuts Salon

`, { headers: { "Content-Type": "text/html" } }); } const css = ` body { font-family: system-ui, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; line-height: 1.6; } .salon-booking { background-color: #f9f5f0; padding: 20px; border-radius: 10px; } section { margin-bottom: 20px; } input[type="radio"] { margin-right: 10px; } button { background-color: #4a4a4a; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; } button:disabled { background-color: #cccccc; cursor: not-allowed; } `;

💇‍♀️ Chic Cuts Salon Booking

Select Service

Choose Stylist

Select Date & Time

admirableTomatoLimpet

Versions

v0