negodesign 0.0.26 → 0.0.27

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.
Files changed (112) hide show
  1. package/dist/components/core/breadcrumb/breadcrumb-list.svelte +31 -31
  2. package/dist/components/core/button/ButtonBack.svelte +18 -18
  3. package/dist/components/core/button/ButtonLogin.svelte +15 -15
  4. package/dist/components/core/button/ButtonLoginWith.svelte +57 -57
  5. package/dist/components/core/button/ButtonSend.svelte +15 -15
  6. package/dist/components/core/card/highlight/01/CardHighlight01.svelte +91 -91
  7. package/dist/components/core/card/highlight/02/CardHighlight02.svelte +93 -93
  8. package/dist/components/core/card/highlight/CardHighlight.svelte +22 -22
  9. package/dist/components/core/card/media/01/CardMedia01.svelte +111 -111
  10. package/dist/components/core/card/media/02/CardMedia02.svelte +110 -110
  11. package/dist/components/core/card/media/CardMedia.svelte +17 -17
  12. package/dist/components/core/card/profile/01/CardProfile01.svelte +98 -98
  13. package/dist/components/core/card/profile/02/CardProfile02.svelte +98 -98
  14. package/dist/components/core/card/profile/CardProfile.svelte +17 -17
  15. package/dist/components/core/card/promotion/CardPromotion.svelte +112 -112
  16. package/dist/components/core/card/shared/CardButton.svelte +30 -30
  17. package/dist/components/core/card/shared/CardCart.svelte +36 -36
  18. package/dist/components/core/card/shared/CardDescription.svelte +38 -38
  19. package/dist/components/core/card/shared/CardFavorite.svelte +33 -33
  20. package/dist/components/core/card/shared/CardStarRating.svelte +20 -20
  21. package/dist/components/core/card/shared/CardStartPrice.svelte +34 -34
  22. package/dist/components/core/card/shared/CardTags.svelte +73 -73
  23. package/dist/components/core/card/shared/CardThumbnailVideo.svelte +169 -169
  24. package/dist/components/core/card/shared/TruncatableText.svelte +55 -55
  25. package/dist/components/core/carousel/badge/ui/CarouselBadge.svelte +82 -83
  26. package/dist/components/core/carousel/hero/CarouselHero.svelte +158 -158
  27. package/dist/components/core/carousel/highlights/ui/CarouselHighlights.svelte +63 -63
  28. package/dist/components/core/carousel/promotion/ui/CarouselPromotion.svelte +64 -64
  29. package/dist/components/core/carousel/shared/ui/CarouselHeader.svelte +55 -55
  30. package/dist/components/core/datatable/ui/DataTableActions.svelte +28 -28
  31. package/dist/components/core/datatable/ui/DataTableCheckbox.svelte +22 -22
  32. package/dist/components/core/datatable/ui/DataTableContent.svelte +59 -59
  33. package/dist/components/core/datatable/ui/DataTableCore.svelte +151 -151
  34. package/dist/components/core/datatable/ui/DataTableDragHandle.svelte +8 -8
  35. package/dist/components/core/datatable/ui/DataTableListFilter.svelte +59 -59
  36. package/dist/components/core/datatable/ui/DataTableListPagination.svelte +35 -35
  37. package/dist/components/core/form/ui/input-base.svelte +81 -81
  38. package/dist/components/core/form/ui/input-email-or-phone.svelte +23 -23
  39. package/dist/components/core/form/ui/input-email.svelte +23 -23
  40. package/dist/components/core/form/ui/input-password-confirm.svelte +23 -23
  41. package/dist/components/core/form/ui/input-password.svelte +23 -23
  42. package/dist/components/core/form/ui/input-phone.svelte +33 -33
  43. package/dist/components/core/form/ui/input-username.svelte +22 -22
  44. package/dist/components/core/hero/SimpleHero.svelte +65 -65
  45. package/dist/components/core/label/LabelOr.svelte +25 -25
  46. package/dist/components/core/link/link-forget-password.svelte +12 -12
  47. package/dist/components/core/link/link-privacy-polity.svelte +12 -12
  48. package/dist/components/core/link/link-terms-of-service.svelte +12 -12
  49. package/dist/components/core/nav/ui/menu-links.svelte +27 -27
  50. package/dist/components/core/nav/ui/mobile/nav-menu-drawer.svelte +85 -85
  51. package/dist/components/core/nav/ui/nav-menu-bottom-sidebar.svelte +33 -33
  52. package/dist/components/core/nav/ui/nav-menu-sidebar.svelte +97 -97
  53. package/dist/components/core/nav/ui/nav-menu-top-bar-sidebar.svelte +103 -103
  54. package/dist/components/core/nav/ui/nav-menu.svelte +106 -106
  55. package/dist/components/core/panel/CarouselSlot.svelte +63 -63
  56. package/dist/components/core/panel/LeftHero.svelte +116 -116
  57. package/dist/components/core/search/SearchInput.svelte +32 -32
  58. package/dist/components/core/search/shared/SearchInputCore.svelte +66 -66
  59. package/dist/components/core/sidebar/MenuBarSidebar.svelte +70 -70
  60. package/dist/components/core/tabs/ui/tab-underline.svelte +43 -43
  61. package/dist/components/pages/admin/01/ui/AdminContent.svelte +14 -14
  62. package/dist/components/pages/admin/01/ui/AdminPanel.svelte +46 -46
  63. package/dist/components/pages/security/login/01/ui/FormRegister.svelte +28 -28
  64. package/dist/components/pages/security/login/01/ui/LoginCard.svelte +107 -107
  65. package/dist/components/pages/security/login/PageLogin.svelte +22 -22
  66. package/dist/components/ui/badge/badge.svelte +49 -49
  67. package/dist/components/ui/button/button.svelte +82 -82
  68. package/dist/components/ui/chart/chart-container.svelte +80 -80
  69. package/dist/components/ui/chart/chart-style.svelte +37 -37
  70. package/dist/components/ui/chart/chart-tooltip.svelte +184 -184
  71. package/dist/components/ui/checkbox/checkbox.svelte +40 -40
  72. package/dist/components/ui/data-table/flex-render.svelte +40 -40
  73. package/dist/components/ui/drawer/drawer-close.svelte +7 -7
  74. package/dist/components/ui/drawer/drawer-content.svelte +33 -33
  75. package/dist/components/ui/drawer/drawer-description.svelte +17 -17
  76. package/dist/components/ui/drawer/drawer-footer.svelte +20 -20
  77. package/dist/components/ui/drawer/drawer-header.svelte +20 -20
  78. package/dist/components/ui/drawer/drawer-nested.svelte +12 -12
  79. package/dist/components/ui/drawer/drawer-overlay.svelte +17 -17
  80. package/dist/components/ui/drawer/drawer-portal.svelte +7 -7
  81. package/dist/components/ui/drawer/drawer-title.svelte +17 -17
  82. package/dist/components/ui/drawer/drawer-trigger.svelte +7 -7
  83. package/dist/components/ui/drawer/drawer.svelte +12 -12
  84. package/dist/components/ui/select/select-content.svelte +45 -45
  85. package/dist/components/ui/select/select-group-heading.svelte +21 -21
  86. package/dist/components/ui/select/select-group.svelte +17 -17
  87. package/dist/components/ui/select/select-item.svelte +41 -41
  88. package/dist/components/ui/select/select-label.svelte +20 -20
  89. package/dist/components/ui/select/select-portal.svelte +7 -7
  90. package/dist/components/ui/select/select-scroll-down-button.svelte +21 -21
  91. package/dist/components/ui/select/select-scroll-up-button.svelte +21 -21
  92. package/dist/components/ui/select/select-separator.svelte +18 -18
  93. package/dist/components/ui/select/select-trigger.svelte +30 -30
  94. package/dist/components/ui/select/select.svelte +11 -11
  95. package/dist/components/ui/sidebar/sidebar-menu-sub-button.svelte +39 -39
  96. package/dist/components/ui/star-rating/star-rating-star.svelte +41 -41
  97. package/dist/components/ui/star-rating/star-rating.svelte +20 -20
  98. package/dist/components/ui/table/table-body.svelte +15 -15
  99. package/dist/components/ui/table/table-caption.svelte +20 -20
  100. package/dist/components/ui/table/table-cell.svelte +15 -15
  101. package/dist/components/ui/table/table-footer.svelte +20 -20
  102. package/dist/components/ui/table/table-head.svelte +15 -15
  103. package/dist/components/ui/table/table-header.svelte +20 -20
  104. package/dist/components/ui/table/table-row.svelte +15 -15
  105. package/dist/components/ui/table/table.svelte +17 -17
  106. package/dist/components/ui/tabs/tabs-content.svelte +17 -17
  107. package/dist/components/ui/tabs/tabs-list.svelte +40 -40
  108. package/dist/components/ui/tabs/tabs-trigger.svelte +23 -23
  109. package/dist/components/ui/tabs/tabs.svelte +19 -19
  110. package/dist/globals.css +3 -0
  111. package/dist/styles/globals.css +149 -149
  112. package/package.json +113 -113
