backstory/frontend/src/NewApp/Pages/BackstoryThemeVisualizerPage.tsx

import React from 'react';
import { backstoryTheme } from '../BackstoryTheme';
import { Box, Typography, Paper, Container } from '@mui/material';

// This component provides a visual demonstration of the theme colors
const BackstoryThemeVisualizerPage = () => {
  const colorSwatch = (color: string, name: string, textColor = '#fff') => (
    <div className="flex flex-col items-center">
      <div 
        className="w-20 h-20 rounded-lg shadow-md flex items-center justify-center mb-2" 
        style={{ backgroundColor: color, color: textColor }}>
        {name}
      </div>
      <span className="text-xs">{color}</span>
    </div>
  );

  return (
    <Box sx={{ backgroundColor: 'background.default', minHeight: '100%', py: 4 }}>
      <Container maxWidth="lg">
        <Paper sx={{ p: 4, boxShadow: 2 }}>

      <div className="p-8">
        <h1 className="text-2xl font-bold mb-6" style={{ color: backstoryTheme.palette.text.primary }}>
          Backstory Theme Visualization
        </h1>
        
        <div className="mb-8">
          <h2 className="text-xl mb-4" style={{ color: backstoryTheme.palette.text.primary }}>
            Primary Colors
          </h2>
          <div className="flex space-x-4">
            {colorSwatch(backstoryTheme.palette.primary.main, 'Primary', backstoryTheme.palette.primary.contrastText)}
            {colorSwatch(backstoryTheme.palette.secondary.main, 'Secondary', backstoryTheme.palette.secondary.contrastText)}
            {colorSwatch(backstoryTheme.palette.custom.highlight, 'Highlight', '#fff')}
          </div>
        </div>
        
        <div className="mb-8">
          <h2 className="text-xl mb-4" style={{ color: backstoryTheme.palette.text.primary }}>
            Background Colors
          </h2>
          <div className="flex space-x-4">
            {colorSwatch(backstoryTheme.palette.background.default, 'Default', '#000')}
            {colorSwatch(backstoryTheme.palette.background.paper, 'Paper', '#000')}
          </div>
        </div>
        
        <div className="mb-8">
          <h2 className="text-xl mb-4" style={{ color: backstoryTheme.palette.text.primary }}>
            Text Colors
          </h2>
          <div className="flex space-x-4">
            {colorSwatch(backstoryTheme.palette.text.primary, 'Primary', '#fff')}
            {colorSwatch(backstoryTheme.palette.text.secondary, 'Secondary', '#fff')}
          </div>
        </div>
        
        <div className="mb-8 border p-6 rounded-lg" style={{ backgroundColor: backstoryTheme.palette.background.paper }}>
          <h2 className="text-xl mb-4" style={{ color: backstoryTheme.palette.text.primary }}>
            Typography Examples
          </h2>
          
          <div className="mb-4">
            <h1 style={{ 
              fontFamily: backstoryTheme.typography.fontFamily,
              fontSize: backstoryTheme.typography.h1.fontSize,
              fontWeight: backstoryTheme.typography.h1.fontWeight,
              color: backstoryTheme.typography.h1.color,
            }}>
              Heading 1 - Backstory Application
            </h1>
          </div>
          
          <div className="mb-4">
            <p style={{ 
              fontFamily: backstoryTheme.typography.fontFamily,
              fontSize: backstoryTheme.typography.body1.fontSize,
              color: backstoryTheme.typography.body1.color,
            }}>
              Body Text - This is how the regular text content will appear in the Backstory application.
              The application uses Roboto as its primary font family, with carefully selected sizing and colors.
            </p>
          </div>
          
          {/* <div className="mt-6">
            <a href="#" style={{ 
              color: backstoryTheme.components?.MuiLink?.styleOverrides.root.color || "inherit",
              textDecoration: backstoryTheme.components.MuiLink.styleOverrides.root.textDecoration,
            }}>
              This is how links will appear by default
            </a>
          </div> */}
        </div>
        
        <div className="mb-8">
          <h2 className="text-xl mb-4" style={{ color: backstoryTheme.palette.text.primary }}>
            UI Component Examples
          </h2>
          
          <div className="p-4 mb-4 rounded-lg" style={{ backgroundColor: backstoryTheme.palette.background.paper }}>
            <div className="p-2 mb-4 rounded" style={{ backgroundColor: backstoryTheme.palette.primary.main }}>
              <span style={{ color: backstoryTheme.palette.primary.contrastText }}>
                AppBar Background
              </span>
            </div>
            
            <div style={{ 
              padding: '8px 16px',
              backgroundColor: backstoryTheme.palette.primary.main,
              color: backstoryTheme.palette.primary.contrastText,
              display: 'inline-block',
              borderRadius: '4px',
              cursor: 'pointer',
              fontFamily: backstoryTheme.typography.fontFamily,
            }}>
              Primary Button
            </div>
            
            <div className="mt-4" style={{ 
              padding: '8px 16px',
              backgroundColor: backstoryTheme.palette.secondary.main,
              color: backstoryTheme.palette.secondary.contrastText,
              display: 'inline-block',
              borderRadius: '4px',
              cursor: 'pointer',
              fontFamily: backstoryTheme.typography.fontFamily,
            }}>
              Secondary Button
            </div>
            
            <div className="mt-4" style={{ 
              padding: '8px 16px',
              backgroundColor: backstoryTheme.palette.action.active,
              color: '#fff',
              display: 'inline-block',
              borderRadius: '4px',
              cursor: 'pointer',
              fontFamily: backstoryTheme.typography.fontFamily,
            }}>
              Action Button
            </div>
          </div>
        </div>
        
        <div>
          <h2 className="text-xl mb-4" style={{ color: backstoryTheme.palette.text.primary }}>
            Theme Color Breakdown
          </h2>
          <table className="border-collapse">
            <thead>
              <tr>
                <th className="border p-2 text-left" 
                     style={{ backgroundColor: backstoryTheme.palette.background.default, color: backstoryTheme.palette.text.primary }}>Color Name</th>
                <th className="border p-2 text-left"
                     style={{ backgroundColor: backstoryTheme.palette.background.default, color: backstoryTheme.palette.text.primary }}>Hex Value</th>
                <th className="border p-2 text-left"
                     style={{ backgroundColor: backstoryTheme.palette.background.default, color: backstoryTheme.palette.text.primary }}>Description</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td className="border p-2" style={{ color: backstoryTheme.palette.text.primary }}>Primary Main</td>
                <td className="border p-2" style={{ color: backstoryTheme.palette.text.primary }}>{backstoryTheme.palette.primary.main}</td>
                <td className="border p-2" style={{ color: backstoryTheme.palette.text.primary }}>Midnight Blue - Used for main headers and primary UI elements</td>
              </tr>
              <tr>
                <td className="border p-2" style={{ color: backstoryTheme.palette.text.primary }}>Primary Contrast</td>
                <td className="border p-2" style={{ color: backstoryTheme.palette.text.primary }}>{backstoryTheme.palette.primary.contrastText}</td>
                <td className="border p-2" style={{ color: backstoryTheme.palette.text.primary }}>Warm Gray - Text that appears on primary color backgrounds</td>
              </tr>
              <tr>
                <td className="border p-2" style={{ color: backstoryTheme.palette.text.primary }}>Secondary Main</td>
                <td className="border p-2" style={{ color: backstoryTheme.palette.text.primary }}>{backstoryTheme.palette.secondary.main}</td>
                <td className="border p-2" style={{ color: backstoryTheme.palette.text.primary }}>Dusty Teal - Used for secondary actions and accents</td>
              </tr>
              <tr>
                <td className="border p-2" style={{ color: backstoryTheme.palette.text.primary }}>Highlight</td>
                <td className="border p-2" style={{ color: backstoryTheme.palette.text.primary }}>{backstoryTheme.palette.custom.highlight}</td>
                <td className="border p-2" style={{ color: backstoryTheme.palette.text.primary }}>Golden Ochre - Used for highlights, accents, and important actions</td>
              </tr>
              <tr>
                <td className="border p-2" style={{ color: backstoryTheme.palette.text.primary }}>Background Default</td>
                <td className="border p-2" style={{ color: backstoryTheme.palette.text.primary }}>{backstoryTheme.palette.background.default}</td>
                <td className="border p-2" style={{ color: backstoryTheme.palette.text.primary }}>Warm Gray - Main background color for the application</td>
              </tr>
              <tr>
                <td className="border p-2" style={{ color: backstoryTheme.palette.text.primary }}>Text Primary</td>
                <td className="border p-2" style={{ color: backstoryTheme.palette.text.primary }}>{backstoryTheme.palette.text.primary}</td>
                <td className="border p-2" style={{ color: backstoryTheme.palette.text.primary }}>Charcoal Black - Primary text color throughout the app</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
        </Paper></Container></Box>
  );
};

export {
  BackstoryThemeVisualizerPage
};