negodesign 0.0.23 → 0.0.25

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 (124) 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/CardHighlight.svelte +67 -44
  7. package/dist/components/core/card/media/01/CardMedia01.svelte +114 -114
  8. package/dist/components/core/card/media/02/CardMedia02.svelte +113 -113
  9. package/dist/components/core/card/media/CardMedia.svelte +17 -17
  10. package/dist/components/core/card/profile/01/CardProfile01.svelte +101 -101
  11. package/dist/components/core/card/profile/02/CardProfile02.svelte +97 -97
  12. package/dist/components/core/card/profile/CardProfile.svelte +17 -17
  13. package/dist/components/core/card/promotion/CardPromotion.svelte +102 -81
  14. package/dist/components/core/card/shared/CardButton.svelte +30 -30
  15. package/dist/components/core/card/shared/CardCart.svelte +36 -32
  16. package/dist/components/core/card/shared/CardCart.svelte.d.ts +1 -0
  17. package/dist/components/core/card/shared/CardDescription.svelte +23 -23
  18. package/dist/components/core/card/shared/CardFavorite.svelte +33 -29
  19. package/dist/components/core/card/shared/CardFavorite.svelte.d.ts +1 -0
  20. package/dist/components/core/card/shared/CardStarRating.svelte +20 -20
  21. package/dist/components/core/card/shared/CardTags.svelte +56 -56
  22. package/dist/components/core/card/shared/CardThumbnailVideo.svelte +169 -169
  23. package/dist/components/core/card/shared/TruncatableText.svelte +55 -55
  24. package/dist/components/core/card/types.d.ts +1 -0
  25. package/dist/components/core/carousel/{shared/ui/SimpleBadgeCarousel.svelte → badge/ui/CarouselBadge.svelte} +80 -80
  26. package/dist/components/core/carousel/badge/ui/CarouselBadge.svelte.d.ts +4 -0
  27. package/dist/components/core/carousel/hero/CarouselHero.svelte +158 -152
  28. package/dist/components/core/carousel/highlights/types.d.ts +9 -0
  29. package/dist/components/core/carousel/highlights/types.js +1 -0
  30. package/dist/components/core/carousel/highlights/ui/CarouselHighlights.svelte +41 -65
  31. package/dist/components/core/carousel/highlights/ui/CarouselHighlights.svelte.d.ts +1 -1
  32. package/dist/components/core/carousel/promotion/types.d.ts +9 -0
  33. package/dist/components/core/carousel/promotion/types.js +1 -0
  34. package/dist/components/core/carousel/promotion/ui/CarouselPromotion.svelte +41 -65
  35. package/dist/components/core/carousel/promotion/ui/CarouselPromotion.svelte.d.ts +1 -1
  36. package/dist/components/core/carousel/shared/ui/CarouselHeader.svelte +50 -0
  37. package/dist/components/core/carousel/shared/ui/CarouselHeader.svelte.d.ts +4 -0
  38. package/dist/components/core/carousel/types.d.ts +11 -26
  39. package/dist/components/core/datatable/ui/DataTableActions.svelte +28 -28
  40. package/dist/components/core/datatable/ui/DataTableCheckbox.svelte +22 -22
  41. package/dist/components/core/datatable/ui/DataTableContent.svelte +59 -59
  42. package/dist/components/core/datatable/ui/DataTableCore.svelte +151 -151
  43. package/dist/components/core/datatable/ui/DataTableDragHandle.svelte +8 -8
  44. package/dist/components/core/datatable/ui/DataTableListFilter.svelte +59 -59
  45. package/dist/components/core/datatable/ui/DataTableListPagination.svelte +35 -35
  46. package/dist/components/core/form/ui/input-base.svelte +81 -81
  47. package/dist/components/core/form/ui/input-email-or-phone.svelte +23 -23
  48. package/dist/components/core/form/ui/input-email.svelte +23 -23
  49. package/dist/components/core/form/ui/input-password-confirm.svelte +23 -23
  50. package/dist/components/core/form/ui/input-password.svelte +23 -23
  51. package/dist/components/core/form/ui/input-phone.svelte +33 -33
  52. package/dist/components/core/form/ui/input-username.svelte +22 -22
  53. package/dist/components/core/hero/SimpleHero.svelte +65 -65
  54. package/dist/components/core/label/LabelOr.svelte +25 -25
  55. package/dist/components/core/link/link-forget-password.svelte +12 -12
  56. package/dist/components/core/link/link-privacy-polity.svelte +12 -12
  57. package/dist/components/core/link/link-terms-of-service.svelte +12 -12
  58. package/dist/components/core/nav/ui/menu-links.svelte +27 -27
  59. package/dist/components/core/nav/ui/mobile/nav-menu-drawer.svelte +85 -85
  60. package/dist/components/core/nav/ui/nav-menu-bottom-sidebar.svelte +33 -33
  61. package/dist/components/core/nav/ui/nav-menu-sidebar.svelte +97 -97
  62. package/dist/components/core/nav/ui/nav-menu-top-bar-sidebar.svelte +103 -103
  63. package/dist/components/core/nav/ui/nav-menu.svelte +106 -106
  64. package/dist/components/core/panel/CarouselSlot.svelte +38 -38
  65. package/dist/components/core/panel/LeftHero.svelte +116 -116
  66. package/dist/components/core/search/SearchInput.svelte +32 -32
  67. package/dist/components/core/search/shared/SearchInputCore.svelte +66 -66
  68. package/dist/components/core/sidebar/MenuBarSidebar.svelte +70 -70
  69. package/dist/components/core/tabs/ui/tab-underline.svelte +43 -43
  70. package/dist/components/pages/admin/01/ui/AdminContent.svelte +14 -14
  71. package/dist/components/pages/admin/01/ui/AdminPanel.svelte +46 -46
  72. package/dist/components/pages/security/login/01/ui/FormRegister.svelte +28 -28
  73. package/dist/components/pages/security/login/01/ui/LoginCard.svelte +107 -107
  74. package/dist/components/pages/security/login/PageLogin.svelte +22 -22
  75. package/dist/components/ui/badge/badge.svelte +49 -49
  76. package/dist/components/ui/button/button.svelte +82 -82
  77. package/dist/components/ui/chart/chart-container.svelte +80 -80
  78. package/dist/components/ui/chart/chart-style.svelte +37 -37
  79. package/dist/components/ui/chart/chart-tooltip.svelte +184 -184
  80. package/dist/components/ui/checkbox/checkbox.svelte +40 -40
  81. package/dist/components/ui/data-table/flex-render.svelte +40 -40
  82. package/dist/components/ui/drawer/drawer-close.svelte +7 -7
  83. package/dist/components/ui/drawer/drawer-content.svelte +33 -33
  84. package/dist/components/ui/drawer/drawer-description.svelte +17 -17
  85. package/dist/components/ui/drawer/drawer-footer.svelte +20 -20
  86. package/dist/components/ui/drawer/drawer-header.svelte +20 -20
  87. package/dist/components/ui/drawer/drawer-nested.svelte +12 -12
  88. package/dist/components/ui/drawer/drawer-overlay.svelte +17 -17
  89. package/dist/components/ui/drawer/drawer-portal.svelte +7 -7
  90. package/dist/components/ui/drawer/drawer-title.svelte +17 -17
  91. package/dist/components/ui/drawer/drawer-trigger.svelte +7 -7
  92. package/dist/components/ui/drawer/drawer.svelte +12 -12
  93. package/dist/components/ui/select/select-content.svelte +45 -45
  94. package/dist/components/ui/select/select-group-heading.svelte +21 -21
  95. package/dist/components/ui/select/select-group.svelte +17 -17
  96. package/dist/components/ui/select/select-item.svelte +41 -41
  97. package/dist/components/ui/select/select-label.svelte +20 -20
  98. package/dist/components/ui/select/select-portal.svelte +7 -7
  99. package/dist/components/ui/select/select-scroll-down-button.svelte +21 -21
  100. package/dist/components/ui/select/select-scroll-up-button.svelte +21 -21
  101. package/dist/components/ui/select/select-separator.svelte +18 -18
  102. package/dist/components/ui/select/select-trigger.svelte +30 -30
  103. package/dist/components/ui/select/select.svelte +11 -11
  104. package/dist/components/ui/sidebar/sidebar-menu-sub-button.svelte +39 -39
  105. package/dist/components/ui/star-rating/star-rating-star.svelte +41 -41
  106. package/dist/components/ui/star-rating/star-rating.svelte +20 -20
  107. package/dist/components/ui/table/table-body.svelte +15 -15
  108. package/dist/components/ui/table/table-caption.svelte +20 -20
  109. package/dist/components/ui/table/table-cell.svelte +15 -15
  110. package/dist/components/ui/table/table-footer.svelte +20 -20
  111. package/dist/components/ui/table/table-head.svelte +15 -15
  112. package/dist/components/ui/table/table-header.svelte +20 -20
  113. package/dist/components/ui/table/table-row.svelte +15 -15
  114. package/dist/components/ui/table/table.svelte +17 -17
  115. package/dist/components/ui/tabs/tabs-content.svelte +17 -17
  116. package/dist/components/ui/tabs/tabs-list.svelte +40 -40
  117. package/dist/components/ui/tabs/tabs-trigger.svelte +23 -23
  118. package/dist/components/ui/tabs/tabs.svelte +19 -19
  119. package/dist/globals.css +6 -12
  120. package/dist/index.d.ts +2 -2
  121. package/dist/index.js +2 -2
  122. package/dist/styles/globals.css +149 -149
  123. package/package.json +113 -113
  124. package/dist/components/core/carousel/shared/ui/SimpleBadgeCarousel.svelte.d.ts +0 -4
