negodesign 0.0.34 → 0.0.36

package/dist/components/core/card/product/01/CardProduct01.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+  import Button from "../../../../ui/button/button.svelte";
+  import Skeleton from "../../../../ui/skeleton/skeleton.svelte";
+  import { t } from "../../../../../i18n";
+  import ImgPlaceHolderGallery from "../../../../../assets/placeholder-image.png";
+  import ImgPlaceholderCompany from "../../../../../assets/placeholder-company.png";
+  import type { CardProductProps } from "../../types";
+  import CardFavorite from "../../shared/CardFavorite.svelte";
+  import CardCart from "../../shared/CardCart.svelte";
+  import CardDescription from "../../shared/CardDescription.svelte";
+  import CardTags from "../../shared/CardTags.svelte";
+  import CardTitlePrice from "../../shared/CardTitlePrice.svelte";
+
+  /**
+   * Card component with a title and content.
+   * @component
+   */
+
+  let {
+    id,
+    tags,
+    logo,
+    title,
+    imageUrl,
+    rating = 0,
+    isFavorite = false,
+    isCart = false,
+    isLoading = false,
+    content,
+    price,
+    buttonBuyText,
+    buttonBuyClass,
+    isDescriptionIcon,
+    isDescriptionLabel,
+    onClickBuy,
+    onClickShop,
+    onClickFavorite,
+  }: CardProductProps = $props();
+</script>
+
+<article class="relative rounded-lg border">
+  <aside class="relative w-full p-2">
+    <div class="absolute top-2 left-2 z-2 gap-1 p-2">
+      {#if isLoading}
+        <Skeleton class="h-5 w-20 rounded-full bg-black/20" />
+      {:else if logo}
+        <img
+          src={logo}
+          width={30}
+          height={30}
+          alt={title}
+          onerror={(e) =>
+            ((e.target as HTMLImageElement).src = ImgPlaceholderCompany)}
+          class="rounded-lg"
+        />
+      {:else}
+        <img
+          src={ImgPlaceholderCompany}
+          width={30}
+          height={30}
+          alt={title}
+          class="rounded-lg"
+        />
+      {/if}
+    </div>
+
+    <div class="absolute top-2 right-2 z-2 flex items-center gap-1 p-2">
+      <CardFavorite
+        {id}
+        {isFavorite}
+        {isLoading}
+        onFavoriteClick={onClickFavorite}
+      />
+      <CardCart {id} {isCart} {isLoading} onCartClick={onClickShop} />
+    </div>
+
+    {#if isLoading}
+      <Skeleton
+        class="rounded-lg h-30 w-full object-cover object-center bg-black/15"
+      />
+    {:else if imageUrl}
+      <img
+        src={imageUrl}
+        alt={imageUrl}
+        class="rounded-lg h-36 md:h-44 w-full object-cover object-center"
+        onerror={(e) =>
+          ((e.target as HTMLImageElement).src = ImgPlaceHolderGallery)}
+      />
+    {/if}
+    <div class="absolute inset-0 bg-black/5 rounded-sm h-full w-full"></div>
+  </aside>
+
+  <aside
+    class="bottom-1 inset-x-0 flex flex-col items-center justify-center gap-0.5 m-auto max-w-11/12 p-1 rounded-md"
+  >
+    <div class="flex justify-between w-full items-center mb-1">
+      {#if title}
+        {#if isLoading}
+          <Skeleton class="h-4 w-30 rounded-lg" />
+        {:else}
+          <div class="font-semibold line-clamp-1 flex-nowrap">
+            {title}
+          </div>
+        {/if}
+      {/if}
+      <CardTitlePrice {title} {isLoading} {price} />
+    </div>
+
+    {#if tags && tags.length > 0}
+      <div class="w-full my-1">
+        <CardTags {tags} />
+      </div>
+    {/if}
+
+    <div>
+      <CardDescription {content} {isDescriptionIcon} {isDescriptionLabel} />
+    </div>
+
+    {#if isLoading}
+      <Skeleton class="h-9 w-full rounded-md" />
+    {:else}
+      <Button
+        onclick={() => onClickBuy!(id)}
+        class="w-full mb-2 bg-gradient text-white rounded-full {buttonBuyClass}"
+      >
+        {buttonBuyText || $t("label.buy")}
+      </Button>
+    {/if}
+  </aside>
+</article>

package/dist/components/core/card/product/01/CardProduct01.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CardProductProps } from "../../types";
+declare const CardProduct01: import("svelte").Component<CardProductProps, {}, "">;
+type CardProduct01 = ReturnType<typeof CardProduct01>;
+export default CardProduct01;

package/dist/components/core/card/product/02/CardProduct02.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">
+  import Button from "../../../../ui/button/button.svelte";
+  import Skeleton from "../../../../ui/skeleton/skeleton.svelte";
+  import { t } from "../../../../../i18n";
+  import ImgPlaceHolderGallery from "../../../../../assets/placeholder-image.png";
+  import ImgPlaceholderCompany from "../../../../../assets/placeholder-company.png";
+  import type { CardProductProps } from "../../types";
+  import CardFavorite from "../../shared/CardFavorite.svelte";
+  import CardCart from "../../shared/CardCart.svelte";
+  import CardDescription from "../../shared/CardDescription.svelte";
+  import CardTags from "../../shared/CardTags.svelte";
+  import CardTitlePrice from "../../shared/CardTitlePrice.svelte";
+
+  /**
+   * Card component with a title and content.
+   * @component
+   */
+
+  let {
+    id,
+    tags,
+    logo,
+    title,
+    imageUrl,
+    isFavorite = false,
+    isCart = false,
+    isLoading = false,
+    content,
+    price,
+    buttonBuyText,
+    buttonBuyClass,
+    isDescriptionIcon,
+    isDescriptionLabel,
+    onClickBuy,
+    onClickShop,
+    onClickFavorite,
+  }: CardProductProps = $props();
+</script>
+
+<article class="relative rounded-lg border">
+  <aside class="relative w-full">
+    <div class="absolute top-1 left-1 z-2 gap-1 p-2">
+      {#if isLoading}
+        <Skeleton class="h-5 w-20 rounded-full bg-black/20" />
+      {:else if logo}
+        <img
+          src={logo}
+          width={30}
+          height={30}
+          alt={title}
+          onerror={(e) =>
+            ((e.target as HTMLImageElement).src = ImgPlaceholderCompany)}
+          class="rounded-lg"
+        />
+      {:else}
+        <img
+          src={ImgPlaceholderCompany}
+          width={30}
+          height={30}
+          alt={title}
+          class="rounded-lg"
+        />
+      {/if}
+    </div>
+
+    <div class="absolute top-1 right-1 z-2 flex items-center gap-1 p-2">
+      <CardFavorite
+        {id}
+        {isFavorite}
+        {isLoading}
+        onFavoriteClick={onClickFavorite}
+      />
+      <CardCart {id} {isCart} {isLoading} onCartClick={onClickShop} />
+    </div>
+
+    {#if isLoading}
+      <Skeleton
+        class="rounded-lg h-30 w-full object-cover object-center bg-black/15"
+      />
+    {:else if imageUrl}
+      <img
+        src={imageUrl}
+        alt={imageUrl}
+        class="rounded-tr-lg rounded-tl-lg h-36 md:h-44 w-full object-cover object-center"
+        onerror={(e) =>
+          ((e.target as HTMLImageElement).src = ImgPlaceHolderGallery)}
+      />
+    {/if}
+    <div class="absolute inset-0 bg-black/5 rounded-sm h-full w-full"></div>
+  </aside>
+
+  <aside
+    class="bottom-1 inset-x-0 flex flex-col items-center justify-center gap-0.5 m-auto max-w-11/12 p-1 rounded-md"
+  >
+    <CardTitlePrice {title} {isLoading} {price} />
+
+    <div>
+      <CardDescription {content} {isDescriptionIcon} {isDescriptionLabel} />
+    </div>
+
+    {#if tags && tags.length > 0}
+      <div class="w-full mb-2">
+        <CardTags {tags} />
+      </div>
+    {/if}
+
+    {#if isLoading}
+      <Skeleton class="h-9 w-full rounded-md" />
+    {:else}
+      <Button
+        onclick={() => onClickBuy!(id)}
+        class="w-full bottom-0 bg-gradient {buttonBuyClass}"
+      >
+        {buttonBuyText || $t("label.buy")}
+      </Button>
+    {/if}
+  </aside>
+</article>

package/dist/components/core/card/product/02/CardProduct02.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CardProductProps } from "../../types";
+declare const CardProduct02: import("svelte").Component<CardProductProps, {}, "">;
+type CardProduct02 = ReturnType<typeof CardProduct02>;
+export default CardProduct02;

package/dist/components/core/card/product/CardProduct.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  /**
+   * Card component with a title and content.
+   * @component
+   */
+  import type { CardProductProps } from "../types";
+  import CardProduct01 from "./01/CardProduct01.svelte";
+  import CardProduct02 from "./02/CardProduct02.svelte";
+
+  let {
+    variant,
+    ...restProps
+  }: CardProductProps & {
+    variant?: 1 | 2;
+  } = $props();
+</script>
+
+{#if variant === 2}
+  <CardProduct02 {...restProps} />
+{:else}
+  <CardProduct01 {...restProps} />
+{/if}

package/dist/components/core/card/product/CardProduct.svelte.d.ts

@@ -0,0 +1,11 @@
+/**
+   * Card component with a title and content.
+   * @component
+   */
+import type { CardProductProps } from "../types";
+type $$ComponentProps = CardProductProps & {
+    variant?: 1 | 2;
+};
+declare const CardProduct: import("svelte").Component<$$ComponentProps, {}, "">;
+type CardProduct = ReturnType<typeof CardProduct>;
+export default CardProduct;

package/dist/components/core/card/product/data.d.ts

@@ -0,0 +1,3 @@
+import type { CardProductProps } from "../types";
+declare const items: CardProductProps[];
+export default items;

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

@@ -0,0 +1,89 @@
+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",
+        content: "Acomodação premium de frente para o mar com quartos luxuosos, restaurante internacional, piscina aquecida e serviço de transfer exclusivo para hóspedes.",
+        isFavorite: true,
+        price: "45.000 Kz",
+        buttonBuyText: "Comprar",
+        onClickBuy: (id) => alert(`Comprar produto ${id}`),
+        onClickShop: (id) => alert(`Adicionar ao carrinho ${id}`),
+        isCart: true,
+        tags: [
+            { icon: GlobalIcon, text: "Luanda" },
+            { icon: MapPin, text: "Ilha do Cabo" },
+            { icon: NecklaceIcon, text: "Frente ao Mar" },
+        ],
+    },
+    {
+        id: 2,
+        imageUrl: "https://images.unsplash.com/photo-1566073771259-6a8506099945?q=80&w=1170&auto=format&fit=crop",
+        title: "Miramar Suites",
+        content: "Suítes executivas com vista panorâmica da baía, internet de alta velocidade, pequeno-almoço buffet incluído e centro de conferências moderno.",
+        isFavorite: false,
+        price: "38.500 Kz",
+        buttonBuyText: "Comprar",
+        onClickBuy: (id) => alert(`Comprar produto ${id}`),
+        onClickShop: (id) => alert(`Adicionar ao carrinho ${id}`),
+        isCart: true,
+        tags: [
+            { icon: GlobalIcon, text: "Luanda" },
+            { icon: MapPin, text: "Miramar" },
+            { icon: NecklaceIcon, text: "Executivo" },
+        ],
+    },
+    {
+        id: 3,
+        imageUrl: "https://images.unsplash.com/photo-1582719478250-c89cae4dc85b?q=80&w=1170&auto=format&fit=crop",
+        title: "Palm Resort & Spa",
+        content: "Resort paradisíaco rodeado por palmeiras com spa completo, campos de ténis, atividades infantis e acesso privativo à praia.",
+        isFavorite: true,
+        price: "52.000 Kz",
+        buttonBuyText: "Comprar",
+        onClickBuy: (id) => alert(`Comprar produto ${id}`),
+        onClickShop: (id) => alert(`Adicionar ao carrinho ${id}`),
+        isCart: true,
+        tags: [
+            { icon: GlobalIcon, text: "Benguela" },
+            { icon: MapPin, text: "Baía Farta" },
+            { icon: NecklaceIcon, text: "Spa & Lazer" },
+        ],
+    },
+    {
+        id: 4,
+        imageUrl: "https://images.unsplash.com/photo-1542314831-068cd1dbfeeb?q=80&w=1170&auto=format&fit=crop",
+        title: "Hotel Central Park",
+        content: "Localização privilegiada no coração financeiro da cidade, perfeito para viagens de negócios e turismo cultural.",
+        isFavorite: false,
+        price: "29.900 Kz",
+        buttonBuyText: "Comprar",
+        onClickBuy: (id) => alert(`Comprar produto ${id}`),
+        onClickShop: (id) => alert(`Adicionar ao carrinho ${id}`),
+        isCart: true,
+        tags: [
+            { icon: GlobalIcon, text: "Huambo" },
+            { icon: MapPin, text: "Centro" },
+            { icon: NecklaceIcon, text: "Urbano" },
+        ],
+    },
+    {
+        id: 5,
+        imageUrl: "https://images.unsplash.com/photo-1571896349842-33c89424de2d?q=80&w=1170&auto=format&fit=crop",
+        title: "Villa Serena Boutique",
+        content: "Charme e tranquilidade num ambiente intimista com arquitetura rústica, piscina infinita e gastronomia regional selecionada.",
+        isFavorite: true,
+        price: "60.000 Kz",
+        buttonBuyText: "Comprar",
+        onClickBuy: (id) => alert(`Comprar produto ${id}`),
+        onClickShop: (id) => alert(`Adicionar ao carrinho ${id}`),
+        isCart: true,
+        tags: [
+            { icon: GlobalIcon, text: "Namibe" },
+            { icon: MapPin, text: "Praia Amélia" },
+            { icon: NecklaceIcon, text: "Boutique" },
+        ],
+    },
+];
+export default items;

package/dist/components/core/card/profile/01/CardProfile01.svelte

@@ -18,8 +18,7 @@
 
   let {
     id,
-    tags,
-    logo,
+    tags = [],
     title,
     content,
     startNumber,
@@ -45,7 +44,7 @@
   class="border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-transparent rounded-lg relative"
 >
   <div class="p-5">
-    <div class="flex justify-between items-center w-full">
+    <div class="flex justify-between items-center w-full border-b-2">
       <div class="w-full flex flex-col justify-center items-center relative">
         <div>
           {#if isLoading}
@@ -94,12 +93,11 @@
         {isLoading}
         {isDescriptionIcon}
         {isDescriptionLabel}
-        lines={tags?.length == 0 ? 3 : 2}
       />
     </div>
 
     <CardTags
-      className="my-4"
+      className="mb-2"
       tags={tags ?? []}
       {isTagBorderBottom}
       {isLoading}

package/dist/components/core/card/profile/02/CardProfile02.svelte

@@ -18,8 +18,7 @@
 
   let {
     id,
-    tags,
-    logo,
+    tags = [],
     title,
     content,
     className,
@@ -92,24 +91,16 @@
         {isLoading}
         {isDescriptionLabel}
         {isDescriptionIcon}
+        lines={tags.length == 0 ? 3 : 2}
       />
     </div>
 
-    {#if tags && tags.length > 0}
-      <CardTags
-        className="my-4"
-        tags={tags ?? []}
-        {isTagBorderBottom}
-        {isLoading}
-      />
-    {:else}
-      <CardTags
-        className="my-4"
-        tags={[{ text: "- - -" }]}
-        {isTagBorderBottom}
-        {isLoading}
-      />
-    {/if}
+    <CardTags
+      className="my-2"
+      tags={tags ?? []}
+      {isTagBorderBottom}
+      {isLoading}
+    />
 
     <CardThumbnailVideo
       {imageUrl}

package/dist/components/core/card/promotion/CardPromotion.svelte

@@ -5,7 +5,7 @@
   import CardCart from "../shared/CardCart.svelte";
   import CardDescription from "../shared/CardDescription.svelte";
   import CardFavorite from "../shared/CardFavorite.svelte";
-  import CardStartPrice from "../shared/CardStartPrice.svelte";
+  import CardStartPrice from "./CardPromotionPrice.svelte";
   import CardTags from "../shared/CardTags.svelte";
   import ImgPlaceHolderGallery from "../../../../assets/placeholder-image.png";
   import ImgPlaceholderCompany from "../../../../assets/placeholder-company.png";

package/dist/components/core/card/promotion/CardPromotionPrice.svelte.d.ts

@@ -0,0 +1,8 @@
+type Props = {
+    newPrice?: string | number;
+    oldPrice?: string | number;
+    type?: "start" | "normal";
+};
+declare const CardPromotionPrice: import("svelte").Component<Props, {}, "">;
+type CardPromotionPrice = ReturnType<typeof CardPromotionPrice>;
+export default CardPromotionPrice;

package/dist/components/core/card/shared/CardPhoneOrWhatsapp.svelte

@@ -3,18 +3,25 @@
   import { HugeiconsIcon } from "@hugeicons/svelte";
   import type { CardPhoneOrWhatsappProps } from "../types";
 
-  let { id, onEmailClick, onWhatsappClick }: CardPhoneOrWhatsappProps =
-    $props();
+  let {
+    id,
+    className,
+    buttonClass,
+    btnWhatsappClass,
+    btnEmailClass,
+    onEmailClick,
+    onWhatsappClick,
+  }: CardPhoneOrWhatsappProps = $props();
 
   let isFlex = $derived(onEmailClick && onWhatsappClick);
 </script>
 
-<div class="flex border-t border-gray-300 dark:border-gray-700">
+<div class="flex border-t border-gray-300 dark:border-gray-700 {className}">
   {#if onEmailClick}
     <button
-      class="flex-1 flex justify-center items-center gap-2 p-3 hover:bg-red-800 hover:text-white cursor-pointer rounded-bl-lg {isFlex
+      class="flex-1 flex justify-center items-center gap-2 p-3 hover:bg-red-800 hover:text-white cursor-pointer rounded-bl-lg {!isFlex
         ? 'rounded-br-lg'
-        : ''}"
+        : ''} {buttonClass} {btnEmailClass}"
       onclick={() => onEmailClick?.(id)}
     >
       <HugeiconsIcon icon={Mail01Icon} size={20} />
@@ -26,9 +33,9 @@
   {/if}
   {#if onWhatsappClick}
     <button
-      class="flex-1 flex justify-center items-center gap-2 p-3 hover:bg-green-600 hover:text-white cursor-pointer rounded-br-lg {isFlex
+      class="flex-1 flex justify-center items-center gap-2 p-3 hover:bg-green-600 hover:text-white cursor-pointer rounded-br-lg {!isFlex
         ? 'rounded-bl-lg'
-        : ''}"
+        : ''} {buttonClass} {btnWhatsappClass}"
       onclick={() => onWhatsappClick?.(id)}
     >
       <HugeiconsIcon icon={WhatsappIcon} size={20} />

package/dist/components/core/card/shared/CardTags.svelte

@@ -2,6 +2,7 @@
   import { HugeiconsIcon } from "@hugeicons/svelte";
   import type { CardTagsProps } from "../types";
   import Skeleton from "../../../ui/skeleton/skeleton.svelte";
+  import * as Popover from "../../../ui/popover"; // adjust path to your setup
 
   type Props = {
     className?: string;
@@ -20,13 +21,14 @@
   }: Props = $props();
 
   let isJustify = $derived(tags?.length == 2 || tags?.length == 3);
+  let open = $state(false);
 </script>
 
-{#snippet createBadge(tag: CardTagsProps)}
+{#snippet createBadge(tag: CardTagsProps, clasName?: string)}
   <div
     class="flex items-center h-5 shrink-0 {isTagBorderBottom
       ? 'border border-gray-200 rounded-full px-2 py-1'
-      : ''}"
+      : ''} {clasName}"
   >
     {#if tag.icon}
       <HugeiconsIcon icon={tag.icon} class="mr-0.5 h-3.75 w-3.75 shrink-0" />
@@ -43,28 +45,51 @@
   </div>
 {/snippet}
 
-{#if isWrap}
-  <div class="flex flex-wrap gap-2 md:gap-5 {className}">
-    {#if isLoading}
-      {@render skeletonTag()}
-    {:else if tags && tags.length > 0}
-      {#each tags as tag, i (i)}
-        {@render createBadge(tag)}
-      {/each}
-    {/if}
-  </div>
-{:else}
-  <div
-    class="flex overflow-x-auto no-scrollbar w-full min-w-0
-        {isJustify ? 'justify-between gap-3' : 'gap-4 md:gap-5 lg:gap-10'}
-        {className}"
+{#snippet tagsRow()}
+  {#if isWrap}
+    <div class="flex flex-wrap gap-2 md:gap-5 {className}">
+      {#if isLoading}
+        {@render skeletonTag()}
+      {:else if tags && tags.length > 0}
+        {#each tags as tag, i (i)}
+          {@render createBadge(tag)}
+        {/each}
+      {/if}
+    </div>
+  {:else}
+    <div
+      class="flex overflow-x-auto no-scrollbar w-full min-w-0
+          {isJustify ? 'justify-between gap-3' : 'gap-4 md:gap-5 lg:gap-10'}
+          {className}"
+    >
+      {#if isLoading}
+        {@render skeletonTag()}
+      {:else if tags && tags.length > 0}
+        {#each tags as tag, i (i)}
+          {@render createBadge(tag)}
+        {/each}
+      {/if}
+    </div>
+  {/if}
+{/snippet}
+
+<Popover.Root bind:open>
+  <Popover.Trigger
+    onmouseenter={() => (open = true)}
+    onmouseleave={() => (open = false)}
+    class="block w-full text-left"
+  >
+    {@render tagsRow()}
+  </Popover.Trigger>
+  <Popover.Content
+    class="w-auto max-w-xs p-3"
+    onmouseenter={() => (open = true)}
+    onmouseleave={() => (open = false)}
   >
-    {#if isLoading}
-      {@render skeletonTag()}
-    {:else if tags && tags.length > 0}
+    <div class="flex flex-col gap-2">
       {#each tags as tag, i (i)}
-        {@render createBadge(tag)}
+        {@render createBadge(tag, "gap-2")}
       {/each}
-    {/if}
-  </div>
-{/if}
+    </div>
+  </Popover.Content>
+</Popover.Root>

package/dist/components/core/card/shared/CardTitlePrice.svelte

@@ -0,0 +1,24 @@
+<script>
+  import Skeleton from "../../../ui/skeleton/skeleton.svelte";
+
+  let { title, isLoading, price } = $props();
+</script>
+
+<div class="flex justify-between w-full items-center">
+  {#if title}
+    {#if isLoading}
+      <Skeleton class="h-4 w-30 rounded-lg" />
+    {:else}
+      <div class="font-semibold line-clamp-1 flex-nowrap">
+        {title}
+      </div>
+    {/if}
+  {/if}
+  <div class="flex justify-start gap-2">
+    {#if isLoading}
+      <Skeleton class="h-5 bg-black/10 w-25 my-2 mr-2" />
+    {:else if price}
+      <div class="text-lg font-semibold text-primary">{price}</div>
+    {/if}
+  </div>
+</div>

package/dist/components/core/card/shared/CardTitlePrice.svelte.d.ts

@@ -0,0 +1,15 @@
+export default CardTitlePrice;
+type CardTitlePrice = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const CardTitlePrice: import("svelte").Component<{
+    title: any;
+    isLoading: any;
+    price: any;
+}, {}, "">;
+type $$ComponentProps = {
+    title: any;
+    isLoading: any;
+    price: any;
+};

package/dist/components/core/card/shared/TruncatableText.svelte

@@ -29,7 +29,7 @@
 </script>
 
 <div class="relative">
-  <p bind:this={textEl} class="line-clamp-{lines} {className}">
+  <p bind:this={textEl} class="line-clamp-3 {className}">
     {text}
   </p>