// Friendly edition - simple icons & sections const { useState: uS, useEffect: uE, useMemo: uM } = React; const Icon = ({ name, size = 24, color = "currentColor" }) => { const paths = { phone: , pin: <>, clock: <>, box: , arrow: , check: , chat: , ig: <>, }; return {paths[name]}; }; const FDonut = ({ glaze = "#f25e83", dough = "#d99845", spr = false }) => ( {spr && [...Array(12)].map((_, i) => { const a = i * 30, r = 50, c = ["#2e8a4e","#ffd35e","#1f1611","#fff","#2f6fb0","#f25e83"][i%6]; const x = 100 + Math.cos(a*Math.PI/180)*r, y = 100 + Math.sin(a*Math.PI/180)*r; return ; })} ); const FBar = () => ( ); const FKolache = () => ( ); const FFritter = () => ( ); const FCake = () => ( {[[60,60],[140,65],[60,140],[145,138],[100,50]].map(([x,y],i)=>())} ); const ITEMS = [ { id: 1, name: "Raspberry Glaze", desc: "Pink, fluffy, our most popular donut.", price: 2.50, pic: , bg: "pink" }, { id: 2, name: "Sprinkle Donut", desc: "Lots of sprinkles. Kids love these.", price: 2.75, pic: , bg: "butter" }, { id: 3, name: "Maple Bar", desc: "Long donut with sweet maple frosting.", price: 2.75, pic: , bg: "cream" }, { id: 4, name: "Apple Fritter", desc: "Big and crunchy with cinnamon and apple.", price: 3.95, pic: , bg: "cream" }, { id: 5, name: "Sausage Kolache", desc: "Soft bread with sausage inside. A breakfast.", price: 3.25, pic: , bg: "green" }, { id: 6, name: "Blueberry Cake", desc: "A cakey donut with real blueberries.", price: 2.50, pic: , bg: "blue" }, ]; const SIZES = [ { n: 6, l: "Half Dozen", s: "Good for a small family", p: 14 }, { n: 12, l: "One Dozen", s: "Most popular size", p: 26 }, { n: 24, l: "Two Dozen", s: "Office or team breakfast", p: 50 }, { n: 48, l: "Four Dozen", s: "Big group or party", p: 96 }, ]; const App = () => { const [step, setStep] = uS(1); const [size, setSize] = uS(12); const [name, setName] = uS(""); const [phone, setPhone] = uS(""); const [date, setDate] = uS(""); const [time, setTime] = uS("07:30"); const [notes, setNotes] = uS(""); const [done, setDone] = uS(false); const sz = SIZES.find(s => s.n === size); const days = [["Monday","5:00 AM — until sold out"],["Tuesday","5:00 AM — until sold out"],["Wednesday","5:00 AM — until sold out"],["Thursday","5:00 AM — until sold out"],["Friday","5:00 AM — until sold out"],["Saturday","5:00 AM — until sold out"],["Sunday","5:00 AM — until sold out"]]; const today = (new Date().getDay() + 6) % 7; const submit = () => setDone(true); const reset = () => { setDone(false); setStep(1); setName(""); setPhone(""); setDate(""); setNotes(""); }; return <>
Open today · 5 AM until sold out · 7 days a week
Tigard Donut logo Tigard Donut Call or Text

Fresh donuts made every morning in Tigard.

Pick up a box of donuts and kolaches at the shop. Easy to order. Just call or text us, or fill out the simple form below.

Hi! 👋

Order a box

Just answer a few simple questions. We'll do the rest.

{!done && (
{[[1,"How many"],[2,"When"],[3,"Who"]].map(([n,l]) => (
n?"done":step===n?"on":""}`}>{step>n?:n}
{l}
{n<3 &&
} ))}
)} {done ? (

All set! We got your order.

We'll text {phone || "you"} within the hour to confirm your {sz.l.toLowerCase()} for {date || "your date"} at {time}. Questions? Call or text us at (503) 620-8518.

) : step === 1 ? (

How many donuts?

Tap the size you'd like. You can change it later.

{SIZES.map(s => ( ))}
Or call us
) : step === 2 ? (

When would you like to pick up?

We open at 5 AM most days. Same-day works if you order before 6 AM.

setDate(e.target.value)}/>
setTime(e.target.value)}/> Most pickups happen between 7:00 and 10:00 AM.
) : (

Who is this for?

We'll text you to confirm. Standard text rates apply.

Your order so far

Box size{sz.l} ({sz.n})
Pickup{date || "Pick a date"} at {time}
Estimated total${sz.p}
setName(e.target.value)} placeholder="First and last name"/>
setPhone(e.target.value)} placeholder="(503) 555-1234"/> We'll text or call to confirm.