Spaces:
Sleeping
Sleeping
File size: 3,183 Bytes
6cdce85 |
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 |
'use client';
import { Image as ImageIcon, Code, FileQuestion, ChevronRight } from 'lucide-react';
import { clsx } from 'clsx';
import { TASK_LABELS, CATEGORY_LABELS } from '@/config/constants';
import type { DatasetExample } from '@/types';
interface ExampleCardProps {
example: DatasetExample;
onSelect: (example: DatasetExample) => void;
isSelected?: boolean;
}
export function ExampleCard({ example, onSelect, isSelected }: ExampleCardProps) {
const taskConfig = TASK_LABELS[example.type];
const categoryConfig = CATEGORY_LABELS[example.category];
const getTaskIcon = () => {
switch (example.type) {
case 'function_completion':
return <Code className="w-3.5 h-3.5" />;
case 'code_generation':
return <Code className="w-3.5 h-3.5" />;
case 'qa':
return <FileQuestion className="w-3.5 h-3.5" />;
}
};
const truncateText = (text: string, maxLength: number) => {
if (text.length <= maxLength) return text;
return text.substring(0, maxLength).trim() + '...';
};
// Muted badge colors
const badgeColors: Record<string, string> = {
function_completion: 'bg-emerald-900/30 text-emerald-400 border-emerald-700/30',
code_generation: 'bg-blue-900/30 text-blue-400 border-blue-700/30',
qa: 'bg-amber-900/30 text-amber-400 border-amber-700/30',
};
return (
<button
onClick={() => onSelect(example)}
className={clsx(
'w-full text-left p-3 rounded-lg transition-all duration-200 group',
'border hover:border-teal-700/40',
isSelected
? 'bg-teal-900/20 border-teal-700/40'
: 'bg-zinc-800/50 border-zinc-700/30 hover:bg-zinc-800/80'
)}
>
<div className="flex items-start gap-3">
{example.hasImage && (
<div className="flex-shrink-0 w-14 h-14 rounded-md bg-zinc-800 border border-zinc-700/50 flex items-center justify-center overflow-hidden">
{example.imageUrl ? (
<img
src={example.imageUrl}
alt=""
className="w-full h-full object-cover"
loading="lazy"
/>
) : (
<ImageIcon className="w-5 h-5 text-zinc-500" />
)}
</div>
)}
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 mb-1.5 flex-wrap">
<span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-[10px] font-medium border', badgeColors[example.type])}>
{getTaskIcon()}
<span className="ml-1">{taskConfig.label}</span>
</span>
<span className="text-[10px] text-zinc-500">
{categoryConfig}
</span>
</div>
<p className="text-sm text-zinc-300 leading-snug font-mono">
{truncateText(example.question, 120)}
</p>
</div>
<ChevronRight
className={clsx(
'w-4 h-4 flex-shrink-0 transition-transform duration-200',
'text-zinc-600 group-hover:text-teal-500',
'group-hover:translate-x-1'
)}
/>
</div>
</button>
);
}
|