import React, { useState, useMemo, useRef, useEffect } from 'react';
import { TYPOGRAPHY_STYLES } from '../constants';
import { StyleOption, PaperSize, StyleCategory } from '../types';
import { Check, Type, Printer, Search } from 'lucide-react';
interface StyleSelectorProps {
selectedStyle: string | null;
onSelectStyle: (id: string) => void;
selectedPaperSize: PaperSize;
onSelectPaperSize: (size: PaperSize) => void;
onGenerate: () => void;
}
const SAMPLE_CONTENT = `
The Art of Typography
Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing, and letter-spacing.
1. Visual Hierarchy
Visual hierarchy enables the reader to understand the importance of different sections. By using size, weight, and color, we guide the eye through the document in a logical flow.
"Design is not just what it looks like and feels like. Design is how it works."
2. Key Elements
Typeface: The design of the letters.Contrast: Distinguishing elements effectively.Consistency: Maintaining a coherent structure.
Good typography is invisible. It should not distract the reader but rather enhance the reading experience, ensuring the message is delivered clearly and effectively.
`;
export const StyleSelector: React.FC = ({
selectedStyle,
onSelectStyle,
selectedPaperSize,
onSelectPaperSize,
onGenerate
}) => {
const [activeCategory, setActiveCategory] = useState('All');
const iframeRef = useRef(null);
// Dynamically extract categories from styles and sort them
const categories = useMemo(() => {
const cats = new Set(TYPOGRAPHY_STYLES.map(s => s.category));
return Array.from(cats).sort();
}, []);
const filteredStyles = useMemo(() => {
let styles = TYPOGRAPHY_STYLES;
if (activeCategory !== 'All') {
styles = TYPOGRAPHY_STYLES.filter(style => style.category === activeCategory);
}
// Always sort alphabetically by name
return [...styles].sort((a, b) => a.name.localeCompare(b.name));
}, [activeCategory]);
const currentStyleObj = useMemo(() =>
TYPOGRAPHY_STYLES.find(s => s.id === selectedStyle),
[selectedStyle]);
// Update preview when style changes
useEffect(() => {
if (!iframeRef.current || !currentStyleObj) return;
const doc = iframeRef.current.contentDocument;
if (doc) {
const html = `
{/* Top Controls */}
Select Typography Style
Browse {TYPOGRAPHY_STYLES.length} professional templates
{(['Letter', 'A4'] as PaperSize[]).map((size) => (
onSelectPaperSize(size)}
className={`px-3 py-1.5 rounded-lg text-xs font-bold transition-all ${
selectedPaperSize === size
? 'bg-zinc-700 text-white shadow-sm'
: 'text-zinc-500 hover:text-zinc-300 hover:bg-zinc-800'
}`}
>
{size}
))}
{/* Main Split Layout */}
{/* LEFT COLUMN: Style List */}
{/* Category Filter Tabs */}
setActiveCategory('All')}
className={`px-3 py-1.5 rounded-full text-xs font-semibold whitespace-nowrap transition-all ${
activeCategory === 'All'
? 'bg-white text-black'
: 'bg-zinc-800 text-zinc-400 hover:bg-zinc-700 hover:text-zinc-200'
}`}
>
All
{categories.map(cat => (
setActiveCategory(cat)}
className={`px-3 py-1.5 rounded-full text-xs font-semibold whitespace-nowrap transition-all ${
activeCategory === cat
? 'bg-indigo-500 text-white shadow-lg shadow-indigo-500/20'
: 'bg-zinc-800 text-zinc-400 hover:bg-zinc-700 hover:text-zinc-200'
}`}
>
{cat}
))}
{/* Scrollable List */}
{filteredStyles.map((style) => (
onSelectStyle(style.id)}
className={`p-4 rounded-xl border transition-all cursor-pointer group relative
${selectedStyle === style.id
? 'border-indigo-500 bg-indigo-500/10 shadow-[0_0_15px_rgba(99,102,241,0.15)]'
: 'border-zinc-800 bg-zinc-900/40 hover:border-zinc-700 hover:bg-zinc-800'}`}
>
{style.name}
{selectedStyle === style.id && (
)}
{style.description}
{style.category}
))}
{/* RIGHT COLUMN: Preview Window */}
{/* Preview Header */}
{currentStyleObj && (
{currentStyleObj.name}
)}
{/* Iframe Container */}
{selectedStyle ? (
) : (
Select a style to preview
Choose from the list on the left
)}
{/* Bottom Action Bar */}