ThemeShowcase.tsx

Go to the documentation of this file.

"use client";
 
import { themes } from '@/lib/themes';
 
/**
 * Theme Showcase Component
 * Displays all available themes with their color palettes
 * Used for documentation and marketing purposes
 */
export default function ThemeShowcase() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 p-6">
      {Object.values(themes).map((theme) => (
        <div
          key={theme.id}
          className="rounded-xl overflow-hidden shadow-lg border-2"
          style={{ 
            borderColor: theme.colors.border,
            background: theme.colors.surface,
          }}
        >
          {/* Theme Header */}
          <div 
            className="p-4"
            style={{ 
              background: theme.colors.brand,
              color: '#ffffff',
            }}
          >
            <h3 className="font-bold text-lg">{theme.name}</h3>
            <p className="text-sm opacity-90">{theme.description}</p>
          </div>
 
          {/* Color Palette */}
          <div className="p-4" style={{ background: theme.colors.bg }}>
            <div className="space-y-2">
              {/* Primary Colors */}
              <div className="grid grid-cols-4 gap-2">
                <div 
                  className="aspect-square rounded shadow-sm"
                  style={{ background: theme.colors.brand }}
                  title="Brand"
                />
                <div 
                  className="aspect-square rounded shadow-sm"
                  style={{ background: theme.colors.brand2 }}
                  title="Brand 2"
                />
                <div 
                  className="aspect-square rounded shadow-sm"
                  style={{ background: theme.colors.warn }}
                  title="Warning"
                />
                <div 
                  className="aspect-square rounded shadow-sm"
                  style={{ background: theme.colors.danger }}
                  title="Danger"
                />
              </div>
 
              {/* Surface Colors */}
              <div className="grid grid-cols-3 gap-2">
                <div 
                  className="aspect-square rounded shadow-sm border"
                  style={{ 
                    background: theme.colors.bg,
                    borderColor: theme.colors.border,
                  }}
                  title="Background"
                />
                <div 
                  className="aspect-square rounded shadow-sm border"
                  style={{ 
                    background: theme.colors.surface,
                    borderColor: theme.colors.border,
                  }}
                  title="Surface"
                />
                <div 
                  className="aspect-square rounded shadow-sm border"
                  style={{ 
                    background: theme.colors.surface2,
                    borderColor: theme.colors.border,
                  }}
                  title="Surface 2"
                />
              </div>
 
              {/* Text Preview */}
              <div 
                className="p-3 rounded"
                style={{ 
                  background: theme.colors.surface,
                  border: `1px solid ${theme.colors.border}`,
                }}
              >
                <p 
                  className="font-bold text-sm mb-1"
                  style={{ color: theme.colors.text }}
                >
                  Sample Text
                </p>
                <p 
                  className="text-xs"
                  style={{ color: theme.colors.muted }}
                >
                  Muted secondary text
                </p>
              </div>
            </div>
          </div>
 
          {/* Theme ID Badge */}
          <div 
            className="px-4 py-2 text-center text-xs font-mono"
            style={{ 
              background: theme.colors.surface2,
              color: theme.colors.muted,
            }}
          >
            {theme.id}
          </div>
        </div>
      ))}
    </div>
  );
}