// Tirelire.ch — reusable UI components // ──────────────────────────────────────────────────────────── // Formatting helpers // ──────────────────────────────────────────────────────────── const fmtCHF = (n) => { const v = Math.abs(n); const s = v.toFixed(2) .replace('.', '.') .replace(/\B(?=(\d{3})+(?!\d))/g, ' '); return (n < 0 ? '-' : '') + s; }; const fmtCHFnoDec = (n) => Math.round(Math.abs(n)).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' '); // ──────────────────────────────────────────────────────────── // Button // ──────────────────────────────────────────────────────────── function Button({ children, variant = 'primary', size = 'md', full = false, onClick, type, disabled, style = {}, icon }) { const base = { fontFamily: 'var(--sans)', fontWeight: 600, borderRadius: 8, border: 0, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8, cursor: disabled ? 'not-allowed' : 'pointer', transition: 'all 160ms ease', width: full ? '100%' : undefined, opacity: disabled ? 0.55 : 1, letterSpacing: '-0.005em', }; const sizes = { sm: { fontSize: 13, padding: '8px 14px', height: 34 }, md: { fontSize: 15, padding: '0 18px', height: 46 }, lg: { fontSize: 16, padding: '0 22px', height: 54 }, }; const variants = { primary: { background: 'var(--green)', color: '#fff' }, secondary: { background: 'var(--surface-2)', color: 'var(--ink)' }, ghost: { background: 'transparent', color: 'var(--ink)' }, danger: { background: 'var(--coral)', color: '#fff' }, outline: { background: 'transparent', color: 'var(--ink)', boxShadow: 'inset 0 0 0 1px var(--border-strong)' }, }; return ( ); } // ──────────────────────────────────────────────────────────── // Input // ──────────────────────────────────────────────────────────── function Input({ label, value, onChange, type = 'text', placeholder, suffix, big = false, autoFocus, id }) { return ( ); } // ──────────────────────────────────────────────────────────── // Card // ──────────────────────────────────────────────────────────── function Card({ children, style = {}, padding = 20, onClick }) { return (
{children}
); } // ──────────────────────────────────────────────────────────── // SectionLabel — Swiss editorial section number // ──────────────────────────────────────────────────────────── function SectionLabel({ num, title, action }) { return (

{title}

{action &&
{action}
}
); } // ──────────────────────────────────────────────────────────── // MetricTile // ──────────────────────────────────────────────────────────── function MetricTile({ label, amount, tone = 'neutral', big = false }) { const color = tone === 'positive' ? 'var(--green)' : tone === 'negative' ? 'var(--coral)' : 'var(--ink)'; return (
{label}
{tone === 'positive' && !big ? '+' : ''}{fmtCHF(amount)} CHF
); } // ──────────────────────────────────────────────────────────── // CategoryPill // ──────────────────────────────────────────────────────────── function CategoryPill({ category, selected, onClick, size = 'md' }) { const small = size === 'sm'; return ( ); } // ──────────────────────────────────────────────────────────── // TransactionRow // ──────────────────────────────────────────────────────────── function TransactionRow({ tx, categories, onClick }) { const cat = categories.find(c => c.id === tx.categoryId) || categories[0]; const isIncome = tx.amount > 0; return (
{cat.emoji}
{tx.description || cat.label}
{cat.label} {tx.dateLabel}
{isIncome ? '+' : '−'}{fmtCHF(Math.abs(tx.amount))} CHF
); } // ──────────────────────────────────────────────────────────── // Wordmark // ──────────────────────────────────────────────────────────── function Wordmark({ size = 28 }) { return (
Tirelire .ch
); } // ──────────────────────────────────────────────────────────── // Logo mark (small piggy bank glyph using simple geometry) // ──────────────────────────────────────────────────────────── function LogoMark({ size = 44 }) { return ( Tirelire.ch ); } // ──────────────────────────────────────────────────────────── // Toggle / Segmented control // ──────────────────────────────────────────────────────────── function Segmented({ options, value, onChange, danger = false }) { return (
{options.map(opt => { const active = value === opt.value; const accent = opt.tone === 'expense' ? 'var(--coral)' : opt.tone === 'income' ? 'var(--green)' : 'var(--ink)'; return ( ); })}
); } // ──────────────────────────────────────────────────────────── // Stacked horizontal bar (for category split) // ──────────────────────────────────────────────────────────── function StackedBar({ segments, total, height = 10 }) { return (
{segments.map((s, i) => (
0 ? 4 : 0, }} /> ))}
); } // ──────────────────────────────────────────────────────────── // 50/30/20 rule bars // ──────────────────────────────────────────────────────────── function RuleBar({ label, used, target, color }) { const pct = Math.min(100, (used / target) * 100); const over = used > target; return (
{label}
{fmtCHFnoDec(used)} / {fmtCHFnoDec(target)} CHF
); } // ──────────────────────────────────────────────────────────── // Icons (inline SVG, hairline) // ──────────────────────────────────────────────────────────── const Icon = { plus: (s=20) => , chevronLeft: (s=18) => , chevronRight: (s=18) => , arrowRight: (s=16) => , close: (s=22) => , home: (s=22) => , list: (s=22) => , settings: (s=22) => , lock: (s=18) => , check: (s=16) => , shield: (s=14) => , bank: (s=14) => , sun: (s=18) => , moon: (s=18) => , trash: (s=16) => , barChart: (s=18) => , umbrella: (s=18) => , bug: (s=16) => , idea: (s=16) => , }; Object.assign(window, { fmtCHF, fmtCHFnoDec, Button, Input, Card, SectionLabel, MetricTile, CategoryPill, TransactionRow, Wordmark, LogoMark, Segmented, StackedBar, RuleBar, Icon, });