feat: add design system demo page
Created comprehensive demo page at /design-system showcasing: - All 9 button variants with sizes - All 6 card variants - Badges (8 variants) and Tags (3 variants) - Avatars (4 variants, 6 sizes) with status indicators - AvatarGroup component - Typography with gradient text - Special effects (glows) - Animations (pulse, spin, shake) Route added to router as public page for easy testing. Access at: http://localhost:3000/design-system
This commit is contained in:
senke
parent
5f418a3d15
commit
d0436a3487
2 changed files with 329 additions and 0 deletions
318
apps/web/src/pages/DesignSystemDemo.tsx
Normal file
318
apps/web/src/pages/DesignSystemDemo.tsx
Normal file
|
|
@ -0,0 +1,318 @@
|
|||
import React from 'react';
|
||||
import { Button } from '../components/base/Button';
|
||||
import { Card, CardHeader, CardTitle, CardBody, CardFooter } from '../components/base/Card';
|
||||
import { Badge, Tag, Avatar, AvatarGroup } from '../components/base/Badge';
|
||||
|
||||
export const DesignSystemDemo = () => {
|
||||
return (
|
||||
<div className="page-veza">
|
||||
<div className="page-veza__content" style={{ background: 'var(--veza-void)', minHeight: '100vh', padding: '2rem' }}>
|
||||
<div className="container-veza">
|
||||
|
||||
{/* Header */}
|
||||
<div style={{ marginBottom: '3rem', textAlign: 'center' }}>
|
||||
<h1 style={{
|
||||
fontFamily: 'var(--font-display)',
|
||||
fontSize: 'var(--text-5xl)',
|
||||
background: 'var(--gradient-neon)',
|
||||
WebkitBackgroundClip: 'text',
|
||||
WebkitTextFillColor: 'transparent',
|
||||
marginBottom: '1rem'
|
||||
}}>
|
||||
VEZA Design System
|
||||
</h1>
|
||||
<p style={{
|
||||
fontFamily: 'var(--font-mono)',
|
||||
color: 'var(--veza-grey-300)',
|
||||
fontSize: 'var(--text-sm)',
|
||||
letterSpacing: '0.1em'
|
||||
}}>
|
||||
KŌDŌ × BOTANICAL × Spectre Astral
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Buttons Section */}
|
||||
<section className="section-veza--compact">
|
||||
<h2 style={{
|
||||
fontFamily: 'var(--font-heading)',
|
||||
fontSize: 'var(--text-2xl)',
|
||||
color: 'var(--veza-white)',
|
||||
marginBottom: '2rem',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.1em'
|
||||
}}>
|
||||
Buttons (9 Variants)
|
||||
</h2>
|
||||
<div className="grid-veza grid-veza--auto" style={{ gap: '1rem' }}>
|
||||
<Button variant="primary">Primary Neon</Button>
|
||||
<Button variant="secondary">Secondary</Button>
|
||||
<Button variant="gaming">Gaming XP</Button>
|
||||
<Button variant="terminal">Terminal</Button>
|
||||
<Button variant="nature">Nature</Button>
|
||||
<Button variant="graffiti">Graffiti</Button>
|
||||
<Button variant="ghost">Ghost</Button>
|
||||
<Button variant="outline">Outline</Button>
|
||||
<Button variant="destructive">Destructive</Button>
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: '1.5rem', display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
|
||||
<Button variant="primary" size="sm">Small</Button>
|
||||
<Button variant="primary" size="md">Medium</Button>
|
||||
<Button variant="primary" size="lg">Large</Button>
|
||||
<Button variant="primary" size="xl">Extra Large</Button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Cards Section */}
|
||||
<section className="section-veza--compact">
|
||||
<h2 style={{
|
||||
fontFamily: 'var(--font-heading)',
|
||||
fontSize: 'var(--text-2xl)',
|
||||
color: 'var(--veza-white)',
|
||||
marginBottom: '2rem',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.1em'
|
||||
}}>
|
||||
Cards (6 Variants)
|
||||
</h2>
|
||||
<div className="grid-veza grid-veza--3">
|
||||
<Card variant="default" interactive>
|
||||
<CardHeader>
|
||||
<CardTitle>Default Card</CardTitle>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<p style={{ color: 'var(--veza-grey-200)' }}>Dark cyber style with cyan glow on hover</p>
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
<Card variant="manga" interactive>
|
||||
<CardHeader>
|
||||
<CardTitle>Manga Card</CardTitle>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<p style={{ color: 'var(--veza-grey-200)' }}>Speed lines with clip-path cuts</p>
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
<Card variant="neon" interactive>
|
||||
<CardHeader>
|
||||
<CardTitle>Neon Card</CardTitle>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<p style={{ color: 'var(--veza-grey-200)' }}>Glowing borders with gradients</p>
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
<Card variant="nature" interactive>
|
||||
<CardHeader>
|
||||
<CardTitle>Nature Card</CardTitle>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<p style={{ color: 'var(--veza-text-muted)' }}>Organic botanical style</p>
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
<Card variant="elevated" interactive>
|
||||
<CardHeader>
|
||||
<CardTitle>Elevated Card</CardTitle>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<p style={{ color: 'var(--veza-text-muted)' }}>Floating with shadows</p>
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
<Card variant="glass" interactive>
|
||||
<CardHeader>
|
||||
<CardTitle>Glass Card</CardTitle>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<p style={{ color: 'var(--veza-text-muted)' }}>Glassmorphism effect</p>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Badges & Tags */}
|
||||
<section className="section-veza--compact">
|
||||
<h2 style={{
|
||||
fontFamily: 'var(--font-heading)',
|
||||
fontSize: 'var(--text-2xl)',
|
||||
color: 'var(--veza-white)',
|
||||
marginBottom: '2rem',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.1em'
|
||||
}}>
|
||||
Badges & Tags
|
||||
</h2>
|
||||
<div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap', marginBottom: '1.5rem' }}>
|
||||
<Badge variant="default">Default</Badge>
|
||||
<Badge variant="cyber" dot pulse>Cyber Live</Badge>
|
||||
<Badge variant="neon">Neon</Badge>
|
||||
<Badge variant="nature">Nature</Badge>
|
||||
<Badge variant="gaming">Gaming</Badge>
|
||||
<Badge variant="success">Success</Badge>
|
||||
<Badge variant="warning">Warning</Badge>
|
||||
<Badge variant="error">Error</Badge>
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
|
||||
<Tag variant="default">Default Tag</Tag>
|
||||
<Tag variant="cyber">Cyber Tag</Tag>
|
||||
<Tag variant="neon">Neon Tag</Tag>
|
||||
<Tag active>Active Tag</Tag>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Avatars */}
|
||||
<section className="section-veza--compact">
|
||||
<h2 style={{
|
||||
fontFamily: 'var(--font-heading)',
|
||||
fontSize: 'var(--text-2xl)',
|
||||
color: 'var(--veza-white)',
|
||||
marginBottom: '2rem',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.1em'
|
||||
}}>
|
||||
Avatars
|
||||
</h2>
|
||||
<div style={{ display: 'flex', gap: '2rem', flexWrap: 'wrap', alignItems: 'center' }}>
|
||||
<Avatar size="xs">XS</Avatar>
|
||||
<Avatar size="sm" status="online">SM</Avatar>
|
||||
<Avatar size="md" variant="cyber" status="away">MD</Avatar>
|
||||
<Avatar size="lg" variant="neon" status="busy">LG</Avatar>
|
||||
<Avatar size="xl" variant="gaming" status="online">XL</Avatar>
|
||||
<Avatar size="2xl">2XL</Avatar>
|
||||
</div>
|
||||
<div style={{ marginTop: '2rem' }}>
|
||||
<h3 style={{ color: 'var(--veza-grey-200)', marginBottom: '1rem' }}>Avatar Group</h3>
|
||||
<AvatarGroup>
|
||||
<Avatar size="md">JD</Avatar>
|
||||
<Avatar size="md" variant="cyber">AB</Avatar>
|
||||
<Avatar size="md" variant="neon">CD</Avatar>
|
||||
<Avatar size="md" variant="gaming">EF</Avatar>
|
||||
</AvatarGroup>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Typography */}
|
||||
<section className="section-veza--compact">
|
||||
<h2 style={{
|
||||
fontFamily: 'var(--font-heading)',
|
||||
fontSize: 'var(--text-2xl)',
|
||||
color: 'var(--veza-white)',
|
||||
marginBottom: '2rem',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.1em'
|
||||
}}>
|
||||
Typography & Gradients
|
||||
</h2>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
|
||||
<h1 className="text-gradient-neon" style={{
|
||||
fontFamily: 'var(--font-display)',
|
||||
fontSize: 'var(--text-4xl)',
|
||||
fontWeight: 900
|
||||
}}>
|
||||
Neon Gradient Text
|
||||
</h1>
|
||||
<h2 className="text-gradient-cyber" style={{
|
||||
fontFamily: 'var(--font-heading)',
|
||||
fontSize: 'var(--text-3xl)',
|
||||
fontWeight: 700
|
||||
}}>
|
||||
Cyber Gradient Text
|
||||
</h2>
|
||||
<h3 className="text-gradient-nature" style={{
|
||||
fontFamily: 'var(--font-serif)',
|
||||
fontSize: 'var(--text-2xl)',
|
||||
fontWeight: 600
|
||||
}}>
|
||||
Nature Gradient Text
|
||||
</h3>
|
||||
<p style={{
|
||||
fontFamily: 'var(--font-mono)',
|
||||
fontSize: 'var(--text-base)',
|
||||
color: 'var(--veza-terminal-green)',
|
||||
textShadow: 'var(--glow-terminal)'
|
||||
}}>
|
||||
$ Terminal monospace text with glow
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Effects Demo */}
|
||||
<section className="section-veza--compact">
|
||||
<h2 style={{
|
||||
fontFamily: 'var(--font-heading)',
|
||||
fontSize: 'var(--text-2xl)',
|
||||
color: 'var(--veza-white)',
|
||||
marginBottom: '2rem',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.1em'
|
||||
}}>
|
||||
Special Effects
|
||||
</h2>
|
||||
<div className="grid-veza grid-veza--3">
|
||||
<div className="glow-cyan" style={{
|
||||
padding: '2rem',
|
||||
background: 'var(--veza-graphite)',
|
||||
borderRadius: 'var(--radius-lg)',
|
||||
textAlign: 'center',
|
||||
color: 'var(--veza-cyan)'
|
||||
}}>
|
||||
Cyan Glow
|
||||
</div>
|
||||
<div className="glow-magenta" style={{
|
||||
padding: '2rem',
|
||||
background: 'var(--veza-graphite)',
|
||||
borderRadius: 'var(--radius-lg)',
|
||||
textAlign: 'center',
|
||||
color: 'var(--veza-magenta)'
|
||||
}}>
|
||||
Magenta Glow
|
||||
</div>
|
||||
<div className="glow-lime" style={{
|
||||
padding: '2rem',
|
||||
background: 'var(--veza-graphite)',
|
||||
borderRadius: 'var(--radius-lg)',
|
||||
textAlign: 'center',
|
||||
color: 'var(--veza-lime)'
|
||||
}}>
|
||||
Lime Glow
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Animations */}
|
||||
<section className="section-veza--compact">
|
||||
<h2 style={{
|
||||
fontFamily: 'var(--font-heading)',
|
||||
fontSize: 'var(--text-2xl)',
|
||||
color: 'var(--veza-white)',
|
||||
marginBottom: '2rem',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.1em'
|
||||
}}>
|
||||
Animations
|
||||
</h2>
|
||||
<div style={{ display: 'flex', gap: '2rem', flexWrap: 'wrap', alignItems: 'center' }}>
|
||||
<div className="animate-gentle-pulse" style={{
|
||||
width: '80px',
|
||||
height: '80px',
|
||||
background: 'var(--gradient-neon)',
|
||||
borderRadius: 'var(--radius-full)'
|
||||
}} />
|
||||
<div className="animate-logo-spin clip-hex" style={{
|
||||
width: '80px',
|
||||
height: '80px',
|
||||
background: 'var(--gradient-cyber)'
|
||||
}} />
|
||||
<Button variant="graffiti" onMouseEnter={(e) => e.currentTarget.classList.add('animate-graffiti-shake')}>
|
||||
Hover Me!
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -2,6 +2,7 @@ import { Routes, Route, Navigate } from 'react-router-dom';
|
|||
import { useAuth } from '@/features/auth/hooks/useAuth';
|
||||
import { ProtectedRoute } from '@/components/auth/ProtectedRoute';
|
||||
import { DashboardLayout } from '@/components/layout/DashboardLayout';
|
||||
import { DesignSystemDemo } from '@/pages/DesignSystemDemo';
|
||||
|
||||
import { ErrorBoundary } from '@/components/ErrorBoundary';
|
||||
import {
|
||||
|
|
@ -101,6 +102,16 @@ export const AppRouter = () => (
|
|||
}
|
||||
/>
|
||||
|
||||
{/* Design System Demo - Public route for testing */}
|
||||
<Route
|
||||
path="/design-system"
|
||||
element={
|
||||
<ErrorBoundary>
|
||||
<DesignSystemDemo />
|
||||
</ErrorBoundary>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* T0213: Public user profile page */}
|
||||
<Route
|
||||
path="/u/:username"
|
||||
|
|
|
|||
Loading…
Reference in a new issue