Spaces:
Sleeping
Sleeping
File size: 3,491 Bytes
2857363 |
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 |
import { Smile, Frown, Zap, Clock, CheckCircle } from 'lucide-react';
import type { SentimentResult } from '../types';
import { formatConfidence, formatProcessingTime, getConfidenceLevel, truncateText } from '../utils/formatters';
interface ResultCardProps {
result: SentimentResult;
}
const ResultCard = ({ result }: ResultCardProps) => {
const isPositive = result.sentiment === 'POSITIVE';
const confidencePercent = result.confidence * 100;
return (
<div className="animate-slide-up">
<div
className={`rounded-xl p-6 border-2 ${
isPositive
? 'bg-gradient-to-br from-green-50 to-emerald-50 border-green-200'
: 'bg-gradient-to-br from-red-50 to-rose-50 border-red-200'
}`}
>
{/* Main Result */}
<div className="flex items-center gap-4 mb-6">
<div
className={`p-4 rounded-full animate-bounce-subtle ${
isPositive ? 'bg-green-100' : 'bg-red-100'
}`}
>
{isPositive ? (
<Smile className="w-12 h-12 text-green-600" />
) : (
<Frown className="w-12 h-12 text-red-600" />
)}
</div>
<div>
<span
className={`inline-block px-4 py-2 rounded-full text-lg font-bold ${
isPositive
? 'bg-green-500 text-white'
: 'bg-red-500 text-white'
}`}
>
{result.sentiment}
</span>
<p className="mt-2 text-sm text-gray-600">
{getConfidenceLevel(result.confidence)}
</p>
</div>
</div>
{/* Confidence Bar */}
<div className="mb-6">
<div className="flex justify-between items-center mb-2">
<span className="text-sm font-medium text-gray-700">Confidence</span>
<span className="text-lg font-bold font-mono">
{formatConfidence(result.confidence)}
</span>
</div>
<div className="h-3 bg-gray-200 rounded-full overflow-hidden">
<div
className={`h-full rounded-full animate-fill-bar ${
isPositive ? 'bg-green-500' : 'bg-red-500'
}`}
style={{ width: `${confidencePercent}%` }}
/>
</div>
</div>
{/* Metadata */}
<div className="flex flex-wrap gap-4">
<div className="flex items-center gap-2">
{result.cached ? (
<Zap className="w-4 h-4 text-yellow-500" />
) : (
<Clock className="w-4 h-4 text-blue-500" />
)}
<span className="text-sm text-gray-600">
{result.cached ? (
<span className="text-green-600 font-medium">
Cached ({formatProcessingTime(result.processing_time_ms)})
</span>
) : (
<span className="text-blue-600 font-medium">
Processed ({formatProcessingTime(result.processing_time_ms)})
</span>
)}
</span>
</div>
<div className="flex items-center gap-2">
<CheckCircle className="w-4 h-4 text-gray-400" />
<span className="text-sm text-gray-500">
{truncateText(result.text, 50)}
</span>
</div>
</div>
</div>
</div>
);
};
export default ResultCard;
|