create-ex-den-kit/frontend/src/pages/ThemeSelector.jsx

Create exam projects with Ex-Den-Kit

import React from 'react';
import { motion } from 'framer-motion';
import { useNavigate } from 'react-router-dom';
import { useTheme } from '../contexts/ThemeContext';
import { themeConfigs } from '../config/themes';
import { Palette, ArrowRight } from 'lucide-react';

const ThemeSelector = () => {
  const { theme, changeTheme } = useTheme();
  const navigate = useNavigate();

  const handleSelectTheme = (themeKey) => {
    changeTheme(themeKey);
    navigate('/login');
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-900 to-gray-800 flex items-center justify-center p-4">
      <motion.div
        initial={{ opacity: 0, scale: 0.9 }}
        animate={{ opacity: 1, scale: 1 }}
        transition={{ duration: 0.5 }}
        className="max-w-6xl w-full"
      >
        <div className="text-center mb-12">
          <motion.div
            initial={{ y: -20 }}
            animate={{ y: 0 }}
            transition={{ delay: 0.2 }}
            className="flex justify-center mb-4"
          >
            <Palette size={64} className="text-white" />
          </motion.div>
          <h1 className="text-4xl font-bold text-white mb-4">
            Выберите тему проекта
          </h1>
          <p className="text-gray-300 text-lg">
            Выберите одну из предустановленных тем для демонстрационного экзамена
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {Object.entries(themeConfigs).map(([key, config], index) => (
            <motion.div
              key={key}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.1 * index }}
              whileHover={{ scale: 1.02 }}
              whileTap={{ scale: 0.98 }}
              onClick={() => handleSelectTheme(key)}
              className={`bg-white rounded-2xl p-6 cursor-pointer transition-all duration-300
                ${theme === key ? 'ring-4 ring-offset-4 ring-offset-gray-800' : 'hover:shadow-2xl'}
              `}
              style={{ 
                '--tw-ring-color': config.colors.primary,
                borderTop: `4px solid ${config.colors.primary}`
              }}
            >
              <div className="flex items-start justify-between mb-4">
                <div>
                  <span className="text-4xl mb-2 block">{config.icon}</span>
                  <h3 className="text-2xl font-bold text-gray-900">{config.name}</h3>
                </div>
                {theme === key && (
                  <span className="px-3 py-1 bg-green-100 text-green-800 text-sm rounded-full">
                    Активная
                  </span>
                )}
              </div>
              
              <p className="text-gray-600 mb-4">{config.description}</p>
              
              <div className="flex items-center justify-between">
                <div className="flex space-x-2">
                  {Object.values(config.colors).map((color, i) => (
                    <div
                      key={i}
                      className="w-8 h-8 rounded-full shadow-inner"
                      style={{ backgroundColor: color }}
                    />
                  ))}
                </div>
                
                <motion.div
                  whileHover={{ x: 5 }}
                  className="flex items-center text-gray-500"
                >
                  <span className="text-sm mr-2">Выбрать</span>
                  <ArrowRight size={16} />
                </motion.div>
              </div>
            </motion.div>
          ))}
        </div>

        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.5 }}
          className="text-center mt-8"
        >
          <button
            onClick={() => navigate(-1)}
            className="text-gray-400 hover:text-white transition-colors"
          >
            ← Вернуться назад
          </button>
        </motion.div>
      </motion.div>
    </div>
  );
};

export default ThemeSelector;