import React, { useState, createContext, useContext } from 'react';
import { View, Text, Pressable } from 'react-native';
import { ThemeProvider, useT, T, Screen, Scroll, Header, NavBar, Card, Group, Row, Button, Segmented, Chip, Pill, Stat, Progress, TabBar, Tabs, Stack, Sheet, Icon, Spacer, SectionTitle, Gradient, alpha } from './ui/kit';
const ACCENT = '#C08457';
const THEME = { dark: { bg: '#100C09', card: '#1C1612', card2: '#29201A', line: '#2E251E', text2: '#A6968A', text3: '#6D5F54' }, light: { bg: '#F8F3EE', card: '#FFFFFF', card2: '#EFE4DA' } };
const MENU = [
{ id: 1, name: 'Flat white', price: 4.2, emoji: 'โ', c: '#C08457', sizes: ['S', 'M', 'L'] },
{ id: 2, name: 'Cold brew', price: 4.8, emoji: '๐ง', c: '#5B7C99', sizes: ['M', 'L'] },
{ id: 3, name: 'Cortado', price: 3.9, emoji: '๐ฅ', c: '#A3734F', sizes: ['S'] },
{ id: 4, name: 'Matcha latte', price: 5.1, emoji: '๐ต', c: '#7CA667', sizes: ['S', 'M', 'L'] },
{ id: 5, name: 'Cardamom bun', price: 3.6, emoji: '๐ฅ', c: '#D4A05B', sizes: [] },
{ id: 6, name: 'Banana bread', price: 3.2, emoji: '๐', c: '#B07B4F', sizes: [] },
];
const Store = createContext(null);
const usd = (n) => '$' + n.toFixed(2);
function HomeScreen({ nav }) {
const t = useT();
const { stamps, orders } = useContext(Store);
const need = 10;
return (
} />
nav.push('rewards')}>
{stamps >= need ? 'Free drink unlocked' : (need - stamps) + ' more for a free cup'}
{Array.from({ length: need }).map((_, i) => (
))}
Every drink earns a stamp. Pastries earn double on Tuesdays.
{}} />
{MENU.slice(0, 4).map((m) => (
nav.push('item', { id: m.id })}>
{m.emoji}
{m.name}
{usd(m.price)}
))}
Roast ยท Market StreetOpen until 18:00 ยท 4 min walk ยท no queue
{orders.map((o, i) => |
)}
);
}
function OrderScreen({ nav }) {
const t = useT();
const [cat, setCat] = useState('Drinks');
const list = MENU.filter((m) => (cat === 'Drinks' ? m.sizes.length > 0 : m.sizes.length === 0));
return (
{list.map((m) => nav.push('item', { id: m.id })} />)}
);
}
function RewardsScreen() {
const t = useT();
const { stamps } = useContext(Store);
return (
760 points to Platinum: free size upgrades, birthday pastry.
|
} />
{}} />
{}} />
);
}
function ItemDetail({ nav, params }) {
const t = useT();
const { order } = useContext(Store);
const m = MENU.find((x) => x.id === params.id) || MENU[0];
const [size, setSize] = useState(m.sizes[1] || m.sizes[0] || '');
const [milk, setMilk] = useState('Oat');
const [done, setDone] = useState(false);
const extra = size === 'L' ? 0.6 : size === 'M' ? 0.3 : 0;
return (
{m.emoji}
{m.name}
{usd(m.price + extra)}
{m.sizes.length ? (
{['Whole', 'Oat', 'Almond', 'Skimmed'].map((x) => setMilk(x)} />)}
) : null}
{}} />
|
} />
);
}
function RewardsDetail({ nav }) { return ; }
function Root({ nav }) {
const [tab, setTab] = useState('home');
return (
, order: , rewards: }} />
);
}
const SCREENS = { root: Root, item: ItemDetail, rewards: RewardsDetail };
export default function App() {
const [stamps, setStamps] = useState(7);
const [orders, setOrders] = useState([{ name: 'Flat white, M', emoji: 'โ', c: '#C08457', price: 4.5, when: 'Yesterday, 08:12' }, { name: 'Cardamom bun', emoji: '๐ฅ', c: '#D4A05B', price: 3.6, when: 'Yesterday, 08:12' }, { name: 'Cold brew, L', emoji: '๐ง', c: '#5B7C99', price: 5.4, when: 'Mon, 15:40' }]);
const order = (m, size) => { setStamps((s) => Math.min(10, s + 1)); setOrders((o) => [{ name: m.name + (size ? ', ' + size : ''), emoji: m.emoji, c: m.c, price: m.price, when: 'Just now' }, ...o]); };
return (
);
}