import React, { useState, useEffect, useRef } from "react"; import { ArrowLeftRight, Plus, Star, StarOff, EyeOff, GripVertical, ChevronDown } from "lucide-react"; const UNIT_CATEGORIES = [ { key: "currency", label: "Currency", from: "USD", to: "KRW", icon: "💰", units: ["USD", "KRW", "EUR", "JPY", "GBP", "CNY"] }, { key: "weight", label: "Weight", from: "kg", to: "lb", icon: "🏋️", units: ["kg", "g", "lb", "oz"] }, { key: "distance", label: "Distance", from: "km", to: "mi", icon: "🚗", units: ["km", "m", "mi", "ft"] }, { key: "temperature", label: "Temperature", from: "C", to: "F", icon: "🌡️", units: ["C", "F", "K"] }, { key: "volume", label: "Volume", from: "L", to: "gal", icon: "🥛", units: ["L", "mL", "gal", "cup"] }, ]; const LOCAL_KEY = "unitwise-favs-v1"; function loadUserPrefs() { try { return JSON.parse(localStorage.getItem(LOCAL_KEY)) || {}; } catch { return {}; } } function saveUserPrefs(prefs) { try { localStorage.setItem(LOCAL_KEY, JSON.stringify(prefs)); } catch {} } // Conversion formulas function convert(value, from, to, category, rates) { value = parseFloat(value ?? "0"); if (isNaN(value)) return "-"; if (category === "weight") { // kg, g, lb, oz const table = { kg: 1, g: 0.001, lb: 0.45359237, oz: 0.0283495231, }; return (value * table[from] / table[to]).toFixed(4).replace(/\.0+$/, ""); } if (category === "distance") { // km, m, mi, ft const table = { km: 1000, m: 1, mi: 1609.344, ft: 0.3048, }; return (value * table[from] / table[to]).toFixed(4).replace(/\.0+$/, ""); } if (category === "temperature") { if (from === to) return value; // C, F, K let c; if (from === "C") c = value; if (from === "F") c = (value - 32) * 5/9; if (from === "K") c = value - 273.15; if (to === "C") return c.toFixed(2); if (to === "F") return (c * 9/5 + 32).toFixed(2); if (to === "K") return (c + 273.15).toFixed(2); } if (category === "volume") { // L, mL, gal, cup const table = { L: 1, mL: 0.001, gal: 3.78541, cup: 0.236588, }; return (value * table[from] / table[to]).toFixed(4).replace(/\.0+$/, ""); } if (category === "currency" && rates) { // rates = { from, rates: { to: rate } } if (from === to) return value; if (!rates?.rates) return "..."; if (!rates.rates[to]) return "-"; if (from !== rates.base) { // Need to convert value to base first (e.g., USD) let vInBase = value / (rates.rates[from] || 1); return (vInBase * rates.rates[to]).toFixed(2); } return (value * rates.rates[to]).toFixed(2); } return value; } export default function App() { // User preferences for: favs (array of category keys), order, hidden const [prefs, setPrefs] = useState(loadUserPrefs()); // Structure: { order: [categoryKeys], favs: [categoryKeys], hidden: [categoryKeys] } // State for values/units per converter const [convs, setConvs] = useState(() => UNIT_CATEGORIES.reduce((acc, c) => { acc[c.key] = { value: "1", from: c.from, to: c.to, }; return acc; }, {}) ); // Currency rates const [fx, setFx] = useState(null); const [fxLoading, setFxLoading] = useState(false); const [fxErr, setFxErr] = useState(null); const [fetchedAt, setFetchedAt] = useState(null); // Startup: fetch currency rates useEffect(() => { setFxLoading(true); setFxErr(null); fetch(`/api/services/exchange?base=USD`) .then(r => r.json()) .then(d => { setFx(d); setFetchedAt(new Date()); setFxLoading(false); }) .catch(e => { setFxErr("Currency rates failed"); setFxLoading(false); }); }, []); // Save prefs on change useEffect(() => { saveUserPrefs(prefs); }, [prefs]); // Arrange converters let activeOrder = prefs.order ?? UNIT_CATEGORIES.map(u=>u.key); let favs = prefs.favs ?? ["currency", "distance", "weight"]; let hidden = prefs.hidden ?? []; const showReorder = prefs.reorder ?? false; const reorder = (key, dir) => { let ix = activeOrder.indexOf(key); if (ix < 0) return; let arr = [...activeOrder]; const swapIx = dir === "up" ? ix - 1 : ix + 1; if (swapIx < 0 || swapIx >= arr.length) return; [arr[ix], arr[swapIx]] = [arr[swapIx], arr[ix]]; setPrefs({ ...prefs, order: arr }); }; const toggleFav = key => { let newFavs = favs.includes(key) ? favs.filter(f=>f!==key) : [...favs, key]; setPrefs({ ...prefs, favs: newFavs }); }; const toggleHide = key => { let newHidden = hidden.includes(key) ? hidden.filter(f=>f!==key) : [...hidden, key]; setPrefs({ ...prefs, hidden: newHidden }); }; const swapUnits = (key) => { setConvs(convs => ({ ...convs, [key]: { ...convs[key], from: convs[key].to, to: convs[key].from } })); }; // Reset all prefs const resetPrefs = () => { setPrefs({}); }; // UI helpers const getLabel = (cat, unit) => { // Special pretty units const l = { kg: "kg (Kilogram)", g: "g (Gram)", lb: "lb (Pound)", oz: "oz (Ounce)", km: "km (Kilometer)", m: "m (Meter)", mi: "mi (Mile)", ft: "ft (Feet)", C: "°C", F: "°F", K: "K", L: "L (Liter)", mL: "mL (Milliliter)", gal: "Gal (US)", cup: "Cup", USD: "USD ($)", KRW: "KRW (₩)", EUR: "EUR (€)", JPY: "JPY (¥)", GBP: "GBP (£)", CNY: "CNY (¥)" }; return l[unit] || unit; }; // Compose the converters to show: favs first, then others (except hidden) let visibleKeys = activeOrder.filter(key => !hidden.includes(key)); let ordered = [ ...visibleKeys.filter(k => favs.includes(k)), ...visibleKeys.filter(k => !favs.includes(k)), ]; // Show loading skeleton for currency if fetching return (

{/* Reorder/prefs badge */}

UnitWise

{/* List converters */}

{ordered.map(key => { const cat = UNIT_CATEGORIES.find(c => c.key === key); if (!cat) return null; const v = convs[key]; return (

{cat.icon} {cat.label} {showReorder && (

)}

setConvs(convs=>({ ...convs, [key]: {...convs[key], value: e.target.value } }))} style={{ borderRadius: 'var(--ds-radius)' }} />

{/* Result */}

{cat.key === "currency" ? ( fxLoading ? Fetching rates... : fxErr ? {fxErr} : {convert(v.value, v.from, v.to, cat.key, fx)} {v.to} ) : ( <>{convert(v.value, v.from, v.to, cat.key)} {getLabel(cat.key, v.to)} )}

); })} {/* No visible converters? */} {ordered.length === 0 && (

No units enabled. Click Reset to restore.

)}

{fetchedAt && {fetchedAt.toLocaleTimeString()} (currency rates as of)} Data source: Open Exchange Rates (currency)

); }