fix: redesign all Settings tabs with consistent visual system and uncropped content
Browse files- src/components/SettingsPanel.tsx +118 -25
src/components/SettingsPanel.tsx
CHANGED
|
@@ -1,5 +1,5 @@
|
|
| 1 |
import type React from 'react';
|
| 2 |
-
import { X, Settings, Keyboard, Monitor, Shield, HardDrive, Info, RefreshCw, KeyRound, Lock, Unlock, Trash2, Plus, Navigation, Grid3X3 } from 'lucide-react';
|
| 3 |
import { useAppStore } from '../store';
|
| 4 |
import { useState, useEffect } from 'react';
|
| 5 |
import { invoke } from '@tauri-apps/api/core';
|
|
@@ -37,41 +37,134 @@ export const SettingsPanel = () => {
|
|
| 37 |
const saveCred = async () => { try { await saveCredential({ origin, username, password }); setOrigin(''); setUsername(''); setPassword(''); setVaultMsg('Credential saved'); await reloadCreds(); } catch (e) { setVaultMsg(`Save failed: ${String(e)}`); } };
|
| 38 |
|
| 39 |
return (
|
| 40 |
-
<div className={`absolute right-4 top-4 bottom-4 w-[min(
|
| 41 |
<div className="h-14 border-b border-white/5 flex items-center justify-between px-5 bg-black/20 shrink-0">
|
| 42 |
<h2 className="text-[#E0E0E0] font-medium flex items-center gap-2"><Settings size={16} className="text-[#808080]" /> Settings</h2>
|
| 43 |
<button onClick={() => setIsSettingsOpen(false)} className="text-[#808080] hover:text-[#E0E0E0] p-1 rounded-md hover:bg-white/5"><X size={18} /></button>
|
| 44 |
</div>
|
|
|
|
| 45 |
<div className="flex flex-1 min-h-0 overflow-hidden">
|
| 46 |
-
<
|
| 47 |
-
{tabs.map(tab =>
|
| 48 |
-
|
| 49 |
-
|
| 50 |
-
|
| 51 |
-
|
| 52 |
-
|
| 53 |
-
|
| 54 |
-
|
| 55 |
-
|
| 56 |
-
<
|
| 57 |
-
<
|
| 58 |
-
|
| 59 |
-
|
| 60 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 61 |
|
| 62 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 63 |
|
| 64 |
-
|
| 65 |
-
|
| 66 |
-
|
| 67 |
-
|
| 68 |
-
|
| 69 |
-
</div>
|
| 70 |
</div>
|
| 71 |
</div>
|
| 72 |
);
|
| 73 |
};
|
| 74 |
|
|
|
|
| 75 |
function SettingsGroup({ title, children }: { title: string; children: React.ReactNode }) { return <section><h3 className="text-[13px] font-semibold uppercase tracking-[0.12em] text-[#808080] mb-3">{title}</h3><div className="rounded-2xl border border-white/8 bg-black/18 overflow-hidden divide-y divide-white/6">{children}</div></section>; }
|
| 76 |
-
function SettingRow({ label, description, active, onToggle, disabled, icon }: { label: string; description: string; active: boolean; onToggle: () => void; disabled?: boolean; icon?: React.ReactNode }) { return <button type="button" disabled={disabled} onClick={onToggle} className="w-full min-h-[
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 77 |
function StatBox({ value, label }: { value: string; label: string }) { return <div className="bg-black/20 rounded-xl p-3 text-center border border-white/5"><div className="text-lg font-bold text-[#0A84FF]">{value}</div><div className="text-[10px] text-[#808080] mt-1">{label}</div></div>; }
|
|
|
|
| 1 |
import type React from 'react';
|
| 2 |
+
import { X, Settings, Keyboard, Monitor, Shield, HardDrive, Info, RefreshCw, KeyRound, Lock, Unlock, Trash2, Plus, Navigation, Grid3X3, Database, Palette, Clock, MousePointer2 } from 'lucide-react';
|
| 3 |
import { useAppStore } from '../store';
|
| 4 |
import { useState, useEffect } from 'react';
|
| 5 |
import { invoke } from '@tauri-apps/api/core';
|
|
|
|
| 37 |
const saveCred = async () => { try { await saveCredential({ origin, username, password }); setOrigin(''); setUsername(''); setPassword(''); setVaultMsg('Credential saved'); await reloadCreds(); } catch (e) { setVaultMsg(`Save failed: ${String(e)}`); } };
|
| 38 |
|
| 39 |
return (
|
| 40 |
+
<div className={`absolute right-4 top-4 bottom-4 w-[min(720px,calc(100vw-32px))] z-[80] bg-[#1C1C1E]/98 shadow-2xl border border-[#3A3A3E] rounded-2xl flex flex-col transform transition-transform duration-500 ease-[cubic-bezier(0.19,1,0.22,1)] overflow-hidden ${isSettingsOpen ? 'translate-x-0' : 'translate-x-[calc(100%+32px)]'}`}>
|
| 41 |
<div className="h-14 border-b border-white/5 flex items-center justify-between px-5 bg-black/20 shrink-0">
|
| 42 |
<h2 className="text-[#E0E0E0] font-medium flex items-center gap-2"><Settings size={16} className="text-[#808080]" /> Settings</h2>
|
| 43 |
<button onClick={() => setIsSettingsOpen(false)} className="text-[#808080] hover:text-[#E0E0E0] p-1 rounded-md hover:bg-white/5"><X size={18} /></button>
|
| 44 |
</div>
|
| 45 |
+
|
| 46 |
<div className="flex flex-1 min-h-0 overflow-hidden">
|
| 47 |
+
<nav className="w-[190px] bg-black/10 border-r border-white/5 p-3 flex flex-col gap-1 shrink-0 overflow-y-auto custom-scrollbar">
|
| 48 |
+
{tabs.map(tab => (
|
| 49 |
+
<button key={tab.id} onClick={() => setActiveTab(tab.id)} className={`flex items-center gap-2.5 px-3 py-2.5 rounded-xl text-[13px] text-left transition-colors ${activeTab === tab.id ? 'bg-[#0A84FF] text-white font-medium shadow-lg shadow-[#0A84FF]/10' : 'text-[#808080] hover:text-[#E0E0E0] hover:bg-white/5'}`}>
|
| 50 |
+
{tab.icon}{tab.label}
|
| 51 |
+
</button>
|
| 52 |
+
))}
|
| 53 |
+
</nav>
|
| 54 |
+
|
| 55 |
+
<main className="flex-1 min-w-0 overflow-y-auto custom-scrollbar">
|
| 56 |
+
<div className="p-6 pb-10 text-[#E0E0E0] text-sm max-w-[520px] mx-auto">
|
| 57 |
+
{activeTab === 'general' && <Page title="General" subtitle="Core behavior for the canvas, window, and workspace.">
|
| 58 |
+
<SettingsGroup title="Startup & Window">
|
| 59 |
+
<SettingRow label="Open last board on startup" description="Load the most recent project automatically when Refstudio starts." active={true} onToggle={() => {}} disabled />
|
| 60 |
+
<SettingRow label="Always on Top" description="Keep Refstudio above other apps while drawing in Photoshop, Krita, Blender, or ZBrush." active={isAlwaysOnTop} onToggle={() => setIsAlwaysOnTop(!isAlwaysOnTop)} />
|
| 61 |
+
{isAlwaysOnTop && <RangeRow label="Overlay opacity" description="Adjust transparency while Refstudio is pinned above another app." value={bgOpacity} min={10} max={100} suffix="%" onChange={setBgOpacity} />}
|
| 62 |
+
</SettingsGroup>
|
| 63 |
+
<SettingsGroup title="Canvas">
|
| 64 |
+
<SettingRow icon={<Grid3X3 size={16} />} label="Grid" description="Show the subtle dotted canvas grid. This is intentionally kept in Settings, not the floating toolbar." active={showGrid} onToggle={() => setShowGrid(!showGrid)} />
|
| 65 |
+
<SettingRow icon={<Navigation size={16} />} label="Navigator / Minimap" description="Show a compact board overview in the bottom-right corner. Off by default to keep the canvas clean." active={showMinimap} onToggle={() => setShowMinimap(!showMinimap)} />
|
| 66 |
+
</SettingsGroup>
|
| 67 |
+
</Page>}
|
| 68 |
+
|
| 69 |
+
{activeTab === 'appearance' && <Page title="Appearance" subtitle="Visual defaults for artist-friendly, low-noise reference work.">
|
| 70 |
+
<SettingsGroup title="Theme">
|
| 71 |
+
<div className="p-4 grid grid-cols-2 gap-3">
|
| 72 |
+
<ThemeCard active name="Dark Canvas" colors={['#1C1C1E', '#2A2A2E', '#3A3A3E', '#0A84FF']} />
|
| 73 |
+
<ThemeCard name="Warm Studio" colors={['#221F1B', '#342D26', '#6B5A45', '#D4A373']} disabled />
|
| 74 |
+
</div>
|
| 75 |
+
</SettingsGroup>
|
| 76 |
+
<SettingsGroup title="Canvas Display">
|
| 77 |
+
<InfoRow icon={<Palette size={16} />} label="Canvas background" value="#1C1C1E" description="Neutral dark background from the Refstudio SRS visual language." />
|
| 78 |
+
<InfoRow icon={<MousePointer2 size={16} />} label="Interface behavior" value="Auto-hide chrome" description="The toolbar remains hidden until you move toward it, keeping the board dominant." />
|
| 79 |
+
</SettingsGroup>
|
| 80 |
+
</Page>}
|
| 81 |
+
|
| 82 |
+
{activeTab === 'shortcuts' && <Page title="Keyboard Shortcuts" subtitle="Hotkey-first controls for one-hand artist workflow.">
|
| 83 |
+
<SettingsGroup title="Panels">
|
| 84 |
+
<ShortcutRow combo="B" label="Toggle Browser Panel" />
|
| 85 |
+
<ShortcutRow combo="L" label="Toggle Library Panel" />
|
| 86 |
+
<ShortcutRow combo="Esc" label="Close panels / clear selection" />
|
| 87 |
+
<ShortcutRow combo="Ctrl + ," label="Open Settings" />
|
| 88 |
+
</SettingsGroup>
|
| 89 |
+
<SettingsGroup title="Canvas">
|
| 90 |
+
<ShortcutRow combo="Space + Drag" label="Pan canvas" />
|
| 91 |
+
<ShortcutRow combo="Scroll" label="Zoom to cursor" />
|
| 92 |
+
<ShortcutRow combo="Ctrl + 0" label="Fit all images" />
|
| 93 |
+
<ShortcutRow combo="Ctrl + 1" label="100% zoom" />
|
| 94 |
+
<ShortcutRow combo="A" label="Toggle annotation mode" />
|
| 95 |
+
<ShortcutRow combo="D" label="Desaturate selection" />
|
| 96 |
+
<ShortcutRow combo="Shift + D" label="Desaturate all" />
|
| 97 |
+
<ShortcutRow combo="Delete" label="Delete selection" />
|
| 98 |
+
</SettingsGroup>
|
| 99 |
+
<SettingsGroup title="Editing">
|
| 100 |
+
<ShortcutRow combo="Ctrl + Z" label="Undo" />
|
| 101 |
+
<ShortcutRow combo="Ctrl + Shift + Z" label="Redo" />
|
| 102 |
+
<ShortcutRow combo="Ctrl + A" label="Select all images" />
|
| 103 |
+
<ShortcutRow combo="Ctrl + G" label="Group selection" />
|
| 104 |
+
<ShortcutRow combo="Ctrl + Shift + G" label="Ungroup selection" />
|
| 105 |
+
</SettingsGroup>
|
| 106 |
+
</Page>}
|
| 107 |
+
|
| 108 |
+
{activeTab === 'privacy' && <Page title="Privacy" subtitle="Local-first browsing and capture controls.">
|
| 109 |
+
<SettingsGroup title="Muse Shield">
|
| 110 |
+
<div className="p-4 grid grid-cols-2 gap-3">
|
| 111 |
+
<StatBox value={shieldReport.engine_rules.toLocaleString()} label="Rules" />
|
| 112 |
+
<StatBox value={shieldReport.blocked_requests.toLocaleString()} label="Requests blocked" />
|
| 113 |
+
<StatBox value={shieldReport.blocked_cosmetic.toLocaleString()} label="Elements hidden" />
|
| 114 |
+
<StatBox value={shieldReport.https_upgrades.toLocaleString()} label="HTTPS upgrades" />
|
| 115 |
+
</div>
|
| 116 |
+
<div className="px-4 pb-4"><button onClick={() => invoke('shield_update_lists').catch(() => {})} className="w-full py-2.5 bg-white/5 hover:bg-white/10 rounded-xl border border-white/10 text-sm flex items-center justify-center gap-2"><RefreshCw size={14} /> Update filters</button></div>
|
| 117 |
+
</SettingsGroup>
|
| 118 |
+
<SettingsGroup title="Local Data">
|
| 119 |
+
<InfoRow icon={<Shield size={16} />} label="Privacy model" value="Local-first" description="Boards, library metadata, and browsing history stay on your machine." />
|
| 120 |
+
<ActionRow label="App navigation history" description="Clear Refstudio's app-managed URL history. This does not inspect system WebView cookies." actionLabel="Clear History" danger onClick={() => invoke('history_clear').catch(() => {})} />
|
| 121 |
+
</SettingsGroup>
|
| 122 |
+
</Page>}
|
| 123 |
+
|
| 124 |
+
{activeTab === 'vault' && <Page title="Password Vault" subtitle="Stronghold-backed local credential storage.">
|
| 125 |
+
<SettingsGroup title="Vault Status">
|
| 126 |
+
<div className="p-4 space-y-3">
|
| 127 |
+
<p className="text-[#909090] text-xs leading-relaxed">Passwords are stored using the Tauri Stronghold frontend plugin. The vault unlocks only with your master password.</p>
|
| 128 |
+
{!vaultUnlocked ? <div className="flex gap-2"><input type="password" value={master} onChange={e => setMaster(e.target.value)} onKeyDown={e => { if (e.key === 'Enter') unlock(); }} placeholder="Master password" className="flex-1 bg-black/30 border border-white/10 rounded-xl px-3 py-2 outline-none focus:border-[#0A84FF]" /><button onClick={unlock} className="px-4 py-2 bg-[#0A84FF] rounded-xl text-white flex items-center gap-2"><Unlock size={14} /> Unlock</button></div> : <button onClick={() => { lockVault(); setVaultUnlocked(false); setCreds([]); }} className="px-4 py-2 bg-white/5 border border-white/10 rounded-xl text-white flex items-center gap-2"><Lock size={14} /> Lock vault</button>}
|
| 129 |
+
{vaultMsg && <div className="text-xs text-[#FFD60A]">{vaultMsg}</div>}
|
| 130 |
+
</div>
|
| 131 |
+
</SettingsGroup>
|
| 132 |
+
{vaultUnlocked && <SettingsGroup title="Credentials">
|
| 133 |
+
<div className="p-4 space-y-2">
|
| 134 |
+
<input value={origin} onChange={e => setOrigin(e.target.value)} placeholder="Site / origin (example.com)" className="w-full bg-black/30 border border-white/10 rounded-xl px-3 py-2 outline-none focus:border-[#0A84FF]" />
|
| 135 |
+
<input value={username} onChange={e => setUsername(e.target.value)} placeholder="Username / email" className="w-full bg-black/30 border border-white/10 rounded-xl px-3 py-2 outline-none focus:border-[#0A84FF]" />
|
| 136 |
+
<input type="password" value={password} onChange={e => setPassword(e.target.value)} placeholder="Password" className="w-full bg-black/30 border border-white/10 rounded-xl px-3 py-2 outline-none focus:border-[#0A84FF]" />
|
| 137 |
+
<button onClick={saveCred} className="w-full px-3 py-2.5 bg-[#0A84FF] rounded-xl text-white flex items-center justify-center gap-2"><Plus size={14} /> Save credential</button>
|
| 138 |
+
</div>
|
| 139 |
+
<div className="px-4 pb-4 space-y-2">{creds.map(c => <div key={c.id} className="flex items-center justify-between bg-black/20 border border-white/5 rounded-xl p-3"><div><div className="text-white text-sm">{c.username}</div><div className="text-[#808080] text-xs">{c.origin}</div></div><button onClick={() => deleteCredential(c.id).then(reloadCreds)} className="text-red-300 hover:bg-red-500/10 rounded-lg p-2"><Trash2 size={14} /></button></div>)}</div>
|
| 140 |
+
</SettingsGroup>}
|
| 141 |
+
</Page>}
|
| 142 |
|
| 143 |
+
{activeTab === 'storage' && <Page title="Storage" subtitle="Where Refstudio keeps boards, images, and local state.">
|
| 144 |
+
<SettingsGroup title="Storage Model">
|
| 145 |
+
<InfoRow icon={<Database size={16} />} label="Board data" value="Local project state" description="Canvas layout, annotations, palettes, and references are saved locally." />
|
| 146 |
+
<InfoRow icon={<HardDrive size={16} />} label="Asset library" value="Embedded metadata" description="Imported images are stored as local data URLs in library state with hash-based deduplication." />
|
| 147 |
+
<InfoRow icon={<Clock size={16} />} label="Auto-save" value="800ms debounce" description="Project state is saved shortly after edits to reduce risk of data loss." />
|
| 148 |
+
</SettingsGroup>
|
| 149 |
+
</Page>}
|
| 150 |
|
| 151 |
+
{activeTab === 'about' && <Page title="About" subtitle="Refstudio alpha build information.">
|
| 152 |
+
<div className="flex flex-col items-center text-center mt-8 gap-3"><div className="w-20 h-20 bg-[#2A2A2E] rounded-2xl flex items-center justify-center"><Monitor size={32} className="text-[#0A84FF]" /></div><h1 className="text-2xl font-semibold">Refstudio</h1><p className="text-[#808080]">1.0.0-alpha</p><p className="max-w-sm text-[#909090] text-sm leading-relaxed">A local-first artist reference board with embedded browser capture, asset library, annotations, and privacy-respecting storage.</p></div>
|
| 153 |
+
</Page>}
|
| 154 |
+
</div>
|
| 155 |
+
</main>
|
|
|
|
| 156 |
</div>
|
| 157 |
</div>
|
| 158 |
);
|
| 159 |
};
|
| 160 |
|
| 161 |
+
function Page({ title, subtitle, children }: { title: string; subtitle: string; children: React.ReactNode }) { return <div className="space-y-6"><div><h1 className="text-2xl font-semibold text-white tracking-tight">{title}</h1><p className="text-sm text-[#8A8A8C] mt-1 leading-relaxed">{subtitle}</p></div>{children}</div>; }
|
| 162 |
function SettingsGroup({ title, children }: { title: string; children: React.ReactNode }) { return <section><h3 className="text-[13px] font-semibold uppercase tracking-[0.12em] text-[#808080] mb-3">{title}</h3><div className="rounded-2xl border border-white/8 bg-black/18 overflow-hidden divide-y divide-white/6">{children}</div></section>; }
|
| 163 |
+
function SettingRow({ label, description, active, onToggle, disabled, icon }: { label: string; description: string; active: boolean; onToggle: () => void; disabled?: boolean; icon?: React.ReactNode }) { return <button type="button" disabled={disabled} onClick={onToggle} className="w-full min-h-[76px] px-4 py-3 flex items-center justify-between gap-5 text-left hover:bg-white/[0.035] disabled:opacity-60 disabled:cursor-default transition-colors"><div className="flex items-start gap-3 min-w-0 flex-1">{icon && <div className="mt-0.5 text-[#0A84FF] shrink-0">{icon}</div>}<div className="min-w-0"><div className="text-[14px] font-medium text-white leading-5">{label}</div><div className="text-[12px] text-[#8A8A8C] leading-4 mt-1 max-w-[370px]">{description}</div></div></div><Switch active={active} /></button>; }
|
| 164 |
+
function Switch({ active }: { active: boolean }) { return <div className={`relative shrink-0 w-[52px] h-[30px] rounded-full transition-colors ${active ? 'bg-[#0A84FF]' : 'bg-[#3A3A3E]'}`}><div className={`absolute top-[3px] w-6 h-6 rounded-full bg-white shadow-md transition-all ${active ? 'left-[25px]' : 'left-[3px]'}`} /></div>; }
|
| 165 |
+
function RangeRow({ label, description, value, min, max, suffix, onChange }: { label: string; description: string; value: number; min: number; max: number; suffix: string; onChange: (v: number) => void }) { return <div className="px-4 py-3 flex items-center justify-between gap-4 hover:bg-white/[0.035]"><div><div className="text-[14px] font-medium text-white">{label}</div><div className="text-[12px] text-[#8A8A8C] mt-1 max-w-[340px]">{description}</div></div><div className="flex items-center gap-3 shrink-0"><span className="text-xs text-[#A0A0A0] w-10 text-right">{value}{suffix}</span><input type="range" min={min} max={max} value={value} onChange={e => onChange(Number(e.target.value))} className="w-32 accent-[#0A84FF]" /></div></div>; }
|
| 166 |
+
function InfoRow({ icon, label, value, description }: { icon: React.ReactNode; label: string; value: string; description: string }) { return <div className="px-4 py-3 flex items-start justify-between gap-4"><div className="flex items-start gap-3 min-w-0"><div className="text-[#0A84FF] mt-0.5 shrink-0">{icon}</div><div><div className="text-[14px] font-medium text-white">{label}</div><div className="text-[12px] text-[#8A8A8C] mt-1 max-w-[360px] leading-4">{description}</div></div></div><div className="text-[12px] text-[#C0C0C0] shrink-0 bg-white/5 border border-white/8 rounded-lg px-2 py-1">{value}</div></div>; }
|
| 167 |
+
function ActionRow({ label, description, actionLabel, onClick, danger }: { label: string; description: string; actionLabel: string; onClick: () => void; danger?: boolean }) { return <div className="px-4 py-3 flex items-center justify-between gap-4"><div><div className="text-[14px] font-medium text-white">{label}</div><div className="text-[12px] text-[#8A8A8C] mt-1 max-w-[360px]">{description}</div></div><button onClick={onClick} className={`shrink-0 px-3 py-2 rounded-xl text-[12px] font-semibold border ${danger ? 'bg-red-500/10 text-red-300 border-red-500/20 hover:bg-red-500/20' : 'bg-white/5 text-white border-white/10 hover:bg-white/10'}`}>{actionLabel}</button></div>; }
|
| 168 |
+
function ShortcutRow({ combo, label }: { combo: string; label: string }) { return <div className="px-4 py-2.5 flex items-center justify-between gap-4"><span className="text-[13px] text-[#E0E0E0]">{label}</span><kbd className="bg-black/30 border border-white/10 px-2.5 py-1 rounded-lg text-[11px] text-[#C0C0C0] font-mono">{combo}</kbd></div>; }
|
| 169 |
+
function ThemeCard({ name, colors, active, disabled }: { name: string; colors: string[]; active?: boolean; disabled?: boolean }) { return <div className={`p-3 rounded-xl border ${active ? 'border-[#0A84FF] bg-[#0A84FF]/10' : 'border-white/10 bg-black/20'} ${disabled ? 'opacity-40' : ''}`}><div className="flex gap-1.5 mb-3">{colors.map(c => <div key={c} className="w-7 h-7 rounded-full border border-black/20" style={{ backgroundColor: c }} />)}</div><div className="text-sm text-white font-medium">{name}</div>{disabled && <div className="text-[10px] text-[#808080] mt-1">Coming later</div>}</div>; }
|
| 170 |
function StatBox({ value, label }: { value: string; label: string }) { return <div className="bg-black/20 rounded-xl p-3 text-center border border-white/5"><div className="text-lg font-bold text-[#0A84FF]">{value}</div><div className="text-[10px] text-[#808080] mt-1">{label}</div></div>; }
|