// shared.jsx — Bulder mortgage app shared components & tokens const BB = { bg: '#0F1729', // dark-blue-800 surface: '#1A2037', // dark-blue-700 surface2: '#262F47', // dark-blue-600 surface3: '#333E5C', // dark-blue-500 line: 'rgba(255,255,255,0.08)', divider: 'rgba(255,255,255,0.06)', fg: '#FAFBFF', fg2: '#D1D7E5', fg3: '#9298A7', fg4: '#707C9E', pink: '#FE4D5B', // brand red pinkSoft: '#FFA8AF', pinkDeep: '#BD2A37', royal: '#0926D6', green: '#85FF86', greenDeep: '#3AA53A', amber: '#FFAD33', }; // ── Norwegian number formatting ────────────────────────────── const nbsp = '\u00A0'; const fmtKr = (n) => { if (n == null || isNaN(n)) return '0'; const s = Math.round(n).toString(); let out = ''; for (let i = 0; i < s.length; i++) { if (i > 0 && (s.length - i) % 3 === 0) out += nbsp; out += s[i]; } return out; }; const fmtPct = (n, d = 2) => n.toFixed(d).replace('.', ','); // Annuity: monthly payment for principal P, annual nominal rate r (fraction), months m const annuity = (P, r, months) => { if (!P || !months) return 0; const i = r / 12; if (i === 0) return P / months; return P * (i * Math.pow(1 + i, months)) / (Math.pow(1 + i, months) - 1); }; // ── Small atoms ────────────────────────────────────────────── function GlyphBack({ onClick, label = 'Tilbake' }) { return ( ); } // Bulder staircase logo-mark (simplified from the Figma geometry) function BulderMark({ size = 22, color = BB.pink }) { return ( ); } // Progress rail across top (8 steps) function ProgressRail({ current, total, labels }) { return (
{Array.from({ length: total }).map((_, i) => { const done = i < current; const active = i === current; return (
); })}
Steg {current + 1} av {total} {labels[current]}
); } // Input with label above, dark surface function TextField({ label, value, onChange, suffix, prefix, hint, placeholder, inputMode = 'text', big = false, autoFocus, readOnly, success }) { const [focus, setFocus] = React.useState(false); return ( ); } // Slider with embedded value function RangeSlider({ min, max, step = 1, value, onChange, suffix }) { const pct = ((value - min) / (max - min)) * 100; return (
onChange(Number(e.target.value))} style={{ position: 'absolute', inset: 0, width: '100%', opacity: 0, cursor: 'pointer', margin: 0, }} />
{fmtKr(min)}{suffix} {fmtKr(max)}{suffix}
); } // Primary CTA function PrimaryButton({ children, onClick, disabled, full = true, pending }) { return ( ); } function SecondaryButton({ children, onClick, full = true }) { return ( ); } function Toggle({ on, onChange }) { return ( ); } function Spinner({ size = 18, color = '#fff' }) { return ( ); } // Card surface function Card({ children, style = {}, padding = 18 }) { return (
{children}
); } // Inline KV row function KVRow({ label, value, strong, accent, border = true }) { return (
{label} {value}
); } // Chip function Chip({ selected, children, onClick }) { return ( ); } // Large rate display pill that sits under nav on most steps function RateSummary({ amount, term, rate, monthly, compact = false, accent = BB.pink }) { return (
Din estimerte rente
{fmtPct(rate)} % nom.
Pr. mnd
{fmtKr(monthly)} kr
); } // Status bar container — ensures the iOS chrome looks right const STATUS_PAD = 56; // iOS status bar reservation const RAIL_PAD = 44; // extra space when progress rail is present // ── global styles injected once ────────────────────────────── function GlobalStyles() { return ( ); } Object.assign(window, { BB, nbsp, fmtKr, fmtPct, annuity, GlyphBack, BulderMark, ProgressRail, TextField, RangeSlider, PrimaryButton, SecondaryButton, Spinner, Toggle, Card, KVRow, Chip, RateSummary, GlobalStyles, STATUS_PAD, RAIL_PAD, });