Spaces:
Paused
Paused
File size: 5,487 Bytes
8846eb6 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 | import { useState, useEffect } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import { BookOpen, ChevronDown, ChevronRight, Loader2, AlertTriangle, Copy, Check } from 'lucide-react'
const API_BASE = ''
export default function FormulasPanel() {
const [data, setData] = useState(null)
const [loading, setLoading] = useState(true)
const [expanded, setExpanded] = useState({})
const [copied, setCopied] = useState(null)
useEffect(() => {
fetch(`${API_BASE}/formulas`).then(r => r.json()).then(d => setData(d)).catch(() => setData({ error: 'Failed' })).finally(() => setLoading(false))
}, [])
const toggle = (key) => setExpanded(prev => ({ ...prev, [key]: !prev[key] }))
const copyFormula = (text, id) => {
navigator.clipboard?.writeText(text)
setCopied(id)
setTimeout(() => setCopied(null), 2000)
}
if (loading) {
return (
<div className="flex items-center justify-center h-full">
<div className="flex flex-col items-center gap-3">
<Loader2 className="w-5 h-5 text-primary animate-spin" />
<div className="text-xs text-secondary font-mono">Loading formulas...</div>
</div>
</div>
)
}
if (data?.error) {
return (
<div className="flex items-center justify-center h-full p-8">
<div className="flex flex-col items-center gap-3">
<AlertTriangle className="w-6 h-6 text-critical" />
<div className="text-sm text-critical">{data.error}</div>
</div>
</div>
)
}
const categories = data.categories || {}
return (
<div className="p-6 space-y-4 h-full overflow-y-auto thin-scrollbar">
<motion.div
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
className="glass rounded-2xl p-5"
>
<div className="flex items-center gap-3 mb-3">
<BookOpen className="w-5 h-5 text-primary" />
<span className="text-sm font-semibold">Formula Documentation</span>
<span className="ml-auto text-[10px] font-mono text-secondary/40">{data.version || 'v2.0'}</span>
</div>
<div className="text-xs text-secondary/60">{data.description || 'All formulas, algorithms, and scoring models'}</div>
</motion.div>
{Object.entries(categories).map(([catKey, cat], catIdx) => (
<motion.div
key={catKey}
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: catIdx * 0.05 }}
className="glass rounded-2xl overflow-hidden"
>
<button
onClick={() => toggle(catKey)}
className="w-full flex items-center gap-3 px-5 py-3.5 hover:bg-white/3 transition-all"
>
<span className="text-primary text-sm font-mono">◇</span>
{expanded[catKey] ? <ChevronDown className="w-4 h-4 text-secondary/50" /> : <ChevronRight className="w-4 h-4 text-secondary/50" />}
<span className="text-sm font-semibold flex-1 text-left">{catKey.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase())}</span>
<span className="text-[10px] font-mono text-secondary/40">{cat.endpoint || '—'}</span>
<span className="text-[10px] font-mono px-2 py-0.5 rounded-lg glass-orange text-primary">{cat.formulas?.length || 0}</span>
</button>
<AnimatePresence>
{expanded[catKey] && (
<motion.div
initial={{ height: 0, opacity: 0 }}
animate={{ height: 'auto', opacity: 1 }}
exit={{ height: 0, opacity: 0 }}
transition={{ duration: 0.2 }}
className="overflow-hidden"
>
<div className="px-5 pb-5 space-y-2">
{cat.formulas?.map((f, i) => {
const fid = `${catKey}-${i}`
return (
<div key={i} className="py-2 px-3 rounded-lg bg-white/3 hover:bg-white/5 transition-all group">
<div className="flex items-center gap-2 mb-1">
<span className="text-[10px] font-mono text-primary flex-shrink-0">{f.name || '—'}</span>
{f.unit && <span className="text-[9px] font-mono px-1.5 py-0.5 rounded bg-white/5 text-secondary/60">{f.unit}</span>}
{f.range && <span className="text-[9px] font-mono text-secondary/40">{f.range}</span>}
<button
onClick={() => copyFormula(f.formula || '', fid)}
className="ml-auto opacity-0 group-hover:opacity-100 transition-opacity"
>
{copied === fid ? <Check className="w-3 h-3 text-success" /> : <Copy className="w-3 h-3 text-secondary/50" />}
</button>
</div>
<div className="text-[10px] font-mono text-secondary leading-relaxed">{f.formula || '—'}</div>
{f.rates && <div className="text-[9px] font-mono text-secondary/40 mt-1">{f.rates}</div>}
{f.max_rate && <div className="text-[9px] font-mono text-primary/60 mt-0.5">Max: {f.max_rate}</div>}
</div>
)
})}
</div>
</motion.div>
)}
</AnimatePresence>
</motion.div>
))}
</div>
)
}
|