shadcn-ui 0.0.3 → 0.0.4
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.
- checksums.yaml +4 -4
- data/app/controllers/documentation_controller.rb +0 -1
- data/app/helpers/components/input_helper.rb +1 -1
- data/app/helpers/components/slider_helper.rb +1 -1
- data/app/helpers/examples_helper.rb +6 -1
- data/app/javascript/controllers/highlight_controller.js +0 -1
- data/app/javascript/controllers/ui/popover_controller.js +6 -2
- data/app/views/application/index.html.erb +625 -17
- data/app/views/components/ui/_card.html.erb +7 -1
- data/app/views/components/ui/_filter.html.erb +2 -1
- data/app/views/documentation/generators.html.md +20 -0
- data/app/views/documentation/helpers.html.md +54 -0
- data/app/views/documentation/javascript.html.md +8 -0
- data/app/views/examples/components/accordion.html.erb +5 -7
- data/app/views/examples/components/alert-dialog/code/_preview.erb +6 -0
- data/app/views/examples/components/alert-dialog/code/_usage.erb +0 -0
- data/app/views/examples/components/alert-dialog.html.erb +8 -11
- data/app/views/examples/components/alert.html.erb +9 -10
- data/app/views/examples/components/badge.html.erb +3 -15
- data/app/views/examples/components/button.html.erb +3 -25
- data/app/views/examples/components/card/code/{preview.erb → _preview.erb} +1 -1
- data/app/views/examples/components/card.html.erb +5 -9
- data/app/views/examples/components/checkbox/code/_preview.erb +2 -0
- data/app/views/examples/components/checkbox.html.erb +3 -3
- data/app/views/examples/components/collapsible.html.erb +3 -11
- data/app/views/examples/components/dialog.html.erb +5 -14
- data/app/views/examples/components/dropdown-menu/_usage.html.erb +19 -0
- data/app/views/examples/components/dropdown-menu/code/_preview.erb +19 -0
- data/app/views/examples/components/dropdown-menu/code/_usage.erb +13 -0
- data/app/views/examples/components/dropdown-menu.html.erb +29 -15
- data/app/views/examples/components/filter/_usage.html.erb +14 -0
- data/app/views/examples/components/filter/code/_icon.html.erb +7 -0
- data/app/views/examples/components/filter/code/_preview.erb +3 -0
- data/app/views/examples/components/filter/code/_usage.erb +5 -0
- data/app/views/examples/components/filter.html.erb +27 -7
- data/app/views/examples/components/hover-card/_usage.html.erb +15 -0
- data/app/views/examples/components/hover-card/code/_preview.erb +13 -0
- data/app/views/examples/components/hover-card/code/_usage.erb +6 -0
- data/app/views/examples/components/hover-card.html.erb +12 -14
- data/app/views/examples/components/input/_usage.html.erb +10 -0
- data/app/views/examples/components/input/code/_borderless.erb +3 -0
- data/app/views/examples/components/input/code/_preview.erb +1 -0
- data/app/views/examples/components/input/code/_usage.erb +1 -0
- data/app/views/examples/components/input.html.erb +17 -3
- data/app/views/examples/components/label/_usage.html.erb +9 -0
- data/app/views/examples/components/label/code/_preview.erb +5 -0
- data/app/views/examples/components/label/code/_usage.erb +1 -0
- data/app/views/examples/components/label.html.erb +14 -5
- data/app/views/examples/components/popover/_usage.html.erb +12 -0
- data/app/views/examples/components/popover/code/_form.erb +23 -0
- data/app/views/examples/components/popover/code/_preview.erb +13 -0
- data/app/views/examples/components/popover/code/_usage.erb +7 -0
- data/app/views/examples/components/popover.html.erb +28 -24
- data/app/views/examples/components/progress/_usage.erb +9 -0
- data/app/views/examples/components/progress/code/_preview.erb +1 -0
- data/app/views/examples/components/progress/code/_usage.erb +1 -0
- data/app/views/examples/components/progress.html.erb +12 -2
- data/app/views/examples/components/separator/_usage.html.erb +10 -0
- data/app/views/examples/components/separator/code/_fancy.erb +21 -0
- data/app/views/examples/components/separator/code/_preview.erb +1 -0
- data/app/views/examples/components/separator/code/_usage.erb +1 -0
- data/app/views/examples/components/separator.html.erb +26 -19
- data/app/views/examples/components/sheet/_usage.html.erb +38 -0
- data/app/views/examples/components/sheet/code/_mobile_menu.erb +17 -0
- data/app/views/examples/components/sheet/code/_preview.erb +22 -0
- data/app/views/examples/components/sheet/code/_usage.erb +7 -0
- data/app/views/examples/components/sheet.html.erb +17 -10
- data/app/views/examples/components/skeleton/_usage.html.erb +9 -0
- data/app/views/examples/components/skeleton/code/_preview.erb +1 -0
- data/app/views/examples/components/skeleton/code/_usage.erb +1 -0
- data/app/views/examples/components/skeleton.html.erb +16 -2
- data/app/views/examples/components/slider/_usage.html.erb +11 -0
- data/app/views/examples/components/slider/code/_preview.erb +3 -0
- data/app/views/examples/components/slider/code/_usage.erb +1 -0
- data/app/views/examples/components/slider.html.erb +16 -2
- data/app/views/examples/components/textarea/_usage.html.erb +9 -0
- data/app/views/examples/components/textarea/code/_preview.erb +1 -0
- data/app/views/examples/components/textarea/code/_usage.erb +1 -0
- data/app/views/examples/components/textarea.html.erb +16 -2
- data/app/views/examples/components/toast/_usage.html.erb +11 -0
- data/app/views/examples/components/toast/code/_preview.erb +3 -0
- data/app/views/examples/components/toast/code/_usage.erb +2 -0
- data/app/views/examples/components/toast.html.erb +12 -4
- data/app/views/examples/components/toggle/_usage.html.erb +10 -0
- data/app/views/examples/components/toggle/code/_preview.erb +1 -0
- data/app/views/examples/components/toggle/code/_usage.erb +1 -0
- data/app/views/examples/components/toggle.html.erb +16 -2
- data/app/views/examples/components/tooltip/_usage.html.erb +11 -0
- data/app/views/examples/components/tooltip/code/_preview.erb +12 -0
- data/app/views/examples/components/tooltip/code/_usage.erb +7 -0
- data/app/views/examples/components/tooltip.html.erb +16 -13
- data/app/views/layouts/shared/_components.html.erb +35 -33
- data/config/environments/production.rb +4 -4
- data/lib/shadcn-ui/version.rb +1 -1
- metadata +74 -20
- data/app/views/examples/components/checkbox/code/preview.erb +0 -2
- /data/app/views/examples/components/accordion/code/{preview.erb → _preview.erb} +0 -0
- /data/app/views/examples/components/accordion/code/{usage.erb → _usage.erb} +0 -0
- /data/app/views/examples/components/alert/code/{preview.erb → _preview.erb} +0 -0
- /data/app/views/examples/components/alert/code/{usage.erb → _usage.erb} +0 -0
- /data/app/views/examples/components/badge/code/{preview.erb → _preview.erb} +0 -0
- /data/app/views/examples/components/badge/code/{usage.erb → _usage.erb} +0 -0
- /data/app/views/examples/components/button/code/{preview.erb → _preview.erb} +0 -0
- /data/app/views/examples/components/button/code/{usage.erb → _usage.erb} +0 -0
- /data/app/views/examples/components/card/code/{usage.erb → _usage.erb} +0 -0
- /data/app/views/examples/components/checkbox/code/{usage.erb → _usage.erb} +0 -0
- /data/app/views/examples/components/collapsible/code/{preview.erb → _preview.erb} +0 -0
- /data/app/views/examples/components/collapsible/code/{usage.erb → _usage.erb} +0 -0
- /data/app/views/examples/components/dialog/code/{form.erb → _form.erb} +0 -0
- /data/app/views/examples/components/dialog/code/{notifications.erb → _notifications.erb} +0 -0
- /data/app/views/examples/components/dialog/code/{preview.erb → _preview.erb} +0 -0
- /data/app/views/examples/components/dialog/code/{usage.erb → _usage.erb} +0 -0
|
@@ -7,8 +7,7 @@
|
|
|
7
7
|
<div
|
|
8
8
|
data-orientation="vertical"
|
|
9
9
|
role="none"
|
|
10
|
-
class="shrink-0 bg-border w-[1px] mx-2 h-4">
|
|
11
|
-
</div>
|
|
10
|
+
class="shrink-0 bg-border w-[1px] mx-2 h-4"></div>
|
|
12
11
|
<span class="sm:hidden">Style, a new CLI and more.</span>
|
|
13
12
|
<span class="hidden sm:inline">Introducing shadcn/ui on Rails!</span>
|
|
14
13
|
<svg
|
|
@@ -36,7 +35,8 @@
|
|
|
36
35
|
display: inline-block;
|
|
37
36
|
vertical-align: top;
|
|
38
37
|
text-decoration: inherit;
|
|
39
|
-
max-width: 586px;
|
|
38
|
+
max-width: 586px;
|
|
39
|
+
">
|
|
40
40
|
Beautifully designed components based on <a href="https://ui.shadcn.com">shadcn/ui</a> that
|
|
41
41
|
you can copy and paste into your apps. Accessible. Customizable. Open Source.
|
|
42
42
|
</span>
|
|
@@ -56,29 +56,106 @@
|
|
|
56
56
|
class="mr-2 h-4 w-4">
|
|
57
57
|
<path
|
|
58
58
|
fill="currentColor"
|
|
59
|
-
d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z">
|
|
60
|
-
</path>
|
|
61
|
-
</svg>GitHub
|
|
59
|
+
d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"></path></svg>GitHub
|
|
62
60
|
</a>
|
|
63
61
|
</div>
|
|
64
62
|
</section>
|
|
65
63
|
<section class="pt-8 md:pt-12 pb-8">
|
|
66
64
|
<div className="overflow-hidden rounded-[0.5rem] border border-1 bg-background shadow">
|
|
67
|
-
<div
|
|
65
|
+
<div
|
|
66
|
+
class="flex-1 space-y-4 p-8 pt-6 rounded-[0.5rem] border border-1 bg-background shadow">
|
|
68
67
|
<div class="flex items-center justify-between space-y-2">
|
|
69
68
|
<h2 class="text-3xl font-bold tracking-tight">Dashboard</h2>
|
|
70
|
-
<div class="flex items-center space-x-2">
|
|
71
|
-
<div class="grid gap-2"><button class="inline-flex items-center rounded-md text-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2 w-[260px] justify-start text-left font-normal" id="date" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="radix-:r7:" data-state="closed"><svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="mr-2 h-4 w-4"><path d="M4.5 1C4.77614 1 5 1.22386 5 1.5V2H10V1.5C10 1.22386 10.2239 1 10.5 1C10.7761 1 11 1.22386 11 1.5V2H12.5C13.3284 2 14 2.67157 14 3.5V12.5C14 13.3284 13.3284 14 12.5 14H2.5C1.67157 14 1 13.3284 1 12.5V3.5C1 2.67157 1.67157 2 2.5 2H4V1.5C4 1.22386 4.22386 1 4.5 1ZM10 3V3.5C10 3.77614 10.2239 4 10.5 4C10.7761 4 11 3.77614 11 3.5V3H12.5C12.7761 3 13 3.22386 13 3.5V5H2V3.5C2 3.22386 2.22386 3 2.5 3H4V3.5C4 3.77614 4.22386 4 4.5 4C4.77614 4 5 3.77614 5 3.5V3H10ZM2 6V12.5C2 12.7761 2.22386 13 2.5 13H12.5C12.7761 13 13 12.7761 13 12.5V6H2ZM7 7.5C7 7.22386 7.22386 7 7.5 7C7.77614 7 8 7.22386 8 7.5C8 7.77614 7.77614 8 7.5 8C7.22386 8 7 7.77614 7 7.5ZM9.5 7C9.22386 7 9 7.22386 9 7.5C9 7.77614 9.22386 8 9.5 8C9.77614 8 10 7.77614 10 7.5C10 7.22386 9.77614 7 9.5 7ZM11 7.5C11 7.22386 11.2239 7 11.5 7C11.7761 7 12 7.22386 12 7.5C12 7.77614 11.7761 8 11.5 8C11.2239 8 11 7.77614 11 7.5ZM11.5 9C11.2239 9 11 9.22386 11 9.5C11 9.77614 11.2239 10 11.5 10C11.7761 10 12 9.77614 12 9.5C12 9.22386 11.7761 9 11.5 9ZM9 9.5C9 9.22386 9.22386 9 9.5 9C9.77614 9 10 9.22386 10 9.5C10 9.77614 9.77614 10 9.5 10C9.22386 10 9 9.77614 9 9.5ZM7.5 9C7.22386 9 7 9.22386 7 9.5C7 9.77614 7.22386 10 7.5 10C7.77614 10 8 9.77614 8 9.5C8 9.22386 7.77614 9 7.5 9ZM5 9.5C5 9.22386 5.22386 9 5.5 9C5.77614 9 6 9.22386 6 9.5C6 9.77614 5.77614 10 5.5 10C5.22386 10 5 9.77614 5 9.5ZM3.5 9C3.22386 9 3 9.22386 3 9.5C3 9.77614 3.22386 10 3.5 10C3.77614 10 4 9.77614 4 9.5C4 9.22386 3.77614 9 3.5 9ZM3 11.5C3 11.2239 3.22386 11 3.5 11C3.77614 11 4 11.2239 4 11.5C4 11.7761 3.77614 12 3.5 12C3.22386 12 3 11.7761 3 11.5ZM5.5 11C5.22386 11 5 11.2239 5 11.5C5 11.7761 5.22386 12 5.5 12C5.77614 12 6 11.7761 6 11.5C6 11.2239 5.77614 11 5.5 11ZM7 11.5C7 11.2239 7.22386 11 7.5 11C7.77614 11 8 11.2239 8 11.5C8 11.7761 7.77614 12 7.5 12C7.22386 12 7 11.7761 7 11.5ZM9.5 11C9.22386 11 9 11.2239 9 11.5C9 11.7761 9.22386 12 9.5 12C9.77614 12 10 11.7761 10 11.5C10 11.2239 9.77614 11 9.5 11Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>Jan 20, 2023 - Feb 09, 2023</button></div>
|
|
72
|
-
<button class="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground shadow hover:bg-primary/90 h-9 px-4 py-2">Download</button></div>
|
|
73
69
|
</div>
|
|
74
|
-
<div
|
|
75
|
-
|
|
76
|
-
|
|
70
|
+
<div
|
|
71
|
+
dir="ltr"
|
|
72
|
+
data-orientation="horizontal"
|
|
73
|
+
class="space-y-4">
|
|
74
|
+
<div
|
|
75
|
+
role="tablist"
|
|
76
|
+
aria-orientation="horizontal"
|
|
77
|
+
class="hidden md:inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground"
|
|
78
|
+
tabindex="0"
|
|
79
|
+
data-orientation="horizontal"
|
|
80
|
+
style="outline: none">
|
|
81
|
+
<button
|
|
82
|
+
type="button"
|
|
83
|
+
role="tab"
|
|
84
|
+
aria-selected="true"
|
|
85
|
+
aria-controls="radix-:r8:-content-overview"
|
|
86
|
+
data-state="active"
|
|
87
|
+
id="radix-:r8:-trigger-overview"
|
|
88
|
+
class="inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow"
|
|
89
|
+
tabindex="-1"
|
|
90
|
+
data-orientation="horizontal"
|
|
91
|
+
data-radix-collection-item="">
|
|
92
|
+
Overview</button><button
|
|
93
|
+
type="button"
|
|
94
|
+
role="tab"
|
|
95
|
+
aria-selected="false"
|
|
96
|
+
aria-controls="radix-:r8:-content-analytics"
|
|
97
|
+
data-state="inactive"
|
|
98
|
+
data-disabled=""
|
|
99
|
+
disabled=""
|
|
100
|
+
id="radix-:r8:-trigger-analytics"
|
|
101
|
+
class="inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow"
|
|
102
|
+
tabindex="-1"
|
|
103
|
+
data-orientation="horizontal"
|
|
104
|
+
data-radix-collection-item="">
|
|
105
|
+
Analytics</button><button
|
|
106
|
+
type="button"
|
|
107
|
+
role="tab"
|
|
108
|
+
aria-selected="false"
|
|
109
|
+
aria-controls="radix-:r8:-content-reports"
|
|
110
|
+
data-state="inactive"
|
|
111
|
+
data-disabled=""
|
|
112
|
+
disabled=""
|
|
113
|
+
id="radix-:r8:-trigger-reports"
|
|
114
|
+
class="inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow"
|
|
115
|
+
tabindex="-1"
|
|
116
|
+
data-orientation="horizontal"
|
|
117
|
+
data-radix-collection-item="">
|
|
118
|
+
Reports</button><button
|
|
119
|
+
type="button"
|
|
120
|
+
role="tab"
|
|
121
|
+
aria-selected="false"
|
|
122
|
+
aria-controls="radix-:r8:-content-notifications"
|
|
123
|
+
data-state="inactive"
|
|
124
|
+
data-disabled=""
|
|
125
|
+
disabled=""
|
|
126
|
+
id="radix-:r8:-trigger-notifications"
|
|
127
|
+
class="inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow"
|
|
128
|
+
tabindex="-1"
|
|
129
|
+
data-orientation="horizontal"
|
|
130
|
+
data-radix-collection-item="">
|
|
131
|
+
Notifications
|
|
132
|
+
</button>
|
|
133
|
+
</div>
|
|
134
|
+
<div
|
|
135
|
+
data-state="active"
|
|
136
|
+
data-orientation="horizontal"
|
|
137
|
+
role="tabpanel"
|
|
138
|
+
aria-labelledby="radix-:r8:-trigger-overview"
|
|
139
|
+
id="radix-:r8:-content-overview"
|
|
140
|
+
tabindex="0"
|
|
141
|
+
class="mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 space-y-4"
|
|
142
|
+
style="">
|
|
77
143
|
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
|
78
144
|
<div class="rounded-xl border bg-card text-card-foreground shadow">
|
|
79
145
|
<div class="p-6 flex flex-row items-center justify-between space-y-0 pb-2">
|
|
80
146
|
<h3 class="tracking-tight text-sm font-medium">Total Revenue</h3>
|
|
81
|
-
<svg
|
|
147
|
+
<svg
|
|
148
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
149
|
+
viewBox="0 0 24 24"
|
|
150
|
+
fill="none"
|
|
151
|
+
stroke="currentColor"
|
|
152
|
+
stroke-linecap="round"
|
|
153
|
+
stroke-linejoin="round"
|
|
154
|
+
stroke-width="2"
|
|
155
|
+
class="h-4 w-4 text-muted-foreground">
|
|
156
|
+
<path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
|
|
157
|
+
</svg>
|
|
158
|
+
</div>
|
|
82
159
|
<div class="p-6 pt-0">
|
|
83
160
|
<div class="text-2xl font-bold">$45,231.89</div>
|
|
84
161
|
<p class="text-xs text-muted-foreground">+20.1% from last month</p>
|
|
@@ -87,7 +164,23 @@
|
|
|
87
164
|
<div class="rounded-xl border bg-card text-card-foreground shadow">
|
|
88
165
|
<div class="p-6 flex flex-row items-center justify-between space-y-0 pb-2">
|
|
89
166
|
<h3 class="tracking-tight text-sm font-medium">Subscriptions</h3>
|
|
90
|
-
<svg
|
|
167
|
+
<svg
|
|
168
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
169
|
+
viewBox="0 0 24 24"
|
|
170
|
+
fill="none"
|
|
171
|
+
stroke="currentColor"
|
|
172
|
+
stroke-linecap="round"
|
|
173
|
+
stroke-linejoin="round"
|
|
174
|
+
stroke-width="2"
|
|
175
|
+
class="h-4 w-4 text-muted-foreground">
|
|
176
|
+
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
|
|
177
|
+
<circle
|
|
178
|
+
cx="9"
|
|
179
|
+
cy="7"
|
|
180
|
+
r="4"></circle>
|
|
181
|
+
<path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"></path>
|
|
182
|
+
</svg>
|
|
183
|
+
</div>
|
|
91
184
|
<div class="p-6 pt-0">
|
|
92
185
|
<div class="text-2xl font-bold">+2350</div>
|
|
93
186
|
<p class="text-xs text-muted-foreground">+180.1% from last month</p>
|
|
@@ -96,7 +189,24 @@
|
|
|
96
189
|
<div class="rounded-xl border bg-card text-card-foreground shadow">
|
|
97
190
|
<div class="p-6 flex flex-row items-center justify-between space-y-0 pb-2">
|
|
98
191
|
<h3 class="tracking-tight text-sm font-medium">Sales</h3>
|
|
99
|
-
<svg
|
|
192
|
+
<svg
|
|
193
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
194
|
+
viewBox="0 0 24 24"
|
|
195
|
+
fill="none"
|
|
196
|
+
stroke="currentColor"
|
|
197
|
+
stroke-linecap="round"
|
|
198
|
+
stroke-linejoin="round"
|
|
199
|
+
stroke-width="2"
|
|
200
|
+
class="h-4 w-4 text-muted-foreground">
|
|
201
|
+
<rect
|
|
202
|
+
width="20"
|
|
203
|
+
height="14"
|
|
204
|
+
x="2"
|
|
205
|
+
y="5"
|
|
206
|
+
rx="2"></rect>
|
|
207
|
+
<path d="M2 10h20"></path>
|
|
208
|
+
</svg>
|
|
209
|
+
</div>
|
|
100
210
|
<div class="p-6 pt-0">
|
|
101
211
|
<div class="text-2xl font-bold">+12,234</div>
|
|
102
212
|
<p class="text-xs text-muted-foreground">+19% from last month</p>
|
|
@@ -105,14 +215,512 @@
|
|
|
105
215
|
<div class="rounded-xl border bg-card text-card-foreground shadow">
|
|
106
216
|
<div class="p-6 flex flex-row items-center justify-between space-y-0 pb-2">
|
|
107
217
|
<h3 class="tracking-tight text-sm font-medium">Active Now</h3>
|
|
108
|
-
<svg
|
|
218
|
+
<svg
|
|
219
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
220
|
+
viewBox="0 0 24 24"
|
|
221
|
+
fill="none"
|
|
222
|
+
stroke="currentColor"
|
|
223
|
+
stroke-linecap="round"
|
|
224
|
+
stroke-linejoin="round"
|
|
225
|
+
stroke-width="2"
|
|
226
|
+
class="h-4 w-4 text-muted-foreground">
|
|
227
|
+
<path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
|
|
228
|
+
</svg>
|
|
229
|
+
</div>
|
|
109
230
|
<div class="p-6 pt-0">
|
|
110
231
|
<div class="text-2xl font-bold">+573</div>
|
|
111
232
|
<p class="text-xs text-muted-foreground">+201 since last hour</p>
|
|
112
233
|
</div>
|
|
113
234
|
</div>
|
|
114
235
|
</div>
|
|
236
|
+
</div>
|
|
237
|
+
</div>
|
|
238
|
+
</div>
|
|
239
|
+
</div>
|
|
240
|
+
</section>
|
|
241
|
+
<section
|
|
242
|
+
class="items-start justify-center gap-6 rounded-lg p-8 md:grid lg:grid-cols-2 xl:grid-cols-3 border mb-4">
|
|
243
|
+
<div class="col-span-2 grid items-start gap-6 lg:col-span-1">
|
|
244
|
+
<div class="flex items-center justify-center [&>div]:w-full">
|
|
245
|
+
<div class="rounded-xl border bg-card text-card-foreground shadow">
|
|
246
|
+
<div class="flex flex-col p-6 space-y-1">
|
|
247
|
+
<h3 class="font-semibold tracking-tight text-2xl">Create an account</h3>
|
|
248
|
+
<p class="text-sm text-muted-foreground">
|
|
249
|
+
Enter your email below to create your account
|
|
250
|
+
</p>
|
|
251
|
+
</div>
|
|
252
|
+
<div class="p-6 pt-0 grid gap-4">
|
|
253
|
+
<div class="grid grid-cols-2 gap-6">
|
|
254
|
+
<button
|
|
255
|
+
class="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2">
|
|
256
|
+
<svg
|
|
257
|
+
viewBox="0 0 438.549 438.549"
|
|
258
|
+
class="mr-2 h-4 w-4">
|
|
259
|
+
<path
|
|
260
|
+
fill="currentColor"
|
|
261
|
+
d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"></path></svg>Github</button><button
|
|
262
|
+
class="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2">
|
|
263
|
+
<svg
|
|
264
|
+
role="img"
|
|
265
|
+
viewBox="0 0 24 24"
|
|
266
|
+
class="mr-2 h-4 w-4">
|
|
267
|
+
<path
|
|
268
|
+
fill="currentColor"
|
|
269
|
+
d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"></path></svg>Google
|
|
270
|
+
</button>
|
|
271
|
+
</div>
|
|
272
|
+
<div class="relative">
|
|
273
|
+
<div class="absolute inset-0 flex items-center">
|
|
274
|
+
<span class="w-full border-t"></span>
|
|
275
|
+
</div>
|
|
276
|
+
<div class="relative flex justify-center text-xs uppercase">
|
|
277
|
+
<span class="bg-background px-2 text-muted-foreground">Or continue with</span>
|
|
278
|
+
</div>
|
|
279
|
+
</div>
|
|
280
|
+
<div class="grid gap-2">
|
|
281
|
+
<label
|
|
282
|
+
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
|
283
|
+
for="email">Email</label><input
|
|
284
|
+
class="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
|
|
285
|
+
id="email"
|
|
286
|
+
placeholder="m@example.com"
|
|
287
|
+
type="email">
|
|
288
|
+
</div>
|
|
289
|
+
<div class="grid gap-2">
|
|
290
|
+
<label
|
|
291
|
+
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
|
292
|
+
for="password">Password</label><input
|
|
293
|
+
class="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
|
|
294
|
+
id="password"
|
|
295
|
+
type="password">
|
|
296
|
+
</div>
|
|
297
|
+
</div>
|
|
298
|
+
<div class="flex items-center p-6 pt-0">
|
|
299
|
+
<button
|
|
300
|
+
class="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground shadow hover:bg-primary/90 h-9 px-4 py-2 w-full">
|
|
301
|
+
Create account
|
|
302
|
+
</button>
|
|
303
|
+
</div>
|
|
304
|
+
</div>
|
|
305
|
+
</div>
|
|
306
|
+
<div class="flex items-center justify-center [&>div]:w-full">
|
|
307
|
+
<div class="rounded-xl border bg-card text-card-foreground shadow">
|
|
308
|
+
<div class="flex flex-col space-y-1.5 p-6">
|
|
309
|
+
<h3 class="font-semibold leading-none tracking-tight">Payment Method</h3>
|
|
310
|
+
<p class="text-sm text-muted-foreground">Add a new payment method to your account.</p>
|
|
311
|
+
</div>
|
|
312
|
+
<div class="p-6 pt-0 grid gap-6">
|
|
313
|
+
<div
|
|
314
|
+
role="radiogroup"
|
|
315
|
+
aria-required="false"
|
|
316
|
+
dir="ltr"
|
|
317
|
+
class="grid grid-cols-3 gap-4"
|
|
318
|
+
tabindex="0"
|
|
319
|
+
style="outline: none">
|
|
320
|
+
<label
|
|
321
|
+
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground [&:has([data-state=checked])]:border-primary"
|
|
322
|
+
for="card"><button
|
|
323
|
+
type="button"
|
|
324
|
+
role="radio"
|
|
325
|
+
aria-checked="true"
|
|
326
|
+
data-state="checked"
|
|
327
|
+
value="card"
|
|
328
|
+
class="aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 sr-only"
|
|
329
|
+
id="card"
|
|
330
|
+
tabindex="-1"
|
|
331
|
+
data-radix-collection-item="">
|
|
332
|
+
<span
|
|
333
|
+
data-state="checked"
|
|
334
|
+
class="flex items-center justify-center"><svg
|
|
335
|
+
width="15"
|
|
336
|
+
height="15"
|
|
337
|
+
viewBox="0 0 15 15"
|
|
338
|
+
fill="none"
|
|
339
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
340
|
+
class="h-3.5 w-3.5 fill-primary">
|
|
341
|
+
<path
|
|
342
|
+
d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z"
|
|
343
|
+
fill="currentColor"
|
|
344
|
+
fill-rule="evenodd"
|
|
345
|
+
clip-rule="evenodd"></path></svg></span></button><svg
|
|
346
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
347
|
+
viewBox="0 0 24 24"
|
|
348
|
+
fill="none"
|
|
349
|
+
stroke="currentColor"
|
|
350
|
+
stroke-linecap="round"
|
|
351
|
+
stroke-linejoin="round"
|
|
352
|
+
stroke-width="2"
|
|
353
|
+
class="mb-3 h-6 w-6">
|
|
354
|
+
<rect
|
|
355
|
+
width="20"
|
|
356
|
+
height="14"
|
|
357
|
+
x="2"
|
|
358
|
+
y="5"
|
|
359
|
+
rx="2"></rect>
|
|
360
|
+
<path d="M2 10h20"></path></svg>Card</label><label
|
|
361
|
+
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground [&:has([data-state=checked])]:border-primary"
|
|
362
|
+
for="paypal"><button
|
|
363
|
+
type="button"
|
|
364
|
+
role="radio"
|
|
365
|
+
aria-checked="false"
|
|
366
|
+
data-state="unchecked"
|
|
367
|
+
value="paypal"
|
|
368
|
+
class="aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 sr-only"
|
|
369
|
+
id="paypal"
|
|
370
|
+
tabindex="-1"
|
|
371
|
+
data-radix-collection-item=""></button><svg
|
|
372
|
+
role="img"
|
|
373
|
+
viewBox="0 0 24 24"
|
|
374
|
+
class="mb-3 h-6 w-6">
|
|
375
|
+
<path
|
|
376
|
+
d="M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944.901C5.026.382 5.474 0 5.998 0h7.46c2.57 0 4.578.543 5.69 1.81 1.01 1.15 1.304 2.42 1.012 4.287-.023.143-.047.288-.077.437-.983 5.05-4.349 6.797-8.647 6.797h-2.19c-.524 0-.968.382-1.05.9l-1.12 7.106zm14.146-14.42a3.35 3.35 0 0 0-.607-.541c-.013.076-.026.175-.041.254-.93 4.778-4.005 7.201-9.138 7.201h-2.19a.563.563 0 0 0-.556.479l-1.187 7.527h-.506l-.24 1.516a.56.56 0 0 0 .554.647h3.882c.46 0 .85-.334.922-.788.06-.26.76-4.852.816-5.09a.932.932 0 0 1 .923-.788h.58c3.76 0 6.705-1.528 7.565-5.946.36-1.847.174-3.388-.777-4.471z"
|
|
377
|
+
fill="currentColor"></path></svg>Paypal</label><label
|
|
378
|
+
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground [&:has([data-state=checked])]:border-primary"
|
|
379
|
+
for="apple"><button
|
|
380
|
+
type="button"
|
|
381
|
+
role="radio"
|
|
382
|
+
aria-checked="false"
|
|
383
|
+
data-state="unchecked"
|
|
384
|
+
value="apple"
|
|
385
|
+
class="aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 sr-only"
|
|
386
|
+
id="apple"
|
|
387
|
+
tabindex="-1"
|
|
388
|
+
data-radix-collection-item=""></button><svg
|
|
389
|
+
role="img"
|
|
390
|
+
viewBox="0 0 24 24"
|
|
391
|
+
class="mb-3 h-6 w-6">
|
|
392
|
+
<path
|
|
393
|
+
d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"
|
|
394
|
+
fill="currentColor"></path></svg>Apple</label>
|
|
395
|
+
</div>
|
|
396
|
+
<div class="grid gap-2">
|
|
397
|
+
<label
|
|
398
|
+
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
|
399
|
+
for="name">Name</label><input
|
|
400
|
+
class="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
|
|
401
|
+
id="name"
|
|
402
|
+
placeholder="First Last">
|
|
403
|
+
</div>
|
|
404
|
+
<div class="grid gap-2">
|
|
405
|
+
<label
|
|
406
|
+
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
|
407
|
+
for="number">Card number</label><input
|
|
408
|
+
class="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
|
|
409
|
+
id="number"
|
|
410
|
+
placeholder="">
|
|
411
|
+
</div>
|
|
412
|
+
<div class="grid grid-cols-3 gap-4">
|
|
413
|
+
<div class="grid gap-2">
|
|
414
|
+
<label
|
|
415
|
+
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
|
416
|
+
for="month">Expires</label><button
|
|
417
|
+
type="button"
|
|
418
|
+
role="combobox"
|
|
419
|
+
aria-controls="radix-:r6f:"
|
|
420
|
+
aria-expanded="false"
|
|
421
|
+
aria-autocomplete="none"
|
|
422
|
+
dir="ltr"
|
|
423
|
+
data-state="closed"
|
|
424
|
+
data-placeholder=""
|
|
425
|
+
class="flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
|
|
426
|
+
id="month">
|
|
427
|
+
<span style="pointer-events: none">Month</span><svg
|
|
428
|
+
width="15"
|
|
429
|
+
height="15"
|
|
430
|
+
viewBox="0 0 15 15"
|
|
431
|
+
fill="none"
|
|
432
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
433
|
+
class="h-4 w-4 opacity-50"
|
|
434
|
+
aria-hidden="true">
|
|
435
|
+
<path
|
|
436
|
+
d="M4.93179 5.43179C4.75605 5.60753 4.75605 5.89245 4.93179 6.06819C5.10753 6.24392 5.39245 6.24392 5.56819 6.06819L7.49999 4.13638L9.43179 6.06819C9.60753 6.24392 9.89245 6.24392 10.0682 6.06819C10.2439 5.89245 10.2439 5.60753 10.0682 5.43179L7.81819 3.18179C7.73379 3.0974 7.61933 3.04999 7.49999 3.04999C7.38064 3.04999 7.26618 3.0974 7.18179 3.18179L4.93179 5.43179ZM10.0682 9.56819C10.2439 9.39245 10.2439 9.10753 10.0682 8.93179C9.89245 8.75606 9.60753 8.75606 9.43179 8.93179L7.49999 10.8636L5.56819 8.93179C5.39245 8.75606 5.10753 8.75606 4.93179 8.93179C4.75605 9.10753 4.75605 9.39245 4.93179 9.56819L7.18179 11.8182C7.35753 11.9939 7.64245 11.9939 7.81819 11.8182L10.0682 9.56819Z"
|
|
437
|
+
fill="currentColor"
|
|
438
|
+
fill-rule="evenodd"
|
|
439
|
+
clip-rule="evenodd"></path>
|
|
440
|
+
</svg>
|
|
441
|
+
</button>
|
|
442
|
+
</div>
|
|
443
|
+
<div class="grid gap-2">
|
|
444
|
+
<label
|
|
445
|
+
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
|
446
|
+
for="year">Year</label><button
|
|
447
|
+
type="button"
|
|
448
|
+
role="combobox"
|
|
449
|
+
aria-controls="radix-:r6g:"
|
|
450
|
+
aria-expanded="false"
|
|
451
|
+
aria-autocomplete="none"
|
|
452
|
+
dir="ltr"
|
|
453
|
+
data-state="closed"
|
|
454
|
+
data-placeholder=""
|
|
455
|
+
class="flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
|
|
456
|
+
id="year">
|
|
457
|
+
<span style="pointer-events: none">Year</span><svg
|
|
458
|
+
width="15"
|
|
459
|
+
height="15"
|
|
460
|
+
viewBox="0 0 15 15"
|
|
461
|
+
fill="none"
|
|
462
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
463
|
+
class="h-4 w-4 opacity-50"
|
|
464
|
+
aria-hidden="true">
|
|
465
|
+
<path
|
|
466
|
+
d="M4.93179 5.43179C4.75605 5.60753 4.75605 5.89245 4.93179 6.06819C5.10753 6.24392 5.39245 6.24392 5.56819 6.06819L7.49999 4.13638L9.43179 6.06819C9.60753 6.24392 9.89245 6.24392 10.0682 6.06819C10.2439 5.89245 10.2439 5.60753 10.0682 5.43179L7.81819 3.18179C7.73379 3.0974 7.61933 3.04999 7.49999 3.04999C7.38064 3.04999 7.26618 3.0974 7.18179 3.18179L4.93179 5.43179ZM10.0682 9.56819C10.2439 9.39245 10.2439 9.10753 10.0682 8.93179C9.89245 8.75606 9.60753 8.75606 9.43179 8.93179L7.49999 10.8636L5.56819 8.93179C5.39245 8.75606 5.10753 8.75606 4.93179 8.93179C4.75605 9.10753 4.75605 9.39245 4.93179 9.56819L7.18179 11.8182C7.35753 11.9939 7.64245 11.9939 7.81819 11.8182L10.0682 9.56819Z"
|
|
467
|
+
fill="currentColor"
|
|
468
|
+
fill-rule="evenodd"
|
|
469
|
+
clip-rule="evenodd"></path>
|
|
470
|
+
</svg>
|
|
471
|
+
</button>
|
|
472
|
+
</div>
|
|
473
|
+
<div class="grid gap-2">
|
|
474
|
+
<label
|
|
475
|
+
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
|
476
|
+
for="cvc">CVC</label><input
|
|
477
|
+
class="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
|
|
478
|
+
id="cvc"
|
|
479
|
+
placeholder="CVC">
|
|
480
|
+
</div>
|
|
481
|
+
</div>
|
|
482
|
+
</div>
|
|
483
|
+
<div class="flex items-center p-6 pt-0">
|
|
484
|
+
<button
|
|
485
|
+
class="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground shadow hover:bg-primary/90 h-9 px-4 py-2 w-full">
|
|
486
|
+
Continue
|
|
487
|
+
</button>
|
|
488
|
+
</div>
|
|
489
|
+
</div>
|
|
490
|
+
</div>
|
|
491
|
+
</div>
|
|
492
|
+
<div class="col-span-2 grid items-start gap-6 lg:col-span-1 mt-8 lg:mt-0">
|
|
493
|
+
<div class="flex items-center justify-center [&>div]:w-full">
|
|
494
|
+
<div class="rounded-xl border bg-card text-card-foreground shadow">
|
|
495
|
+
<div class="flex flex-col space-y-1.5 p-6 pb-3">
|
|
496
|
+
<h3 class="font-semibold leading-none tracking-tight">Notifications</h3>
|
|
497
|
+
<p class="text-sm text-muted-foreground">
|
|
498
|
+
Choose what you want to be notified about.
|
|
499
|
+
</p>
|
|
500
|
+
</div>
|
|
501
|
+
<div class="p-6 pt-0 grid gap-1">
|
|
502
|
+
<div
|
|
503
|
+
class="-mx-2 flex items-start space-x-4 rounded-md p-2 transition-all hover:bg-accent hover:text-accent-foreground">
|
|
504
|
+
<svg
|
|
505
|
+
width="15"
|
|
506
|
+
height="15"
|
|
507
|
+
viewBox="0 0 15 15"
|
|
508
|
+
fill="none"
|
|
509
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
510
|
+
class="mt-px h-5 w-5">
|
|
511
|
+
<path
|
|
512
|
+
d="M8.60124 1.25086C8.60124 1.75459 8.26278 2.17927 7.80087 2.30989C10.1459 2.4647 12 4.41582 12 6.79999V10.25C12 11.0563 12.0329 11.7074 12.7236 12.0528C12.931 12.1565 13.0399 12.3892 12.9866 12.6149C12.9333 12.8406 12.7319 13 12.5 13H8.16144C8.36904 13.1832 8.49997 13.4513 8.49997 13.75C8.49997 14.3023 8.05226 14.75 7.49997 14.75C6.94769 14.75 6.49997 14.3023 6.49997 13.75C6.49997 13.4513 6.63091 13.1832 6.83851 13H2.49999C2.2681 13 2.06664 12.8406 2.01336 12.6149C1.96009 12.3892 2.06897 12.1565 2.27638 12.0528C2.96708 11.7074 2.99999 11.0563 2.99999 10.25V6.79999C2.99999 4.41537 4.85481 2.46396 7.20042 2.3098C6.73867 2.17908 6.40036 1.75448 6.40036 1.25086C6.40036 0.643104 6.89304 0.150421 7.5008 0.150421C8.10855 0.150421 8.60124 0.643104 8.60124 1.25086ZM7.49999 3.29999C5.56699 3.29999 3.99999 4.86699 3.99999 6.79999V10.25L4.00002 10.3009C4.0005 10.7463 4.00121 11.4084 3.69929 12H11.3007C10.9988 11.4084 10.9995 10.7463 11 10.3009L11 10.25V6.79999C11 4.86699 9.43299 3.29999 7.49999 3.29999Z"
|
|
513
|
+
fill="currentColor"
|
|
514
|
+
fill-rule="evenodd"
|
|
515
|
+
clip-rule="evenodd"></path>
|
|
516
|
+
</svg>
|
|
517
|
+
<div class="space-y-1">
|
|
518
|
+
<p class="text-sm font-medium leading-none">Everything</p>
|
|
519
|
+
<p class="text-sm text-muted-foreground">
|
|
520
|
+
Email digest, mentions & all activity.
|
|
521
|
+
</p>
|
|
522
|
+
</div>
|
|
523
|
+
</div>
|
|
524
|
+
<div
|
|
525
|
+
class="-mx-2 flex items-start space-x-4 rounded-md bg-accent p-2 text-accent-foreground transition-all">
|
|
526
|
+
<svg
|
|
527
|
+
width="15"
|
|
528
|
+
height="15"
|
|
529
|
+
viewBox="0 0 15 15"
|
|
530
|
+
fill="none"
|
|
531
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
532
|
+
class="mt-px h-5 w-5">
|
|
533
|
+
<path
|
|
534
|
+
d="M7.5 0.875C5.49797 0.875 3.875 2.49797 3.875 4.5C3.875 6.15288 4.98124 7.54738 6.49373 7.98351C5.2997 8.12901 4.27557 8.55134 3.50407 9.31167C2.52216 10.2794 2.02502 11.72 2.02502 13.5999C2.02502 13.8623 2.23769 14.0749 2.50002 14.0749C2.76236 14.0749 2.97502 13.8623 2.97502 13.5999C2.97502 11.8799 3.42786 10.7206 4.17091 9.9883C4.91536 9.25463 6.02674 8.87499 7.49995 8.87499C8.97317 8.87499 10.0846 9.25463 10.8291 9.98831C11.5721 10.7206 12.025 11.8799 12.025 13.5999C12.025 13.8623 12.2376 14.0749 12.5 14.0749C12.7623 14.075 12.975 13.8623 12.975 13.6C12.975 11.72 12.4778 10.2794 11.4959 9.31166C10.7244 8.55135 9.70025 8.12903 8.50625 7.98352C10.0187 7.5474 11.125 6.15289 11.125 4.5C11.125 2.49797 9.50203 0.875 7.5 0.875ZM4.825 4.5C4.825 3.02264 6.02264 1.825 7.5 1.825C8.97736 1.825 10.175 3.02264 10.175 4.5C10.175 5.97736 8.97736 7.175 7.5 7.175C6.02264 7.175 4.825 5.97736 4.825 4.5Z"
|
|
535
|
+
fill="currentColor"
|
|
536
|
+
fill-rule="evenodd"
|
|
537
|
+
clip-rule="evenodd"></path>
|
|
538
|
+
</svg>
|
|
539
|
+
<div class="space-y-1">
|
|
540
|
+
<p class="text-sm font-medium leading-none">Available</p>
|
|
541
|
+
<p class="text-sm text-muted-foreground">Only mentions and comments.</p>
|
|
542
|
+
</div>
|
|
543
|
+
</div>
|
|
544
|
+
<div
|
|
545
|
+
class="-mx-2 flex items-start space-x-4 rounded-md p-2 transition-all hover:bg-accent hover:text-accent-foreground">
|
|
546
|
+
<svg
|
|
547
|
+
width="15"
|
|
548
|
+
height="15"
|
|
549
|
+
viewBox="0 0 15 15"
|
|
550
|
+
fill="none"
|
|
551
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
552
|
+
class="mt-px h-5 w-5">
|
|
553
|
+
<path
|
|
554
|
+
d="M13.3536 2.35355C13.5488 2.15829 13.5488 1.84171 13.3536 1.64645C13.1583 1.45118 12.8417 1.45118 12.6464 1.64645L10.6828 3.61012C9.70652 3.21671 8.63759 3 7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C0.902945 9.08812 2.02314 10.1861 3.36061 10.9323L1.64645 12.6464C1.45118 12.8417 1.45118 13.1583 1.64645 13.3536C1.84171 13.5488 2.15829 13.5488 2.35355 13.3536L4.31723 11.3899C5.29348 11.7833 6.36241 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C14.0971 5.9119 12.9769 4.81391 11.6394 4.06771L13.3536 2.35355ZM9.90428 4.38861C9.15332 4.1361 8.34759 4 7.5 4C4.80285 4 2.52952 5.37816 1.09622 7.50001C1.87284 8.6497 2.89609 9.58106 4.09974 10.1931L9.90428 4.38861ZM5.09572 10.6114L10.9003 4.80685C12.1039 5.41894 13.1272 6.35031 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11C6.65241 11 5.84668 10.8639 5.09572 10.6114Z"
|
|
555
|
+
fill="currentColor"
|
|
556
|
+
fill-rule="evenodd"
|
|
557
|
+
clip-rule="evenodd"></path>
|
|
558
|
+
</svg>
|
|
559
|
+
<div class="space-y-1">
|
|
560
|
+
<p class="text-sm font-medium leading-none">Ignoring</p>
|
|
561
|
+
<p class="text-sm text-muted-foreground">Turn off all notifications.</p>
|
|
562
|
+
</div>
|
|
563
|
+
</div>
|
|
564
|
+
</div>
|
|
565
|
+
</div>
|
|
566
|
+
</div>
|
|
567
|
+
<div class="rounded-xl border bg-card text-card-foreground shadow">
|
|
568
|
+
<div class="flex min-h-[350px] w-full justify-center p-10 items-center flex-col gap-y-8">
|
|
569
|
+
<div class="w-full">
|
|
570
|
+
<div
|
|
571
|
+
class="w-full"
|
|
572
|
+
data-orientation="vertical">
|
|
573
|
+
<div
|
|
574
|
+
data-orientation="vertical"
|
|
575
|
+
class="border-b st-accordion"
|
|
576
|
+
data-controller="ui--accordion">
|
|
577
|
+
<h3
|
|
578
|
+
data-orientation="vertical"
|
|
579
|
+
class="flex">
|
|
580
|
+
<a
|
|
581
|
+
href="content-1"
|
|
582
|
+
data-action="ui--accordion#toggle"
|
|
583
|
+
aria-expanded="true"
|
|
584
|
+
data-orientation="vertical"
|
|
585
|
+
class="flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180"
|
|
586
|
+
data-state="closed">
|
|
587
|
+
Did you know?<svg
|
|
588
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
589
|
+
width="24"
|
|
590
|
+
height="24"
|
|
591
|
+
viewBox="0 0 24 24"
|
|
592
|
+
fill="none"
|
|
593
|
+
stroke="currentColor"
|
|
594
|
+
stroke-width="2"
|
|
595
|
+
stroke-linecap="round"
|
|
596
|
+
stroke-linejoin="round"
|
|
597
|
+
class="h-4 w-4 shrink-0 transition-transform duration-200">
|
|
598
|
+
<polyline points="6 9 12 15 18 9"></polyline>
|
|
599
|
+
</svg>
|
|
600
|
+
</a>
|
|
601
|
+
</h3>
|
|
602
|
+
<div
|
|
603
|
+
data-accordion-id="content-1"
|
|
604
|
+
role="region"
|
|
605
|
+
data-orientation="vertical"
|
|
606
|
+
class="st-accordion__content overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down">
|
|
607
|
+
<div class="pb-4 pt-0">
|
|
608
|
+
You can wrap shadcn helpers in any component library you want!
|
|
609
|
+
</div>
|
|
610
|
+
</div>
|
|
611
|
+
</div>
|
|
612
|
+
</div>
|
|
115
613
|
|
|
614
|
+
<div
|
|
615
|
+
class="w-full"
|
|
616
|
+
data-orientation="vertical">
|
|
617
|
+
<div
|
|
618
|
+
data-orientation="vertical"
|
|
619
|
+
class="border-b st-accordion"
|
|
620
|
+
data-controller="ui--accordion">
|
|
621
|
+
<h3
|
|
622
|
+
data-orientation="vertical"
|
|
623
|
+
class="flex">
|
|
624
|
+
<a
|
|
625
|
+
href="content-1"
|
|
626
|
+
data-action="ui--accordion#toggle"
|
|
627
|
+
aria-expanded="true"
|
|
628
|
+
data-orientation="vertical"
|
|
629
|
+
class="flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180"
|
|
630
|
+
data-state="closed">
|
|
631
|
+
Use the generators.<svg
|
|
632
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
633
|
+
width="24"
|
|
634
|
+
height="24"
|
|
635
|
+
viewBox="0 0 24 24"
|
|
636
|
+
fill="none"
|
|
637
|
+
stroke="currentColor"
|
|
638
|
+
stroke-width="2"
|
|
639
|
+
stroke-linecap="round"
|
|
640
|
+
stroke-linejoin="round"
|
|
641
|
+
class="h-4 w-4 shrink-0 transition-transform duration-200">
|
|
642
|
+
<polyline points="6 9 12 15 18 9"></polyline>
|
|
643
|
+
</svg>
|
|
644
|
+
</a>
|
|
645
|
+
</h3>
|
|
646
|
+
<div
|
|
647
|
+
data-accordion-id="content-1"
|
|
648
|
+
role="region"
|
|
649
|
+
data-orientation="vertical"
|
|
650
|
+
class="st-accordion__content overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down">
|
|
651
|
+
<div class="pb-4 pt-0">
|
|
652
|
+
Add components with
|
|
653
|
+
<code
|
|
654
|
+
class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono font-semibold">rails g shadcn_ui add accordion</code>
|
|
655
|
+
</div>
|
|
656
|
+
</div>
|
|
657
|
+
</div>
|
|
658
|
+
</div>
|
|
659
|
+
</div>
|
|
660
|
+
</div>
|
|
661
|
+
</div>
|
|
662
|
+
<div class="flex items-center justify-center [&>div]:w-full">
|
|
663
|
+
<div class="rounded-xl border bg-card text-card-foreground shadow">
|
|
664
|
+
<div class="flex flex-col space-y-1.5 p-6">
|
|
665
|
+
<h3 class="font-semibold leading-none tracking-tight">Cookie Settings</h3>
|
|
666
|
+
<p class="text-sm text-muted-foreground">Manage your cookie settings here.</p>
|
|
667
|
+
</div>
|
|
668
|
+
<div class="p-6 pt-0 grid gap-6">
|
|
669
|
+
<div class="flex items-center justify-between space-x-2">
|
|
670
|
+
<label
|
|
671
|
+
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 flex flex-col space-y-1"
|
|
672
|
+
for="necessary"><span>Strictly Necessary</span><span class="font-normal leading-snug text-muted-foreground">These cookies are essential in order to use the website and use its
|
|
673
|
+
features.</span></label><button
|
|
674
|
+
type="button"
|
|
675
|
+
role="switch"
|
|
676
|
+
aria-checked="true"
|
|
677
|
+
data-state="checked"
|
|
678
|
+
value="on"
|
|
679
|
+
class="peer inline-flex h-[20px] w-[36px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input"
|
|
680
|
+
id="necessary">
|
|
681
|
+
<span
|
|
682
|
+
data-state="checked"
|
|
683
|
+
class="pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"></span>
|
|
684
|
+
</button>
|
|
685
|
+
</div>
|
|
686
|
+
<div class="flex items-center justify-between space-x-2">
|
|
687
|
+
<label
|
|
688
|
+
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 flex flex-col space-y-1"
|
|
689
|
+
for="functional"><span>Functional Cookies</span><span class="font-normal leading-snug text-muted-foreground">These cookies allow the website to provide personalized functionality.</span></label><button
|
|
690
|
+
type="button"
|
|
691
|
+
role="switch"
|
|
692
|
+
aria-checked="false"
|
|
693
|
+
data-state="unchecked"
|
|
694
|
+
value="on"
|
|
695
|
+
class="peer inline-flex h-[20px] w-[36px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input"
|
|
696
|
+
id="functional">
|
|
697
|
+
<span
|
|
698
|
+
data-state="unchecked"
|
|
699
|
+
class="pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"></span>
|
|
700
|
+
</button>
|
|
701
|
+
</div>
|
|
702
|
+
<div class="flex items-center justify-between space-x-2">
|
|
703
|
+
<label
|
|
704
|
+
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 flex flex-col space-y-1"
|
|
705
|
+
for="performance"><span>Performance Cookies</span><span class="font-normal leading-snug text-muted-foreground">These cookies help to improve the performance of the website.</span></label><button
|
|
706
|
+
type="button"
|
|
707
|
+
role="switch"
|
|
708
|
+
aria-checked="false"
|
|
709
|
+
data-state="unchecked"
|
|
710
|
+
value="on"
|
|
711
|
+
class="peer inline-flex h-[20px] w-[36px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input"
|
|
712
|
+
id="performance">
|
|
713
|
+
<span
|
|
714
|
+
data-state="unchecked"
|
|
715
|
+
class="pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"></span>
|
|
716
|
+
</button>
|
|
717
|
+
</div>
|
|
718
|
+
</div>
|
|
719
|
+
<div class="flex items-center p-6 pt-0">
|
|
720
|
+
<button
|
|
721
|
+
class="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2 w-full">
|
|
722
|
+
Save preferences
|
|
723
|
+
</button>
|
|
116
724
|
</div>
|
|
117
725
|
</div>
|
|
118
726
|
</div>
|