reaminig 5-t-9
This commit is contained in:
alorig
376
frontend/src/components/sites/TemplateCustomizer.tsx
Normal file
376
frontend/src/components/sites/TemplateCustomizer.tsx
Normal file
@@ -0,0 +1,376 @@
|
||||
/**
|
||||
* Template Customizer
|
||||
* Phase 7: Layout & Template System
|
||||
* Component for customizing template settings and styles
|
||||
*/
|
||||
import React, { useState } from 'react';
|
||||
import { SettingsIcon, PaletteIcon, TypeIcon, LayoutIcon } from 'lucide-react';
|
||||
import { Card } from '../../ui/card';
|
||||
import Label from '../../form/Label';
|
||||
import SelectDropdown from '../../form/SelectDropdown';
|
||||
import Button from '../../ui/button/Button';
|
||||
|
||||
export interface TemplateCustomization {
|
||||
layout: string;
|
||||
colorScheme: string;
|
||||
typography: string;
|
||||
spacing: string;
|
||||
headerStyle: string;
|
||||
footerStyle: string;
|
||||
sidebarPosition?: 'left' | 'right' | 'none';
|
||||
customStyles?: Record<string, any>;
|
||||
}
|
||||
|
||||
interface TemplateCustomizerProps {
|
||||
templateId: string;
|
||||
templateName: string;
|
||||
customization: TemplateCustomization;
|
||||
onChange: (customization: TemplateCustomization) => void;
|
||||
onSave?: () => void;
|
||||
onReset?: () => void;
|
||||
}
|
||||
|
||||
export default function TemplateCustomizer({
|
||||
templateId,
|
||||
templateName,
|
||||
customization,
|
||||
onChange,
|
||||
onSave,
|
||||
onReset,
|
||||
}: TemplateCustomizerProps) {
|
||||
const [activeTab, setActiveTab] = useState<'layout' | 'colors' | 'typography' | 'spacing'>('layout');
|
||||
|
||||
const updateCustomization = (updates: Partial<TemplateCustomization>) => {
|
||||
onChange({ ...customization, ...updates });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<h2 className="text-xl font-bold text-gray-900 dark:text-white">Customize: {templateName}</h2>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">Adjust template settings and styles</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
{onReset && (
|
||||
<Button variant="outline" onClick={onReset}>
|
||||
Reset
|
||||
</Button>
|
||||
)}
|
||||
{onSave && (
|
||||
<Button variant="primary" onClick={onSave}>
|
||||
Save Changes
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="flex gap-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setActiveTab('layout')}
|
||||
className={`px-4 py-2 font-medium border-b-2 transition-colors ${
|
||||
activeTab === 'layout'
|
||||
? 'border-brand-500 text-brand-600 dark:text-brand-400'
|
||||
: 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
|
||||
}`}
|
||||
>
|
||||
<LayoutIcon className="w-4 h-4 inline mr-2" />
|
||||
Layout
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setActiveTab('colors')}
|
||||
className={`px-4 py-2 font-medium border-b-2 transition-colors ${
|
||||
activeTab === 'colors'
|
||||
? 'border-brand-500 text-brand-600 dark:text-brand-400'
|
||||
: 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
|
||||
}`}
|
||||
>
|
||||
<PaletteIcon className="w-4 h-4 inline mr-2" />
|
||||
Colors
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setActiveTab('typography')}
|
||||
className={`px-4 py-2 font-medium border-b-2 transition-colors ${
|
||||
activeTab === 'typography'
|
||||
? 'border-brand-500 text-brand-600 dark:text-brand-400'
|
||||
: 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
|
||||
}`}
|
||||
>
|
||||
<TypeIcon className="w-4 h-4 inline mr-2" />
|
||||
Typography
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setActiveTab('spacing')}
|
||||
className={`px-4 py-2 font-medium border-b-2 transition-colors ${
|
||||
activeTab === 'spacing'
|
||||
? 'border-brand-500 text-brand-600 dark:text-brand-400'
|
||||
: 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
|
||||
}`}
|
||||
>
|
||||
<SettingsIcon className="w-4 h-4 inline mr-2" />
|
||||
Spacing
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Layout Tab */}
|
||||
{activeTab === 'layout' && (
|
||||
<Card className="p-6">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Label>Layout Style</Label>
|
||||
<SelectDropdown
|
||||
options={[
|
||||
{ value: 'default', label: 'Default' },
|
||||
{ value: 'wide', label: 'Wide' },
|
||||
{ value: 'narrow', label: 'Narrow' },
|
||||
{ value: 'fullwidth', label: 'Full Width' },
|
||||
]}
|
||||
value={customization.layout}
|
||||
onChange={(e) => updateCustomization({ layout: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Header Style</Label>
|
||||
<SelectDropdown
|
||||
options={[
|
||||
{ value: 'default', label: 'Default' },
|
||||
{ value: 'sticky', label: 'Sticky' },
|
||||
{ value: 'transparent', label: 'Transparent' },
|
||||
{ value: 'minimal', label: 'Minimal' },
|
||||
]}
|
||||
value={customization.headerStyle}
|
||||
onChange={(e) => updateCustomization({ headerStyle: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Footer Style</Label>
|
||||
<SelectDropdown
|
||||
options={[
|
||||
{ value: 'default', label: 'Default' },
|
||||
{ value: 'minimal', label: 'Minimal' },
|
||||
{ value: 'extended', label: 'Extended' },
|
||||
{ value: 'none', label: 'No Footer' },
|
||||
]}
|
||||
value={customization.footerStyle}
|
||||
onChange={(e) => updateCustomization({ footerStyle: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{customization.sidebarPosition !== undefined && (
|
||||
<div>
|
||||
<Label>Sidebar Position</Label>
|
||||
<SelectDropdown
|
||||
options={[
|
||||
{ value: 'left', label: 'Left' },
|
||||
{ value: 'right', label: 'Right' },
|
||||
{ value: 'none', label: 'No Sidebar' },
|
||||
]}
|
||||
value={customization.sidebarPosition}
|
||||
onChange={(e) => updateCustomization({ sidebarPosition: e.target.value as 'left' | 'right' | 'none' })}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Colors Tab */}
|
||||
{activeTab === 'colors' && (
|
||||
<Card className="p-6">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Label>Color Scheme</Label>
|
||||
<SelectDropdown
|
||||
options={[
|
||||
{ value: 'light', label: 'Light' },
|
||||
{ value: 'dark', label: 'Dark' },
|
||||
{ value: 'auto', label: 'Auto (System)' },
|
||||
]}
|
||||
value={customization.colorScheme}
|
||||
onChange={(e) => updateCustomization({ colorScheme: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Primary Color</Label>
|
||||
<div className="flex gap-2 mt-1">
|
||||
<input
|
||||
type="color"
|
||||
value={customization.customStyles?.primaryColor || '#3b82f6'}
|
||||
onChange={(e) =>
|
||||
updateCustomization({
|
||||
customStyles: { ...customization.customStyles, primaryColor: e.target.value },
|
||||
})
|
||||
}
|
||||
className="w-16 h-10 rounded border border-gray-300 dark:border-gray-700 cursor-pointer"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={customization.customStyles?.primaryColor || '#3b82f6'}
|
||||
onChange={(e) =>
|
||||
updateCustomization({
|
||||
customStyles: { ...customization.customStyles, primaryColor: e.target.value },
|
||||
})
|
||||
}
|
||||
placeholder="#3b82f6"
|
||||
className="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md dark:bg-gray-800 dark:text-white"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Background Color</Label>
|
||||
<div className="flex gap-2 mt-1">
|
||||
<input
|
||||
type="color"
|
||||
value={customization.customStyles?.backgroundColor || '#ffffff'}
|
||||
onChange={(e) =>
|
||||
updateCustomization({
|
||||
customStyles: { ...customization.customStyles, backgroundColor: e.target.value },
|
||||
})
|
||||
}
|
||||
className="w-16 h-10 rounded border border-gray-300 dark:border-gray-700 cursor-pointer"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={customization.customStyles?.backgroundColor || '#ffffff'}
|
||||
onChange={(e) =>
|
||||
updateCustomization({
|
||||
customStyles: { ...customization.customStyles, backgroundColor: e.target.value },
|
||||
})
|
||||
}
|
||||
placeholder="#ffffff"
|
||||
className="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md dark:bg-gray-800 dark:text-white"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Typography Tab */}
|
||||
{activeTab === 'typography' && (
|
||||
<Card className="p-6">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Label>Typography Style</Label>
|
||||
<SelectDropdown
|
||||
options={[
|
||||
{ value: 'sans-serif', label: 'Sans Serif' },
|
||||
{ value: 'serif', label: 'Serif' },
|
||||
{ value: 'monospace', label: 'Monospace' },
|
||||
{ value: 'custom', label: 'Custom' },
|
||||
]}
|
||||
value={customization.typography}
|
||||
onChange={(e) => updateCustomization({ typography: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Heading Font Size</Label>
|
||||
<SelectDropdown
|
||||
options={[
|
||||
{ value: 'small', label: 'Small' },
|
||||
{ value: 'medium', label: 'Medium' },
|
||||
{ value: 'large', label: 'Large' },
|
||||
{ value: 'xlarge', label: 'Extra Large' },
|
||||
]}
|
||||
value={customization.customStyles?.headingSize || 'medium'}
|
||||
onChange={(e) =>
|
||||
updateCustomization({
|
||||
customStyles: { ...customization.customStyles, headingSize: e.target.value },
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Body Font Size</Label>
|
||||
<SelectDropdown
|
||||
options={[
|
||||
{ value: 'small', label: 'Small (14px)' },
|
||||
{ value: 'medium', label: 'Medium (16px)' },
|
||||
{ value: 'large', label: 'Large (18px)' },
|
||||
]}
|
||||
value={customization.customStyles?.bodySize || 'medium'}
|
||||
onChange={(e) =>
|
||||
updateCustomization({
|
||||
customStyles: { ...customization.customStyles, bodySize: e.target.value },
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Spacing Tab */}
|
||||
{activeTab === 'spacing' && (
|
||||
<Card className="p-6">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Label>Content Spacing</Label>
|
||||
<SelectDropdown
|
||||
options={[
|
||||
{ value: 'compact', label: 'Compact' },
|
||||
{ value: 'normal', label: 'Normal' },
|
||||
{ value: 'relaxed', label: 'Relaxed' },
|
||||
{ value: 'spacious', label: 'Spacious' },
|
||||
]}
|
||||
value={customization.spacing}
|
||||
onChange={(e) => updateCustomization({ spacing: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Section Padding</Label>
|
||||
<SelectDropdown
|
||||
options={[
|
||||
{ value: 'none', label: 'None' },
|
||||
{ value: 'small', label: 'Small' },
|
||||
{ value: 'medium', label: 'Medium' },
|
||||
{ value: 'large', label: 'Large' },
|
||||
]}
|
||||
value={customization.customStyles?.sectionPadding || 'medium'}
|
||||
onChange={(e) =>
|
||||
updateCustomization({
|
||||
customStyles: { ...customization.customStyles, sectionPadding: e.target.value },
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Container Max Width</Label>
|
||||
<SelectDropdown
|
||||
options={[
|
||||
{ value: 'sm', label: 'Small (640px)' },
|
||||
{ value: 'md', label: 'Medium (768px)' },
|
||||
{ value: 'lg', label: 'Large (1024px)' },
|
||||
{ value: 'xl', label: 'Extra Large (1280px)' },
|
||||
{ value: 'full', label: 'Full Width' },
|
||||
]}
|
||||
value={customization.customStyles?.containerWidth || 'lg'}
|
||||
onChange={(e) =>
|
||||
updateCustomization({
|
||||
customStyles: { ...customization.customStyles, containerWidth: e.target.value },
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user