Skip to content

Commit ee95f31

Browse files
DongDuong2001DongDuong2001
committed
Add ColorPaletteDemo component for cyberpunk palette
Introduces a new ColorPaletteDemo React component that showcases the Enhanced Cyberpunk color palette, including accent colors, status indicators, neon glow effects, and gradient backgrounds. This component visually demonstrates the application's color system for easier design reference and theme validation.
1 parent c5827e0 commit ee95f31

1 file changed

Lines changed: 217 additions & 0 deletions

File tree

‎components/color-palette-demo.tsx‎

Lines changed: 217 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,217 @@
1+
"use client"
2+
3+
import { Card } from "@/components/ui/card"
4+
import { Button } from "@/components/ui/button"
5+
import { Zap, Info, AlertTriangle, CheckCircle, XCircle, Sparkles } from "lucide-react"
6+
7+
/**
8+
* Color Palette Demo Component
9+
* Showcases the Enhanced Cyberpunk color palette
10+
*/
11+
export function ColorPaletteDemo() {
12+
return (
13+
<div className="space-y-6">
14+
{/* Accent Colors Showcase */}
15+
<Card className="p-6 border-border bg-card">
16+
<h3 className="text-lg font-bold mb-4 flex items-center gap-2">
17+
<Sparkles className="h-5 w-5 text-primary" />
18+
Enhanced Cyberpunk Palette
19+
</h3>
20+
21+
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
22+
{/* Neon Green */}
23+
<div className="space-y-2">
24+
<div
25+
className="h-20 border border-border flex items-center justify-center transition-all hover:shadow-[0_0_20px_var(--primary)]"
26+
style={{ backgroundColor: 'var(--primary)' }}
27+
>
28+
<Zap className="h-8 w-8" style={{ color: 'var(--primary-foreground)' }} />
29+
</div>
30+
<div className="text-xs">
31+
<div className="font-bold text-primary">Neon Green</div>
32+
<div className="text-muted-foreground">Primary</div>
33+
</div>
34+
</div>
35+
36+
{/* Cyan */}
37+
<div className="space-y-2">
38+
<div
39+
className="h-20 border border-border flex items-center justify-center transition-all hover:shadow-[0_0_20px_var(--accent-cyan)]"
40+
style={{ backgroundColor: 'var(--accent-cyan)' }}
41+
>
42+
<Info className="h-8 w-8" style={{ color: 'var(--background)' }} />
43+
</div>
44+
<div className="text-xs">
45+
<div className="font-bold" style={{ color: 'var(--accent-cyan)' }}>Electric Cyan</div>
46+
<div className="text-muted-foreground">Info</div>
47+
</div>
48+
</div>
49+
50+
{/* Purple */}
51+
<div className="space-y-2">
52+
<div
53+
className="h-20 border border-border flex items-center justify-center transition-all hover:shadow-[0_0_20px_var(--accent-purple)]"
54+
style={{ backgroundColor: 'var(--accent-purple)' }}
55+
>
56+
<Sparkles className="h-8 w-8" style={{ color: 'var(--background)' }} />
57+
</div>
58+
<div className="text-xs">
59+
<div className="font-bold" style={{ color: 'var(--accent-purple)' }}>Neon Purple</div>
60+
<div className="text-muted-foreground">Accent</div>
61+
</div>
62+
</div>
63+
64+
{/* Pink */}
65+
<div className="space-y-2">
66+
<div
67+
className="h-20 border border-border flex items-center justify-center transition-all hover:shadow-[0_0_20px_var(--accent-pink)]"
68+
style={{ backgroundColor: 'var(--accent-pink)' }}
69+
>
70+
<Zap className="h-8 w-8" style={{ color: 'var(--background)' }} />
71+
</div>
72+
<div className="text-xs">
73+
<div className="font-bold" style={{ color: 'var(--accent-pink)' }}>Neon Pink</div>
74+
<div className="text-muted-foreground">Highlight</div>
75+
</div>
76+
</div>
77+
78+
{/* Yellow */}
79+
<div className="space-y-2">
80+
<div
81+
className="h-20 border border-border flex items-center justify-center transition-all hover:shadow-[0_0_20px_var(--warning)]"
82+
style={{ backgroundColor: 'var(--warning)' }}
83+
>
84+
<AlertTriangle className="h-8 w-8" style={{ color: 'var(--background)' }} />
85+
</div>
86+
<div className="text-xs">
87+
<div className="font-bold" style={{ color: 'var(--warning)' }}>Electric Yellow</div>
88+
<div className="text-muted-foreground">Warning</div>
89+
</div>
90+
</div>
91+
92+
{/* Red */}
93+
<div className="space-y-2">
94+
<div
95+
className="h-20 border border-border flex items-center justify-center transition-all hover:shadow-[0_0_20px_var(--destructive)]"
96+
style={{ backgroundColor: 'var(--destructive)' }}
97+
>
98+
<XCircle className="h-8 w-8 text-destructive-foreground" />
99+
</div>
100+
<div className="text-xs">
101+
<div className="font-bold text-destructive">Neon Red</div>
102+
<div className="text-muted-foreground">Error</div>
103+
</div>
104+
</div>
105+
</div>
106+
</Card>
107+
108+
{/* Status Badges */}
109+
<Card className="p-6 border-border bg-card">
110+
<h3 className="text-lg font-bold mb-4">Status Indicators</h3>
111+
<div className="flex flex-wrap gap-3">
112+
<div className="px-4 py-2 border-0 font-medium text-sm flex items-center gap-2" style={{ backgroundColor: 'var(--success)', color: 'var(--success-foreground)' }}>
113+
<CheckCircle className="h-4 w-4" />
114+
Success
115+
</div>
116+
<div className="px-4 py-2 border-0 font-medium text-sm flex items-center gap-2" style={{ backgroundColor: 'var(--info)', color: 'var(--info-foreground)' }}>
117+
<Info className="h-4 w-4" />
118+
Info
119+
</div>
120+
<div className="px-4 py-2 border-0 font-medium text-sm flex items-center gap-2" style={{ backgroundColor: 'var(--warning)', color: 'var(--warning-foreground)' }}>
121+
<AlertTriangle className="h-4 w-4" />
122+
Warning
123+
</div>
124+
<div className="px-4 py-2 bg-destructive text-destructive-foreground border-0 font-medium text-sm flex items-center gap-2">
125+
<XCircle className="h-4 w-4" />
126+
Error
127+
</div>
128+
</div>
129+
</Card>
130+
131+
{/* Glow Effects */}
132+
<Card className="p-6 border-border bg-card">
133+
<h3 className="text-lg font-bold mb-4">Neon Glow Effects</h3>
134+
<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
135+
<Button
136+
className="border-0 font-bold transition-all hover:shadow-[0_0_30px_var(--primary)]"
137+
style={{ backgroundColor: 'var(--primary)', color: 'var(--primary-foreground)' }}
138+
>
139+
Green Glow
140+
</Button>
141+
<Button
142+
className="border-0 font-bold transition-all hover:shadow-[0_0_30px_var(--accent-cyan)]"
143+
style={{ backgroundColor: 'var(--accent-cyan)', color: 'var(--background)' }}
144+
>
145+
Cyan Glow
146+
</Button>
147+
<Button
148+
className="border-0 font-bold transition-all hover:shadow-[0_0_30px_var(--accent-purple)]"
149+
style={{ backgroundColor: 'var(--accent-purple)', color: 'var(--background)' }}
150+
>
151+
Purple Glow
152+
</Button>
153+
<Button
154+
className="border-0 font-bold transition-all hover:shadow-[0_0_30px_var(--accent-pink)]"
155+
style={{ backgroundColor: 'var(--accent-pink)', color: 'var(--background)' }}
156+
>
157+
Pink Glow
158+
</Button>
159+
<Button
160+
className="border-0 font-bold transition-all hover:shadow-[0_0_30px_var(--warning)]"
161+
style={{ backgroundColor: 'var(--warning)', color: 'var(--background)' }}
162+
>
163+
Yellow Glow
164+
</Button>
165+
<Button
166+
className="bg-destructive text-destructive-foreground border-0 font-bold transition-all hover:shadow-[0_0_30px_var(--destructive)]"
167+
>
168+
Red Glow
169+
</Button>
170+
</div>
171+
</Card>
172+
173+
{/* Gradient Backgrounds */}
174+
<Card className="p-6 border-border bg-card">
175+
<h3 className="text-lg font-bold mb-4">Cyberpunk Gradients</h3>
176+
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
177+
<div
178+
className="h-32 border border-border flex items-center justify-center font-bold text-lg p-4 text-center"
179+
style={{
180+
background: 'linear-gradient(to bottom right, var(--accent-cyan), var(--accent-purple))',
181+
color: 'var(--background)'
182+
}}
183+
>
184+
Cyan → Purple
185+
</div>
186+
<div
187+
className="h-32 border border-border flex items-center justify-center font-bold text-lg p-4 text-center"
188+
style={{
189+
background: 'linear-gradient(to bottom right, var(--primary), var(--accent-cyan))',
190+
color: 'var(--background)'
191+
}}
192+
>
193+
Green → Cyan
194+
</div>
195+
<div
196+
className="h-32 border border-border flex items-center justify-center font-bold text-lg p-4 text-center"
197+
style={{
198+
background: 'linear-gradient(to bottom right, var(--accent-pink), var(--accent-purple))',
199+
color: 'var(--background)'
200+
}}
201+
>
202+
Pink → Purple
203+
</div>
204+
<div
205+
className="h-32 border border-border flex items-center justify-center font-bold text-lg p-4 text-center"
206+
style={{
207+
background: 'linear-gradient(to right, var(--primary), var(--accent-cyan), var(--accent-purple), var(--accent-pink))',
208+
color: 'var(--background)'
209+
}}
210+
>
211+
Rainbow Cyberpunk
212+
</div>
213+
</div>
214+
</Card>
215+
</div>
216+
)
217+
}

0 commit comments

Comments
 (0)