website refactor

apps/website/ui/Avatar.tsx

@@ -0,0 +1,27 @@
+/**
+ * Avatar
+ *
+ * Pure UI component for displaying driver avatars.
+ * Renders an image with fallback on error.
+ */
+
+export interface AvatarProps {
+  driverId: string;
+  alt: string;
+  className?: string;
+}
+
+export function Avatar({ driverId, alt, className = '' }: AvatarProps) {
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
+      src={`/media/avatar/${driverId}`}
+      alt={alt}
+      className={`w-10 h-10 rounded-full object-cover ${className}`}
+      onError={(e) => {
+        // Fallback to default avatar
+        (e.target as HTMLImageElement).src = '/default-avatar.png';
+      }}
+    />
+  );
+}

apps/website/ui/CategoryIcon.tsx

@@ -0,0 +1,27 @@
+/**
+ * CategoryIcon
+ *
+ * Pure UI component for displaying category icons.
+ * Renders an image with fallback on error.
+ */
+
+export interface CategoryIconProps {
+  categoryId: string;
+  alt: string;
+  className?: string;
+}
+
+export function CategoryIcon({ categoryId, alt, className = '' }: CategoryIconProps) {
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
+      src={`/media/categories/${categoryId}/icon`}
+      alt={alt}
+      className={`w-6 h-6 object-contain ${className}`}
+      onError={(e) => {
+        // Fallback to default icon
+        (e.target as HTMLImageElement).src = '/default-category-icon.png';
+      }}
+    />
+  );
+}

apps/website/ui/Input.tsx

@@ -0,0 +1,17 @@
+import { forwardRef } from 'react';
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  variant?: 'default' | 'error';
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ className = '', variant = 'default', ...props }, ref) => {
+    const baseClasses = 'px-3 py-2 border rounded-lg text-white bg-deep-graphite focus:outline-none focus:border-primary-blue transition-colors';
+    const variantClasses = variant === 'error' ? 'border-racing-red' : 'border-charcoal-outline';
+    const classes = `${baseClasses} ${variantClasses} ${className}`;
+
+    return <input ref={ref} className={classes} {...props} />;
+  }
+);
+
+Input.displayName = 'Input';

apps/website/ui/LeagueCover.tsx

@@ -0,0 +1,27 @@
+/**
+ * LeagueCover
+ *
+ * Pure UI component for displaying league cover images.
+ * Renders an image with fallback on error.
+ */
+
+export interface LeagueCoverProps {
+  leagueId: string;
+  alt: string;
+  className?: string;
+}
+
+export function LeagueCover({ leagueId, alt, className = '' }: LeagueCoverProps) {
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
+      src={`/media/leagues/${leagueId}/cover`}
+      alt={alt}
+      className={`w-full h-48 object-cover ${className}`}
+      onError={(e) => {
+        // Fallback to default cover
+        (e.target as HTMLImageElement).src = '/default-league-cover.png';
+      }}
+    />
+  );
+}

apps/website/ui/LeagueLogo.tsx

@@ -0,0 +1,30 @@
+/**
+ * LeagueLogo
+ *
+ * Pure UI component for displaying league logos.
+ * Renders an optimized image with fallback on error.
+ */
+
+import Image from 'next/image';
+
+export interface LeagueLogoProps {
+  leagueId: string;
+  alt: string;
+  className?: string;
+}
+
+export function LeagueLogo({ leagueId, alt, className = '' }: LeagueLogoProps) {
+  return (
+    <Image
+      src={`/media/leagues/${leagueId}/logo`}
+      alt={alt}
+      width={100}
+      height={100}
+      className={`object-contain ${className}`}
+      onError={(e) => {
+        // Fallback to default logo
+        (e.target as HTMLImageElement).src = '/default-league-logo.png';
+      }}
+    />
+  );
+}

apps/website/ui/Select.tsx

