negodesign 0.0.28 → 0.0.30

package/dist/components/core/card/media/01/CardMedia01.svelte

@@ -1,111 +1,127 @@
 <script lang="ts">
-    /**
-     * Card component with a title and content.
-     * @component
-     */
-    import {
-        InformationCircleIcon,
-        UserIcon,
-    } from "@hugeicons/core-free-icons";
-    import { t } from "../../../../../i18n";
-    import type { CardMediaProps } from "../../types";
-    import CardStarRating from "../../shared/CardStarRating.svelte";
-    import CardDescription from "../../shared/CardDescription.svelte";
-    import CardTags from "../../shared/CardTags.svelte";
-    import CardThumbnailVideo from "../../shared/CardThumbnailVideo.svelte";
-    import CardButton from "../../shared/CardButton.svelte";
-    import CardFavorite from "../../shared/CardFavorite.svelte";
+  /**
+   * Card component with a title and content.
+   * @component
+   */
+  import { InformationCircleIcon, UserIcon } from "@hugeicons/core-free-icons";
+  import { t } from "../../../../../i18n";
+  import type { CardMediaProps } from "../../types";
+  import CardStarRating from "../../shared/CardStarRating.svelte";
+  import CardDescription from "../../shared/CardDescription.svelte";
+  import CardTags from "../../shared/CardTags.svelte";
+  import CardThumbnailVideo from "../../shared/CardThumbnailVideo.svelte";
+  import CardButton from "../../shared/CardButton.svelte";
+  import CardFavorite from "../../shared/CardFavorite.svelte";
+  import Skeleton from "../../../../ui/skeleton/skeleton.svelte";
+  import CardLogo from "../../shared/CardLogo.svelte";
 
-    let {
-        id,
-        tags,
-        logo,
-        title,
-        content,
-        imageUrl,
-        videoUrl,
-        //videoAction,
-        startNumber,
-        startMax = 5,
-        isImageButtonMaximized = false,
-        isVideoButtonMaximized = false,
-        isTagBorderBottom = false,
-        isFavorite = false,
-        buttonProfileClass,
-        buttonDetailsClass,
-        onFavoriteClick,
-        onButtonProfile,
-        onButtonDetails,
-    }: CardMediaProps = $props();
+  let {
+    id,
+    tags,
+    logo,
+    title,
+    content,
+    imageUrl,
+    videoUrl,
+    //videoAction,
+    startNumber,
+    startMax = 5,
+    isImageButtonMaximized = false,
+    isVideoButtonMaximized = false,
+    isTagBorderBottom = false,
+    isFavorite = false,
+    isLoading = false,
+    buttonProfileClass,
+    buttonDetailsClass,
+    onFavoriteClick,
+    onButtonProfile,
+    onButtonDetails,
+  }: CardMediaProps = $props();
 
-    let isShowButtonProfileAndDetails = $derived(
-        onButtonProfile != null && onButtonDetails != null,
-    );
+  let isShowButtonProfileAndDetails = $derived(
+    onButtonProfile != null && onButtonDetails != null,
+  );
 </script>
 
 <article
-    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"
+  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"
 >
