aural-ui 2.0.5 → 2.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/button/index.tsx +6 -0
- package/dist/components/drawer/Drawer.stories.tsx +1166 -0
- package/dist/components/drawer/index.tsx +205 -0
- package/dist/components/drawer/meta.ts +64 -0
- package/dist/icons/index.ts +1 -0
- package/dist/icons/star-icon/StarIcon.stories.tsx +963 -0
- package/dist/icons/star-icon/index.tsx +22 -0
- package/dist/icons/star-icon/meta.ts +8 -0
- package/dist/index.js +1 -1
- package/package.json +4 -3
|
@@ -0,0 +1,963 @@
|
|
|
1
|
+
import React from "react"
|
|
2
|
+
import type { Meta, StoryObj } from "@storybook/react"
|
|
3
|
+
|
|
4
|
+
import { StarIcon } from "."
|
|
5
|
+
|
|
6
|
+
const meta: Meta<typeof StarIcon> = {
|
|
7
|
+
title: "Icons/StarIcon",
|
|
8
|
+
component: StarIcon,
|
|
9
|
+
parameters: {
|
|
10
|
+
layout: "fullscreen",
|
|
11
|
+
backgrounds: {
|
|
12
|
+
default: "dark",
|
|
13
|
+
values: [
|
|
14
|
+
{ name: "dark", value: "#0a0a0a" },
|
|
15
|
+
{ name: "darker", value: "#000000" },
|
|
16
|
+
{ name: "light", value: "#ffffff" },
|
|
17
|
+
],
|
|
18
|
+
},
|
|
19
|
+
docs: {
|
|
20
|
+
page: () => (
|
|
21
|
+
<>
|
|
22
|
+
<style>
|
|
23
|
+
{`
|
|
24
|
+
.sbdocs-wrapper {
|
|
25
|
+
padding: 0 !important;
|
|
26
|
+
max-width: none !important;
|
|
27
|
+
background: transparent !important;
|
|
28
|
+
}
|
|
29
|
+
.sbdocs-content {
|
|
30
|
+
max-width: none !important;
|
|
31
|
+
padding: 0 !important;
|
|
32
|
+
margin: 0 !important;
|
|
33
|
+
background: transparent !important;
|
|
34
|
+
}
|
|
35
|
+
.docs-story {
|
|
36
|
+
background: transparent !important;
|
|
37
|
+
}
|
|
38
|
+
.sbdocs {
|
|
39
|
+
background: transparent !important;
|
|
40
|
+
}
|
|
41
|
+
body {
|
|
42
|
+
background: #0a0a0a !important;
|
|
43
|
+
}
|
|
44
|
+
#storybook-docs {
|
|
45
|
+
background: #0a0a0a !important;
|
|
46
|
+
}
|
|
47
|
+
.sbdocs-preview {
|
|
48
|
+
background: transparent !important;
|
|
49
|
+
border: none !important;
|
|
50
|
+
}
|
|
51
|
+
.sbdocs-h1, .sbdocs-h2, .sbdocs-h3, .sbdocs-h4, .sbdocs-h5, .sbdocs-h6 {
|
|
52
|
+
color: white !important;
|
|
53
|
+
}
|
|
54
|
+
.sbdocs-p, .sbdocs-li {
|
|
55
|
+
color: rgba(255, 255, 255, 0.7) !important;
|
|
56
|
+
}
|
|
57
|
+
.sbdocs-code {
|
|
58
|
+
background: rgba(255, 255, 255, 0.1) !important;
|
|
59
|
+
color: rgba(168, 85, 247, 1) !important;
|
|
60
|
+
border: 1px solid rgba(255, 255, 255, 0.1) !important;
|
|
61
|
+
}
|
|
62
|
+
.sbdocs-pre {
|
|
63
|
+
background: rgba(0, 0, 0, 0.4) !important;
|
|
64
|
+
border: 1px solid rgba(255, 255, 255, 0.1) !important;
|
|
65
|
+
}
|
|
66
|
+
.sbdocs-table {
|
|
67
|
+
background: rgba(255, 255, 255, 0.05) !important;
|
|
68
|
+
border: 1px solid rgba(255, 255, 255, 0.1) !important;
|
|
69
|
+
}
|
|
70
|
+
.sbdocs-table th {
|
|
71
|
+
background: rgba(255, 255, 255, 0.05) !important;
|
|
72
|
+
color: white !important;
|
|
73
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
|
|
74
|
+
}
|
|
75
|
+
.sbdocs-table td {
|
|
76
|
+
color: rgba(255, 255, 255, 0.7) !important;
|
|
77
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
|
|
78
|
+
}
|
|
79
|
+
`}
|
|
80
|
+
</style>
|
|
81
|
+
|
|
82
|
+
<div className="min-h-screen bg-gradient-to-br from-gray-900 via-yellow-900/20 to-gray-900">
|
|
83
|
+
{/* Header */}
|
|
84
|
+
<div className="relative overflow-hidden border-b border-white/10 bg-black/20 backdrop-blur-xl">
|
|
85
|
+
<div className="absolute inset-0 bg-gradient-to-r from-yellow-500/10 via-transparent to-orange-500/10" />
|
|
86
|
+
<div className="relative !mx-auto max-w-7xl px-6 py-16">
|
|
87
|
+
<div className="!space-y-6 text-center">
|
|
88
|
+
<div className="!mx-auto flex h-24 w-24 items-center justify-center rounded-2xl border border-yellow-500/30 bg-gradient-to-br from-yellow-500/20 to-orange-500/20">
|
|
89
|
+
<StarIcon className="h-12 w-12 text-yellow-400" />
|
|
90
|
+
</div>
|
|
91
|
+
<h1 className="!text-fm-primary text-5xl font-bold">
|
|
92
|
+
StarIcon
|
|
93
|
+
</h1>
|
|
94
|
+
<p className="!mx-auto max-w-3xl text-xl leading-relaxed !text-white/70">
|
|
95
|
+
A classic star icon for ratings, favorites, bookmarks, and
|
|
96
|
+
highlighting important content. Perfect for review systems,
|
|
97
|
+
wishlists, and premium features. Built with accessibility in
|
|
98
|
+
mind using Radix UI's AccessibleIcon wrapper.
|
|
99
|
+
</p>
|
|
100
|
+
|
|
101
|
+
{/* Stats */}
|
|
102
|
+
<div className="flex items-center justify-center gap-8 pt-8">
|
|
103
|
+
<div className="text-center">
|
|
104
|
+
<div className="text-3xl font-bold text-yellow-300">
|
|
105
|
+
Rate
|
|
106
|
+
</div>
|
|
107
|
+
<div className="text-sm text-white/60">
|
|
108
|
+
Reviews & ratings
|
|
109
|
+
</div>
|
|
110
|
+
</div>
|
|
111
|
+
<div className="h-8 w-px bg-white/20" />
|
|
112
|
+
<div className="text-center">
|
|
113
|
+
<div className="text-3xl font-bold text-orange-300">
|
|
114
|
+
Favorite
|
|
115
|
+
</div>
|
|
116
|
+
<div className="text-sm text-white/60">
|
|
117
|
+
Save & bookmark
|
|
118
|
+
</div>
|
|
119
|
+
</div>
|
|
120
|
+
<div className="h-8 w-px bg-white/20" />
|
|
121
|
+
<div className="text-center">
|
|
122
|
+
<div className="text-3xl font-bold text-amber-300">
|
|
123
|
+
Premium
|
|
124
|
+
</div>
|
|
125
|
+
<div className="text-sm text-white/60">
|
|
126
|
+
Highlight features
|
|
127
|
+
</div>
|
|
128
|
+
</div>
|
|
129
|
+
</div>
|
|
130
|
+
</div>
|
|
131
|
+
</div>
|
|
132
|
+
</div>
|
|
133
|
+
|
|
134
|
+
{/* Content */}
|
|
135
|
+
<div className="!mx-auto max-w-7xl !space-y-16 px-6 py-12">
|
|
136
|
+
{/* Quick Usage */}
|
|
137
|
+
<div className="!space-y-8">
|
|
138
|
+
<h2 className="text-center text-3xl font-bold !text-white">
|
|
139
|
+
Quick Start
|
|
140
|
+
</h2>
|
|
141
|
+
<div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
|
|
142
|
+
<div className="!space-y-4">
|
|
143
|
+
<h3 className="text-xl font-semibold !text-yellow-300">
|
|
144
|
+
Basic Usage
|
|
145
|
+
</h3>
|
|
146
|
+
<div className="rounded-lg bg-black/40 p-4">
|
|
147
|
+
<pre className="overflow-x-auto text-sm !text-green-300">
|
|
148
|
+
{`import { StarIcon } from "@icons/star-icon"
|
|
149
|
+
|
|
150
|
+
function RatingStar() {
|
|
151
|
+
return (
|
|
152
|
+
<button className="p-1 hover:scale-110 transition-transform">
|
|
153
|
+
<StarIcon className="h-5 w-5 text-yellow-400" />
|
|
154
|
+
</button>
|
|
155
|
+
)
|
|
156
|
+
}`}
|
|
157
|
+
</pre>
|
|
158
|
+
</div>
|
|
159
|
+
</div>
|
|
160
|
+
|
|
161
|
+
<div className="!space-y-4">
|
|
162
|
+
<h3 className="text-xl font-semibold !text-yellow-300">
|
|
163
|
+
Live Preview
|
|
164
|
+
</h3>
|
|
165
|
+
<div className="flex h-32 items-center justify-center rounded-lg border border-white/10 bg-white/5">
|
|
166
|
+
<button className="rounded-lg border border-yellow-500/20 bg-yellow-500/10 p-3 transition-colors hover:bg-yellow-500/20">
|
|
167
|
+
<StarIcon className="h-6 w-6 text-yellow-400" />
|
|
168
|
+
</button>
|
|
169
|
+
</div>
|
|
170
|
+
</div>
|
|
171
|
+
</div>
|
|
172
|
+
</div>
|
|
173
|
+
|
|
174
|
+
{/* Props Documentation */}
|
|
175
|
+
<div className="!space-y-8">
|
|
176
|
+
<h2 className="text-center text-3xl font-bold !text-white">
|
|
177
|
+
Props & Configuration
|
|
178
|
+
</h2>
|
|
179
|
+
|
|
180
|
+
<div className="overflow-hidden rounded-lg border border-white/10 bg-white/5">
|
|
181
|
+
<div className="bg-white/5 p-4">
|
|
182
|
+
<h3 className="text-xl font-semibold !text-white">Props</h3>
|
|
183
|
+
</div>
|
|
184
|
+
<table className="!my-0 w-full">
|
|
185
|
+
<thead className="bg-white/5">
|
|
186
|
+
<tr className="border-b border-white/10">
|
|
187
|
+
<th className="px-6 py-4 text-left text-sm font-semibold !text-white">
|
|
188
|
+
Prop
|
|
189
|
+
</th>
|
|
190
|
+
<th className="px-6 py-4 text-left text-sm font-semibold !text-white">
|
|
191
|
+
Type
|
|
192
|
+
</th>
|
|
193
|
+
<th className="px-6 py-4 text-left text-sm font-semibold !text-white">
|
|
194
|
+
Default
|
|
195
|
+
</th>
|
|
196
|
+
<th className="px-6 py-4 text-left text-sm font-semibold !text-white">
|
|
197
|
+
Description
|
|
198
|
+
</th>
|
|
199
|
+
</tr>
|
|
200
|
+
</thead>
|
|
201
|
+
<tbody>
|
|
202
|
+
<tr className="border-b border-white/5">
|
|
203
|
+
<td className="px-6 py-4 font-mono text-sm !text-yellow-300">
|
|
204
|
+
width
|
|
205
|
+
</td>
|
|
206
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
207
|
+
number | string
|
|
208
|
+
</td>
|
|
209
|
+
<td className="px-6 py-4 text-sm !text-white/50">24</td>
|
|
210
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
211
|
+
Width of the icon in pixels
|
|
212
|
+
</td>
|
|
213
|
+
</tr>
|
|
214
|
+
<tr className="border-b border-white/5 !bg-black/10">
|
|
215
|
+
<td className="px-6 py-4 font-mono text-sm !text-yellow-300">
|
|
216
|
+
height
|
|
217
|
+
</td>
|
|
218
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
219
|
+
number | string
|
|
220
|
+
</td>
|
|
221
|
+
<td className="px-6 py-4 text-sm !text-white/50">24</td>
|
|
222
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
223
|
+
Height of the icon in pixels
|
|
224
|
+
</td>
|
|
225
|
+
</tr>
|
|
226
|
+
<tr className="border-b border-white/5">
|
|
227
|
+
<td className="px-6 py-4 font-mono text-sm !text-yellow-300">
|
|
228
|
+
stroke
|
|
229
|
+
</td>
|
|
230
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
231
|
+
string
|
|
232
|
+
</td>
|
|
233
|
+
<td className="px-6 py-4 text-sm !text-white/50">
|
|
234
|
+
currentColor
|
|
235
|
+
</td>
|
|
236
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
237
|
+
Stroke color of the star
|
|
238
|
+
</td>
|
|
239
|
+
</tr>
|
|
240
|
+
<tr className="border-b border-white/5 !bg-black/10">
|
|
241
|
+
<td className="px-6 py-4 font-mono text-sm !text-yellow-300">
|
|
242
|
+
strokeWidth
|
|
243
|
+
</td>
|
|
244
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
245
|
+
string | number
|
|
246
|
+
</td>
|
|
247
|
+
<td className="px-6 py-4 text-sm !text-white/50">
|
|
248
|
+
1.5
|
|
249
|
+
</td>
|
|
250
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
251
|
+
Width of the stroke
|
|
252
|
+
</td>
|
|
253
|
+
</tr>
|
|
254
|
+
<tr className="border-b border-white/5">
|
|
255
|
+
<td className="px-6 py-4 font-mono text-sm !text-yellow-300">
|
|
256
|
+
className
|
|
257
|
+
</td>
|
|
258
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
259
|
+
string
|
|
260
|
+
</td>
|
|
261
|
+
<td className="px-6 py-4 text-sm !text-white/50">-</td>
|
|
262
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
263
|
+
CSS classes for styling
|
|
264
|
+
</td>
|
|
265
|
+
</tr>
|
|
266
|
+
<tr className="!bg-black/10">
|
|
267
|
+
<td className="px-6 py-4 font-mono text-sm !text-yellow-300">
|
|
268
|
+
...svgProps
|
|
269
|
+
</td>
|
|
270
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
271
|
+
SVGProps
|
|
272
|
+
</td>
|
|
273
|
+
<td className="px-6 py-4 text-sm !text-white/50">-</td>
|
|
274
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
275
|
+
All standard SVG element props
|
|
276
|
+
</td>
|
|
277
|
+
</tr>
|
|
278
|
+
</tbody>
|
|
279
|
+
</table>
|
|
280
|
+
</div>
|
|
281
|
+
</div>
|
|
282
|
+
|
|
283
|
+
{/* Size Variations */}
|
|
284
|
+
<div className="!space-y-8">
|
|
285
|
+
<h2 className="text-center text-3xl font-bold !text-white">
|
|
286
|
+
Size Variations
|
|
287
|
+
</h2>
|
|
288
|
+
<div className="rounded-lg border border-white/10 bg-white/5 p-8">
|
|
289
|
+
<div className="!space-y-6">
|
|
290
|
+
<div className="grid grid-cols-1 gap-8 md:grid-cols-2">
|
|
291
|
+
<div className="!space-y-4">
|
|
292
|
+
<h3 className="text-lg font-semibold !text-yellow-300">
|
|
293
|
+
Standard Sizes
|
|
294
|
+
</h3>
|
|
295
|
+
<div className="flex items-end gap-6 rounded-lg bg-black/20 p-6">
|
|
296
|
+
<div className="text-center">
|
|
297
|
+
<StarIcon className="!mx-auto mb-2 h-3 w-3 text-yellow-400" />
|
|
298
|
+
<span className="text-xs text-white/60">12px</span>
|
|
299
|
+
</div>
|
|
300
|
+
<div className="text-center">
|
|
301
|
+
<StarIcon className="!mx-auto mb-2 h-4 w-4 text-yellow-400" />
|
|
302
|
+
<span className="text-xs text-white/60">16px</span>
|
|
303
|
+
</div>
|
|
304
|
+
<div className="text-center">
|
|
305
|
+
<StarIcon className="!mx-auto mb-2 h-5 w-5 text-yellow-400" />
|
|
306
|
+
<span className="text-xs text-white/60">20px</span>
|
|
307
|
+
</div>
|
|
308
|
+
<div className="text-center">
|
|
309
|
+
<StarIcon className="!mx-auto mb-2 h-6 w-6 text-yellow-400" />
|
|
310
|
+
<span className="text-xs text-white/60">24px</span>
|
|
311
|
+
</div>
|
|
312
|
+
<div className="text-center">
|
|
313
|
+
<StarIcon className="!mx-auto mb-2 h-8 w-8 text-yellow-400" />
|
|
314
|
+
<span className="text-xs text-white/60">32px</span>
|
|
315
|
+
</div>
|
|
316
|
+
<div className="text-center">
|
|
317
|
+
<StarIcon className="!mx-auto mb-2 h-12 w-12 text-yellow-400" />
|
|
318
|
+
<span className="text-xs text-white/60">48px</span>
|
|
319
|
+
</div>
|
|
320
|
+
</div>
|
|
321
|
+
</div>
|
|
322
|
+
|
|
323
|
+
<div className="!space-y-4">
|
|
324
|
+
<h3 className="text-lg font-semibold !text-yellow-300">
|
|
325
|
+
Code Example
|
|
326
|
+
</h3>
|
|
327
|
+
<div className="rounded-lg bg-black/40 p-4">
|
|
328
|
+
<pre className="overflow-x-auto text-sm !text-cyan-300">
|
|
329
|
+
{`// Small (16px)
|
|
330
|
+
<StarIcon className="h-4 w-4" />
|
|
331
|
+
|
|
332
|
+
// Medium (24px)
|
|
333
|
+
<StarIcon className="h-6 w-6" />
|
|
334
|
+
|
|
335
|
+
// Large (32px)
|
|
336
|
+
<StarIcon className="h-8 w-8" />
|
|
337
|
+
|
|
338
|
+
// Custom size
|
|
339
|
+
<StarIcon width={40} height={40} />`}
|
|
340
|
+
</pre>
|
|
341
|
+
</div>
|
|
342
|
+
</div>
|
|
343
|
+
</div>
|
|
344
|
+
</div>
|
|
345
|
+
</div>
|
|
346
|
+
</div>
|
|
347
|
+
|
|
348
|
+
{/* Color Variations */}
|
|
349
|
+
<div className="!space-y-8">
|
|
350
|
+
<h2 className="text-center text-3xl font-bold !text-white">
|
|
351
|
+
Color Variations
|
|
352
|
+
</h2>
|
|
353
|
+
<div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
|
|
354
|
+
<div className="!space-y-4">
|
|
355
|
+
<h3 className="text-lg font-semibold !text-yellow-300">
|
|
356
|
+
Semantic Colors
|
|
357
|
+
</h3>
|
|
358
|
+
<div className="!space-y-4 rounded-lg border border-white/10 bg-white/5 p-6">
|
|
359
|
+
<div className="flex items-center gap-4">
|
|
360
|
+
<StarIcon className="h-6 w-6 text-yellow-400" />
|
|
361
|
+
<div>
|
|
362
|
+
<div className="text-sm font-medium text-white">
|
|
363
|
+
Rating/Favorite
|
|
364
|
+
</div>
|
|
365
|
+
<div className="text-xs text-white/60">
|
|
366
|
+
text-yellow-400
|
|
367
|
+
</div>
|
|
368
|
+
</div>
|
|
369
|
+
</div>
|
|
370
|
+
<div className="flex items-center gap-4">
|
|
371
|
+
<StarIcon className="h-6 w-6 text-orange-400" />
|
|
372
|
+
<div>
|
|
373
|
+
<div className="text-sm font-medium text-white">
|
|
374
|
+
Premium/Highlight
|
|
375
|
+
</div>
|
|
376
|
+
<div className="text-xs text-white/60">
|
|
377
|
+
text-orange-400
|
|
378
|
+
</div>
|
|
379
|
+
</div>
|
|
380
|
+
</div>
|
|
381
|
+
<div className="flex items-center gap-4">
|
|
382
|
+
<StarIcon className="h-6 w-6 text-gray-400" />
|
|
383
|
+
<div>
|
|
384
|
+
<div className="text-sm font-medium text-white">
|
|
385
|
+
Inactive/Empty
|
|
386
|
+
</div>
|
|
387
|
+
<div className="text-xs text-white/60">
|
|
388
|
+
text-gray-400
|
|
389
|
+
</div>
|
|
390
|
+
</div>
|
|
391
|
+
</div>
|
|
392
|
+
<div className="flex items-center gap-4">
|
|
393
|
+
<StarIcon className="h-6 w-6 text-white/60" />
|
|
394
|
+
<div>
|
|
395
|
+
<div className="text-sm font-medium text-white">
|
|
396
|
+
Muted
|
|
397
|
+
</div>
|
|
398
|
+
<div className="text-xs text-white/60">
|
|
399
|
+
text-white/60
|
|
400
|
+
</div>
|
|
401
|
+
</div>
|
|
402
|
+
</div>
|
|
403
|
+
</div>
|
|
404
|
+
</div>
|
|
405
|
+
|
|
406
|
+
<div className="!space-y-4">
|
|
407
|
+
<h3 className="text-lg font-semibold !text-yellow-300">
|
|
408
|
+
Custom Colors
|
|
409
|
+
</h3>
|
|
410
|
+
<div className="rounded-lg bg-black/40 p-4">
|
|
411
|
+
<pre className="overflow-x-auto text-sm !text-green-300">
|
|
412
|
+
{`// Using Tailwind classes
|
|
413
|
+
<StarIcon className="h-6 w-6 text-yellow-400" />
|
|
414
|
+
<StarIcon className="h-6 w-6 text-orange-500" />
|
|
415
|
+
|
|
416
|
+
// Using CSS custom properties
|
|
417
|
+
<StarIcon
|
|
418
|
+
className="h-6 w-6"
|
|
419
|
+
style={{ color: 'var(--color-star)' }}
|
|
420
|
+
/>
|
|
421
|
+
|
|
422
|
+
// Direct stroke prop
|
|
423
|
+
<StarIcon
|
|
424
|
+
width={24}
|
|
425
|
+
height={24}
|
|
426
|
+
stroke="#fbbf24"
|
|
427
|
+
/>`}
|
|
428
|
+
</pre>
|
|
429
|
+
</div>
|
|
430
|
+
</div>
|
|
431
|
+
</div>
|
|
432
|
+
</div>
|
|
433
|
+
|
|
434
|
+
{/* Usage Examples */}
|
|
435
|
+
<div className="!space-y-8">
|
|
436
|
+
<h2 className="text-center text-3xl font-bold !text-white">
|
|
437
|
+
Usage Examples
|
|
438
|
+
</h2>
|
|
439
|
+
|
|
440
|
+
<div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
|
|
441
|
+
{/* Rating System */}
|
|
442
|
+
<div className="!space-y-4">
|
|
443
|
+
<h3 className="text-lg font-semibold !text-yellow-300">
|
|
444
|
+
Rating System
|
|
445
|
+
</h3>
|
|
446
|
+
<div className="!space-y-4">
|
|
447
|
+
<div className="flex gap-1">
|
|
448
|
+
{[1, 2, 3, 4, 5].map((star) => (
|
|
449
|
+
<button
|
|
450
|
+
key={star}
|
|
451
|
+
className="p-1 transition-transform hover:scale-110"
|
|
452
|
+
>
|
|
453
|
+
<StarIcon className="h-5 w-5 text-yellow-400" />
|
|
454
|
+
</button>
|
|
455
|
+
))}
|
|
456
|
+
</div>
|
|
457
|
+
<div className="rounded-lg bg-black/40 p-4">
|
|
458
|
+
<pre className="overflow-x-auto text-sm !text-green-300">
|
|
459
|
+
{`// 5-star rating system
|
|
460
|
+
{[1, 2, 3, 4, 5].map((star) => (
|
|
461
|
+
<button key={star} className="p-1 hover:scale-110 transition-transform">
|
|
462
|
+
<StarIcon className="h-5 w-5 text-yellow-400" />
|
|
463
|
+
</button>
|
|
464
|
+
))}`}
|
|
465
|
+
</pre>
|
|
466
|
+
</div>
|
|
467
|
+
</div>
|
|
468
|
+
</div>
|
|
469
|
+
|
|
470
|
+
{/* Favorite Button */}
|
|
471
|
+
<div className="!space-y-4">
|
|
472
|
+
<h3 className="text-lg font-semibold !text-yellow-300">
|
|
473
|
+
Favorite Button
|
|
474
|
+
</h3>
|
|
475
|
+
<div className="!space-y-4">
|
|
476
|
+
<div className="flex gap-4">
|
|
477
|
+
<button className="flex items-center gap-2 rounded-lg border border-yellow-500/30 bg-yellow-500/20 px-4 py-2 text-yellow-200 transition-colors hover:bg-yellow-500/30">
|
|
478
|
+
<StarIcon className="h-4 w-4" />
|
|
479
|
+
Add to Favorites
|
|
480
|
+
</button>
|
|
481
|
+
<button className="rounded-lg p-2 transition-colors hover:bg-white/10">
|
|
482
|
+
<StarIcon className="h-5 w-5 text-yellow-400" />
|
|
483
|
+
</button>
|
|
484
|
+
</div>
|
|
485
|
+
<div className="rounded-lg bg-black/40 p-4">
|
|
486
|
+
<pre className="overflow-x-auto text-sm !text-green-300">
|
|
487
|
+
{`// Favorite button with text
|
|
488
|
+
<button className="flex items-center gap-2 bg-yellow-500/20 border border-yellow-500/30 px-4 py-2 rounded-lg">
|
|
489
|
+
<StarIcon className="h-4 w-4" />
|
|
490
|
+
Add to Favorites
|
|
491
|
+
</button>
|
|
492
|
+
|
|
493
|
+
// Icon-only favorite button
|
|
494
|
+
<button className="p-2 hover:bg-white/10 rounded-lg transition-colors">
|
|
495
|
+
<StarIcon className="h-5 w-5 text-yellow-400" />
|
|
496
|
+
</button>`}
|
|
497
|
+
</pre>
|
|
498
|
+
</div>
|
|
499
|
+
</div>
|
|
500
|
+
</div>
|
|
501
|
+
|
|
502
|
+
{/* Premium Feature */}
|
|
503
|
+
<div className="!space-y-4">
|
|
504
|
+
<h3 className="text-lg font-semibold !text-yellow-300">
|
|
505
|
+
Premium Feature
|
|
506
|
+
</h3>
|
|
507
|
+
<div className="!space-y-4">
|
|
508
|
+
<div className="rounded-lg border border-orange-500/30 bg-orange-500/10 p-4">
|
|
509
|
+
<div className="flex items-center gap-3">
|
|
510
|
+
<StarIcon className="h-5 w-5 text-orange-400" />
|
|
511
|
+
<div>
|
|
512
|
+
<h4 className="font-medium text-white">
|
|
513
|
+
Premium Feature
|
|
514
|
+
</h4>
|
|
515
|
+
<p className="text-sm text-white/70">
|
|
516
|
+
Unlock advanced analytics
|
|
517
|
+
</p>
|
|
518
|
+
</div>
|
|
519
|
+
</div>
|
|
520
|
+
</div>
|
|
521
|
+
<div className="rounded-lg bg-black/40 p-4">
|
|
522
|
+
<pre className="overflow-x-auto text-sm !text-green-300">
|
|
523
|
+
{`// Premium feature indicator
|
|
524
|
+
<div className="flex items-center gap-3 border border-orange-500/30 bg-orange-500/10 p-4 rounded-lg">
|
|
525
|
+
<StarIcon className="h-5 w-5 text-orange-400" />
|
|
526
|
+
<div>
|
|
527
|
+
<h4 className="font-medium text-white">Premium Feature</h4>
|
|
528
|
+
<p className="text-sm text-white/70">Unlock advanced analytics</p>
|
|
529
|
+
</div>
|
|
530
|
+
</div>`}
|
|
531
|
+
</pre>
|
|
532
|
+
</div>
|
|
533
|
+
</div>
|
|
534
|
+
</div>
|
|
535
|
+
|
|
536
|
+
{/* Bookmark */}
|
|
537
|
+
<div className="!space-y-4">
|
|
538
|
+
<h3 className="text-lg font-semibold !text-yellow-300">
|
|
539
|
+
Bookmark
|
|
540
|
+
</h3>
|
|
541
|
+
<div className="!space-y-4">
|
|
542
|
+
<div className="flex items-center justify-between rounded-lg border border-white/10 bg-white/5 p-4">
|
|
543
|
+
<div>
|
|
544
|
+
<h4 className="font-medium text-white">
|
|
545
|
+
Article Title
|
|
546
|
+
</h4>
|
|
547
|
+
<p className="text-sm text-white/70">
|
|
548
|
+
Brief description...
|
|
549
|
+
</p>
|
|
550
|
+
</div>
|
|
551
|
+
<button className="rounded p-1 text-white/60 hover:bg-white/10 hover:text-yellow-400">
|
|
552
|
+
<StarIcon className="h-4 w-4" />
|
|
553
|
+
</button>
|
|
554
|
+
</div>
|
|
555
|
+
<div className="rounded-lg bg-black/40 p-4">
|
|
556
|
+
<pre className="overflow-x-auto text-sm !text-green-300">
|
|
557
|
+
{`// Bookmark button in list item
|
|
558
|
+
<div className="flex items-center justify-between border border-white/10 bg-white/5 p-4 rounded-lg">
|
|
559
|
+
<div>
|
|
560
|
+
<h4 className="font-medium text-white">Article Title</h4>
|
|
561
|
+
<p className="text-sm text-white/70">Brief description...</p>
|
|
562
|
+
</div>
|
|
563
|
+
<button className="rounded p-1 text-white/60 hover:bg-white/10 hover:text-yellow-400">
|
|
564
|
+
<StarIcon className="h-4 w-4" />
|
|
565
|
+
</button>
|
|
566
|
+
</div>`}
|
|
567
|
+
</pre>
|
|
568
|
+
</div>
|
|
569
|
+
</div>
|
|
570
|
+
</div>
|
|
571
|
+
</div>
|
|
572
|
+
</div>
|
|
573
|
+
|
|
574
|
+
{/* Accessibility */}
|
|
575
|
+
<div className="!space-y-8">
|
|
576
|
+
<h2 className="text-center text-3xl font-bold !text-white">
|
|
577
|
+
Accessibility Features
|
|
578
|
+
</h2>
|
|
579
|
+
<div className="grid grid-cols-1 gap-8 md:grid-cols-2">
|
|
580
|
+
<div className="!space-y-4 rounded-lg border border-white/10 bg-white/5 p-6">
|
|
581
|
+
<h3 className="text-lg font-semibold !text-green-300">
|
|
582
|
+
✅ Built-in Features
|
|
583
|
+
</h3>
|
|
584
|
+
<ul className="!space-y-2 text-sm !text-white/70">
|
|
585
|
+
<li className="!text-white/70">
|
|
586
|
+
Uses Radix UI AccessibleIcon wrapper
|
|
587
|
+
</li>
|
|
588
|
+
<li className="!text-white/70">
|
|
589
|
+
Provides screen reader label "Star icon"
|
|
590
|
+
</li>
|
|
591
|
+
<li className="!text-white/70">
|
|
592
|
+
Supports keyboard navigation when interactive
|
|
593
|
+
</li>
|
|
594
|
+
<li className="!text-white/70">
|
|
595
|
+
Maintains proper color contrast ratios
|
|
596
|
+
</li>
|
|
597
|
+
<li className="!text-white/70">
|
|
598
|
+
Scales with user's font size preferences
|
|
599
|
+
</li>
|
|
600
|
+
</ul>
|
|
601
|
+
</div>
|
|
602
|
+
|
|
603
|
+
<div className="!space-y-4 rounded-lg border border-white/10 bg-white/5 p-6">
|
|
604
|
+
<h3 className="text-lg font-semibold !text-yellow-300">
|
|
605
|
+
💡 Best Practices
|
|
606
|
+
</h3>
|
|
607
|
+
<ul className="!space-y-2 text-sm !text-white/70">
|
|
608
|
+
<li className="!text-white/70">
|
|
609
|
+
Always provide descriptive button labels for star
|
|
610
|
+
actions
|
|
611
|
+
</li>
|
|
612
|
+
<li className="!text-white/70">
|
|
613
|
+
Use consistent placement for rating and favorite buttons
|
|
614
|
+
</li>
|
|
615
|
+
<li className="!text-white/70">
|
|
616
|
+
Ensure sufficient touch target size (44px minimum)
|
|
617
|
+
</li>
|
|
618
|
+
<li className="!text-white/70">
|
|
619
|
+
Provide visible focus states for keyboard users
|
|
620
|
+
</li>
|
|
621
|
+
<li className="!text-white/70">
|
|
622
|
+
Consider color-blind users with alternative indicators
|
|
623
|
+
</li>
|
|
624
|
+
</ul>
|
|
625
|
+
</div>
|
|
626
|
+
</div>
|
|
627
|
+
|
|
628
|
+
<div className="rounded-lg border border-white/10 bg-white/5 p-6">
|
|
629
|
+
<h3 className="mb-4 text-lg font-semibold !text-purple-300">
|
|
630
|
+
Proper ARIA Implementation
|
|
631
|
+
</h3>
|
|
632
|
+
<div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
|
|
633
|
+
<div className="rounded-lg bg-black/40 p-4">
|
|
634
|
+
<pre className="overflow-x-auto text-sm !text-cyan-300">
|
|
635
|
+
{`// Rating star with ARIA
|
|
636
|
+
<button
|
|
637
|
+
aria-label="Rate 4 stars"
|
|
638
|
+
className="p-1 hover:scale-110 transition-transform"
|
|
639
|
+
>
|
|
640
|
+
<StarIcon className="h-5 w-5 text-yellow-400" />
|
|
641
|
+
</button>
|
|
642
|
+
|
|
643
|
+
// Favorite button with ARIA
|
|
644
|
+
<button
|
|
645
|
+
aria-label="Add to favorites"
|
|
646
|
+
aria-pressed="false"
|
|
647
|
+
className="p-2 hover:bg-white/10 rounded-lg"
|
|
648
|
+
>
|
|
649
|
+
<StarIcon className="h-5 w-5 text-yellow-400" />
|
|
650
|
+
</button>
|
|
651
|
+
|
|
652
|
+
// Premium indicator with ARIA
|
|
653
|
+
<div role="status" aria-label="Premium feature">
|
|
654
|
+
<StarIcon className="h-5 w-5 text-orange-400" />
|
|
655
|
+
<span className="sr-only">Premium feature</span>
|
|
656
|
+
</div>`}
|
|
657
|
+
</pre>
|
|
658
|
+
</div>
|
|
659
|
+
<div className="!space-y-4">
|
|
660
|
+
<p className="text-sm !text-white/70">
|
|
661
|
+
When using StarIcon for interactive elements, provide
|
|
662
|
+
clear context about the rating level or action being
|
|
663
|
+
performed.
|
|
664
|
+
</p>
|
|
665
|
+
<div className="rounded-lg border border-yellow-500/20 bg-yellow-500/10 p-4">
|
|
666
|
+
<div className="flex items-center gap-2 text-sm text-yellow-200">
|
|
667
|
+
<StarIcon className="h-4 w-4" />
|
|
668
|
+
<span>
|
|
669
|
+
Screen readers need context about rating levels and
|
|
670
|
+
favorite states
|
|
671
|
+
</span>
|
|
672
|
+
</div>
|
|
673
|
+
</div>
|
|
674
|
+
</div>
|
|
675
|
+
</div>
|
|
676
|
+
</div>
|
|
677
|
+
</div>
|
|
678
|
+
|
|
679
|
+
{/* Related Icons */}
|
|
680
|
+
<div className="!space-y-8">
|
|
681
|
+
<h2 className="text-center text-3xl font-bold !text-white">
|
|
682
|
+
Related Icons
|
|
683
|
+
</h2>
|
|
684
|
+
<div className="grid grid-cols-2 gap-6 md:grid-cols-4">
|
|
685
|
+
<div className="!space-y-3 rounded-lg border border-white/10 bg-white/5 p-4 text-center">
|
|
686
|
+
<div className="!mx-auto flex h-12 w-12 items-center justify-center rounded-lg bg-blue-500/20">
|
|
687
|
+
<span className="!text-2xl !text-white">❤️</span>
|
|
688
|
+
</div>
|
|
689
|
+
<div>
|
|
690
|
+
<div className="font-medium text-white">HeartIcon</div>
|
|
691
|
+
<div className="text-xs text-white/60">Like/Love</div>
|
|
692
|
+
</div>
|
|
693
|
+
</div>
|
|
694
|
+
<div className="!space-y-3 rounded-lg border border-white/10 bg-white/5 p-4 text-center">
|
|
695
|
+
<div className="!mx-auto flex h-12 w-12 items-center justify-center rounded-lg bg-green-500/20">
|
|
696
|
+
<span className="!text-2xl !text-white">✓</span>
|
|
697
|
+
</div>
|
|
698
|
+
<div>
|
|
699
|
+
<div className="font-medium text-white">CheckIcon</div>
|
|
700
|
+
<div className="text-xs text-white/60">Complete</div>
|
|
701
|
+
</div>
|
|
702
|
+
</div>
|
|
703
|
+
<div className="!space-y-3 rounded-lg border border-white/10 bg-white/5 p-4 text-center">
|
|
704
|
+
<div className="!mx-auto flex h-12 w-12 items-center justify-center rounded-lg bg-purple-500/20">
|
|
705
|
+
<span className="!text-2xl !text-white">🔖</span>
|
|
706
|
+
</div>
|
|
707
|
+
<div>
|
|
708
|
+
<div className="font-medium text-white">BookmarkIcon</div>
|
|
709
|
+
<div className="text-xs text-white/60">Save page</div>
|
|
710
|
+
</div>
|
|
711
|
+
</div>
|
|
712
|
+
<div className="!space-y-3 rounded-lg border border-white/10 bg-white/5 p-4 text-center">
|
|
713
|
+
<div className="!mx-auto flex h-12 w-12 items-center justify-center rounded-lg bg-red-500/20">
|
|
714
|
+
<span className="!text-2xl !text-white">✖️</span>
|
|
715
|
+
</div>
|
|
716
|
+
<div>
|
|
717
|
+
<div className="font-medium text-white">CrossIcon</div>
|
|
718
|
+
<div className="text-xs text-white/60">Close/Remove</div>
|
|
719
|
+
</div>
|
|
720
|
+
</div>
|
|
721
|
+
</div>
|
|
722
|
+
</div>
|
|
723
|
+
</div>
|
|
724
|
+
|
|
725
|
+
{/* Footer */}
|
|
726
|
+
<div className="border-t border-white/10 bg-black/20 backdrop-blur-xl">
|
|
727
|
+
<div className="!mx-auto max-w-7xl px-6 py-8">
|
|
728
|
+
<div className="!space-y-4 text-center">
|
|
729
|
+
<p className="!text-white/60">
|
|
730
|
+
StarIcon is part of the Aural UI icon library, built for
|
|
731
|
+
ratings, favorites, and premium features.
|
|
732
|
+
</p>
|
|
733
|
+
<p className="text-sm !text-white/40">
|
|
734
|
+
All icons use Radix UI's AccessibleIcon for screen reader
|
|
735
|
+
compatibility and follow WCAG guidelines.
|
|
736
|
+
</p>
|
|
737
|
+
</div>
|
|
738
|
+
</div>
|
|
739
|
+
</div>
|
|
740
|
+
</div>
|
|
741
|
+
</>
|
|
742
|
+
),
|
|
743
|
+
},
|
|
744
|
+
},
|
|
745
|
+
tags: ["autodocs"],
|
|
746
|
+
argTypes: {
|
|
747
|
+
width: {
|
|
748
|
+
control: { type: "range", min: 8, max: 96, step: 2 },
|
|
749
|
+
description: "Width of the icon in pixels",
|
|
750
|
+
},
|
|
751
|
+
height: {
|
|
752
|
+
control: { type: "range", min: 8, max: 96, step: 2 },
|
|
753
|
+
description: "Height of the icon in pixels",
|
|
754
|
+
},
|
|
755
|
+
stroke: {
|
|
756
|
+
control: "color",
|
|
757
|
+
description: "Stroke color of the star",
|
|
758
|
+
},
|
|
759
|
+
strokeWidth: {
|
|
760
|
+
control: { type: "range", min: 0.5, max: 4, step: 0.5 },
|
|
761
|
+
description: "Width of the stroke",
|
|
762
|
+
},
|
|
763
|
+
className: {
|
|
764
|
+
control: "text",
|
|
765
|
+
description: "CSS classes for styling",
|
|
766
|
+
},
|
|
767
|
+
onClick: {
|
|
768
|
+
action: "clicked",
|
|
769
|
+
description: "Click handler for interactive use",
|
|
770
|
+
},
|
|
771
|
+
},
|
|
772
|
+
}
|
|
773
|
+
|
|
774
|
+
export default meta
|
|
775
|
+
type Story = StoryObj<typeof StarIcon>
|
|
776
|
+
|
|
777
|
+
// Story parameters for consistent dark theme
|
|
778
|
+
const storyParameters = {
|
|
779
|
+
backgrounds: {
|
|
780
|
+
default: "dark",
|
|
781
|
+
values: [
|
|
782
|
+
{ name: "dark", value: "#0a0a0a" },
|
|
783
|
+
{ name: "darker", value: "#000000" },
|
|
784
|
+
],
|
|
785
|
+
},
|
|
786
|
+
}
|
|
787
|
+
|
|
788
|
+
export const Default: Story = {
|
|
789
|
+
args: {
|
|
790
|
+
className: "h-6 w-6 text-yellow-400",
|
|
791
|
+
},
|
|
792
|
+
parameters: storyParameters,
|
|
793
|
+
render: (args) => (
|
|
794
|
+
<div className="flex h-32 min-h-dvh items-center justify-center rounded-lg bg-gradient-to-br from-gray-900 to-gray-800">
|
|
795
|
+
<StarIcon {...args} />
|
|
796
|
+
</div>
|
|
797
|
+
),
|
|
798
|
+
}
|
|
799
|
+
|
|
800
|
+
export const SizeVariations: Story = {
|
|
801
|
+
parameters: {
|
|
802
|
+
...storyParameters,
|
|
803
|
+
docs: {
|
|
804
|
+
description: {
|
|
805
|
+
story:
|
|
806
|
+
"StarIcon in different sizes, from small rating indicators to large action buttons.",
|
|
807
|
+
},
|
|
808
|
+
},
|
|
809
|
+
},
|
|
810
|
+
render: () => (
|
|
811
|
+
<div className="flex h-64 min-h-dvh items-center justify-center gap-8 rounded-lg bg-gradient-to-br from-gray-900 to-gray-800 p-8">
|
|
812
|
+
<div className="text-center">
|
|
813
|
+
<StarIcon className="!mx-auto mb-2 h-3 w-3 text-yellow-400" />
|
|
814
|
+
<span className="text-xs text-white/60">12px</span>
|
|
815
|
+
</div>
|
|
816
|
+
<div className="text-center">
|
|
817
|
+
<StarIcon className="!mx-auto mb-2 h-4 w-4 text-yellow-400" />
|
|
818
|
+
<span className="text-xs text-white/60">16px</span>
|
|
819
|
+
</div>
|
|
820
|
+
<div className="text-center">
|
|
821
|
+
<StarIcon className="!mx-auto mb-2 h-5 w-5 text-yellow-400" />
|
|
822
|
+
<span className="text-xs text-white/60">20px</span>
|
|
823
|
+
</div>
|
|
824
|
+
<div className="text-center">
|
|
825
|
+
<StarIcon className="!mx-auto mb-2 h-6 w-6 text-yellow-400" />
|
|
826
|
+
<span className="text-xs text-white/60">24px</span>
|
|
827
|
+
</div>
|
|
828
|
+
<div className="text-center">
|
|
829
|
+
<StarIcon className="!mx-auto mb-2 h-8 w-8 text-yellow-400" />
|
|
830
|
+
<span className="text-xs text-white/60">32px</span>
|
|
831
|
+
</div>
|
|
832
|
+
<div className="text-center">
|
|
833
|
+
<StarIcon className="!mx-auto mb-2 h-12 w-12 text-yellow-400" />
|
|
834
|
+
<span className="text-xs text-white/60">48px</span>
|
|
835
|
+
</div>
|
|
836
|
+
</div>
|
|
837
|
+
),
|
|
838
|
+
}
|
|
839
|
+
|
|
840
|
+
export const ColorVariations: Story = {
|
|
841
|
+
parameters: {
|
|
842
|
+
...storyParameters,
|
|
843
|
+
docs: {
|
|
844
|
+
description: {
|
|
845
|
+
story: "StarIcon in different semantic colors for various use cases.",
|
|
846
|
+
},
|
|
847
|
+
},
|
|
848
|
+
},
|
|
849
|
+
render: () => (
|
|
850
|
+
<div className="grid min-h-dvh grid-cols-2 items-center justify-center gap-6 rounded-lg bg-gradient-to-br from-gray-900 to-gray-800 p-8 md:grid-cols-4">
|
|
851
|
+
<div className="text-center">
|
|
852
|
+
<div className="!mx-auto mb-3 flex h-16 w-16 items-center justify-center rounded-lg border border-yellow-500/30 bg-yellow-500/20">
|
|
853
|
+
<StarIcon className="h-8 w-8 text-yellow-400" />
|
|
854
|
+
</div>
|
|
855
|
+
<div className="text-sm font-medium text-white">Rating/Favorite</div>
|
|
856
|
+
<div className="text-xs text-yellow-400">text-yellow-400</div>
|
|
857
|
+
</div>
|
|
858
|
+
<div className="text-center">
|
|
859
|
+
<div className="!mx-auto mb-3 flex h-16 w-16 items-center justify-center rounded-lg border border-orange-500/30 bg-orange-500/20">
|
|
860
|
+
<StarIcon className="h-8 w-8 text-orange-400" />
|
|
861
|
+
</div>
|
|
862
|
+
<div className="text-sm font-medium text-white">Premium/Highlight</div>
|
|
863
|
+
<div className="text-xs text-orange-400">text-orange-400</div>
|
|
864
|
+
</div>
|
|
865
|
+
<div className="text-center">
|
|
866
|
+
<div className="!mx-auto mb-3 flex h-16 w-16 items-center justify-center rounded-lg border border-gray-500/30 bg-gray-500/20">
|
|
867
|
+
<StarIcon className="h-8 w-8 text-gray-400" />
|
|
868
|
+
</div>
|
|
869
|
+
<div className="text-sm font-medium text-white">Inactive/Empty</div>
|
|
870
|
+
<div className="text-xs text-gray-400">text-gray-400</div>
|
|
871
|
+
</div>
|
|
872
|
+
<div className="text-center">
|
|
873
|
+
<div className="!mx-auto mb-3 flex h-16 w-16 items-center justify-center rounded-lg border border-white/10 bg-white/5">
|
|
874
|
+
<StarIcon className="h-8 w-8 text-white/60" />
|
|
875
|
+
</div>
|
|
876
|
+
<div className="text-sm font-medium text-white">Muted</div>
|
|
877
|
+
<div className="text-xs text-white/60">text-white/60</div>
|
|
878
|
+
</div>
|
|
879
|
+
</div>
|
|
880
|
+
),
|
|
881
|
+
}
|
|
882
|
+
|
|
883
|
+
export const UsageExamples: Story = {
|
|
884
|
+
parameters: {
|
|
885
|
+
...storyParameters,
|
|
886
|
+
docs: {
|
|
887
|
+
description: {
|
|
888
|
+
story:
|
|
889
|
+
"Real-world usage examples showing StarIcon in different UI contexts.",
|
|
890
|
+
},
|
|
891
|
+
},
|
|
892
|
+
},
|
|
893
|
+
render: () => (
|
|
894
|
+
<div className="min-h-dvh !space-y-8 rounded-lg bg-gradient-to-br from-gray-900 to-gray-800 p-8">
|
|
895
|
+
{/* Rating System */}
|
|
896
|
+
<div className="!space-y-2">
|
|
897
|
+
<h3 className="text-sm font-medium text-white">Rating System</h3>
|
|
898
|
+
<div className="flex gap-1">
|
|
899
|
+
{[1, 2, 3, 4, 5].map((star) => (
|
|
900
|
+
<button
|
|
901
|
+
key={star}
|
|
902
|
+
className="p-1 transition-transform hover:scale-110"
|
|
903
|
+
>
|
|
904
|
+
<StarIcon className="h-5 w-5 text-yellow-400" />
|
|
905
|
+
</button>
|
|
906
|
+
))}
|
|
907
|
+
</div>
|
|
908
|
+
</div>
|
|
909
|
+
|
|
910
|
+
{/* Favorite Button */}
|
|
911
|
+
<div className="!space-y-2">
|
|
912
|
+
<h3 className="text-sm font-medium text-white">Favorite Button</h3>
|
|
913
|
+
<div className="flex gap-4">
|
|
914
|
+
<button className="flex items-center gap-2 rounded-lg border border-yellow-500/30 bg-yellow-500/20 px-4 py-2 text-yellow-200 transition-colors hover:bg-yellow-500/30">
|
|
915
|
+
<StarIcon className="h-4 w-4" />
|
|
916
|
+
Add to Favorites
|
|
917
|
+
</button>
|
|
918
|
+
<button className="rounded-lg p-2 transition-colors hover:bg-white/10">
|
|
919
|
+
<StarIcon className="h-5 w-5 text-yellow-400" />
|
|
920
|
+
</button>
|
|
921
|
+
</div>
|
|
922
|
+
</div>
|
|
923
|
+
|
|
924
|
+
{/* Premium Feature */}
|
|
925
|
+
<div className="!space-y-2">
|
|
926
|
+
<h3 className="text-sm font-medium text-white">Premium Feature</h3>
|
|
927
|
+
<div className="rounded-lg border border-orange-500/30 bg-orange-500/10 p-4">
|
|
928
|
+
<div className="flex items-center gap-3">
|
|
929
|
+
<StarIcon className="h-5 w-5 text-orange-400" />
|
|
930
|
+
<div>
|
|
931
|
+
<h4 className="font-medium text-white">Premium Feature</h4>
|
|
932
|
+
<p className="text-sm text-white/70">Unlock advanced analytics</p>
|
|
933
|
+
</div>
|
|
934
|
+
</div>
|
|
935
|
+
</div>
|
|
936
|
+
</div>
|
|
937
|
+
</div>
|
|
938
|
+
),
|
|
939
|
+
}
|
|
940
|
+
|
|
941
|
+
export const Playground: Story = {
|
|
942
|
+
parameters: {
|
|
943
|
+
...storyParameters,
|
|
944
|
+
docs: {
|
|
945
|
+
description: {
|
|
946
|
+
story:
|
|
947
|
+
"Interactive playground to experiment with different StarIcon configurations.",
|
|
948
|
+
},
|
|
949
|
+
},
|
|
950
|
+
},
|
|
951
|
+
args: {
|
|
952
|
+
width: 32,
|
|
953
|
+
height: 32,
|
|
954
|
+
className: "text-yellow-400",
|
|
955
|
+
},
|
|
956
|
+
render: (args) => (
|
|
957
|
+
<div className="flex h-64 min-h-dvh items-center justify-center rounded-lg bg-gradient-to-br from-gray-900 to-gray-800">
|
|
958
|
+
<div className="rounded-lg border border-white/10 bg-white/5 p-8">
|
|
959
|
+
<StarIcon {...args} />
|
|
960
|
+
</div>
|
|
961
|
+
</div>
|
|
962
|
+
),
|
|
963
|
+
}
|