import React, { useState, createContext, useContext } from 'react';
import { View, Text, Pressable } from 'react-native';
import { ThemeProvider, useT, T, Screen, Scroll, Header, Card, Group, Row, Button, Segmented, Toggle, Pill, Stat, Ring, Bars, TabBar, Tabs, Icon, Spacer, SectionTitle, alpha } from './ui/kit';
const ACCENT = '#33B1FF';
const THEME = { dark: { bg: '#060E16', card: '#0E1A26', card2: '#162838', line: '#17293A', text2: '#8FA8BF', text3: '#56708A' }, light: { bg: '#EDF5FB', card: '#FFFFFF', card2: '#DCEAF5' } };
const GOAL = 2400;
const DRINKS = [
{ k: 'water', label: 'Water', ml: 250, icon: 'GlassWater', c: '#33B1FF' },
{ k: 'bottle', label: 'Bottle', ml: 500, icon: 'Droplets', c: '#3FB8AF' },
{ k: 'coffee', label: 'Coffee', ml: 150, icon: 'Coffee', c: '#C08457' },
{ k: 'tea', label: 'Tea', ml: 200, icon: 'Leaf', c: '#5CCB6A' },
];
const WEEK = [2100, 2600, 1800, 2400, 2250, 2900, 1200];
const DAYS = ['M', 'T', 'W', 'T', 'F', 'S', 'S'];
const Store = createContext(null);
function TodayScreen() {
const t = useT();
const { log, add } = useContext(Store);
const total = log.reduce((a, x) => a + x.ml, 0);
const pct = Math.min(1, total / GOAL);
return (
= 1 ? 'Goal reached' : Math.round(pct * 100) + '%'} color={pct >= 1 ? t.success : ACCENT} />} />
{(total / 1000).toFixed(2)} L
{total >= GOAL ? 'you did it' : (GOAL - total) + ' ml to go'}
{log.length}drinks
14:20next reminder
6day streak
{DRINKS.map((d) => (
add(d)} style={({ pressed }) => [{ flex: 1, backgroundColor: t.card, borderRadius: 18, paddingVertical: 14, alignItems: 'center', gap: 6 }, pressed && { transform: [{ scale: 0.95 }], backgroundColor: alpha(d.c, 0.2) }]}>
{d.label}
+{d.ml} ml
))}
{log.slice().reverse().map((x, i) => |
)}
);
}
function HistoryScreen() {
const t = useT();
const avg = Math.round(WEEK.slice(0, 6).reduce((a, b) => a + b, 0) / 6);
return (
|
|
|
|
|
|
);
}
function SettingsScreen() {
const t = useT();
const [units, setUnits] = useState('ml');
const [remind, setRemind] = useState(true);
return (
{}} />
{}} />
{}} />
|
} />
{}} />
{}} />} />
);
}
export default function App() {
const [tab, setTab] = useState('today');
const [log, setLog] = useState([
{ label: 'Water', ml: 250, icon: 'GlassWater', c: '#33B1FF', time: '07:40' },
{ label: 'Coffee', ml: 150, icon: 'Coffee', c: '#C08457', time: '08:15' },
{ label: 'Bottle', ml: 500, icon: 'Droplets', c: '#3FB8AF', time: '10:30' },
{ label: 'Water', ml: 250, icon: 'GlassWater', c: '#33B1FF', time: '12:05' },
]);
const add = (d) => setLog((l) => [...l, { label: d.label, ml: d.ml, icon: d.icon, c: d.c, time: 'just now' }]);
return (
, history: , settings: }} />
);
}