khalidadil/apparel-designer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Phase 6: Template System

Browse Source 
- 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>
This commit is contained in:
Khalid A
2026-04-21 01:24:03 -05:00
parent 7bf9ce3a9c
commit 72495fec3e
6 changed files with 445 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

309
client/src/constants/templates.js Normal file
View File

@@ -0,0 +1,309 @@
// Pre-designed templates for t-shirt customization
export const TEMPLATES = [
{
id: 'team-sport',
name: 'Team Sport',
category: 'Sports',
description: 'Classic team jersey with number and text',
elements: [
{
type: 'text',
text: 'TEAM NAME',
x: 75,
y: 80,
fontSize: 28,
fontFamily: 'Impact',
fill: '#ffffff',
rotation: 0,
},
{
type: 'text',
text: '23',
x: 150,
y: 150,
fontSize: 72,
fontFamily: 'Impact',
fill: '#ffffff',
rotation: 0,
},
],
},
{
id: 'band-merch',
name: 'Band Merch',
category: 'Music',
description: 'Classic band t-shirt design',
elements: [
{
type: 'text',
text: 'BAND NAME',
x: 150,
y: 70,
fontSize: 32,
fontFamily: 'Georgia',
fill: '#fbbf24',
rotation: 0,
},
{
type: 'text',
text: 'WORLD TOUR 2026',
x: 150,
y: 110,
fontSize: 16,
fontFamily: 'Arial',
fill: '#ffffff',
rotation: 0,
},
{
type: 'text',
text: '🎸',
x: 150,
y: 180,
fontSize: 64,
fontFamily: 'Arial',
fill: '#ffffff',
rotation: 0,
},
],
},
{
id: 'minimal-quote',
name: 'Minimal Quote',
category: 'Quotes',
description: 'Simple centered quote design',
elements: [
{
type: 'text',
text: '"Be the change"',
x: 150,
y: 130,
fontSize: 24,
fontFamily: 'Georgia',
fill: '#1e293b',
rotation: 0,
},
{
type: 'text',
text: 'you wish to see',
x: 150,
y: 160,
fontSize: 18,
fontFamily: 'Arial',
fill: '#64748b',
rotation: 0,
},
],
},
{
id: 'funny-cat',
name: 'Funny Cat',
category: 'Animals',
description: 'Cute cat with funny text',
elements: [
{
type: 'text',
text: '😼',
x: 150,
y: 100,
fontSize: 80,
fontFamily: 'Arial',
fill: '#000000',
rotation: 0,
},
{
type: 'text',
text: 'I do what I want',
x: 150,
y: 200,
fontSize: 20,
fontFamily: 'Comic Sans MS',
fill: '#475569',
rotation: 0,
},
],
},
{
id: 'gradient-vibes',
name: 'Gradient Vibes',
category: 'Abstract',
description: 'Modern gradient text design',
elements: [
{
type: 'text',
text: 'GOOD',
x: 150,
y: 110,
fontSize: 48,
fontFamily: 'Impact',
fill: '#ec4899',
rotation: -5,
},
{
type: 'text',
text: 'VIBES',
x: 150,
y: 160,
fontSize: 48,
fontFamily: 'Impact',
fill: '#8b5cf6',
rotation: 5,
},
{
type: 'text',
text: '✨',
x: 80,
y: 90,
fontSize: 32,
fontFamily: 'Arial',
fill: '#fbbf24',
rotation: 0,
},
{
type: 'text',
text: '🌙',
x: 220,
y: 190,
fontSize: 32,
fontFamily: 'Arial',
fill: '#38bdf8',
rotation: 0,
},
],
},
{
id: 'vintage-badge',
name: 'Vintage Badge',
category: 'Vintage',
description: 'Retro badge style design',
elements: [
{
type: 'text',
text: 'EST.',
x: 150,
y: 80,
fontSize: 18,
fontFamily: 'Times New Roman',
fill: '#78716c',
rotation: 0,
},
{
type: 'text',
text: '2026',
x: 150,
y: 105,
fontSize: 36,
fontFamily: 'Times New Roman',
fill: '#78716c',
rotation: 0,
},
{
type: 'text',
text: 'AUTHENTIC',
x: 150,
y: 150,
fontSize: 24,
fontFamily: 'Times New Roman',
fill: '#78716c',
rotation: 0,
},
{
type: 'text',
text: 'QUALITY',
x: 150,
y: 180,
fontSize: 24,
fontFamily: 'Times New Roman',
fill: '#78716c',
rotation: 0,
},
],
},
{
id: 'nature-lover',
name: 'Nature Lover',
category: 'Nature',
description: 'Mountain and nature themed',
elements: [
{
type: 'text',
text: '🏔️',
x: 150,
y: 90,
fontSize: 56,
fontFamily: 'Arial',
fill: '#000000',
rotation: 0,
},
{
type: 'text',
text: 'ADVENTURE',
x: 150,
y: 160,
fontSize: 28,
fontFamily: 'Impact',
fill: '#059669',
rotation: 0,
},
{
type: 'text',
text: 'AWAITS',
x: 150,
y: 190,
fontSize: 20,
fontFamily: 'Arial',
fill: '#6b7280',
rotation: 0,
},
],
},
{
id: 'tech-geek',
name: 'Tech Geek',
category: 'Tech',
description: 'Programming themed design',
elements: [
{
type: 'text',
text: '</>',
x: 150,
y: 100,
fontSize: 64,
fontFamily: 'Courier New',
fill: '#3b82f6',
rotation: 0,
},
{
type: 'text',
text: 'Hello, World!',
x: 150,
y: 170,
fontSize: 20,
fontFamily: 'Courier New',
fill: '#1e293b',
rotation: 0,
},
{
type: 'text',
text: '// Code is life',
x: 150,
y: 195,
fontSize: 14,
fontFamily: 'Courier New',
fill: '#94a3b8',
rotation: 0,
},
],
},
];
export const TEMPLATE_CATEGORIES = [
'All',
'Sports',
'Music',
'Quotes',
'Animals',
'Abstract',
'Vintage',
'Nature',
'Tech',
];