Upload components/ui/PremiumComponents.tsx with huggingface_hub

components/ui/PremiumComponents.tsx

@@ -0,0 +1,159 @@
+'use client';
+
+import { CSSProperties, ReactNode } from 'react';
+import { cn } from '@/lib/utils';
+
+// ═══ Border Beam — Animated gradient border sweep (21st.dev style) ═══
+export function BorderBeam({
+  size = 80,
+  duration = 8,
+  colorFrom = '#ef4444',
+  colorTo = '#3b82f6',
+  borderWidth = 1.5,
+  className = '',
+}: {
+  size?: number; duration?: number; colorFrom?: string; colorTo?: string;
+  borderWidth?: number; className?: string;
+}) {
+  return (
+    <div className={cn('pointer-events-none absolute inset-0 rounded-[inherit]', className)}
+      style={{ '--border-width': `${borderWidth}px` } as CSSProperties}
+    >
+      <div
+        className="absolute inset-0 rounded-[inherit]"
+        style={{
+          padding: `${borderWidth}px`,
+          background: `conic-gradient(from 0deg, transparent, ${colorFrom}, ${colorTo}, transparent)`,
+          mask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
+          maskComposite: 'exclude',
+          WebkitMaskComposite: 'xor',
+          animation: `spin ${duration}s linear infinite`,
+        }}
+      />
+    </div>
+  );
+}
+
+// ═══ Shine Border — Rotating conic gradient border ═══
+export function ShineBorder({
+  children,
+  shineColor = ['#ef4444', '#3b82f6', '#a855f7'],
+  borderWidth = 1,
+  duration = 14,
+  className = '',
+}: {
+  children: ReactNode; shineColor?: string[]; borderWidth?: number;
+  duration?: number; className?: string;
+}) {
+  return (
+    <div className={cn('relative rounded-2xl overflow-hidden', className)}>
+      <div
+        className="absolute inset-0 rounded-[inherit] animate-[shine_var(--duration)_linear_infinite]"
+        style={{
+          '--duration': `${duration}s`,
+          backgroundImage: `conic-gradient(from 0deg, transparent, ${shineColor.join(',')}, transparent)`,
+          padding: `${borderWidth}px`,
+          mask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
+          maskComposite: 'exclude',
+          WebkitMaskComposite: 'xor',
+        } as CSSProperties}
+      />
+      <div className="relative rounded-[inherit] bg-forensic-bg">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+// ═══ Glass Card — Premium glassmorphism ═══
+export function GlassCard({
+  children,
+  className = '',
+  hover = true,
+  glow = false,
+  glowColor = 'rgba(239,68,68,0.15)',
+}: {
+  children: ReactNode; className?: string; hover?: boolean;
+  glow?: boolean; glowColor?: string;
+}) {
+  return (
+    <div className={cn(
+      'relative rounded-2xl bg-white/[0.03] backdrop-blur-xl border border-white/[0.08]',
+      'shadow-[0_8px_32px_rgba(0,0,0,0.3),inset_0_1px_0_rgba(255,255,255,0.05)]',
+      hover && 'transition-all duration-300 hover:bg-white/[0.05] hover:border-white/[0.12] hover:shadow-[0_16px_48px_rgba(0,0,0,0.4)]',
+      glow && 'hover:shadow-[0_0_40px_var(--glow-color)]',
+      className
+    )} style={{ '--glow-color': glowColor } as CSSProperties}>
+      {children}
+    </div>
+  );
+}
+
+// ═══ Gradient Text ═══
+export function GradientText({
+  children,
+  from = '#ef4444',
+  to = '#f59e0b',
+  className = '',
+}: {
+  children: ReactNode; from?: string; to?: string; className?: string;
+}) {
+  return (
+    <span className={cn('bg-clip-text text-transparent', className)}
+      style={{ backgroundImage: `linear-gradient(135deg, ${from}, ${to})` }}
+    >
+      {children}
+    </span>
+  );
+}
+
+// ═══ Glow Badge ═══
+export function GlowBadge({
+  children,
+  color = '#ef4444',
+  className = '',
+}: {
+  children: ReactNode; color?: string; className?: string;
+}) {
+  return (
+    <span className={cn(
+      'inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium',
+      'border backdrop-blur-sm',
+      className
+    )} style={{
+      backgroundColor: `${color}10`,
+      borderColor: `${color}30`,
+      color: color,
+      boxShadow: `0 0 12px ${color}20`,
+    }}>
+      {children}
+    </span>
+  );
+}
+
+// ═══ Animated Grid Background ═══
+export function GridBackground({ className = '' }: { className?: string }) {
+  return (
+    <div className={cn('absolute inset-0 -z-10', className)}>
+      <div className="absolute inset-0"
+        style={{
+          backgroundImage: `linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px)`,
+          backgroundSize: '60px 60px',
+        }}
+      />
+      <div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-forensic-bg" />
+    </div>
+  );
+}
+
+// ═══ Status Indicator ═══
+export function StatusDot({ status }: { status: 'active' | 'warning' | 'critical' | 'inactive' }) {
+  const colors = { active: '#22c55e', warning: '#f59e0b', critical: '#ef4444', inactive: '#6b7280' };
+  return (
+    <span className="relative flex h-3 w-3">
+      <span className="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75"
+        style={{ backgroundColor: colors[status] }} />
+      <span className="relative inline-flex rounded-full h-3 w-3" style={{ backgroundColor: colors[status] }} />
+    </span>
+  );
+}