feat: port all template categories to JSON format
- Ported Minimalist templates to JSON (Swiss Grid, Brutalist, etc.) - Ported Tech templates to JSON (SaaS, Terminal, Cyberpunk, etc.) - Ported Creative templates to JSON (Art Gallery, Zine, Pop Art, etc.) - Ported Industrial templates to JSON (Blueprint, Factory, Schematic, etc.) - Ported Nature templates to JSON (Botanical, Ocean, Mountain, etc.) - Ported Lifestyle templates to JSON (Cookbook, Travel, Coffee House, etc.) - Ported Vintage templates to JSON (Art Deco, Medieval, Retro 80s, etc.) - Updated README.md to reflect the new JSON-based style system (example configuration and contribution workflow) - Completed migration of over 150 styles to the new architecture
This commit is contained in:
TypoGenie
@@ -0,0 +1,145 @@
|
||||
import { X } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
|
||||
interface ExportOptionsModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onExport: (useTableHeaders: boolean) => void;
|
||||
}
|
||||
|
||||
export default function ExportOptionsModal({ isOpen, onClose, onExport }: ExportOptionsModalProps) {
|
||||
const [selectedMode, setSelectedMode] = useState<'table' | 'semantic'>('semantic');
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
const handleExport = () => {
|
||||
onExport(selectedMode === 'table');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-zinc-950/80 backdrop-blur-sm">
|
||||
<div className="relative w-full max-w-2xl bg-zinc-900 rounded-2xl shadow-2xl m-4 overflow-hidden border border-zinc-700">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-6 py-4 border-b border-zinc-800 bg-zinc-900/50">
|
||||
<h2 className="text-xl font-semibold text-white">Export Options</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-1 text-zinc-400 hover:text-white transition-colors rounded-md hover:bg-zinc-800"
|
||||
aria-label="Close"
|
||||
>
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="px-6 py-4 space-y-4 bg-zinc-900">
|
||||
<p className="text-sm text-zinc-400 mb-6">
|
||||
Choose how headers should be rendered in your Word document:
|
||||
</p>
|
||||
|
||||
{/* Option 1: High-Fidelity */}
|
||||
<label
|
||||
className={`block p-4 border-2 rounded-lg cursor-pointer transition-all ${selectedMode === 'table'
|
||||
? 'border-indigo-500 bg-indigo-500/10'
|
||||
: 'border-zinc-700 hover:border-zinc-600 bg-zinc-800/50'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start">
|
||||
<input
|
||||
type="radio"
|
||||
name="exportMode"
|
||||
value="table"
|
||||
checked={selectedMode === 'table'}
|
||||
onChange={() => setSelectedMode('table')}
|
||||
className="mt-1 mr-3 text-indigo-600 focus:ring-indigo-500 bg-zinc-700 border-zinc-600"
|
||||
/>
|
||||
<div className="flex-1">
|
||||
<div className="font-semibold text-white mb-2">High-Fidelity Layout</div>
|
||||
<div className="space-y-1 text-sm">
|
||||
<div className="flex items-start">
|
||||
<span className="text-green-500 mr-2">✓</span>
|
||||
<span className="text-zinc-300">Perfect padding and border alignment</span>
|
||||
</div>
|
||||
<div className="flex items-start">
|
||||
<span className="text-green-500 mr-2">✓</span>
|
||||
<span className="text-zinc-300">Backgrounds contained precisely</span>
|
||||
</div>
|
||||
<div className="flex items-start">
|
||||
<span className="text-red-500 mr-2">✗</span>
|
||||
<span className="text-zinc-300">No automatic Table of Contents</span>
|
||||
</div>
|
||||
<div className="flex items-start">
|
||||
<span className="text-red-500 mr-2">✗</span>
|
||||
<span className="text-zinc-300">Document outline/navigation disabled</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-3 text-xs text-zinc-500 italic">
|
||||
Best for: Portfolios, brochures, print-ready designs
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
{/* Option 2: Semantic */}
|
||||
<label
|
||||
className={`block p-4 border-2 rounded-lg cursor-pointer transition-all ${selectedMode === 'semantic'
|
||||
? 'border-indigo-500 bg-indigo-500/10'
|
||||
: 'border-zinc-700 hover:border-zinc-600 bg-zinc-800/50'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start">
|
||||
<input
|
||||
type="radio"
|
||||
name="exportMode"
|
||||
value="semantic"
|
||||
checked={selectedMode === 'semantic'}
|
||||
onChange={() => setSelectedMode('semantic')}
|
||||
className="mt-1 mr-3 text-indigo-600 focus:ring-indigo-500 bg-zinc-700 border-zinc-600"
|
||||
/>
|
||||
<div className="flex-1">
|
||||
<div className="font-semibold text-white mb-2">Semantic Structure</div>
|
||||
<div className="space-y-1 text-sm">
|
||||
<div className="flex items-start">
|
||||
<span className="text-green-500 mr-2">✓</span>
|
||||
<span className="text-zinc-300">Auto-generated Table of Contents</span>
|
||||
</div>
|
||||
<div className="flex items-start">
|
||||
<span className="text-green-500 mr-2">✓</span>
|
||||
<span className="text-zinc-300">Document navigation panel works</span>
|
||||
</div>
|
||||
<div className="flex items-start">
|
||||
<span className="text-green-500 mr-2">✓</span>
|
||||
<span className="text-zinc-300">Screen reader accessible</span>
|
||||
</div>
|
||||
<div className="flex items-start">
|
||||
<span className="text-yellow-500 mr-2">⚠</span>
|
||||
<span className="text-zinc-300">Minor padding/border alignment issues</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-3 text-xs text-zinc-500 italic">
|
||||
Best for: Academic papers, reports, accessible documents
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="flex items-center justify-end gap-3 px-6 py-4 border-t border-zinc-800 bg-zinc-900">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="px-4 py-2 text-sm font-medium text-zinc-300 bg-zinc-800 border border-zinc-700 rounded-md hover:bg-zinc-700 transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleExport}
|
||||
className="px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-md hover:bg-indigo-500 transition-colors"
|
||||
>
|
||||
Export to Word
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user