Trust Score Card Glass

1// ========================================
2// TRUST SCORE CARD GLASS COMPONENT
3// Overall trust score display with metrics
4// ========================================
5 
6import { forwardRef } from 'react';
7import { Target } from 'lucide-react';
8import { cn } from '@/lib/utils';
9import { GlassCard } from '../ui/glass-card';
10import { RainbowProgressGlass } from '../specialized/rainbow-progress-glass';
11import { MetricCardGlass, type MetricVariant } from '../composite/metric-card-glass';
12import '@/glass-theme.css';
13 
14export interface MetricData {
15  readonly title: string;
16  readonly value: string | number;
17  readonly variant: MetricVariant;
18}
19 
20export interface TrustScoreCardGlassProps extends React.HTMLAttributes<HTMLDivElement> {
21  readonly score?: number;
22  readonly metrics?: readonly MetricData[];
23}
24 
25export const TrustScoreCardGlass = forwardRef<HTMLDivElement, TrustScoreCardGlassProps>(
26  ({ score = 72, metrics = [], className, ...props }, ref) => {
27    return (
28      <GlassCard
29        ref={ref}
30        className={cn('p-4 md:p-5', className)}
31        intensity="strong"
32        glow="cyan"
33        hover={false}
34        {...props}
35      >
36        <div className="flex items-center justify-between mb-3 md:mb-4">
37          <h2
38            className="font-semibold flex items-center gap-1.5 md:gap-2 text-base md:text-lg"
39            style={{ color: 'var(--text-primary)' }}
40          >
41            <Target className="w-4 h-4 md:w-5 md:h-5" style={{ color: 'var(--text-accent)' }} />
42            Overall Trust Score
43          </h2>
44          <div className="flex items-center gap-1.5 md:gap-2 animate-[score-pulse_2s_ease-in-out_infinite]">
45            <span
46              className="text-3xl md:text-4xl font-bold bg-clip-text text-transparent"
47              style={{ backgroundImage: 'var(--score-gradient)' }}
48            >
49              {score}
50            </span>
51            <span className="text-lg md:text-xl" style={{ color: 'var(--text-muted)' }}>
52              / 100
53            </span>
54          </div>
55        </div>
56        <RainbowProgressGlass value={score} size="lg" showGlow />
57        {metrics.length > 0 && (
58          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3 md:gap-4 mt-4 md:mt-5">
59            {metrics.map((m) => (
60              <MetricCardGlass key={m.title} title={m.title} value={m.value} variant={m.variant} />
61            ))}
62          </div>
63        )}
64      </GlassCard>
65    );
66  }
67);
68 
69// … truncated