negodesign 0.0.26 → 0.0.28

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 (115) hide show
  1. package/dist/assets/placeholder-company.png +0 -0
  2. package/dist/assets/placeholder-image.png +0 -0
  3. package/dist/components/core/breadcrumb/breadcrumb-list.svelte +31 -31
  4. package/dist/components/core/button/ButtonBack.svelte +18 -18
  5. package/dist/components/core/button/ButtonLogin.svelte +15 -15
  6. package/dist/components/core/button/ButtonLoginWith.svelte +57 -57
  7. package/dist/components/core/button/ButtonSend.svelte +15 -15
  8. package/dist/components/core/card/highlight/01/CardHighlight01.svelte +110 -91
  9. package/dist/components/core/card/highlight/02/CardHighlight02.svelte +108 -93
  10. package/dist/components/core/card/highlight/CardHighlight.svelte +22 -22
  11. package/dist/components/core/card/highlight/data.js +4 -1
  12. package/dist/components/core/card/media/01/CardMedia01.svelte +111 -111
  13. package/dist/components/core/card/media/02/CardMedia02.svelte +110 -110
  14. package/dist/components/core/card/media/CardMedia.svelte +17 -17
  15. package/dist/components/core/card/profile/01/CardProfile01.svelte +98 -98
  16. package/dist/components/core/card/profile/02/CardProfile02.svelte +98 -98
  17. package/dist/components/core/card/profile/CardProfile.svelte +17 -17
  18. package/dist/components/core/card/promotion/CardPromotion.svelte +133 -112
  19. package/dist/components/core/card/shared/CardButton.svelte +30 -30
  20. package/dist/components/core/card/shared/CardCart.svelte +36 -36
  21. package/dist/components/core/card/shared/CardDescription.svelte +38 -38
  22. package/dist/components/core/card/shared/CardFavorite.svelte +33 -33
  23. package/dist/components/core/card/shared/CardStarRating.svelte +20 -20
  24. package/dist/components/core/card/shared/CardStartPrice.svelte +32 -34
  25. package/dist/components/core/card/shared/CardTags.svelte +70 -73
  26. package/dist/components/core/card/shared/CardThumbnailVideo.svelte +169 -169
  27. package/dist/components/core/card/shared/TruncatableText.svelte +55 -55
  28. package/dist/components/core/carousel/badge/ui/CarouselBadge.svelte +82 -83
  29. package/dist/components/core/carousel/hero/CarouselHero.svelte +158 -158
  30. package/dist/components/core/carousel/highlights/ui/CarouselHighlights.svelte +65 -63
  31. package/dist/components/core/carousel/promotion/ui/CarouselPromotion.svelte +64 -64
  32. package/dist/components/core/carousel/shared/ui/CarouselHeader.svelte +55 -55
  33. package/dist/components/core/datatable/ui/DataTableActions.svelte +28 -28
  34. package/dist/components/core/datatable/ui/DataTableCheckbox.svelte +22 -22
  35. package/dist/components/core/datatable/ui/DataTableContent.svelte +59 -59
  36. package/dist/components/core/datatable/ui/DataTableCore.svelte +151 -151
  37. package/dist/components/core/datatable/ui/DataTableDragHandle.svelte +8 -8
  38. package/dist/components/core/datatable/ui/DataTableListFilter.svelte +59 -59
  39. package/dist/components/core/datatable/ui/DataTableListPagination.svelte +35 -35
  40. package/dist/components/core/form/ui/input-base.svelte +81 -81
  41. package/dist/components/core/form/ui/input-email-or-phone.svelte +23 -23
  42. package/dist/components/core/form/ui/input-email.svelte +23 -23
  43. package/dist/components/core/form/ui/input-password-confirm.svelte +23 -23
  44. package/dist/components/core/form/ui/input-password.svelte +23 -23
  45. package/dist/components/core/form/ui/input-phone.svelte +33 -33
  46. package/dist/components/core/form/ui/input-username.svelte +22 -22
  47. package/dist/components/core/hero/SimpleHero.svelte +65 -65
  48. package/dist/components/core/label/LabelOr.svelte +25 -25
  49. package/dist/components/core/link/link-forget-password.svelte +12 -12
  50. package/dist/components/core/link/link-privacy-polity.svelte +12 -12
  51. package/dist/components/core/link/link-terms-of-service.svelte +12 -12
  52. package/dist/components/core/nav/ui/menu-links.svelte +27 -27
  53. package/dist/components/core/nav/ui/mobile/nav-menu-drawer.svelte +85 -85
  54. package/dist/components/core/nav/ui/nav-menu-bottom-sidebar.svelte +33 -33
  55. package/dist/components/core/nav/ui/nav-menu-sidebar.svelte +97 -97
  56. package/dist/components/core/nav/ui/nav-menu-top-bar-sidebar.svelte +103 -103
  57. package/dist/components/core/nav/ui/nav-menu.svelte +106 -106
  58. package/dist/components/core/panel/CarouselSlot.svelte +63 -63
  59. package/dist/components/core/panel/LeftHero.svelte +116 -116
  60. package/dist/components/core/search/SearchInput.svelte +32 -32
  61. package/dist/components/core/search/shared/SearchInputCore.svelte +66 -66
  62. package/dist/components/core/sidebar/MenuBarSidebar.svelte +70 -70
  63. package/dist/components/core/tabs/ui/tab-underline.svelte +43 -43
  64. package/dist/components/pages/admin/01/ui/AdminContent.svelte +14 -14
  65. package/dist/components/pages/admin/01/ui/AdminPanel.svelte +46 -46
  66. package/dist/components/pages/security/login/01/ui/FormRegister.svelte +28 -28
  67. package/dist/components/pages/security/login/01/ui/LoginCard.svelte +107 -107
  68. package/dist/components/pages/security/login/PageLogin.svelte +22 -22
  69. package/dist/components/ui/badge/badge.svelte +49 -49
  70. package/dist/components/ui/button/button.svelte +82 -82
  71. package/dist/components/ui/chart/chart-container.svelte +80 -80
  72. package/dist/components/ui/chart/chart-style.svelte +37 -37
  73. package/dist/components/ui/chart/chart-tooltip.svelte +184 -184
  74. package/dist/components/ui/checkbox/checkbox.svelte +40 -40
  75. package/dist/components/ui/data-table/flex-render.svelte +40 -40
  76. package/dist/components/ui/drawer/drawer-close.svelte +7 -7
  77. package/dist/components/ui/drawer/drawer-content.svelte +33 -33
  78. package/dist/components/ui/drawer/drawer-description.svelte +17 -17
  79. package/dist/components/ui/drawer/drawer-footer.svelte +20 -20
  80. package/dist/components/ui/drawer/drawer-header.svelte +20 -20
  81. package/dist/components/ui/drawer/drawer-nested.svelte +12 -12
  82. package/dist/components/ui/drawer/drawer-overlay.svelte +17 -17
  83. package/dist/components/ui/drawer/drawer-portal.svelte +7 -7
  84. package/dist/components/ui/drawer/drawer-title.svelte +17 -17
  85. package/dist/components/ui/drawer/drawer-trigger.svelte +7 -7
  86. package/dist/components/ui/drawer/drawer.svelte +12 -12
  87. package/dist/components/ui/select/select-content.svelte +45 -45
  88. package/dist/components/ui/select/select-group-heading.svelte +21 -21
  89. package/dist/components/ui/select/select-group.svelte +17 -17
  90. package/dist/components/ui/select/select-item.svelte +41 -41
  91. package/dist/components/ui/select/select-label.svelte +20 -20
  92. package/dist/components/ui/select/select-portal.svelte +7 -7
  93. package/dist/components/ui/select/select-scroll-down-button.svelte +21 -21
  94. package/dist/components/ui/select/select-scroll-up-button.svelte +21 -21
  95. package/dist/components/ui/select/select-separator.svelte +18 -18
  96. package/dist/components/ui/select/select-trigger.svelte +30 -30
  97. package/dist/components/ui/select/select.svelte +11 -11
  98. package/dist/components/ui/sidebar/sidebar-menu-sub-button.svelte +39 -39
  99. package/dist/components/ui/star-rating/star-rating-star.svelte +41 -41
  100. package/dist/components/ui/star-rating/star-rating.svelte +20 -20
  101. package/dist/components/ui/table/table-body.svelte +15 -15
  102. package/dist/components/ui/table/table-caption.svelte +20 -20
  103. package/dist/components/ui/table/table-cell.svelte +15 -15
  104. package/dist/components/ui/table/table-footer.svelte +20 -20
  105. package/dist/components/ui/table/table-head.svelte +15 -15
  106. package/dist/components/ui/table/table-header.svelte +20 -20
  107. package/dist/components/ui/table/table-row.svelte +15 -15
  108. package/dist/components/ui/table/table.svelte +17 -17
  109. package/dist/components/ui/tabs/tabs-content.svelte +17 -17
  110. package/dist/components/ui/tabs/tabs-list.svelte +40 -40
  111. package/dist/components/ui/tabs/tabs-trigger.svelte +23 -23
  112. package/dist/components/ui/tabs/tabs.svelte +19 -19
  113. package/dist/globals.css +8 -38
  114. package/dist/styles/globals.css +149 -149
  115. package/package.json +113 -113