@@ -1,113 +1,113 @@
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={startNumber} startMax={startMax} />
62
- {/if}
63
- </div>
64
- </div>
65
- <div class="flex justify-end items-center absolute top-0 right-0">
66
- <CardFavorite
67
- isFavorite={isFavorite}
68
- onFavoriteClick={() => onFavoriteClick!(id)}
69
- />
70
- </div>
71
- <CardTags
72
- className="my-4"
73
- tags={tags ?? []}
74
- {isTagBorderBottom}
75
- />
76
- </div>
77
-
78
- <div class="h-15 mb-8">
79
- <CardDescription {content} />
80
- </div>
81
-
82
- <CardThumbnailVideo
83
- {imageUrl}
84
- {videoUrl}
85
- {isImageButtonMaximized}
86
- {isVideoButtonMaximized}
87
- />
88
-
89
- {#if onButtonProfile || onButtonDetails}
90
- <div class="flex justify-center items-center gap-2 mt-4 w-full">
91
- {#if onButtonProfile}
92
- <CardButton
93
- {id}
94
- icon={UserIcon}
95
- className={buttonProfileClass}
96
- text={$t("label.view.profile")}
97
- onClick={onButtonProfile}
98
- isFlex={isShowButtonProfileAndDetails}
99
- />
100
- {/if}
101
- {#if onButtonDetails}
102
- <CardButton
103
- {id}
104
- icon={InformationCircleIcon}
105
- className={buttonDetailsClass}
106
- text={$t("label.more.details")}
107
- onClick={onButtonDetails}
108
- isFlex={isShowButtonProfileAndDetails}
109
- />
110
- {/if}
111
- </div>
112
- {/if}
113
- </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={startNumber} startMax={startMax} />
62
+ {/if}
63
+ </div>
64
+ </div>
65
+ <div class="flex justify-end items-center absolute top-0 right-0">
66
+ <CardFavorite
67
+ isFavorite={isFavorite}
68
+ onFavoriteClick={() => onFavoriteClick!(id)}
69
+ />
70
+ </div>
71
+ <CardTags
72
+ className="my-4"
73
+ tags={tags ?? []}
74
+ {isTagBorderBottom}
75
+ />
76
+ </div>
77
+
78
+ <div class="h-15 mb-8">
79
+ <CardDescription {content} />
80
+ </div>
81
+
82
+ <CardThumbnailVideo
83
+ {imageUrl}
84
+ {videoUrl}
85
+ {isImageButtonMaximized}
86
+ {isVideoButtonMaximized}
87
+ />
88
+
89
+ {#if onButtonProfile || onButtonDetails}
90
+ <div class="flex justify-center items-center gap-2 mt-4 w-full">
91
+ {#if onButtonProfile}
92
+ <CardButton
93
+ {id}
94
+ icon={UserIcon}
95
+ className={buttonProfileClass}
96
+ text={$t("label.view.profile")}
97
+ onClick={onButtonProfile}
98
+ isFlex={isShowButtonProfileAndDetails}
99
+ />
100
+ {/if}
101
+ {#if onButtonDetails}
102
+ <CardButton
103
+ {id}
104
+ icon={InformationCircleIcon}
105
+ className={buttonDetailsClass}
106
+ text={$t("label.more.details")}
107
+ onClick={onButtonDetails}
108
+ isFlex={isShowButtonProfileAndDetails}
109
+ />
110
+ {/if}
111
+ </div>
112
+ {/if}
113
+ </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,101 +1,101 @@
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={startNumber} startMax={startMax} />
56
- {/if}
57
- </div>
58
- </div>
59
- <div class="flex justify-end items-center">
60
- <CardFavorite
61
- isFavorite={isFavorite}
62
- onFavoriteClick={() => onFavoriteClick!(id)}
63
- />
64
- </div>
65
- </div>
66
-
67
- <div class="h-15 my-2">
68
- <CardDescription content={content}/>
69
- </div>
70
-
71
- <CardTags
72
- className="my-6"
73
- tags={tags ?? []}
74
- isTagBorderBottom={isTagBorderBottom}
75
- />
76
-
77
- {#if onButtonProfile || onButtonDetails}
78
- <div class="flex justify-center items-center gap-2 mt-4 w-full">
79
- {#if onButtonProfile}
80
- <CardButton
81
- id={id}
82
- icon={UserIcon}
83
- className={buttonProfileClass}
84
- text={$t("label.view.profile")}
85
- onClick={onButtonProfile}
86
- isFlex={isShowButtonProfileAndDetails}
87
- />
88
- {/if}
89
- {#if onButtonDetails}
90
- <CardButton
91
- id={id}
92
- icon={InformationCircleIcon}
93
- className={buttonDetailsClass}
94
- text={$t("label.more.details")}
95
- onClick={onButtonDetails}
96
- isFlex={isShowButtonProfileAndDetails}
97
- />
98
- {/if}
99
- </div>
100
- {/if}
101
- </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={startNumber} startMax={startMax} />
56
+ {/if}
57
+ </div>
58
+ </div>
59
+ <div class="flex justify-end items-center">
60
+ <CardFavorite
61
+ isFavorite={isFavorite}
62
+ onFavoriteClick={() => onFavoriteClick!(id)}
63
+ />
64
+ </div>
65
+ </div>
66
+
67
+ <div class="h-15 my-2">
68
+ <CardDescription content={content}/>
69
+ </div>
70
+
71
+ <CardTags
72
+ className="my-6"
73
+ tags={tags ?? []}
74
+ isTagBorderBottom={isTagBorderBottom}
75
+ />
76
+
77
+ {#if onButtonProfile || onButtonDetails}
78
+ <div class="flex justify-center items-center gap-2 mt-4 w-full">
79
+ {#if onButtonProfile}
80
+ <CardButton
81
+ id={id}
82
+ icon={UserIcon}
83
+ className={buttonProfileClass}
84
+ text={$t("label.view.profile")}
85
+ onClick={onButtonProfile}
86
+ isFlex={isShowButtonProfileAndDetails}
87
+ />
88
+ {/if}
89
+ {#if onButtonDetails}
90
+ <CardButton
91
+ id={id}
92
+ icon={InformationCircleIcon}
93
+ className={buttonDetailsClass}
94
+ text={$t("label.more.details")}
95
+ onClick={onButtonDetails}
96
+ isFlex={isShowButtonProfileAndDetails}
97
+ />
98
+ {/if}
99
+ </div>
100
+ {/if}
101
+ </article>
@@ -1,97 +1,97 @@
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
- {isFavorite}
62
- onFavoriteClick={() => onFavoriteClick!(id)}
63
- />
64
- </div>
65
- </div>
66
-
67
- <div class="h-15 mb-8">
68
- <CardDescription {content} />
69
- </div>
70
-
71
- <CardTags className="my-4" tags={tags ?? []} {isTagBorderBottom}/>
72
-
73
- {#if onButtonProfile || onButtonDetails}
74
- <div class="flex justify-center items-center gap-2 mt-4 w-full">
75
- {#if onButtonProfile}
76
- <CardButton
77
- {id}
78
- icon={UserIcon}
79
- className={buttonProfileClass}
80
- text={$t("label.view.profile")}
81
- onClick={onButtonProfile}
82
- isFlex={isShowButtonProfileAndDetails}
83
- />
84
- {/if}
85
- {#if onButtonDetails}
86
- <CardButton
87
- {id}
88
- icon={InformationCircleIcon}
89
- className={buttonDetailsClass}
90
- text={$t("label.more.details")}
91
- onClick={onButtonDetails}
92
- isFlex={isShowButtonProfileAndDetails}
93
- />
94
- {/if}
95
- </div>
96
- {/if}
97
- </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
+ {isFavorite}
62
+ onFavoriteClick={() => onFavoriteClick!(id)}
63
+ />
64
+ </div>
65
+ </div>
66
+
67
+ <div class="h-15 mb-8">
68
+ <CardDescription {content} />
69
+ </div>
70
+
71
+ <CardTags className="my-4" tags={tags ?? []} {isTagBorderBottom}/>
72
+
73
+ {#if onButtonProfile || onButtonDetails}
74
+ <div class="flex justify-center items-center gap-2 mt-4 w-full">
75
+ {#if onButtonProfile}
76
+ <CardButton
77
+ {id}
78
+ icon={UserIcon}
79
+ className={buttonProfileClass}
80
+ text={$t("label.view.profile")}
81
+ onClick={onButtonProfile}
82
+ isFlex={isShowButtonProfileAndDetails}
83
+ />
84
+ {/if}
85
+ {#if onButtonDetails}
86
+ <CardButton
87
+ {id}
88
+ icon={InformationCircleIcon}
89
+ className={buttonDetailsClass}
90
+ text={$t("label.more.details")}
91
+ onClick={onButtonDetails}
92
+ isFlex={isShowButtonProfileAndDetails}
93
+ />
94
+ {/if}
95
+ </div>
96
+ {/if}
97
+ </article>