-    <div class="flex justify-between items-center w-full mb-4">
-        <div class="flex justify-start gap-2">
-            <div class="flex justify-center items-center">
-                {#if logo}
-                    <img src={logo} alt={logo} class="w-12 h-12 rounded-lg" />
-                {/if}
-            </div>
-            <div class="flex-col">
-                {#if title}
-                    <div class="text-center font-bold text-lg">{title}</div>
-                {/if}
-                {#if startNumber}
-                    <CardStarRating {startNumber} {startMax} />
-                {/if}
-            </div>
-        </div>
-        <div class="flex justify-end items-center">
-            <CardFavorite
-                {id}
-                {isFavorite}
-                onFavoriteClick={() => onFavoriteClick!(id)}
-            />
-        </div>
-    </div>
+  <div class="flex justify-between items-center w-full mb-4">
+    <div class="flex justify-start gap-2">
+      <div class="flex justify-center items-center">
+        <CardLogo {logo} {isLoading} />
+      </div>
+      <div class="flex-col">
+        {#if title}
+          <div class="text-center font-bold text-lg">{title}</div>
+        {:else if isLoading}
+          <Skeleton class="w-40 h-5 rounded-lg bg-gray-400 mb-0.5" />
+        {/if}
 
-    <div class="h-15 my-2">
-        <CardDescription {content} />
+        {#if startNumber}
+          <CardStarRating {startNumber} {startMax} {isLoading} />
+        {:else if isLoading}
+          <Skeleton class="w-20 h-4 rounded-lg bg-gray-300 mt-0.5" />
+        {/if}
+      </div>
+    </div>
+    <div class="flex justify-end items-center">
+      <CardFavorite
+        {id}
+        {isFavorite}
+        {isLoading}
+        onFavoriteClick={() => onFavoriteClick!(id)}
+      />
     </div>
+  </div>
 
-    <CardTags className="my-6" tags={tags ?? []} {isTagBorderBottom} />
+  <div class="h-15 my-2">
+    <CardDescription {content} {isLoading} />
+  </div>
 
-    <CardThumbnailVideo
-        {imageUrl}
-        {videoUrl}
-        {isImageButtonMaximized}
-        {isVideoButtonMaximized}
-    />
+  <CardTags
+    className="my-6"
+    tags={tags ?? []}
+    {isTagBorderBottom}
+    {isLoading}
+  />
 
-    {#if onButtonProfile || onButtonDetails}
-        <div class="flex justify-center items-center gap-2 mt-4 w-full">
-            {#if onButtonProfile}
-                <CardButton
-                    {id}
-                    icon={UserIcon}
-                    className={buttonProfileClass}
-                    text={$t("label.view.profile")}
-                    onClick={onButtonProfile}
-                    isFlex={isShowButtonProfileAndDetails}
-                />
-            {/if}
-            {#if onButtonDetails}
-                <CardButton
-                    {id}
-                    icon={InformationCircleIcon}
-                    className={buttonDetailsClass}
-                    text={$t("label.more.details")}
-                    onClick={onButtonDetails}
-                    isFlex={isShowButtonProfileAndDetails}
-                />
-            {/if}
-        </div>
-    {/if}
+  <CardThumbnailVideo
+    {imageUrl}
+    {videoUrl}
+    {isImageButtonMaximized}
+    {isVideoButtonMaximized}
+    {isLoading}
+  />
+
+  {#if onButtonProfile || onButtonDetails}
+    <div class="flex justify-center items-center gap-2 mt-4 w-full">
+      {#if onButtonProfile}
+        <CardButton
+          {id}
+          icon={UserIcon}
+          className={buttonProfileClass}
+          text={$t("label.view.profile")}
+          onClick={onButtonProfile}
+          isFlex={isShowButtonProfileAndDetails}
+          {isLoading}
+        />
+      {:else if isLoading}
+        <Skeleton class="w-20 h-4 rounded-lg bg-gray-400 mt-0.5" />
+      {/if}
+      {#if onButtonDetails}
+        <CardButton
+          {id}
+          icon={InformationCircleIcon}
+          className={buttonDetailsClass}
+          text={$t("label.more.details")}
+          onClick={onButtonDetails}
+          isFlex={isShowButtonProfileAndDetails}
+          {isLoading}
+        />
+      {:else if isLoading}
+        <Skeleton class="w-20 h-4 rounded-lg bg-gray-400 mt-0.5" />
+      {/if}
+    </div>
+  {/if}
 </article>

package/dist/components/core/card/media/02/CardMedia02.svelte

@@ -1,110 +1,126 @@
 <script lang="ts">
-    /**
-     * Card component with a title and content.
-     * @component
-     */
-    import {
-        InformationCircleIcon,
-        UserIcon,
-    } from "@hugeicons/core-free-icons";
-    import { t } from "../../../../../i18n";
-    import type { CardMediaProps } from "../../types";
-    import CardStarRating from "../../shared/CardStarRating.svelte";
-    import CardTags from "../../shared/CardTags.svelte";
-    import CardDescription from "../../shared/CardDescription.svelte";
-    import CardThumbnailVideo from "../../shared/CardThumbnailVideo.svelte";
-    import CardButton from "../../shared/CardButton.svelte";
-    import CardFavorite from "../../shared/CardFavorite.svelte";
-    let {
-        id,
-        tags,
-        logo,
-        title,
-        content,
-        className,
-        imageUrl,
-        videoUrl,
-        //videoAction,
-        startNumber,
-        startMax = 5,
-        isImageButtonMaximized = false,
-        isVideoButtonMaximized = false,
-        isTagBorderBottom = false,
-        isFavorite = false,
-        buttonProfileClass,
-        buttonDetailsClass,
-        onFavoriteClick,
-        onButtonProfile,
-        onButtonDetails,
-    }: CardMediaProps = $props();
+  /**
+   * Card component with a title and content.
+   * @component
+   */
+  import { InformationCircleIcon, UserIcon } from "@hugeicons/core-free-icons";
+  import { t } from "../../../../../i18n";
+  import type { CardMediaProps } from "../../types";
+  import CardStarRating from "../../shared/CardStarRating.svelte";
+  import CardTags from "../../shared/CardTags.svelte";
+  import CardDescription from "../../shared/CardDescription.svelte";
+  import CardThumbnailVideo from "../../shared/CardThumbnailVideo.svelte";
+  import CardButton from "../../shared/CardButton.svelte";
+  import CardFavorite from "../../shared/CardFavorite.svelte";
+  import Skeleton from "../../../../ui/skeleton/skeleton.svelte";
+  import CardLogo from "../../shared/CardLogo.svelte";
+  let {
+    id,
+    tags,
+    logo,
+    title,
+    content,
+    className,
+    imageUrl,
+    videoUrl,
+    //videoAction,
+    startNumber,
+    startMax = 5,
+    isImageButtonMaximized = false,
+    isVideoButtonMaximized = false,
+    isTagBorderBottom = false,
+    isFavorite = false,
+    isLoading = false,
+    buttonProfileClass,
+    buttonDetailsClass,
+    onFavoriteClick,
+    onButtonProfile,
+    onButtonDetails,
+  }: CardMediaProps = $props();
 
-    let isShowButtonProfileAndDetails = $derived(
-        onButtonProfile != null && onButtonDetails != null,
-    );
+  let isShowButtonProfileAndDetails = $derived(
+    onButtonProfile != null && onButtonDetails != null,
+  );
 </script>
 
 <article
-    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}"
+  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}"
 >
-    <div class="flex flex-col justify-center items-center w-full relative">
-        <div class="flex flex-col justify-start gap-2">
-            <div class="flex justify-center items-center">
-                {#if logo}
-                    <img src={logo} alt={logo} class="w-12 h-12 rounded-lg" />
-                {/if}
-            </div>
-            <div class="flex flex-col justify-center items-center">
-                {#if title}
-                    <div class="text-center font-bold text-lg">{title}</div>
-                {/if}
-                {#if startNumber}
-                    <CardStarRating {startNumber} {startMax} />
-                {/if}
-            </div>
-        </div>
-        <div class="flex justify-end items-center absolute top-0 right-0">
-            <CardFavorite
-                {id}
-                {isFavorite}
-                onFavoriteClick={() => onFavoriteClick!(id)}
-            />
-        </div>
-        <CardTags className="my-4" tags={tags ?? []} {isTagBorderBottom} />
-    </div>
+  <div class="flex flex-col justify-center items-center w-full relative">
+    <div class="flex flex-col justify-start gap-2">
+      <div class="flex justify-center items-center">
+        <CardLogo {logo} {isLoading} />
+      </div>
+      <div class="flex flex-col justify-center items-center">
+        {#if title}
+          <div class="text-center font-bold text-lg">{title}</div>
+        {:else if isLoading}
+          <Skeleton class="w-40 h-5 rounded-lg bg-gray-400 mb-0.5" />
+        {/if}
 
-    <div class="h-15 mb-8">
-        <CardDescription {content} />
+        {#if startNumber}
+          <CardStarRating {startNumber} {startMax} {isLoading} />
+        {:else if isLoading}
+          <Skeleton class="w-20 h-4 rounded-lg bg-gray-300 mt-0.5" />
+        {/if}
+      </div>
     </div>
-
-    <CardThumbnailVideo
-        {imageUrl}
-        {videoUrl}
-        {isImageButtonMaximized}
-        {isVideoButtonMaximized}
+    <div class="flex justify-end items-center absolute top-0 right-0">
+      <CardFavorite
+        {id}
+        {isFavorite}
+        onFavoriteClick={() => onFavoriteClick!(id)}
+        {isLoading}
+      />
+    </div>
+    <CardTags
+      className="my-2"
+      tags={tags ?? []}
+      {isTagBorderBottom}
+      {isLoading}
     />
+  </div>
 
-    {#if onButtonProfile || onButtonDetails}
-        <div class="flex justify-center items-center gap-2 mt-4 w-full">
-            {#if onButtonProfile}
-                <CardButton
-                    {id}
-                    icon={UserIcon}
-                    className={buttonProfileClass}
-                    text={$t("label.view.profile")}
-                    onClick={onButtonProfile}
-                    isFlex={isShowButtonProfileAndDetails}
-                />
-            {/if}
-            {#if onButtonDetails}
-                <CardButton
-                    {id}
-                    icon={InformationCircleIcon}
-                    className={buttonDetailsClass}
-                    text={$t("label.more.details")}
-                    onClick={onButtonDetails}
-                    isFlex={isShowButtonProfileAndDetails}
-                />
-            {/if}
-        </div>
-    {/if}
+  <div class="h-15 mb-4">
+    <CardDescription {content} {isLoading} />
+  </div>
+
+  <CardThumbnailVideo
+    {imageUrl}
+    {videoUrl}
+    {isImageButtonMaximized}
+    {isVideoButtonMaximized}
+    {isLoading}
+  />
+
+  {#if onButtonProfile || onButtonDetails}
+    <div class="flex justify-center items-center gap-2 mt-4 w-full">
+      {#if onButtonProfile}
+        <CardButton
+          {id}
+          icon={UserIcon}
+          className={buttonProfileClass}
+          text={$t("label.view.profile")}
+          onClick={onButtonProfile}
+          isFlex={isShowButtonProfileAndDetails}
+          {isLoading}
+        />
+      {:else if isLoading}
+        <Skeleton class="w-20 h-4 rounded-lg bg-gray-400 mt-0.5" />
+      {/if}
+      {#if onButtonDetails}
+        <CardButton
+          {id}
+          icon={InformationCircleIcon}
+          className={buttonDetailsClass}
+          text={$t("label.more.details")}
+          onClick={onButtonDetails}
+          isFlex={isShowButtonProfileAndDetails}
+          {isLoading}
+        />
+      {:else if isLoading}
+        <Skeleton class="w-20 h-4 rounded-lg bg-gray-400 mt-0.5" />
+      {/if}
+    </div>
+  {/if}
 </article>

package/dist/components/core/card/media/CardMedia.svelte

@@ -1,17 +1,18 @@
 <script lang="ts">
-    import type { CardMediaProps } from "../types";
-    import CardMedia01 from "./01/CardMedia01.svelte";
-    import CardMedia02 from "./02/CardMedia02.svelte";
+  import type { CardMediaProps } from "../types";
+  import CardMedia01 from "./01/CardMedia01.svelte";
+  import CardMedia02 from "./02/CardMedia02.svelte";
 
-    type Props = {
-        variant?: 1 | 2;
-    };
+  type Props = {
+    variant?: 1 | 2;
+    isLoading?: boolean;
+  };
 
-    let { variant, ...restProps }: CardMediaProps & Props = $props();
+  let { variant, isLoading, ...restProps }: CardMediaProps & Props = $props();
 </script>
 
 {#if variant === 2}
-  <CardMedia02 {...restProps} />
+  <CardMedia02 {...restProps} {isLoading} />
 {:else}
-  <CardMedia01 {...restProps} />
+  <CardMedia01 {...restProps} {isLoading} />
 {/if}

package/dist/components/core/card/media/CardMedia.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { CardMediaProps } from "../types";
 type Props = {
     variant?: 1 | 2;
+    isLoading?: boolean;
 };
 type $$ComponentProps = CardMediaProps & Props;
 declare const CardMedia: import("svelte").Component<$$ComponentProps, {}, "">;