@@ -22,13 +22,16 @@ export function Select({
   options,
   className = '',
 }: SelectProps) {
+  const defaultClasses = 'w-full px-3 py-2 bg-deep-graphite border border-charcoal-outline rounded-lg text-white focus:outline-none focus:border-primary-blue transition-colors';
+  const classes = className ? `${defaultClasses} ${className}` : defaultClasses;
+
   return (
     <select
       id={id}
       aria-label={ariaLabel}
       value={value}
       onChange={onChange}
-      className={className}
+      className={classes}
     >
       {options.map((option) => (
         <option key={option.value} value={option.value}>

apps/website/ui/SponsorLogo.tsx

@@ -0,0 +1,30 @@
+/**
+ * SponsorLogo
+ *
+ * Pure UI component for displaying sponsor logos.
+ * Renders an optimized image with fallback on error.
+ */
+
+import Image from 'next/image';
+
+export interface SponsorLogoProps {
+  sponsorId: string;
+  alt: string;
+  className?: string;
+}
+
+export function SponsorLogo({ sponsorId, alt, className = '' }: SponsorLogoProps) {
+  return (
+    <Image
+      src={`/media/sponsors/${sponsorId}/logo`}
+      alt={alt}
+      width={100}
+      height={100}
+      className={`object-contain ${className}`}
+      onError={(e) => {
+        // Fallback to default logo
+        (e.target as HTMLImageElement).src = '/default-sponsor-logo.png';
+      }}
+    />
+  );
+}

apps/website/ui/Table.tsx

@@ -0,0 +1,88 @@
+import { ReactNode } from 'react';
+
+interface TableProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export function Table({ children, className = '' }: TableProps) {
+  return (
+    <div className={`overflow-x-auto ${className}`}>
+      <table className="w-full">
+        {children}
+      </table>
+    </div>
+  );
+}
+
+interface TableHeadProps {
+  children: ReactNode;
+}
+
+export function TableHead({ children }: TableHeadProps) {
+  return (
+    <thead>
+      {children}
+    </thead>
+  );
+}
+
+interface TableBodyProps {
+  children: ReactNode;
+}
+
+export function TableBody({ children }: TableBodyProps) {
+  return (
+    <tbody>
+      {children}
+    </tbody>
+  );
+}
+
+interface TableRowProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export function TableRow({ children, className = '' }: TableRowProps) {
+  const baseClasses = 'border-b border-charcoal-outline/50 hover:bg-iron-gray/30 transition-colors';
+  const classes = className ? `${baseClasses} ${className}` : baseClasses;
+
+  return (
+    <tr className={classes}>
+      {children}
+    </tr>
+  );
+}
+
+interface TableHeaderProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export function TableHeader({ children, className = '' }: TableHeaderProps) {
+  const baseClasses = 'text-left py-3 px-4 text-xs font-medium text-gray-400 uppercase';
+  const classes = className ? `${baseClasses} ${className}` : baseClasses;
+
+  return (
+    <th className={classes}>
+      {children}
+    </th>
+  );
+}
+
+interface TableCellProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export function TableCell({ children, className = '' }: TableCellProps) {
+  const baseClasses = 'py-3 px-4';
+  const classes = className ? `${baseClasses} ${className}` : baseClasses;
+
+  return (
+    <td className={classes}>
+      {children}
+    </td>
+  );
+}

apps/website/ui/TeamLogo.tsx

@@ -0,0 +1,30 @@
+/**
+ * TeamLogo
+ *
+ * Pure UI component for displaying team logos.
+ * Renders an optimized image with fallback on error.
+ */
+
+import Image from 'next/image';
+
+export interface TeamLogoProps {
+  teamId: string;
+  alt: string;
+  className?: string;
+}
+
+export function TeamLogo({ teamId, alt, className = '' }: TeamLogoProps) {
+  return (
+    <Image
+      src={`/media/teams/${teamId}/logo`}
+      alt={alt}
+      width={100}
+      height={100}
+      className={`object-contain ${className}`}
+      onError={(e) => {
+        // Fallback to default logo
+        (e.target as HTMLImageElement).src = '/default-team-logo.png';
+      }}
+    />
+  );
+}

apps/website/ui/TrackImage.tsx

@@ -0,0 +1,30 @@
+/**
+ * TrackImage
+ *
+ * Pure UI component for displaying track images.
+ * Renders an optimized image with fallback on error.
+ */
+
+import Image from 'next/image';
+
+export interface TrackImageProps {
+  trackId: string;
+  alt: string;
+  className?: string;
+}
+
+export function TrackImage({ trackId, alt, className = '' }: TrackImageProps) {
+  return (
+    <Image
+      src={`/media/tracks/${trackId}/image`}
+      alt={alt}
+      width={800}
+      height={256}
+      className={`w-full h-64 object-cover ${className}`}
+      onError={(e) => {
+        // Fallback to default track image
+        (e.target as HTMLImageElement).src = '/default-track-image.png';
+      }}
+    />
+  );
+}