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, Chip, Pill, Stat, Ring, Progress, Toggle, TabBar, Tabs, Stack, Icon, Spacer, SectionTitle, Gradient, alpha } from './ui/kit';
const ACCENT = '#5CCB6A';
const THEME = { dark: { bg: '#080D09', card: '#111A13', card2: '#19261B', line: '#1C2A1E', text2: '#92A894', text3: '#5A6E5C' }, light: { bg: '#EFF6EF', card: '#FFFFFF', card2: '#DFEBDF' } };
const PLANTS_INIT = [
{ id: 1, name: 'Monstera', room: 'Living room', emoji: '🪴', c: '#5CCB6A', water: 0, light: 'Bright indirect', every: 7, humidity: 0.6, note: 'Loves a weekly shower. Wipe the leaves.' },
{ id: 2, name: 'Snake plant', room: 'Bedroom', emoji: '🌵', c: '#8BC34A', water: 4, light: 'Low to bright', every: 14, humidity: 0.3, note: 'Nearly impossible to kill. Let it dry out fully.' },
{ id: 3, name: 'Fiddle-leaf fig', room: 'Studio', emoji: '🌳', c: '#3FB8AF', water: 1, light: 'Bright', every: 7, humidity: 0.5, note: 'Hates being moved. Rotate a quarter turn weekly.' },
{ id: 4, name: 'Pothos', room: 'Kitchen', emoji: '🌿', c: '#7CB518', light: 'Medium', water: 2, every: 7, humidity: 0.5, note: 'Trailing. Propagates from any cutting in water.' },
{ id: 5, name: 'Calathea', room: 'Bedroom', emoji: '🍃', c: '#2A9D8F', light: 'Medium, no sun', water: 0, every: 5, humidity: 0.8, note: 'Drama queen. Filtered water only.' },
];
const Store = createContext(null);
const due = (p) => (p.water <= 0 ? 'Water today' : p.water === 1 ? 'Tomorrow' : 'In ' + p.water + ' days');
function TodayScreen({ nav }) {
const t = useT();
const { plants, water } = useContext(Store);
const today = plants.filter((p) => p.water <= 0);
const soon = plants.filter((p) => p.water > 0);
return (
} />
{plants.length - today.length}/{plants.length}
{today.length ? today.length + ' plants need water' : 'Everyone is happy'}
Humidity is 42% today. Mist the calathea and move the fig out of the afternoon sun.
{today.length ? : null}
{today.length ? (
{today.map((p) => water(p.id)} />} onPress={() => nav.push('plant', { id: p.id })} />)}
) : null}
{soon.sort((a, b) => a.water - b.water).map((p) => nav.push('plant', { id: p.id })} />)}
);
}
function PlantsScreen({ nav }) {
const t = useT();
const { plants } = useContext(Store);
const [room, setRoom] = useState('All');
const rooms = ['All', 'Living room', 'Bedroom', 'Kitchen', 'Studio'];
const list = plants.filter((p) => room === 'All' || p.room === room);
return (
{}} />} />
{rooms.map((r) => setRoom(r)} />)}
{list.map((p) => (
nav.push('plant', { id: p.id })}>
{p.emoji}
{p.name}
{p.room}
{due(p)}
))}
);
}
function CareScreen() {
const t = useT();
const [reminders, setReminders] = useState(true);
return (
Repotting season
Spring is when roots wake up. Here is how to size up without shock.
{}} />
{}} />
{}} />
|
} />
{}} />} />
);
}
function PlantDetail({ nav, params }) {
const t = useT();
const { plants, water } = useContext(Store);
const p = plants.find((x) => x.id === params.id) || plants[0];
return (
} />
{p.emoji}
{p.note}
DryMoistWet
);
}
function Root({ nav }) {
const [tab, setTab] = useState('today');
return (
, plants: , care: }} />
);
}
const SCREENS = { root: Root, plant: PlantDetail };
export default function App() {
const [plants, setPlants] = useState(PLANTS_INIT);
const water = (id) => setPlants((ps) => ps.map((p) => (p.id === id ? Object.assign({}, p, { water: p.every }) : p)));
return (
);
}