samsour.de
eny.space Landingpage
davor87.tngl.sh
1"use client"
2
3import * as React from "react"
4
5import {
6 Example,
7 ExampleWrapper,
8} from "@/actions/components/example"
9import {
10 AlertDialog,
11 AlertDialogAction,
12 AlertDialogCancel,
13 AlertDialogContent,
14 AlertDialogDescription,
15 AlertDialogFooter,
16 AlertDialogHeader,
17 AlertDialogMedia,
18 AlertDialogTitle,
19 AlertDialogTrigger,
20} from "@/actions/components/ui/alert-dialog"
21import { Badge } from "@/actions/components/ui/badge"
22import { Button } from "@/actions/components/ui/button"
23import {
24 Card,
25 CardAction,
26 CardContent,
27 CardDescription,
28 CardFooter,
29 CardHeader,
30 CardTitle,
31} from "@/actions/components/ui/card"
32import {
33 Combobox,
34 ComboboxContent,
35 ComboboxEmpty,
36 ComboboxInput,
37 ComboboxItem,
38 ComboboxList,
39} from "@/actions/components/ui/combobox"
40import {
41 DropdownMenu,
42 DropdownMenuCheckboxItem,
43 DropdownMenuContent,
44 DropdownMenuGroup,
45 DropdownMenuItem,
46 DropdownMenuLabel,
47 DropdownMenuPortal,
48 DropdownMenuRadioGroup,
49 DropdownMenuRadioItem,
50 DropdownMenuSeparator,
51 DropdownMenuShortcut,
52 DropdownMenuSub,
53 DropdownMenuSubContent,
54 DropdownMenuSubTrigger,
55 DropdownMenuTrigger,
56} from "@/actions/components/ui/dropdown-menu"
57import { Field, FieldGroup, FieldLabel } from "@/actions/components/ui/field"
58import { Input } from "@/actions/components/ui/input"
59import {
60 Select,
61 SelectContent,
62 SelectGroup,
63 SelectItem,
64 SelectTrigger,
65 SelectValue,
66} from "@/actions/components/ui/select"
67import { Textarea } from "@/actions/components/ui/textarea"
68import { PlusIcon, BluetoothIcon, MoreVerticalIcon, FileIcon, FolderIcon, FolderOpenIcon, FileCodeIcon, MoreHorizontalIcon, FolderSearchIcon, SaveIcon, DownloadIcon, EyeIcon, LayoutIcon, PaletteIcon, SunIcon, MoonIcon, MonitorIcon, UserIcon, CreditCardIcon, SettingsIcon, KeyboardIcon, LanguagesIcon, BellIcon, MailIcon, ShieldIcon, HelpCircleIcon, FileTextIcon, LogOutIcon } from "lucide-react"
69
70export function ComponentExample() {
71 return (
72 <ExampleWrapper>
73 <CardExample />
74 <FormExample />
75 </ExampleWrapper>
76 )
77}
78
79function CardExample() {
80 return (
81 <Example title="Card" className="items-center justify-center">
82 <Card className="relative w-full max-w-sm overflow-hidden pt-0">
83 <div className="absolute inset-0 z-30 aspect-video bg-primary opacity-50 mix-blend-color" />
84 <img
85 src="https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
86 alt="Photo by mymind on Unsplash"
87 title="Photo by mymind on Unsplash"
88 className="relative z-20 aspect-video w-full object-cover brightness-60 grayscale"
89 />
90 <CardHeader>
91 <CardTitle>Observability Plus is replacing Monitoring</CardTitle>
92 <CardDescription>
93 Switch to the improved way to explore your data, with natural
94 language. Monitoring will no longer be available on the Pro plan in
95 November, 2025
96 </CardDescription>
97 </CardHeader>
98 <CardFooter>
99 <AlertDialog>
100 <AlertDialogTrigger asChild>
101 <Button>
102 <PlusIcon data-icon="inline-start" />
103 Show Dialog
104 </Button>
105 </AlertDialogTrigger>
106 <AlertDialogContent size="sm">
107 <AlertDialogHeader>
108 <AlertDialogMedia>
109 <BluetoothIcon
110 />
111 </AlertDialogMedia>
112 <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>
113 <AlertDialogDescription>
114 Do you want to allow the USB accessory to connect to this
115 device?
116 </AlertDialogDescription>
117 </AlertDialogHeader>
118 <AlertDialogFooter>
119 <AlertDialogCancel>Don't allow</AlertDialogCancel>
120 <AlertDialogAction>Allow</AlertDialogAction>
121 </AlertDialogFooter>
122 </AlertDialogContent>
123 </AlertDialog>
124 <Badge variant="secondary" className="ml-auto">
125 Warning
126 </Badge>
127 </CardFooter>
128 </Card>
129 </Example>
130 )
131}
132
133const frameworks = [
134 "Next.js",
135 "SvelteKit",
136 "Nuxt.js",
137 "Remix",
138 "Astro",
139] as const
140
141function FormExample() {
142 const [notifications, setNotifications] = React.useState({
143 email: true,
144 sms: false,
145 push: true,
146 })
147 const [theme, setTheme] = React.useState("light")
148
149 return (
150 <Example title="Form">
151 <Card className="w-full max-w-md">
152 <CardHeader>
153 <CardTitle>User Information</CardTitle>
154 <CardDescription>Please fill in your details below</CardDescription>
155 <CardAction>
156 <DropdownMenu>
157 <DropdownMenuTrigger asChild>
158 <Button variant="ghost" size="icon">
159 <MoreVerticalIcon
160 />
161 <span className="sr-only">More options</span>
162 </Button>
163 </DropdownMenuTrigger>
164 <DropdownMenuContent align="end" className="w-56">
165 <DropdownMenuGroup>
166 <DropdownMenuLabel>File</DropdownMenuLabel>
167 <DropdownMenuItem>
168 <FileIcon
169 />
170 New File
171 <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>
172 </DropdownMenuItem>
173 <DropdownMenuItem>
174 <FolderIcon
175 />
176 New Folder
177 <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>
178 </DropdownMenuItem>
179 <DropdownMenuSub>
180 <DropdownMenuSubTrigger>
181 <FolderOpenIcon
182 />
183 Open Recent
184 </DropdownMenuSubTrigger>
185 <DropdownMenuPortal>
186 <DropdownMenuSubContent>
187 <DropdownMenuGroup>
188 <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>
189 <DropdownMenuItem>
190 <FileCodeIcon
191 />
192 Project Alpha
193 </DropdownMenuItem>
194 <DropdownMenuItem>
195 <FileCodeIcon
196 />
197 Project Beta
198 </DropdownMenuItem>
199 <DropdownMenuSub>
200 <DropdownMenuSubTrigger>
201 <MoreHorizontalIcon
202 />
203 More Projects
204 </DropdownMenuSubTrigger>
205 <DropdownMenuPortal>
206 <DropdownMenuSubContent>
207 <DropdownMenuItem>
208 <FileCodeIcon
209 />
210 Project Gamma
211 </DropdownMenuItem>
212 <DropdownMenuItem>
213 <FileCodeIcon
214 />
215 Project Delta
216 </DropdownMenuItem>
217 </DropdownMenuSubContent>
218 </DropdownMenuPortal>
219 </DropdownMenuSub>
220 </DropdownMenuGroup>
221 <DropdownMenuSeparator />
222 <DropdownMenuGroup>
223 <DropdownMenuItem>
224 <FolderSearchIcon
225 />
226 Browse...
227 </DropdownMenuItem>
228 </DropdownMenuGroup>
229 </DropdownMenuSubContent>
230 </DropdownMenuPortal>
231 </DropdownMenuSub>
232 <DropdownMenuSeparator />
233 <DropdownMenuItem>
234 <SaveIcon
235 />
236 Save
237 <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
238 </DropdownMenuItem>
239 <DropdownMenuItem>
240 <DownloadIcon
241 />
242 Export
243 <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>
244 </DropdownMenuItem>
245 </DropdownMenuGroup>
246 <DropdownMenuSeparator />
247 <DropdownMenuGroup>
248 <DropdownMenuLabel>View</DropdownMenuLabel>
249 <DropdownMenuCheckboxItem
250 checked={notifications.email}
251 onCheckedChange={(checked) =>
252 setNotifications({
253 ...notifications,
254 email: checked === true,
255 })
256 }
257 >
258 <EyeIcon
259 />
260 Show Sidebar
261 </DropdownMenuCheckboxItem>
262 <DropdownMenuCheckboxItem
263 checked={notifications.sms}
264 onCheckedChange={(checked) =>
265 setNotifications({
266 ...notifications,
267 sms: checked === true,
268 })
269 }
270 >
271 <LayoutIcon
272 />
273 Show Status Bar
274 </DropdownMenuCheckboxItem>
275 <DropdownMenuSub>
276 <DropdownMenuSubTrigger>
277 <PaletteIcon
278 />
279 Theme
280 </DropdownMenuSubTrigger>
281 <DropdownMenuPortal>
282 <DropdownMenuSubContent>
283 <DropdownMenuGroup>
284 <DropdownMenuLabel>Appearance</DropdownMenuLabel>
285 <DropdownMenuRadioGroup
286 value={theme}
287 onValueChange={setTheme}
288 >
289 <DropdownMenuRadioItem value="light">
290 <SunIcon
291 />
292 Light
293 </DropdownMenuRadioItem>
294 <DropdownMenuRadioItem value="dark">
295 <MoonIcon
296 />
297 Dark
298 </DropdownMenuRadioItem>
299 <DropdownMenuRadioItem value="system">
300 <MonitorIcon
301 />
302 System
303 </DropdownMenuRadioItem>
304 </DropdownMenuRadioGroup>
305 </DropdownMenuGroup>
306 </DropdownMenuSubContent>
307 </DropdownMenuPortal>
308 </DropdownMenuSub>
309 </DropdownMenuGroup>
310 <DropdownMenuSeparator />
311 <DropdownMenuGroup>
312 <DropdownMenuLabel>Account</DropdownMenuLabel>
313 <DropdownMenuItem>
314 <UserIcon
315 />
316 Profile
317 <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
318 </DropdownMenuItem>
319 <DropdownMenuItem>
320 <CreditCardIcon
321 />
322 Billing
323 </DropdownMenuItem>
324 <DropdownMenuSub>
325 <DropdownMenuSubTrigger>
326 <SettingsIcon
327 />
328 Settings
329 </DropdownMenuSubTrigger>
330 <DropdownMenuPortal>
331 <DropdownMenuSubContent>
332 <DropdownMenuGroup>
333 <DropdownMenuLabel>Preferences</DropdownMenuLabel>
334 <DropdownMenuItem>
335 <KeyboardIcon
336 />
337 Keyboard Shortcuts
338 </DropdownMenuItem>
339 <DropdownMenuItem>
340 <LanguagesIcon
341 />
342 Language
343 </DropdownMenuItem>
344 <DropdownMenuSub>
345 <DropdownMenuSubTrigger>
346 <BellIcon
347 />
348 Notifications
349 </DropdownMenuSubTrigger>
350 <DropdownMenuPortal>
351 <DropdownMenuSubContent>
352 <DropdownMenuGroup>
353 <DropdownMenuLabel>
354 Notification Types
355 </DropdownMenuLabel>
356 <DropdownMenuCheckboxItem
357 checked={notifications.push}
358 onCheckedChange={(checked) =>
359 setNotifications({
360 ...notifications,
361 push: checked === true,
362 })
363 }
364 >
365 <BellIcon
366 />
367 Push Notifications
368 </DropdownMenuCheckboxItem>
369 <DropdownMenuCheckboxItem
370 checked={notifications.email}
371 onCheckedChange={(checked) =>
372 setNotifications({
373 ...notifications,
374 email: checked === true,
375 })
376 }
377 >
378 <MailIcon
379 />
380 Email Notifications
381 </DropdownMenuCheckboxItem>
382 </DropdownMenuGroup>
383 </DropdownMenuSubContent>
384 </DropdownMenuPortal>
385 </DropdownMenuSub>
386 </DropdownMenuGroup>
387 <DropdownMenuSeparator />
388 <DropdownMenuGroup>
389 <DropdownMenuItem>
390 <ShieldIcon
391 />
392 Privacy & Security
393 </DropdownMenuItem>
394 </DropdownMenuGroup>
395 </DropdownMenuSubContent>
396 </DropdownMenuPortal>
397 </DropdownMenuSub>
398 </DropdownMenuGroup>
399 <DropdownMenuSeparator />
400 <DropdownMenuGroup>
401 <DropdownMenuItem>
402 <HelpCircleIcon
403 />
404 Help & Support
405 </DropdownMenuItem>
406 <DropdownMenuItem>
407 <FileTextIcon
408 />
409 Documentation
410 </DropdownMenuItem>
411 </DropdownMenuGroup>
412 <DropdownMenuSeparator />
413 <DropdownMenuGroup>
414 <DropdownMenuItem variant="destructive">
415 <LogOutIcon
416 />
417 Sign Out
418 <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
419 </DropdownMenuItem>
420 </DropdownMenuGroup>
421 </DropdownMenuContent>
422 </DropdownMenu>
423 </CardAction>
424 </CardHeader>
425 <CardContent>
426 <form>
427 <FieldGroup>
428 <div className="grid grid-cols-2 gap-4">
429 <Field>
430 <FieldLabel htmlFor="small-form-name">Name</FieldLabel>
431 <Input
432 id="small-form-name"
433 placeholder="Enter your name"
434 required
435 />
436 </Field>
437 <Field>
438 <FieldLabel htmlFor="small-form-role">Role</FieldLabel>
439 <Select defaultValue="">
440 <SelectTrigger id="small-form-role">
441 <SelectValue placeholder="Select a role" />
442 </SelectTrigger>
443 <SelectContent>
444 <SelectGroup>
445 <SelectItem value="developer">Developer</SelectItem>
446 <SelectItem value="designer">Designer</SelectItem>
447 <SelectItem value="manager">Manager</SelectItem>
448 <SelectItem value="other">Other</SelectItem>
449 </SelectGroup>
450 </SelectContent>
451 </Select>
452 </Field>
453 </div>
454 <Field>
455 <FieldLabel htmlFor="small-form-framework">
456 Framework
457 </FieldLabel>
458 <Combobox items={frameworks}>
459 <ComboboxInput
460 id="small-form-framework"
461 placeholder="Select a framework"
462 required
463 />
464 <ComboboxContent>
465 <ComboboxEmpty>No frameworks found.</ComboboxEmpty>
466 <ComboboxList>
467 {(item) => (
468 <ComboboxItem key={item} value={item}>
469 {item}
470 </ComboboxItem>
471 )}
472 </ComboboxList>
473 </ComboboxContent>
474 </Combobox>
475 </Field>
476 <Field>
477 <FieldLabel htmlFor="small-form-comments">Comments</FieldLabel>
478 <Textarea
479 id="small-form-comments"
480 placeholder="Add any additional comments"
481 />
482 </Field>
483 <Field orientation="horizontal">
484 <Button type="submit">Submit</Button>
485 <Button variant="outline" type="button">
486 Cancel
487 </Button>
488 </Field>
489 </FieldGroup>
490 </form>
491 </CardContent>
492 </Card>
493 </Example>
494 )
495}