72495fec3e
- Added 8 pre-designed templates across 8 categories - Templates: Team Sport, Band Merch, Minimal Quote, Funny Cat, Gradient Vibes, Vintage Badge, Nature Lover, Tech Geek - Templates tab with category filter pills - Template preview cards with 2-column grid - One-click template application to canvas Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
57 lines
1.7 KiB
JavaScript
57 lines
1.7 KiB
JavaScript
import { useState } from 'react';
|
|
import { TEMPLATES, TEMPLATE_CATEGORIES } from '../../constants/templates';
|
|
|
|
export function TemplatesTab({ onApplyTemplate }) {
|
|
const [selectedCategory, setSelectedCategory] = useState('All');
|
|
|
|
const filteredTemplates =
|
|
selectedCategory === 'All'
|
|
? TEMPLATES
|
|
: TEMPLATES.filter((t) => t.category === selectedCategory);
|
|
|
|
return (
|
|
<div className="templates-tab">
|
|
<h3>Templates</h3>
|
|
<div className="category-pills">
|
|
{TEMPLATE_CATEGORIES.map((cat) => (
|
|
<button
|
|
key={cat}
|
|
className={`category-pill ${selectedCategory === cat ? 'active' : ''}`}
|
|
onClick={() => setSelectedCategory(cat)}
|
|
>
|
|
{cat}
|
|
</button>
|
|
))}
|
|
</div>
|
|
<div className="templates-grid">
|
|
{filteredTemplates.map((template) => (
|
|
<button
|
|
key={template.id}
|
|
className="template-card"
|
|
onClick={() => onApplyTemplate(template)}
|
|
>
|
|
<div className="template-preview">
|
|
{template.elements.slice(0, 3).map((el, i) => (
|
|
<span
|
|
key={i}
|
|
className="template-preview-element"
|
|
style={{
|
|
fontSize: el.type === 'text' && el.text.length === 1 ? '16px' : '8px',
|
|
color: el.fill,
|
|
}}
|
|
>
|
|
{el.text}
|
|
</span>
|
|
))}
|
|
</div>
|
|
<div className="template-info">
|
|
<span className="template-name">{template.name}</span>
|
|
<span className="template-category">{template.category}</span>
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|