themes-section.tsx)¶

Overview¶

A comprehensive section for managing themes, featuring a pull-out menu for saved themes, theme creation, deletion, and selection capabilities. The component provides an interactive interface for theme management with smooth animations and state persistence.

Features¶

Theme creation and deletion
Pull-out menu for saved themes
Theme selection and deselection
State persistence
Smooth animations
Interactive UI elements
Batch operations
Search functionality
Error handling
Loading states

Dependencies¶

import { useState, useEffect } from 'react'
import { motion } from 'framer-motion'
import { Button } from '@/components/ui/button'
import { ThemeCard } from './theme-card'

Props¶

interface ThemesSectionProps {
  onThemeSelect: (theme: SavedTheme) => void;
  onThemeDeselect: (themeId: string) => void;
  selectedThemes: SavedTheme[];
}

interface SavedTheme {
  id: string;
  name: string;
  description: string;
  dateCreated: string;
}

Implementation¶

State Management¶

const [savedThemes, setSavedThemes] = useState<SavedTheme[]>([]);
const [expandedThemeId, setExpandedThemeId] = useState<string | null>(null);
const [isMenuOpen, setIsMenuOpen] = useState(false);
const [isLoading, setIsLoading] = useState(false);

Methods¶

const handleThemeCreate = () => {
  const newTheme: SavedTheme = {
    id: generateUUID(),
    name: 'New Theme',
    description: '',
    dateCreated: new Date().toISOString()
  };
  setSavedThemes([...savedThemes, newTheme]);
};

const handleThemeDelete = (themeId: string) => {
  setSavedThemes(savedThemes.filter(theme => theme.id !== themeId));
  onThemeDeselect(themeId);
};

const handleThemeSelect = (theme: SavedTheme) => {
  onThemeSelect(theme);
};

Unique Functionality¶

// Manages theme selection, creation, and deletion with state persistence

HTML Structure¶

<div className="relative">
  <Button onClick={() => setIsMenuOpen(!isMenuOpen)}>
    {isMenuOpen ? 'Close Themes' : 'Open Themes'}
  </Button>

  <motion.div
    initial={{ x: '100%' }}
    animate={{ x: isMenuOpen ? 0 : '100%' }}
    transition={{ duration: 0.3 }}
    className="fixed right-0 top-0 h-full w-80 bg-white shadow-lg"
  >
    <div className="p-4">
      <Button onClick={handleThemeCreate}>Create Theme</Button>
      <div className="mt-4 space-y-4">
        {savedThemes.map(theme => (
          <ThemeCard
            key={theme.id}
            {...theme}
            isSelected={selectedThemes.some(t => t.id === theme.id)}
            onSelect={() => handleThemeSelect(theme)}
            onDelete={() => handleThemeDelete(theme.id)}
            onExpand={() => setExpandedThemeId(theme.id)}
            onCollapse={() => setExpandedThemeId(null)}
          />
        ))}
      </div>
    </div>
  </motion.div>
</div>

API Integration¶

Theme persistence through local storage
Optional backend integration for theme synchronization

Components Used¶

Notes¶

Supports multiple theme selection
Maintains theme state
Uses smooth animations
Provides user feedback
Handles errors gracefully