ACPlayer_Webpage/components/ui/icons.tsx

// components/ui/Icons.tsx
// Sharp, technical SVG icons for racing dashboard

export function UsersIcon({ className = "w-6 h-6" }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
      <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" strokeLinecap="square" strokeLinejoin="miter"/>
      <circle cx="9" cy="7" r="4" strokeLinecap="square" strokeLinejoin="miter"/>
      <path d="M23 21v-2a4 4 0 0 0-3-3.87" strokeLinecap="square" strokeLinejoin="miter"/>
      <path d="M16 3.13a4 4 0 0 1 0 7.75" strokeLinecap="square" strokeLinejoin="miter"/>
    </svg>
  );
}

export function ServerIcon({ className = "w-6 h-6" }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
      <rect x="2" y="2" width="20" height="8" rx="0" strokeLinecap="square" strokeLinejoin="miter"/>
      <rect x="2" y="14" width="20" height="8" rx="0" strokeLinecap="square" strokeLinejoin="miter"/>
      <line x1="6" y1="6" x2="6.01" y2="6" strokeLinecap="square" strokeLinejoin="miter"/>
      <line x1="6" y1="18" x2="6.01" y2="18" strokeLinecap="square" strokeLinejoin="miter"/>
    </svg>
  );
}

export function ActivityIcon({ className = "w-6 h-6" }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
      <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" strokeLinecap="square" strokeLinejoin="miter"/>
    </svg>
  );
}

export function MapPinIcon({ className = "w-6 h-6" }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
      <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" strokeLinecap="square" strokeLinejoin="miter"/>
      <circle cx="12" cy="10" r="3" strokeLinecap="square" strokeLinejoin="miter"/>
    </svg>
  );
}

export function FlagIcon({ className = "w-6 h-6" }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
      <path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z" strokeLinecap="square" strokeLinejoin="miter"/>
      <line x1="4" y1="22" x2="4" y2="15" strokeLinecap="square" strokeLinejoin="miter"/>
    </svg>
  );
}

export function TrophyIcon({ className = "w-6 h-6" }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
      <path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6" strokeLinecap="square" strokeLinejoin="miter"/>
      <path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18" strokeLinecap="square" strokeLinejoin="miter"/>
      <path d="M4 22h16" strokeLinecap="square" strokeLinejoin="miter"/>
      <path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22" strokeLinecap="square" strokeLinejoin="miter"/>
      <path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22" strokeLinecap="square" strokeLinejoin="miter"/>
      <path d="M18 2H6v7a6 6 0 0 0 12 0V2z" strokeLinecap="square" strokeLinejoin="miter"/>
    </svg>
  );
}

export function ChartIcon({ className = "w-6 h-6" }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
      <line x1="12" y1="20" x2="12" y2="10" strokeLinecap="square" strokeLinejoin="miter"/>
      <line x1="18" y1="20" x2="18" y2="4" strokeLinecap="square" strokeLinejoin="miter"/>
      <line x1="6" y1="20" x2="6" y2="16" strokeLinecap="square" strokeLinejoin="miter"/>
    </svg>
  );
}

export function CircleIcon({ className = "w-6 h-6" }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
      <circle cx="12" cy="12" r="10" strokeLinecap="square" strokeLinejoin="miter"/>
    </svg>
  );
}

export function LiveDotIcon({ className = "w-3 h-3" }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 12 12" fill="currentColor">
      <circle cx="6" cy="6" r="6"/>
    </svg>
  );
}

export function CalendarIcon({ className = "w-6 h-6" }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
      <rect x="3" y="4" width="18" height="18" rx="0" strokeLinecap="square" strokeLinejoin="miter"/>
      <line x1="16" y1="2" x2="16" y2="6" strokeLinecap="square" strokeLinejoin="miter"/>
      <line x1="8" y1="2" x2="8" y2="6" strokeLinecap="square" strokeLinejoin="miter"/>
      <line x1="3" y1="10" x2="21" y2="10" strokeLinecap="square" strokeLinejoin="miter"/>
    </svg>
  );
}

export function ClockIcon({ className = "w-6 h-6" }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
      <circle cx="12" cy="12" r="10" strokeLinecap="square" strokeLinejoin="miter"/>
      <polyline points="12 6 12 12 16 14" strokeLinecap="square" strokeLinejoin="miter"/>
    </svg>
  );
}

export function SettingsIcon({ className = "w-6 h-6" }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
      <circle cx="12" cy="12" r="3" strokeLinecap="square" strokeLinejoin="miter"/>
      <path d="M12 1v6m0 6v6M5.64 5.64l4.24 4.24m4.24 4.24l4.24 4.24M1 12h6m6 0h6M5.64 18.36l4.24-4.24m4.24-4.24l4.24-4.24" strokeLinecap="square" strokeLinejoin="miter"/>
    </svg>
  );
}

export function BoltIcon({ className = "w-6 h-6" }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="currentColor">
      <path d="M13 2L3 14h8l-1 8 10-12h-8l1-8z" strokeLinecap="square" strokeLinejoin="miter"/>
    </svg>
  );
}