@@ -1,65 +1,65 @@
1
- <script lang="ts">
2
- import { Button } from "../../ui/button/index.js";
3
- import type { HeroSimpleProps } from "./types";
4
- let {
5
- title,
6
- subTitle,
7
- description,
8
- image,
9
- buttons,
10
- titleClass,
11
- subTitleClass,
12
- descriptionClass,
13
- imageClass,
14
- }: HeroSimpleProps = $props();
15
- </script>
16
-
17
- <section class="relative flex p-2">
18
- <div class="w-full grid grid-cols-10 md:grid-cols-2 min-h-50 md:min-h-125">
19
- <div class="flex justify-center items-center">
20
- <div class="space-y-1">
21
- {#if title}
22
- <h1
23
- class="font-bold text-[24px] md:text-[60px] lg:text-[80px] {titleClass}"
24
- >
25
- {title}
26
- </h1>
27
- {/if}
28
- {#if subTitle}
29
- <p class="font-semibold text-[16px] md:text-[40px] {subTitleClass}">
30
- {subTitle}
31
- </p>
32
- {/if}
33
- {#if description}
34
- <p
35
- class="text-[12px] md:text-[20px] md:w-8/12 mt-5 {descriptionClass}"
36
- >
37
- {description}
38
- </p>
39
- {/if}
40
- {#if buttons}
41
- <div class="flex flex-wrap gap-2 mt-5 md:mt-10">
42
- {#each buttons as button, i (i)}
43
- <Button
44
- href={button.href}
45
- class={button.className}
46
- onclick={button.onClick}
47
- >
48
- {button.label}
49
- </Button>
50
- {/each}
51
- </div>
52
- {/if}
53
- </div>
54
- </div>
55
- <div class="flex justify-center items-center">
56
- {#if image}
57
- <img
58
- src={image}
59
- alt={image}
60
- class="rounded-lg h-50 md:h-125 w-[60%] object-cover {imageClass}"
61
- />
62
- {/if}
63
- </div>
64
- </div>
65
- </section>
1
+ <script lang="ts">
2
+ import { Button } from "../../ui/button/index.js";
3
+ import type { HeroSimpleProps } from "./types";
4
+ let {
5
+ title,
6
+ subTitle,
7
+ description,
8
+ image,
9
+ buttons,
10
+ titleClass,
11
+ subTitleClass,
12
+ descriptionClass,
13
+ imageClass,
14
+ }: HeroSimpleProps = $props();
15
+ </script>
16
+
17
+ <section class="relative flex p-2">
18
+ <div class="w-full grid grid-cols-10 md:grid-cols-2 min-h-50 md:min-h-125">
19
+ <div class="flex justify-center items-center">
20
+ <div class="space-y-1">
21
+ {#if title}
22
+ <h1
23
+ class="font-bold text-[24px] md:text-[60px] lg:text-[80px] {titleClass}"
24
+ >
25
+ {title}
26
+ </h1>
27
+ {/if}
28
+ {#if subTitle}
29
+ <p class="font-semibold text-[16px] md:text-[40px] {subTitleClass}">
30
+ {subTitle}
31
+ </p>
32
+ {/if}
33
+ {#if description}
34
+ <p
35
+ class="text-[12px] md:text-[20px] md:w-8/12 mt-5 {descriptionClass}"
36
+ >
37
+ {description}
38
+ </p>
39
+ {/if}
40
+ {#if buttons}
41
+ <div class="flex flex-wrap gap-2 mt-5 md:mt-10">
42
+ {#each buttons as button, i (i)}
43
+ <Button
44
+ href={button.href}
45
+ class={button.className}
46
+ onclick={button.onClick}
47
+ >
48
+ {button.label}
49
+ </Button>
50
+ {/each}
51
+ </div>
52
+ {/if}
53
+ </div>
54
+ </div>
55
+ <div class="flex justify-center items-center">
56
+ {#if image}
57
+ <img
58
+ src={image}
59
+ alt={image}
60
+ class="rounded-lg h-50 md:h-125 w-[60%] object-cover {imageClass}"
61
+ />
62
+ {/if}
63
+ </div>
64
+ </div>
65
+ </section>
@@ -1,25 +1,25 @@
1
- <script lang="ts">
2
- import Separator from "../../ui/separator/separator.svelte";
3
- import { t } from "../../../i18n";
4
-
5
- type Props = {
6
- variant?: "SEPARATOR";
7
- };
8
-
9
- let { variant }: Props = $props();
10
- </script>
11
-
12
- {#if variant === "SEPARATOR"}
13
- <div class="relative my-1 text-center">
14
- <div class="absolute inset-0 flex items-center">
15
- <Separator />
16
- </div>
17
- <span
18
- class="relative bg-white dark:bg-primary px-4 text-[10px] uppercase text-slate-400 tracking-wider"
19
- >
20
- {$t("label.or")}
21
- </span>
22
- </div>
23
- {:else}
24
- {$t("label.or")}
25
- {/if}
1
+ <script lang="ts">
2
+ import Separator from "../../ui/separator/separator.svelte";
3
+ import { t } from "../../../i18n";
4
+
5
+ type Props = {
6
+ variant?: "SEPARATOR";
7
+ };
8
+
9
+ let { variant }: Props = $props();
10
+ </script>
11
+
12
+ {#if variant === "SEPARATOR"}
13
+ <div class="relative my-1 text-center">
14
+ <div class="absolute inset-0 flex items-center">
15
+ <Separator />
16
+ </div>
17
+ <span
18
+ class="relative bg-white dark:bg-primary px-4 text-[10px] uppercase text-slate-400 tracking-wider"
19
+ >
20
+ {$t("label.or")}
21
+ </span>
22
+ </div>
23
+ {:else}
24
+ {$t("label.or")}
25
+ {/if}
@@ -1,12 +1,12 @@
1
- <script lang="ts">
2
- import { t } from "../../../i18n";
3
- import type { HTMLAnchorAttributes } from "svelte/elements";
4
-
5
- type Props = HTMLAnchorAttributes;
6
-
7
- let { ...restProps }: Props = $props();
8
- </script>
9
-
10
- <a {...restProps} class="text-xs text-slate-500 hover:text-slate-800 z-10">
11
- {$t("link.forget.password")}!
12
- </a>
1
+ <script lang="ts">
2
+ import { t } from "../../../i18n";
3
+ import type { HTMLAnchorAttributes } from "svelte/elements";
4
+
5
+ type Props = HTMLAnchorAttributes;
6
+
7
+ let { ...restProps }: Props = $props();
8
+ </script>
9
+
10
+ <a {...restProps} class="text-xs text-slate-500 hover:text-slate-800 z-10">
11
+ {$t("link.forget.password")}!
12
+ </a>
@@ -1,12 +1,12 @@
1
- <script lang="ts">
2
- import { t } from "../../../i18n";
3
- import type { HTMLAnchorAttributes } from "svelte/elements";
4
-
5
- type Props = HTMLAnchorAttributes;
6
-
7
- let { ...restProps }: Props = $props();
8
- </script>
9
-
10
- <a {...restProps} class="text-xs text-slate-500 hover:text-slate-800 z-10">
11
- {$t("link.privacy-policy.label")}
12
- </a>
1
+ <script lang="ts">
2
+ import { t } from "../../../i18n";
3
+ import type { HTMLAnchorAttributes } from "svelte/elements";
4
+
5
+ type Props = HTMLAnchorAttributes;
6
+
7
+ let { ...restProps }: Props = $props();
8
+ </script>
9
+
10
+ <a {...restProps} class="text-xs text-slate-500 hover:text-slate-800 z-10">
11
+ {$t("link.privacy-policy.label")}
12
+ </a>
@@ -1,12 +1,12 @@
1
- <script lang="ts">
2
- import { t } from "../../../i18n";
3
- import type { HTMLAnchorAttributes } from "svelte/elements";
4
-
5
- type Props = HTMLAnchorAttributes;
6
-
7
- let { ...restProps }: Props = $props();
8
- </script>
9
-
10
- <a {...restProps} class="text-xs text-slate-500 hover:text-slate-800 z-10">
11
- {$t("link.terms-of-service.label")}
12
- </a>
1
+ <script lang="ts">
2
+ import { t } from "../../../i18n";
3
+ import type { HTMLAnchorAttributes } from "svelte/elements";
4
+
5
+ type Props = HTMLAnchorAttributes;
6
+
7
+ let { ...restProps }: Props = $props();
8
+ </script>
9
+
10
+ <a {...restProps} class="text-xs text-slate-500 hover:text-slate-800 z-10">
11
+ {$t("link.terms-of-service.label")}
12
+ </a>
@@ -1,28 +1,28 @@
1
- <script lang="ts">
2
- import { HugeiconsIcon } from "@hugeicons/svelte";
3
- import type { NavMenuLinksProps } from "../data/nav-menu";
4
-
5
- type Props = {
6
- links: NavMenuLinksProps[];
7
- linkClass?: string;
8
- groupClass?: string;
9
- orientation?: "horizontal" | "vertical";
10
- };
11
-
12
- let { links, linkClass, groupClass, orientation }: Props = $props();
13
- </script>
14
- <ul class={`flex ${orientation === "vertical" ? "flex-col" : "items-center"} gap-2 md:gap-5 lg:gap-15 ${groupClass}`}>
15
- {#each links as item (item.label)}
16
- <li>
17
- <a
18
- class={`flex items-center gap-1 ${linkClass}`}
19
- href={item.url || "#"}
20
- >
21
- {#if item.icon}
22
- <HugeiconsIcon icon={item.icon} size={15} />
23
- {/if}
24
- {item.label}
25
- </a>
26
- </li>
27
- {/each}
1
+ <script lang="ts">
2
+ import { HugeiconsIcon } from "@hugeicons/svelte";
3
+ import type { NavMenuLinksProps } from "../data/nav-menu";
4
+
5
+ type Props = {
6
+ links: NavMenuLinksProps[];
7
+ linkClass?: string;
8
+ groupClass?: string;
9
+ orientation?: "horizontal" | "vertical";
10
+ };
11
+
12
+ let { links, linkClass, groupClass, orientation }: Props = $props();
13
+ </script>
14
+ <ul class={`flex ${orientation === "vertical" ? "flex-col" : "items-center"} gap-2 md:gap-5 lg:gap-15 ${groupClass}`}>
15
+ {#each links as item (item.label)}
16
+ <li>
17
+ <a
18
+ class={`flex items-center gap-1 ${linkClass}`}
19
+ href={item.url || "#"}
20
+ >
21
+ {#if item.icon}
22
+ <HugeiconsIcon icon={item.icon} size={15} />
23
+ {/if}
24
+ {item.label}
25
+ </a>
26
+ </li>
27
+ {/each}
28
28
  </ul>
@@ -1,85 +1,85 @@
1
- <script lang="ts">
2
- import * as Drawer from "../../../../ui/drawer/index.js";
3
- import { Button } from "../../../../ui/button/index.js";
4
- import type { NavMenuLinksProps } from "../../data/nav-menu";
5
- import { buttonVariants } from "../../../../ui/button/index.js";
6
- import { cn } from "../../../../../utils.js";
7
- import { HugeiconsIcon } from "@hugeicons/svelte";
8
- import { Login03Icon, Menu, User03Icon } from "@hugeicons/core-free-icons";
9
- import MenuLinks from "../menu-links.svelte";
10
- import LightSwitch from "../../../../ui/light-switch/light-switch.svelte";
11
- import LanguageSwitcher from "../../../../ui/language-switcher/language-switcher.svelte";
12
- import { t } from "../../../../../i18n";
13
-
14
- type Props = {
15
- links: NavMenuLinksProps[];
16
- onclickButtonLogin?: () => void;
17
- onclickButtonRegister?: () => void;
18
- };
19
-
20
- const { links, onclickButtonLogin, onclickButtonRegister }: Props =
21
- $props();
22
- </script>
23
-
24
- <div class="flex flex-wrap gap-2">
25
- <Drawer.Root direction="right">
26
- <Drawer.Trigger
27
- class={cn(buttonVariants({ variant: "outline" }), "capitalize")}
28
- >
29
- <HugeiconsIcon icon={Menu} />
30
- </Drawer.Trigger>
31
- <Drawer.Content
32
- class="data-[vaul-drawer-direction=bottom]:max-h-[50vh] data-[vaul-drawer-direction=top]:max-h-[50vh]"
33
- >
34
- <Drawer.Header>
35
- <Drawer.Title>{$t("label.menu")}</Drawer.Title>
36
- <Drawer.Description>
37
- {$t("label.navigation.text")}
38
- </Drawer.Description>
39
- </Drawer.Header>
40
- <div class="no-scrollbar overflow-y-auto px-4">
41
- <nav>
42
- <div class="mt-5 mb-4 font-semibold">{$t("label.navigation")}</div>
43
- <MenuLinks
44
- {links}
45
- groupClass="space-y-3"
46
- orientation="vertical"
47
- />
48
- </nav>
49
-
50
- <div class="mt-5">
51
- <div class="mt-5 mb-4 font-semibold">{$t("label.action")}</div>
52
- <section >
53
- {#if onclickButtonRegister}
54
- <Button
55
- variant="outline"
56
- onclick={onclickButtonRegister}
57
- >
58
- <HugeiconsIcon icon={User03Icon} />
59
- {$t("label.register")}
60
- </Button>
61
- {/if}
62
- {#if onclickButtonLogin}
63
- <Button
64
- variant="outline"
65
- onclick={onclickButtonLogin}
66
- >
67
- <HugeiconsIcon icon={Login03Icon} />
68
- {$t("label.login")}
69
- </Button>
70
- {/if}
71
- </section>
72
- </div>
73
- </div>
74
- <Drawer.Footer>
75
- <div class="flex justify-center gap-5 py-5">
76
- <LightSwitch />
77
- <LanguageSwitcher />
78
- </div>
79
- <Drawer.Close class={buttonVariants({ variant: "outline" })}>
80
- {$t("label.close")}
81
- </Drawer.Close>
82
- </Drawer.Footer>
83
- </Drawer.Content>
84
- </Drawer.Root>
85
- </div>
1
+ <script lang="ts">
2
+ import * as Drawer from "../../../../ui/drawer/index.js";
3
+ import { Button } from "../../../../ui/button/index.js";
4
+ import type { NavMenuLinksProps } from "../../data/nav-menu";
5
+ import { buttonVariants } from "../../../../ui/button/index.js";
6
+ import { cn } from "../../../../../utils.js";
7
+ import { HugeiconsIcon } from "@hugeicons/svelte";
8
+ import { Login03Icon, Menu, User03Icon } from "@hugeicons/core-free-icons";
9
+ import MenuLinks from "../menu-links.svelte";
10
+ import LightSwitch from "../../../../ui/light-switch/light-switch.svelte";
11
+ import LanguageSwitcher from "../../../../ui/language-switcher/language-switcher.svelte";
12
+ import { t } from "../../../../../i18n";
13
+
14
+ type Props = {
15
+ links: NavMenuLinksProps[];
16
+ onclickButtonLogin?: () => void;
17
+ onclickButtonRegister?: () => void;
18
+ };
19
+
20
+ const { links, onclickButtonLogin, onclickButtonRegister }: Props =
21
+ $props();
22
+ </script>
23
+
24
+ <div class="flex flex-wrap gap-2">
25
+ <Drawer.Root direction="right">
26
+ <Drawer.Trigger
27
+ class={cn(buttonVariants({ variant: "outline" }), "capitalize")}
28
+ >
29
+ <HugeiconsIcon icon={Menu} />
30
+ </Drawer.Trigger>
31
+ <Drawer.Content
32
+ class="data-[vaul-drawer-direction=bottom]:max-h-[50vh] data-[vaul-drawer-direction=top]:max-h-[50vh]"
33
+ >
34
+ <Drawer.Header>
35
+ <Drawer.Title>{$t("label.menu")}</Drawer.Title>
36
+ <Drawer.Description>
37
+ {$t("label.navigation.text")}
38
+ </Drawer.Description>
39
+ </Drawer.Header>
40
+ <div class="no-scrollbar overflow-y-auto px-4">
41
+ <nav>
42
+ <div class="mt-5 mb-4 font-semibold">{$t("label.navigation")}</div>
43
+ <MenuLinks
44
+ {links}
45
+ groupClass="space-y-3"
46
+ orientation="vertical"
47
+ />
48
+ </nav>
49
+
50
+ <div class="mt-5">
51
+ <div class="mt-5 mb-4 font-semibold">{$t("label.action")}</div>
52
+ <section >
53
+ {#if onclickButtonRegister}
54
+ <Button
55
+ variant="outline"
56
+ onclick={onclickButtonRegister}
57
+ >
58
+ <HugeiconsIcon icon={User03Icon} />
59
+ {$t("label.register")}
60
+ </Button>
61
+ {/if}
62
+ {#if onclickButtonLogin}
63
+ <Button
64
+ variant="outline"
65
+ onclick={onclickButtonLogin}
66
+ >
67
+ <HugeiconsIcon icon={Login03Icon} />
68
+ {$t("label.login")}
69
+ </Button>
70
+ {/if}
71
+ </section>
72
+ </div>
73
+ </div>
74
+ <Drawer.Footer>
75
+ <div class="flex justify-center gap-5 py-5">
76
+ <LightSwitch />
77
+ <LanguageSwitcher />
78
+ </div>
79
+ <Drawer.Close class={buttonVariants({ variant: "outline" })}>
80
+ {$t("label.close")}
81
+ </Drawer.Close>
82
+ </Drawer.Footer>
83
+ </Drawer.Content>
84
+ </Drawer.Root>
85
+ </div>
@@ -1,33 +1,33 @@
1
- <script lang="ts">
2
- import * as Sidebar from "../../../ui/sidebar/index.js";
3
- import type { WithoutChildren } from "../../../../utils.js";
4
- import type { ComponentProps } from "svelte";
5
- import type { NavMenuSidebarProps } from "../data/nav-menu-sidebar";
6
- import { HugeiconsIcon } from "@hugeicons/svelte";
7
-
8
- let {
9
- items,
10
- ...restProps
11
- }: { items?: NavMenuSidebarProps[] } & WithoutChildren<
12
- ComponentProps<typeof Sidebar.Group>
13
- > = $props();
14
- </script>
15
-
16
- <Sidebar.Group {...restProps}>
17
- <Sidebar.GroupContent>
18
- <Sidebar.Menu>
19
- {#each items as item (item.title)}
20
- <Sidebar.MenuItem>
21
- <Sidebar.MenuButton>
22
- {#snippet child({ props })}
23
- <a href={item.url} {...props}>
24
- <HugeiconsIcon icon={item.icon} size={16} />
25
- <span>{item.title}</span>
26
- </a>
27
- {/snippet}
28
- </Sidebar.MenuButton>
29
- </Sidebar.MenuItem>
30
- {/each}
31
- </Sidebar.Menu>
32
- </Sidebar.GroupContent>
33
- </Sidebar.Group>
1
+ <script lang="ts">
2
+ import * as Sidebar from "../../../ui/sidebar/index.js";
3
+ import type { WithoutChildren } from "../../../../utils.js";
4
+ import type { ComponentProps } from "svelte";
5
+ import type { NavMenuSidebarProps } from "../data/nav-menu-sidebar";
6
+ import { HugeiconsIcon } from "@hugeicons/svelte";
7
+
8
+ let {
9
+ items,
10
+ ...restProps
11
+ }: { items?: NavMenuSidebarProps[] } & WithoutChildren<
12
+ ComponentProps<typeof Sidebar.Group>
13
+ > = $props();
14
+ </script>
15
+
16
+ <Sidebar.Group {...restProps}>
17
+ <Sidebar.GroupContent>
18
+ <Sidebar.Menu>
19
+ {#each items as item (item.title)}
20
+ <Sidebar.MenuItem>
21
+ <Sidebar.MenuButton>
22
+ {#snippet child({ props })}
23
+ <a href={item.url} {...props}>
24
+ <HugeiconsIcon icon={item.icon} size={16} />
25
+ <span>{item.title}</span>
26
+ </a>
27
+ {/snippet}
28
+ </Sidebar.MenuButton>
29
+ </Sidebar.MenuItem>
30
+ {/each}
31
+ </Sidebar.Menu>
32
+ </Sidebar.GroupContent>
33
+ </Sidebar.Group>