Spaces:
Runtime error
Runtime error
File size: 2,512 Bytes
169aba7 | 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 | import React from 'react';
import { motion } from 'framer-motion';
import { BookOpen } from 'lucide-react';
import { MathJax } from 'better-react-mathjax';
import { INDEX_TERMS } from '../../constants';
export function KnowledgeBaseTab({ stats }) {
const terms = stats?.top_terms || INDEX_TERMS;
return (
<motion.div
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
>
{terms.map((item, i) => (
<div key={item.term} className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-6 rounded-3xl hover:shadow-lg transition-all cursor-pointer group">
<div className="flex items-center justify-between mb-4">
<div className="w-10 h-10 rounded-2xl bg-brand/5 flex items-center justify-center group-hover:bg-brand/10 transition-colors">
<BookOpen className="w-5 h-5 text-brand" />
</div>
<span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Entry #{i + 1}</span>
</div>
<MathJax>
<h3 className="text-xl font-bold text-slate-900 dark:text-white mb-2 truncate" title={item.term}>
{String(item.term)}
</h3>
</MathJax>
<div className="flex items-center gap-4 mb-4">
<div>
<p className="text-[9px] font-bold text-slate-400 uppercase tracking-tighter">Frequency</p>
<p className="text-xs font-bold text-slate-900 dark:text-white">{item.frequency}</p>
</div>
<div>
<p className="text-[9px] font-bold text-slate-400 uppercase tracking-tighter">Docs</p>
<p className="text-xs font-bold text-slate-900 dark:text-white">{item.docs.length}</p>
</div>
</div>
<p className="text-xs text-slate-500 font-medium leading-relaxed mb-4">
High-dimensional embedding context with semantic mapping.
</p>
<div className="flex flex-wrap gap-2">
<span className="px-2 py-1 bg-slate-100 dark:bg-slate-800 rounded-md text-[9px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-tighter">Vectorized</span>
<span className="px-2 py-1 bg-slate-100 dark:bg-slate-800 rounded-md text-[9px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-tighter">Indexed</span>
</div>
</div>
))}
</motion.div>
);
}
|