negodesign 0.0.25 → 0.0.27

package/dist/components/core/breadcrumb/breadcrumb-list.svelte

@@ -1,32 +1,32 @@
-<script lang="ts">
-  import * as Breadcrumb from "../../ui/breadcrumb/index.js";
-
-  type Props = {
-    items: {
-      url?: string;
-      label: string;
-    }[];
-  };
-
-  let { items }: Props = $props();
-</script>
-
-<Breadcrumb.Root>
-  <Breadcrumb.List>
-    {#each items as item, i (item.label)}
-      {@const isLast = i === items.length - 1}
-
-      <Breadcrumb.Item class={isLast ? "" : "hidden md:block"}>
-        {#if isLast}
-          <Breadcrumb.Page>{item.label}</Breadcrumb.Page>
-        {:else}
-          <Breadcrumb.Link href={item.url ?? "##"}>{item.label}</Breadcrumb.Link>
-        {/if}
-      </Breadcrumb.Item>
-
-      {#if !isLast}
-        <Breadcrumb.Separator class="hidden md:block" />
-      {/if}
-    {/each}
-  </Breadcrumb.List>
+<script lang="ts">
+  import * as Breadcrumb from "../../ui/breadcrumb/index.js";
+
+  type Props = {
+    items: {
+      url?: string;
+      label: string;
+    }[];
+  };
+
+  let { items }: Props = $props();
+</script>
+
+<Breadcrumb.Root>
+  <Breadcrumb.List>
+    {#each items as item, i (item.label)}
+      {@const isLast = i === items.length - 1}
+
+      <Breadcrumb.Item class={isLast ? "" : "hidden md:block"}>
+        {#if isLast}
+          <Breadcrumb.Page>{item.label}</Breadcrumb.Page>
+        {:else}
+          <Breadcrumb.Link href={item.url ?? "##"}>{item.label}</Breadcrumb.Link>
+        {/if}
+      </Breadcrumb.Item>
+
+      {#if !isLast}
+        <Breadcrumb.Separator class="hidden md:block" />
+      {/if}
+    {/each}
+  </Breadcrumb.List>
 </Breadcrumb.Root>

package/dist/components/core/button/ButtonBack.svelte

@@ -1,18 +1,18 @@
-<script lang="ts">
-  import Button from "../../ui/button/button.svelte";
-  import { ArrowLeft01Icon } from "@hugeicons/core-free-icons";
-  import { HugeiconsIcon } from "@hugeicons/svelte";
-  import { t } from "../../../i18n";
-  import type { ButtonProps } from "../../ui/button";
-
-  let { ...restProps }: ButtonProps = $props();
-</script>
-
-<Button
-  variant="outline"
-  class="inline-flex items-center gap-1 text-sm text-slate-600 hover:text-slate-900 transition-colors rounded-full bg-input"
-  {...restProps}
->
-  <HugeiconsIcon icon={ArrowLeft01Icon} size={16} />
-  <span class="sr-only">{$t("label.back")}</span>
-</Button>
+<script lang="ts">
+  import Button from "../../ui/button/button.svelte";
+  import { ArrowLeft01Icon } from "@hugeicons/core-free-icons";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import { t } from "../../../i18n";
+  import type { ButtonProps } from "../../ui/button";
+
+  let { ...restProps }: ButtonProps = $props();
+</script>
+
+<Button
+  variant="outline"
+  class="inline-flex items-center gap-1 text-sm text-slate-600 hover:text-slate-900 transition-colors rounded-full bg-input"
+  {...restProps}
+>
+  <HugeiconsIcon icon={ArrowLeft01Icon} size={16} />
+  <span class="sr-only">{$t("label.back")}</span>
+</Button>

package/dist/components/core/button/ButtonLogin.svelte

@@ -1,15 +1,15 @@
-<script lang="ts">
-  import Button, {
-    type ButtonProps,
-  } from "../../ui/button/button.svelte";
-  import { t } from "../../../i18n";
-  import { Login02Icon } from "@hugeicons/core-free-icons";
-  import { HugeiconsIcon } from "@hugeicons/svelte";
-
-  let { ...restProps }: ButtonProps = $props();
-</script>
-
-<Button class="w-full flex items-center gap-2" {...restProps}>
-  <HugeiconsIcon icon={Login02Icon} size={16} />
-  {$t("label.login")}
-</Button>
+<script lang="ts">
+  import Button, {
+    type ButtonProps,
+  } from "../../ui/button/button.svelte";
+  import { t } from "../../../i18n";
+  import { Login02Icon } from "@hugeicons/core-free-icons";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+
+  let { ...restProps }: ButtonProps = $props();
+</script>
+
+<Button class="w-full flex items-center gap-2" {...restProps}>
+  <HugeiconsIcon icon={Login02Icon} size={16} />
+  {$t("label.login")}
+</Button>

package/dist/components/core/button/ButtonLoginWith.svelte

@@ -1,57 +1,57 @@
-<script lang="ts">
-  import Button, {
-    type ButtonProps,
-  } from "../../ui/button/button.svelte";
-  import { HugeiconsIcon, type IconSvgElement } from "@hugeicons/svelte";
-  import { t } from "../../../i18n";
-  import {
-    GoogleIcon,
-    Facebook01Icon as Facebook,
-    Linkedin01Icon as Linkedin,
-  } from "@hugeicons/core-free-icons";
-  import type { Snippet } from "svelte";
-
-  type IconDefault = "GOOGLE" | "FACEBOOK" | "LINKEDLN";
-
-  type Props = {
-    icon?: IconSvgElement | IconDefault | Snippet;
-    label?: string;
-  };
-
-  let { icon, label, ...restProps }: Props & ButtonProps = $props();
-
-  const defaultIconMap: Record<IconDefault, IconSvgElement> = {
-    GOOGLE: GoogleIcon,
-    FACEBOOK: Facebook,
-    LINKEDLN: Linkedin,
-  };
-
-  const defaultLabelMap: Record<IconDefault, string> = {
-    GOOGLE: "Google",
-    FACEBOOK: "Facebook",
-    LINKEDLN: "Linkedin",
-  };
-
-  function isIconDefault(value: unknown): value is IconDefault {
-    return typeof value === "string" && value in defaultLabelMap;
-  }
-
-  let resolvedIcon = $derived(
-    isIconDefault(icon) ? defaultIconMap[icon] : icon,
-  );
-
-  let resolvedLabel = $derived(
-    label ?? (isIconDefault(icon) ? defaultLabelMap[icon] : ""),
-  );
-</script>
-
-<Button variant="outline" class="w-full flex items-center gap-2" {...restProps}>
-  {#if resolvedIcon}
-    {#if typeof resolvedIcon === "function"}
-      {@render resolvedIcon()}
-    {:else}
-      <HugeiconsIcon icon={resolvedIcon} size={16} />
-    {/if}
-  {/if}
-  {$t("label.login.with", { name: resolvedLabel })}
-</Button>
+<script lang="ts">
+  import Button, {
+    type ButtonProps,
+  } from "../../ui/button/button.svelte";
+  import { HugeiconsIcon, type IconSvgElement } from "@hugeicons/svelte";
+  import { t } from "../../../i18n";
+  import {
+    GoogleIcon,
+    Facebook01Icon as Facebook,
+    Linkedin01Icon as Linkedin,
+  } from "@hugeicons/core-free-icons";
+  import type { Snippet } from "svelte";
+
+  type IconDefault = "GOOGLE" | "FACEBOOK" | "LINKEDLN";
+
+  type Props = {
+    icon?: IconSvgElement | IconDefault | Snippet;
+    label?: string;
+  };
+
+  let { icon, label, ...restProps }: Props & ButtonProps = $props();
+
+  const defaultIconMap: Record<IconDefault, IconSvgElement> = {
+    GOOGLE: GoogleIcon,
+    FACEBOOK: Facebook,
+    LINKEDLN: Linkedin,
+  };
+
+  const defaultLabelMap: Record<IconDefault, string> = {
+    GOOGLE: "Google",
+    FACEBOOK: "Facebook",
+    LINKEDLN: "Linkedin",
+  };
+
+  function isIconDefault(value: unknown): value is IconDefault {
+    return typeof value === "string" && value in defaultLabelMap;
+  }
+
+  let resolvedIcon = $derived(
+    isIconDefault(icon) ? defaultIconMap[icon] : icon,
+  );
+
+  let resolvedLabel = $derived(
+    label ?? (isIconDefault(icon) ? defaultLabelMap[icon] : ""),
+  );
+</script>
+
+<Button variant="outline" class="w-full flex items-center gap-2" {...restProps}>
+  {#if resolvedIcon}
+    {#if typeof resolvedIcon === "function"}
+      {@render resolvedIcon()}
+    {:else}
+      <HugeiconsIcon icon={resolvedIcon} size={16} />
+    {/if}
+  {/if}
+  {$t("label.login.with", { name: resolvedLabel })}
+</Button>

package/dist/components/core/button/ButtonSend.svelte

@@ -1,15 +1,15 @@
-<script lang="ts">
-  import Button, {
-    type ButtonProps,
-  } from "../../ui/button/button.svelte";
-  import { t } from "../../../i18n";
-  import { Login02Icon } from "@hugeicons/core-free-icons";
-  import { HugeiconsIcon } from "@hugeicons/svelte";
-
-  let { ...restProps }: ButtonProps = $props();
-</script>
-
-<Button class="w-full flex items-center gap-2" {...restProps}>
-  <HugeiconsIcon icon={Login02Icon} size={16} />
-  {$t("label.send")}
-</Button>
+<script lang="ts">
+  import Button, {
+    type ButtonProps,
+  } from "../../ui/button/button.svelte";
+  import { t } from "../../../i18n";
+  import { Login02Icon } from "@hugeicons/core-free-icons";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+
+  let { ...restProps }: ButtonProps = $props();
+</script>
+
+<Button class="w-full flex items-center gap-2" {...restProps}>
+  <HugeiconsIcon icon={Login02Icon} size={16} />
+  {$t("label.send")}
+</Button>

package/dist/components/core/card/highlight/01/CardHighlight01.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+  import Button from "../../../../ui/button/button.svelte";
+  import Skeleton from "../../../../ui/skeleton/skeleton.svelte";
+  import { t } from "../../../../../i18n";
+  import CardDescription from "../../shared/CardDescription.svelte";
+  import CardFavorite from "../../shared/CardFavorite.svelte";
+  import CardTags from "../../shared/CardTags.svelte";
+  /**
+   * Card component with a title and content.
+   * @component
+   */
+  import type { CardHighlightProps } from "../../types";
+
+  let {
+    id,
+    logo,
+    tags,
+    title,
+    content,
+    imageUrl,
+    isLoading = false,
+    isFavorite = false,
+    buttonText,
+    isDescriptionIcon,
+    isDescriptionLabel,
+    onClickBtn,
+    onClickFavorite,
+  }: CardHighlightProps = $props();
+</script>
+
+<article
+  class="flex gap-1 bg-white dark:bg-background p-3 rounded-lg shadow border"
+>
+  <aside class="relative rounded-lg border h-50">
+    <div class="left-1 z-2 flex gap-1 w-50">
+      {#if isLoading}
+        <Skeleton class="w-hull h-full rounded-lg" />
+      {:else if logo}
+        <img src={logo} alt={title} class="rounded-lg" />
+      {/if}
+    </div>
+
+    <div class="absolute top-3 right-1">
+      <CardFavorite
+        {id}
+        {isFavorite}
+        {isLoading}
+        onFavoriteClick={() => onClickFavorite?.(id)}
+      />
+    </div>
+
+    {#if isLoading}
+      <Skeleton class="rounded-lg w-full h-full object-cover object-center" />
+    {:else if imageUrl}
+      <img
+        src={imageUrl}
+        alt={imageUrl}
+        class="rounded-lg w-full h-full object-cover object-center"
+      />
+    {/if}
+    <div class="absolute inset-0 bg-black/5 rounded-sm h-full w-full"></div>
+  </aside>
+  <div class="px-5">
+    <div class="p-2 rounded-md">
+      {#if isLoading}
+        <Skeleton class="h-4 w-30 rounded-lg" />
+      {:else if title}
+        <div class="font-semibold">{title}</div>
+      {/if}
+    </div>
+
+    <div class="w-75">
+      <CardDescription
+        {content}
+        {isLoading}
+        {isDescriptionIcon}
+        {isDescriptionLabel}
+      />
+    </div>
+
+    <CardTags {tags} {isLoading} />
+
+    {#if isLoading}
+      <Skeleton class="h-10 w-full rounded-md mt-2 md:mt-3" />
+    {:else}
+      <Button onclick={() => onClickBtn!(id)} class="mt-2 md:mt-3 md:min-w-32">
+        {buttonText || $t("label.buy")}
+      </Button>
+    {/if}
+  </div>
+</article>

package/dist/components/core/card/highlight/01/CardHighlight01.svelte.d.ts

@@ -0,0 +1,8 @@
+/**
+   * Card component with a title and content.
+   * @component
+   */
+import type { CardHighlightProps } from "../../types";
+declare const CardHighlight01: import("svelte").Component<CardHighlightProps, {}, "">;
+type CardHighlight01 = ReturnType<typeof CardHighlight01>;
+export default CardHighlight01;

package/dist/components/core/card/highlight/02/CardHighlight02.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+  import Button from "../../../../ui/button/button.svelte";
+  import Skeleton from "../../../../ui/skeleton/skeleton.svelte";
+  import { t } from "../../../../../i18n";
+  import CardDescription from "../../shared/CardDescription.svelte";
+  import CardFavorite from "../../shared/CardFavorite.svelte";
+  import CardTags from "../../shared/CardTags.svelte";
+  /**
+   * Card component with a title and content.
+   * @component
+   */
+  import type { CardHighlightProps } from "../../types";
+
+  let {
+    id,
+    logo,
+    tags,
+    title,
+    content,
+    imageUrl,
+    isLoading = false,
+    isFavorite = false,
+    isDescriptionIcon,
+    isDescriptionLabel,
+    buttonText,
+    onClickBtn,
+    onClickFavorite,
+  }: CardHighlightProps = $props();
+</script>
+
+<article
+  class="flex flex-col gap-1 bg-white dark:bg-background p-3 rounded-lg shadow border"
+>
+  <aside class="relative rounded-lg border h-50">
+    <div class="left-1 z-2 flex gap-1 w-50">
+      {#if isLoading}
+        <Skeleton class="w-hull h-full rounded-lg" />
+      {:else if logo}
+        <img src={logo} alt={title} class="rounded-lg" />
+      {/if}
+    </div>
+
+    <div class="absolute top-3 right-1">
+      <CardFavorite
+        {id}
+        {isFavorite}
+        {isLoading}
+        onFavoriteClick={() => onClickFavorite?.(id)}
+      />
+    </div>
+
+    {#if isLoading}
+      <Skeleton class="rounded-lg w-full h-full object-cover object-center" />
+    {:else if imageUrl}
+      <img
+        src={imageUrl}
+        alt={imageUrl}
+        class="rounded-lg w-full h-full object-cover object-center"
+      />
+    {/if}
+    <div class="absolute inset-0 bg-black/5 rounded-sm h-full w-full"></div>
+  </aside>
+  <div class="px-2">
+    <div class="rounded-md">
+      {#if isLoading}
+        <Skeleton class="h-4 w-30 rounded-lg" />
+      {:else if title}
+        <div class="font-semibold my-2">{title}</div>
+      {/if}
+    </div>
+
+    <div class="w-75 my-2">
+      <CardDescription
+        {content}
+        {isLoading}
+        {isDescriptionIcon}
+        {isDescriptionLabel}
+      />
+    </div>
+
+    <div class="my-2">
+      <CardTags {tags} {isLoading} />
+    </div>
+
+    {#if isLoading}
+      <Skeleton class="h-10 w-full rounded-md mt-2 md:mt-3" />
+    {:else}
+      <Button onclick={() => onClickBtn!(id)} class="mt-2 md:mt-3 md:min-w-32">
+        {buttonText || $t("label.buy")}
+      </Button>
+    {/if}
+  </div>
+</article>

package/dist/components/core/card/highlight/02/CardHighlight02.svelte.d.ts

@@ -0,0 +1,8 @@
+/**
+   * Card component with a title and content.
+   * @component
+   */
+import type { CardHighlightProps } from "../../types";
+declare const CardHighlight02: import("svelte").Component<CardHighlightProps, {}, "">;
+type CardHighlight02 = ReturnType<typeof CardHighlight02>;
+export default CardHighlight02;

package/dist/components/core/card/highlight/CardHighlight.svelte

@@ -1,67 +1,22 @@
-<script lang="ts">
-  import Skeleton from "../../../ui/skeleton/skeleton.svelte";
-  import CardFavorite from "../shared/CardFavorite.svelte";
-  /**
-   * Card component with a title and content.
-   * @component
-   */
-  import type { CardPromotionProps } from "../types";
-
-  let {
-    id,
-    logo,
-    imageUrl,
-    title,
-    isLoading = false,
-    isFavorite = false,
-    onClickFavorite,
-  }: CardPromotionProps = $props();
-</script>
-
-<article class="relative rounded-sm">
-  {#if logo}
-    <div class="absolute top-1 left-1 z-2 flex gap-1 p-2">
-      {#if isLoading}
-        <Skeleton class="h-30 w-30 rounded-lg" />
-      {:else}
-        <img src={logo} width={30} height={30} alt={title} class="rounded-lg" />
-      {/if}
-    </div>
-  {/if}
-
-  <div class="absolute top-1 right-1 z-2 flex gap-1 p-2">
-    <CardFavorite
-      {id}
-      {isFavorite}
-      {isLoading}
-      onFavoriteClick={() => onClickFavorite?.(id)}
-    />
-  </div>
-
-  {#if imageUrl}
-    {#if isLoading}
-      <Skeleton
-        class="rounded-lg md:h-37.5 md:w-37.5 lg:h-50 lg:w-50 object-cover object-center"
-      />
-    {:else}
-      <img
-        src={imageUrl}
-        alt={imageUrl}
-        class="rounded-lg md:h-37.5 md:w-37.5 lg:h-50 lg:w-50 object-cover object-center"
-      />
-    {/if}
-  {/if}
-  <div class="absolute inset-0 bg-black/5 rounded-sm h-full w-full"></div>
-
-  <div
-    class="absolute bottom-1 inset-x-0 flex justify-center m-auto bg-black/10 backdrop-blur-sm max-w-11/12 p-2 rounded-md"
-  >
-    {#if title}
-      {#if isLoading}
-        <Skeleton class="h-4 w-30 rounded-lg" />
-      {:else}
-        <div class="text-center font-semibold text-[12px]">{title}</div>
-      {/if}
-    {/if}
-  </div>
-</article>
+<script lang="ts">
+  /**
+   * Card component with a title and content.
+   * @component
+   */
+  import type { CardHighlightProps } from "../types";
+  import CardHighlight01 from "./01/CardHighlight01.svelte";
+  import CardHighlight02 from "./02/CardHighlight02.svelte";
+
+  let {
+    varient = 1,
+    ...restProps
+  }: CardHighlightProps & {
+    varient?: 1 | 2;
+  } = $props();
+</script>
+
+{#if varient == 2}
+  <CardHighlight02 {...restProps} />
+{:else}
+  <CardHighlight01 {...restProps} />
+{/if}

package/dist/components/core/card/highlight/CardHighlight.svelte.d.ts

@@ -2,7 +2,10 @@
    * Card component with a title and content.
    * @component
    */
-import type { CardPromotionProps } from "../types";
-declare const CardHighlight: import("svelte").Component<CardPromotionProps, {}, "">;
+import type { CardHighlightProps } from "../types";
+type $$ComponentProps = CardHighlightProps & {
+    varient?: 1 | 2;
+};
+declare const CardHighlight: import("svelte").Component<$$ComponentProps, {}, "">;
 type CardHighlight = ReturnType<typeof CardHighlight>;
 export default CardHighlight;

package/dist/components/core/card/highlight/data.js

@@ -1,31 +1,62 @@
+import { GlobalIcon, MapPin, NecklaceIcon } from "@hugeicons/core-free-icons";
 const items = [
     {
         id: 1,
         imageUrl: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
         title: 'Hotel Baía Azul',
         isFavorite: true,
+        content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since 1966, when designers at Letraset and James Mosley, the librarian at St Bride Printing Library in London, took a 1914 Cicero translation and scrambled it to make dummy text for Letraset's Body Type sheets. It has survived not only many decades, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised thanks to these sheets and more recently with desktop publishing software like Aldus PageMaker and Microsoft Word including versions of Lorem Ipsum",
+        tags: [
+            { icon: GlobalIcon, text: 'Luanda', },
+            { icon: MapPin, text: 'Kilamba', },
+            { icon: NecklaceIcon, text: 'Rua 19', },
+        ]
     },
     {
         id: 2,
         imageUrl: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
         title: 'Miramar Suites',
+        content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since 1966, when designers at Letraset and James Mosley, the librarian at St Bride Printing Library in London, took a 1914 Cicero translation and scrambled it to make dummy text for Letraset's Body Type sheets. It has survived not only many decades, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised thanks to these sheets and more recently with desktop publishing software like Aldus PageMaker and Microsoft Word including versions of Lorem Ipsum",
+        tags: [
+            { icon: GlobalIcon, text: 'Luanda', },
+            { icon: MapPin, text: 'Kilamba', },
+            { icon: NecklaceIcon, text: 'Rua 19', },
+        ]
     },
     {
         id: 3,
         imageUrl: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
         title: 'Palm Resort & Spa',
-        isFavorite: true
+        isFavorite: true,
+        content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since 1966, when designers at Letraset and James Mosley, the librarian at St Bride Printing Library in London, took a 1914 Cicero translation and scrambled it to make dummy text for Letraset's Body Type sheets. It has survived not only many decades, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised thanks to these sheets and more recently with desktop publishing software like Aldus PageMaker and Microsoft Word including versions of Lorem Ipsum",
+        tags: [
+            { icon: GlobalIcon, text: 'Luanda', },
+            { icon: MapPin, text: 'Kilamba', },
+            { icon: NecklaceIcon, text: 'Rua 19', },
+        ]
     },
     {
         id: 4,
         imageUrl: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
         title: 'Hotel Central Park',
+        content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since 1966, when designers at Letraset and James Mosley, the librarian at St Bride Printing Library in London, took a 1914 Cicero translation and scrambled it to make dummy text for Letraset's Body Type sheets. It has survived not only many decades, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised thanks to these sheets and more recently with desktop publishing software like Aldus PageMaker and Microsoft Word including versions of Lorem Ipsum",
+        tags: [
+            { icon: GlobalIcon, text: 'Luanda', },
+            { icon: MapPin, text: 'Kilamba', },
+            { icon: NecklaceIcon, text: 'Rua 19', },
+        ]
     },
     {
         id: 5,
         imageUrl: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
         title: 'Villa Serena Boutique',
         isFavorite: true,
+        content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since 1966, when designers at Letraset and James Mosley, the librarian at St Bride Printing Library in London, took a 1914 Cicero translation and scrambled it to make dummy text for Letraset's Body Type sheets. It has survived not only many decades, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised thanks to these sheets and more recently with desktop publishing software like Aldus PageMaker and Microsoft Word including versions of Lorem Ipsum",
+        tags: [
+            { icon: GlobalIcon, text: 'Luanda', },
+            { icon: MapPin, text: 'Kilamba', },
+            { icon: NecklaceIcon, text: 'Rua 19', },
+        ]
     },
 ];
 export default items;