import React, { useState, useEffect, 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, Checkbox, Stat, Ring, Bars, Spark, Progress, TabBar, Tabs, Stack, Icon, Spacer, SectionTitle, Gradient, alpha } from './ui/kit';
const ACCENT = '#F43F5E';
const THEME = { dark: { bg: '#0F0709', card: '#1B1014', card2: '#29191E', line: '#2E1E23', text2: '#B59AA0', text3: '#765C62' }, light: { bg: '#FBF1F3', card: '#FFFFFF', card2: '#F3DFE3' } };
const PLAN = [
{ id: 1, name: 'Barbell squat', sets: 4, reps: 6, kg: 80, icon: 'Dumbbell', c: '#F43F5E' },
{ id: 2, name: 'Bench press', sets: 4, reps: 8, kg: 60, icon: 'Dumbbell', c: '#F59E42' },
{ id: 3, name: 'Deadlift', sets: 3, reps: 5, kg: 110, icon: 'Dumbbell', c: '#A78BFA' },
{ id: 4, name: 'Pull-ups', sets: 3, reps: 10, kg: 0, icon: 'MoveUp', c: '#38BDF8' },
{ id: 5, name: 'Plank', sets: 3, reps: 60, kg: 0, icon: 'Timer', c: '#22C55E' },
];
const WEEK = [3200, 0, 4100, 2800, 0, 5200, 0];
const DAYS = ['M', 'T', 'W', 'T', 'F', 'S', 'S'];
const Store = createContext(null);
function TodayScreen({ nav }) {
const t = useT();
const { done } = useContext(Store);
const n = PLAN.filter((e) => done[e.id] >= e.sets).length;
const vol = PLAN.reduce((a, e) => a + (done[e.id] || 0) * e.reps * e.kg, 0);
return (
} />
nav.push('session')}>
Progress{n}/{PLAN.length} exercises
Volume{(vol / 1000).toFixed(1)}t
Est. 52 min · 420 kcal
Start session
{}} />
{PLAN.map((e) => {
const d = done[e.id] || 0;
return {d}} chevron onPress={() => nav.push('exercise', { id: e.id })} />;
})}
);
}
function ProgressScreen() {
const t = useT();
const [range, setRange] = useState('4w');
return (
132 kgDeadlift +7 kg
|
|
|
);
}
function PlansScreen() {
const t = useT();
const plans = [['Strength A', 'Mon · Thu', '#F43F5E', 'Squat, bench, deadlift'], ['Strength B', 'Tue · Fri', '#A78BFA', 'Press, rows, hinge'], ['Conditioning', 'Sat', '#38BDF8', 'Intervals and carries'], ['Mobility', 'Sun', '#22C55E', '25 minutes, easy']];
return (
{}} />} />
{plans.map((p) => (
{}}>
{p[0]}{p[1]} · {p[3]}
))}
Week 6 of 1250%
);
}
function ExerciseDetail({ nav, params }) {
const t = useT();
const { done, logSet } = useContext(Store);
const e = PLAN.find((x) => x.id === params.id) || PLAN[0];
const d = done[e.id] || 0;
const [rest, setRest] = useState(0);
useEffect(() => { if (rest <= 0) return; const id = setInterval(() => setRest((r) => Math.max(0, r - 1)), 1000); return () => clearInterval(id); }, [rest > 0]);
return (
} />
{d}/{e.sets}
sets done
);
}
function Session({ nav }) {
const t = useT();
const { done } = useContext(Store);
const [sec, setSec] = useState(0);
useEffect(() => { const id = setInterval(() => setSec((s) => s + 1), 1000); return () => clearInterval(id); }, []);
const mm = Math.floor(sec / 60), ss = sec % 60;
return (
} />
Elapsed
{mm}:{ss < 10 ? '0' + ss : ss}
{PLAN.filter((e) => done[e.id] >= e.sets).length} of {PLAN.length} exercises complete
{PLAN.map((e) => nav.push('exercise', { id: e.id })} />)}
);
}
function Root({ nav }) {
const [tab, setTab] = useState('today');
return (
, progress: , plans: }} />
);
}
const SCREENS = { root: Root, exercise: ExerciseDetail, session: Session };
export default function App() {
const [done, setDone] = useState({ 1: 4, 2: 2 });
const logSet = (id) => setDone((d) => Object.assign({}, d, { [id]: (d[id] || 0) + 1 }));
return (
);
}