@@ -1,110 +1,110 @@
1
- <script lang="ts">
2
- /**
3
- * Card component with a title and content.
4
- * @component
5
- */
6
- import {
7
- InformationCircleIcon,
8
- UserIcon,
9
- } from "@hugeicons/core-free-icons";
10
- import { t } from "../../../../../i18n";
11
- import type { CardMediaProps } from "../../types";
12
- import CardStarRating from "../../shared/CardStarRating.svelte";
13
- import CardTags from "../../shared/CardTags.svelte";
14
- import CardDescription from "../../shared/CardDescription.svelte";
15
- import CardThumbnailVideo from "../../shared/CardThumbnailVideo.svelte";
16
- import CardButton from "../../shared/CardButton.svelte";
17
- import CardFavorite from "../../shared/CardFavorite.svelte";
18
- let {
19
- id,
20
- tags,
21
- logo,
22
- title,
23
- content,
24
- className,
25
- imageUrl,
26
- videoUrl,
27
- //videoAction,
28
- startNumber,
29
- startMax = 5,
30
- isImageButtonMaximized = false,
31
- isVideoButtonMaximized = false,
32
- isTagBorderBottom = false,
33
- isFavorite = false,
34
- buttonProfileClass,
35
- buttonDetailsClass,
36
- onFavoriteClick,
37
- onButtonProfile,
38
- onButtonDetails,
39
- }: CardMediaProps = $props();
40
-
41
- let isShowButtonProfileAndDetails = $derived(
42
- onButtonProfile != null && onButtonDetails != null,
43
- );
44
- </script>
45
-
46
- <article
47
- class="border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-transparent rounded-lg p-5 space-y-1 md:space-y-3 {className}"
48
- >
49
- <div class="flex flex-col justify-center items-center w-full relative">
50
- <div class="flex flex-col justify-start gap-2">
51
- <div class="flex justify-center items-center">
52
- {#if logo}
53
- <img src={logo} alt={logo} class="w-12 h-12 rounded-lg" />
54
- {/if}
55
- </div>
56
- <div class="flex flex-col justify-center items-center">
57
- {#if title}
58
- <div class="text-center font-bold text-lg">{title}</div>
59
- {/if}
60
- {#if startNumber}
61
- <CardStarRating {startNumber} {startMax} />
62
- {/if}
63
- </div>
64
- </div>
65
- <div class="flex justify-end items-center absolute top-0 right-0">
66
- <CardFavorite
67
- {id}
68
- {isFavorite}
69
- onFavoriteClick={() => onFavoriteClick!(id)}
70
- />
71
- </div>
72
- <CardTags className="my-4" tags={tags ?? []} {isTagBorderBottom} />
73
- </div>
74
-
75
- <div class="h-15 mb-8">
76
- <CardDescription {content} />
77
- </div>
78
-
79
- <CardThumbnailVideo
80
- {imageUrl}
81
- {videoUrl}
82
- {isImageButtonMaximized}
83
- {isVideoButtonMaximized}
84
- />
85
-
86
- {#if onButtonProfile || onButtonDetails}
87
- <div class="flex justify-center items-center gap-2 mt-4 w-full">
88
- {#if onButtonProfile}
89
- <CardButton
90
- {id}
91
- icon={UserIcon}
92
- className={buttonProfileClass}
93
- text={$t("label.view.profile")}
94
- onClick={onButtonProfile}
95
- isFlex={isShowButtonProfileAndDetails}
96
- />
97
- {/if}
98
- {#if onButtonDetails}
99
- <CardButton
100
- {id}
101
- icon={InformationCircleIcon}
102
- className={buttonDetailsClass}
103
- text={$t("label.more.details")}
104
- onClick={onButtonDetails}
105
- isFlex={isShowButtonProfileAndDetails}
106
- />
107
- {/if}
108
- </div>
109
- {/if}
110
- </article>
1
+ <script lang="ts">
2
+ /**
3
+ * Card component with a title and content.
4
+ * @component
5
+ */
6
+ import {
7
+ InformationCircleIcon,
8
+ UserIcon,
9
+ } from "@hugeicons/core-free-icons";
10
+ import { t } from "../../../../../i18n";
11
+ import type { CardMediaProps } from "../../types";
12
+ import CardStarRating from "../../shared/CardStarRating.svelte";
13
+ import CardTags from "../../shared/CardTags.svelte";
14
+ import CardDescription from "../../shared/CardDescription.svelte";
15
+ import CardThumbnailVideo from "../../shared/CardThumbnailVideo.svelte";
16
+ import CardButton from "../../shared/CardButton.svelte";
17
+ import CardFavorite from "../../shared/CardFavorite.svelte";
18
+ let {
19
+ id,
20
+ tags,
21
+ logo,
22
+ title,
23
+ content,
24
+ className,
25
+ imageUrl,
26
+ videoUrl,
27
+ //videoAction,
28
+ startNumber,
29
+ startMax = 5,
30
+ isImageButtonMaximized = false,
31
+ isVideoButtonMaximized = false,
32
+ isTagBorderBottom = false,
33
+ isFavorite = false,
34
+ buttonProfileClass,
35
+ buttonDetailsClass,
36
+ onFavoriteClick,
37
+ onButtonProfile,
38
+ onButtonDetails,
39
+ }: CardMediaProps = $props();
40
+
41
+ let isShowButtonProfileAndDetails = $derived(
42
+ onButtonProfile != null && onButtonDetails != null,
43
+ );
44
+ </script>
45
+
46
+ <article
47
+ class="border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-transparent rounded-lg p-5 space-y-1 md:space-y-3 {className}"
48
+ >
49
+ <div class="flex flex-col justify-center items-center w-full relative">
50
+ <div class="flex flex-col justify-start gap-2">
51
+ <div class="flex justify-center items-center">
52
+ {#if logo}
53
+ <img src={logo} alt={logo} class="w-12 h-12 rounded-lg" />
54
+ {/if}
55
+ </div>
56
+ <div class="flex flex-col justify-center items-center">
57
+ {#if title}
58
+ <div class="text-center font-bold text-lg">{title}</div>
59
+ {/if}
60
+ {#if startNumber}
61
+ <CardStarRating {startNumber} {startMax} />
62
+ {/if}
63
+ </div>
64
+ </div>
65
+ <div class="flex justify-end items-center absolute top-0 right-0">
66
+ <CardFavorite
67
+ {id}
68
+ {isFavorite}
69
+ onFavoriteClick={() => onFavoriteClick!(id)}
70
+ />
71
+ </div>
72
+ <CardTags className="my-4" tags={tags ?? []} {isTagBorderBottom} />
73
+ </div>
74
+
75
+ <div class="h-15 mb-8">
76
+ <CardDescription {content} />
77
+ </div>
78
+
79
+ <CardThumbnailVideo
80
+ {imageUrl}
81
+ {videoUrl}
82
+ {isImageButtonMaximized}
83
+ {isVideoButtonMaximized}
84
+ />
85
+
86
+ {#if onButtonProfile || onButtonDetails}
87
+ <div class="flex justify-center items-center gap-2 mt-4 w-full">
88
+ {#if onButtonProfile}
89
+ <CardButton
90
+ {id}
91
+ icon={UserIcon}
92
+ className={buttonProfileClass}
93
+ text={$t("label.view.profile")}
94
+ onClick={onButtonProfile}
95
+ isFlex={isShowButtonProfileAndDetails}
96
+ />
97
+ {/if}
98
+ {#if onButtonDetails}
99
+ <CardButton
100
+ {id}
101
+ icon={InformationCircleIcon}
102
+ className={buttonDetailsClass}
103
+ text={$t("label.more.details")}
104
+ onClick={onButtonDetails}
105
+ isFlex={isShowButtonProfileAndDetails}
106
+ />
107
+ {/if}
108
+ </div>
109
+ {/if}
110
+ </article>
@@ -1,17 +1,17 @@
1
- <script lang="ts">
2
- import type { CardMediaProps } from "../types";
3
- import CardMedia01 from "./01/CardMedia01.svelte";
4
- import CardMedia02 from "./02/CardMedia02.svelte";
5
-
6
- type Props = {
7
- variant?: 1 | 2;
8
- };
9
-
10
- let { variant, ...restProps }: CardMediaProps & Props = $props();
11
- </script>
12
-
13
- {#if variant === 2}
14
- <CardMedia02 {...restProps} />
15
- {:else}
16
- <CardMedia01 {...restProps} />
17
- {/if}
1
+ <script lang="ts">
2
+ import type { CardMediaProps } from "../types";
3
+ import CardMedia01 from "./01/CardMedia01.svelte";
4
+ import CardMedia02 from "./02/CardMedia02.svelte";
5
+
6
+ type Props = {
7
+ variant?: 1 | 2;
8
+ };
9
+
10
+ let { variant, ...restProps }: CardMediaProps & Props = $props();
11
+ </script>
12
+
13
+ {#if variant === 2}
14
+ <CardMedia02 {...restProps} />
15
+ {:else}
16
+ <CardMedia01 {...restProps} />
17
+ {/if}
@@ -1,98 +1,98 @@
1
- <script lang="ts">
2
- /**
3
- * Card component with a title and content.
4
- * @component
5
- */
6
- import {
7
- InformationCircleIcon,
8
- UserIcon,
9
- } from "@hugeicons/core-free-icons";
10
- import { t } from "../../../../../i18n";
11
- import type { CardProfileProps } from "../../types";
12
- import CardStarRating from "../../shared/CardStarRating.svelte";
13
- import CardDescription from "../../shared/CardDescription.svelte";
14
- import CardTags from "../../shared/CardTags.svelte";
15
- import CardButton from "../../shared/CardButton.svelte";
16
- import CardFavorite from "../../shared/CardFavorite.svelte";
17
-
18
- let {
19
- id,
20
- tags,
21
- logo,
22
- title,
23
- content,
24
- startNumber,
25
- startMax = 5,
26
- isTagBorderBottom = true,
27
- isFavorite = false,
28
- buttonProfileClass,
29
- buttonDetailsClass,
30
- onFavoriteClick,
31
- onButtonProfile,
32
- onButtonDetails,
33
- }: CardProfileProps = $props();
34
-
35
- let isShowButtonProfileAndDetails = $derived(
36
- onButtonProfile != null && onButtonDetails != null,
37
- );
38
- </script>
39
-
40
- <article
41
- class="border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-transparent rounded-lg p-5 space-y-1 md:space-y-3"
42
- >
43
- <div class="flex justify-between items-center w-full mb-4">
44
- <div class="flex justify-start gap-2">
45
- <div class="flex justify-center items-center">
46
- {#if logo}
47
- <img src={logo} alt={logo} class="w-12 h-12 rounded-lg" />
48
- {/if}
49
- </div>
50
- <div class="flex-col">
51
- {#if title}
52
- <div class="text-center font-bold text-lg">{title}</div>
53
- {/if}
54
- {#if startNumber}
55
- <CardStarRating {startNumber} {startMax} />
56
- {/if}
57
- </div>
58
- </div>
59
- <div class="flex justify-end items-center">
60
- <CardFavorite
61
- {id}
62
- {isFavorite}
63
- onFavoriteClick={() => onFavoriteClick!(id)}
64
- />
65
- </div>
66
- </div>
67
-
68
- <div class="h-15 my-2">
69
- <CardDescription {content} />
70
- </div>
71
-
72
- <CardTags className="my-6" tags={tags ?? []} {isTagBorderBottom} />
73
-
74
- {#if onButtonProfile || onButtonDetails}
75
- <div class="flex justify-center items-center gap-2 mt-4 w-full">
76
- {#if onButtonProfile}
77
- <CardButton
78
- {id}
79
- icon={UserIcon}
80
- className={buttonProfileClass}
81
- text={$t("label.view.profile")}
82
- onClick={onButtonProfile}
83
- isFlex={isShowButtonProfileAndDetails}
84
- />
85
- {/if}
86
- {#if onButtonDetails}
87
- <CardButton
88
- {id}
89
- icon={InformationCircleIcon}
90
- className={buttonDetailsClass}
91
- text={$t("label.more.details")}
92
- onClick={onButtonDetails}
93
- isFlex={isShowButtonProfileAndDetails}
94
- />
95
- {/if}
96
- </div>
97
- {/if}
98
- </article>
1
+ <script lang="ts">
2
+ /**
3
+ * Card component with a title and content.
4
+ * @component
5
+ */
6
+ import {
7
+ InformationCircleIcon,
8
+ UserIcon,
9
+ } from "@hugeicons/core-free-icons";
10
+ import { t } from "../../../../../i18n";
11
+ import type { CardProfileProps } from "../../types";
12
+ import CardStarRating from "../../shared/CardStarRating.svelte";
13
+ import CardDescription from "../../shared/CardDescription.svelte";
14
+ import CardTags from "../../shared/CardTags.svelte";
15
+ import CardButton from "../../shared/CardButton.svelte";
16
+ import CardFavorite from "../../shared/CardFavorite.svelte";
17
+
18
+ let {
19
+ id,
20
+ tags,
21
+ logo,
22
+ title,
23
+ content,
24
+ startNumber,
25
+ startMax = 5,
26
+ isTagBorderBottom = true,
27
+ isFavorite = false,
28
+ buttonProfileClass,
29
+ buttonDetailsClass,
30
+ onFavoriteClick,
31
+ onButtonProfile,
32
+ onButtonDetails,
33
+ }: CardProfileProps = $props();
34
+
35
+ let isShowButtonProfileAndDetails = $derived(
36
+ onButtonProfile != null && onButtonDetails != null,
37
+ );
38
+ </script>
39
+
40
+ <article
41
+ class="border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-transparent rounded-lg p-5 space-y-1 md:space-y-3"
42
+ >
43
+ <div class="flex justify-between items-center w-full mb-4">
44
+ <div class="flex justify-start gap-2">
45
+ <div class="flex justify-center items-center">
46
+ {#if logo}
47
+ <img src={logo} alt={logo} class="w-12 h-12 rounded-lg" />
48
+ {/if}
49
+ </div>
50
+ <div class="flex-col">
51
+ {#if title}
52
+ <div class="text-center font-bold text-lg">{title}</div>
53
+ {/if}
54
+ {#if startNumber}
55
+ <CardStarRating {startNumber} {startMax} />
56
+ {/if}
57
+ </div>
58
+ </div>
59
+ <div class="flex justify-end items-center">
60
+ <CardFavorite
61
+ {id}
62
+ {isFavorite}
63
+ onFavoriteClick={() => onFavoriteClick!(id)}
64
+ />
65
+ </div>
66
+ </div>
67
+
68
+ <div class="h-15 my-2">
69
+ <CardDescription {content} />
70
+ </div>
71
+
72
+ <CardTags className="my-6" tags={tags ?? []} {isTagBorderBottom} />
73
+
74
+ {#if onButtonProfile || onButtonDetails}
75
+ <div class="flex justify-center items-center gap-2 mt-4 w-full">
76
+ {#if onButtonProfile}
77
+ <CardButton
78
+ {id}
79
+ icon={UserIcon}
80
+ className={buttonProfileClass}
81
+ text={$t("label.view.profile")}
82
+ onClick={onButtonProfile}
83
+ isFlex={isShowButtonProfileAndDetails}
84
+ />
85
+ {/if}
86
+ {#if onButtonDetails}
87
+ <CardButton
88
+ {id}
89
+ icon={InformationCircleIcon}
90
+ className={buttonDetailsClass}
91
+ text={$t("label.more.details")}
92
+ onClick={onButtonDetails}
93
+ isFlex={isShowButtonProfileAndDetails}
94
+ />
95
+ {/if}
96
+ </div>
97
+ {/if}
98
+ </article>
@@ -1,98 +1,98 @@
1
- <script lang="ts">
2
- /**
3
- * Card component with a title and content.
4
- * @component
5
- */
6
- import {
7
- InformationCircleIcon,
8
- UserIcon,
9
- } from "@hugeicons/core-free-icons";
10
- import { t } from "../../../../../i18n";
11
- import type { CardProfileProps } from "../../types";
12
- import CardStarRating from "../../shared/CardStarRating.svelte";
13
- import CardTags from "../../shared/CardTags.svelte";
14
- import CardDescription from "../../shared/CardDescription.svelte";
15
- import CardButton from "../../shared/CardButton.svelte";
16
- import CardFavorite from "../../shared/CardFavorite.svelte";
17
- let {
18
- id,
19
- tags,
20
- logo,
21
- title,
22
- content,
23
- className,
24
- startNumber,
25
- startMax = 5,
26
- isTagBorderBottom = true,
27
- isFavorite = false,
28
- buttonProfileClass,
29
- buttonDetailsClass,
30
- onFavoriteClick,
31
- onButtonProfile,
32
- onButtonDetails,
33
- }: CardProfileProps = $props();
34
-
35
- let isShowButtonProfileAndDetails = $derived(
36
- onButtonProfile != null && onButtonDetails != null,
37
- );
38
- </script>
39
-
40
- <article
41
- class="border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-transparent rounded-lg p-5 space-y-1 md:space-y-3 {className}"
42
- >
43
- <div class="flex flex-col justify-center items-center w-full relative">
44
- <div class="flex flex-col justify-start gap-2">
45
- <div class="flex justify-center items-center">
46
- {#if logo}
47
- <img src={logo} alt={logo} class="w-12 h-12 rounded-lg" />
48
- {/if}
49
- </div>
50
- <div class="flex flex-col justify-center items-center">
51
- {#if title}
52
- <div class="text-center font-bold text-lg">{title}</div>
53
- {/if}
54
- {#if startNumber}
55
- <CardStarRating {startNumber} {startMax} />
56
- {/if}
57
- </div>
58
- </div>
59
- <div class="flex justify-end items-center absolute top-0 right-0">
60
- <CardFavorite
61
- {id}
62
- {isFavorite}
63
- onFavoriteClick={() => onFavoriteClick!(id)}
64
- />
65
- </div>
66
- </div>
67
-
68
- <div class="h-15 mb-8">
69
- <CardDescription {content} />
70
- </div>
71
-
72
- <CardTags className="my-4" tags={tags ?? []} {isTagBorderBottom} />
73
-
74
- {#if onButtonProfile || onButtonDetails}
75
- <div class="flex justify-center items-center gap-2 mt-4 w-full">
76
- {#if onButtonProfile}
77
- <CardButton
78
- {id}
79
- icon={UserIcon}
80
- className={buttonProfileClass}
81
- text={$t("label.view.profile")}
82
- onClick={onButtonProfile}
83
- isFlex={isShowButtonProfileAndDetails}
84
- />
85
- {/if}
86
- {#if onButtonDetails}
87
- <CardButton
88
- {id}
89
- icon={InformationCircleIcon}
90
- className={buttonDetailsClass}
91
- text={$t("label.more.details")}
92
- onClick={onButtonDetails}
93
- isFlex={isShowButtonProfileAndDetails}
94
- />
95
- {/if}
96
- </div>
97
- {/if}
98
- </article>
1
+ <script lang="ts">
2
+ /**
3
+ * Card component with a title and content.
4
+ * @component
5
+ */
6
+ import {
7
+ InformationCircleIcon,
8
+ UserIcon,
9
+ } from "@hugeicons/core-free-icons";
10
+ import { t } from "../../../../../i18n";
11
+ import type { CardProfileProps } from "../../types";
12
+ import CardStarRating from "../../shared/CardStarRating.svelte";
13
+ import CardTags from "../../shared/CardTags.svelte";
14
+ import CardDescription from "../../shared/CardDescription.svelte";
15
+ import CardButton from "../../shared/CardButton.svelte";
16
+ import CardFavorite from "../../shared/CardFavorite.svelte";
17
+ let {
18
+ id,
19
+ tags,
20
+ logo,
21
+ title,
22
+ content,
23
+ className,
24
+ startNumber,
25
+ startMax = 5,
26
+ isTagBorderBottom = true,
27
+ isFavorite = false,
28
+ buttonProfileClass,
29
+ buttonDetailsClass,
30
+ onFavoriteClick,
31
+ onButtonProfile,
32
+ onButtonDetails,
33
+ }: CardProfileProps = $props();
34
+
35
+ let isShowButtonProfileAndDetails = $derived(
36
+ onButtonProfile != null && onButtonDetails != null,
37
+ );
38
+ </script>
39
+
40
+ <article
41
+ class="border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-transparent rounded-lg p-5 space-y-1 md:space-y-3 {className}"
42
+ >
43
+ <div class="flex flex-col justify-center items-center w-full relative">
44
+ <div class="flex flex-col justify-start gap-2">
45
+ <div class="flex justify-center items-center">
46
+ {#if logo}
47
+ <img src={logo} alt={logo} class="w-12 h-12 rounded-lg" />
48
+ {/if}
49
+ </div>
50
+ <div class="flex flex-col justify-center items-center">
51
+ {#if title}
52
+ <div class="text-center font-bold text-lg">{title}</div>
53
+ {/if}
54
+ {#if startNumber}
55
+ <CardStarRating {startNumber} {startMax} />
56
+ {/if}
57
+ </div>
58
+ </div>
59
+ <div class="flex justify-end items-center absolute top-0 right-0">
60
+ <CardFavorite
61
+ {id}
62
+ {isFavorite}
63
+ onFavoriteClick={() => onFavoriteClick!(id)}
64
+ />
65
+ </div>
66
+ </div>
67
+
68
+ <div class="h-15 mb-8">
69
+ <CardDescription {content} />
70
+ </div>
71
+
72
+ <CardTags className="my-4" tags={tags ?? []} {isTagBorderBottom} />
73
+
74
+ {#if onButtonProfile || onButtonDetails}
75
+ <div class="flex justify-center items-center gap-2 mt-4 w-full">
76
+ {#if onButtonProfile}
77
+ <CardButton
78
+ {id}
79
+ icon={UserIcon}
80
+ className={buttonProfileClass}
81
+ text={$t("label.view.profile")}
82
+ onClick={onButtonProfile}
83
+ isFlex={isShowButtonProfileAndDetails}
84
+ />
85
+ {/if}
86
+ {#if onButtonDetails}
87
+ <CardButton
88
+ {id}
89
+ icon={InformationCircleIcon}
90
+ className={buttonDetailsClass}
91
+ text={$t("label.more.details")}
92
+ onClick={onButtonDetails}
93
+ isFlex={isShowButtonProfileAndDetails}
94
+ />
95
+ {/if}
96
+ </div>
97
+ {/if}
98
+ </article>