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, Ring, Bars, Progress, TabBar, Tabs, Stack, Icon, Spacer, SectionTitle, SearchBar, alpha } from './ui/kit';
const ACCENT = '#84CC16';
const THEME = { dark: { bg: '#0A0D05', card: '#151A0D', card2: '#1F2714', line: '#242D18', text2: '#A8B592', text3: '#687258' }, light: { bg: '#F4F8EA', card: '#FFFFFF', card2: '#E5EDD3' } };
const GOAL = 2200;
const MEALS_INIT = [
{ id: 1, meal: 'Breakfast', name: 'Oats, berries, almond butter', kcal: 420, p: 14, c: 58, f: 15, emoji: '馃ィ' },
{ id: 2, meal: 'Lunch', name: 'Chicken grain bowl', kcal: 610, p: 42, c: 55, f: 22, emoji: '馃' },
{ id: 3, meal: 'Snack', name: 'Greek yogurt and honey', kcal: 180, p: 17, c: 20, f: 4, emoji: '馃嵂' },
];
const LIBRARY = [
{ name: 'Salmon, rice, broccoli', kcal: 560, p: 38, c: 48, f: 21, emoji: '馃崳' },
{ name: 'Lentil soup and bread', kcal: 480, p: 22, c: 68, f: 10, emoji: '馃嵅' },
{ name: 'Veggie omelette', kcal: 330, p: 24, c: 6, f: 23, emoji: '馃嵆' },
{ name: 'Banana and peanut butter', kcal: 260, p: 7, c: 32, f: 12, emoji: '馃崒' },
{ name: 'Tofu stir fry', kcal: 520, p: 28, c: 50, f: 20, emoji: '馃ァ' },
];
const Store = createContext(null);
function Macro({ label, v, goal, c }) {
const t = useT();
return (
{v}g
{label}
of {goal}g
);
}
function TodayScreen({ nav }) {
const t = useT();
const { meals } = useContext(Store);
const kcal = meals.reduce((a, m) => a + m.kcal, 0);
const sum = (k) => meals.reduce((a, m) => a + m[k], 0);
return (
GOAL ? t.danger : ACCENT} />} />
{kcal}
of {GOAL} kcal
{[['Protein', sum('p'), 140, '#38BDF8'], ['Carbs', sum('c'), 250, '#F59E42'], ['Fat', sum('f'), 70, '#A78BFA']].map((m) => (
{m[0]}{m[1]}/{m[2]}g
))}
nav.push('add')} />
{meals.map((m) => nav.push('meal', { id: m.id })} />)}
nav.push('add')} />
{Array.from({ length: 8 }).map((_, i) => )}
5 of 8
);
}
function TrendsScreen() {
const t = useT();
const [range, setRange] = useState('W');
return (
Protein 28%Carbs 46%Fat 26%
|
|
|
);
}
function RecipesScreen({ nav }) {
const t = useT();
const [q, setQ] = useState('');
const list = LIBRARY.filter((x) => x.name.toLowerCase().includes(q.toLowerCase()));
return (
{['Recent', 'High protein', 'Quick', 'Veggie'].map((c, i) => {}} />)}
{list.map((x) => nav.push('add')} />)}
);
}
function MealDetail({ nav, params }) {
const t = useT();
const { meals } = useContext(Store);
const m = meals.find((x) => x.id === params.id) || meals[0];
return (
} />
{m.emoji}
{m.name}
{m.kcal} kcal 路 logged 12:40
|
|
|
|
);
}
function AddMeal({ nav }) {
const t = useT();
const { add } = useContext(Store);
const [pick, setPick] = useState(0);
const [portion, setPortion] = useState(1);
const f = LIBRARY[pick];
return (
{LIBRARY.map((x, i) => (
setPick(i)} style={{ width: 120, borderRadius: 18, padding: 12, backgroundColor: pick === i ? alpha(ACCENT, 0.25) : t.card, borderWidth: 2, borderColor: pick === i ? ACCENT : 'transparent' }}>
{x.emoji}
{x.name}
{x.kcal} kcal
))}
);
}
function Root({ nav }) {
const [tab, setTab] = useState('today');
return (
, trends: , foods: }} />
);
}
const SCREENS = { root: Root, meal: MealDetail, add: AddMeal };
export default function App() {
const [meals, setMeals] = useState(MEALS_INIT);
const add = (f, portion) => setMeals((ms) => [...ms, { id: Date.now(), meal: 'Dinner', name: f.name, kcal: Math.round(f.kcal * portion), p: Math.round(f.p * portion), c: Math.round(f.c * portion), f: Math.round(f.f * portion), emoji: f.emoji }]);
return (
);
}