From 67e9bd6c864828cb485db4cc47b7eddb5f1f1c9e Mon Sep 17 00:00:00 2001
From: Lucas Leite <70826073+leitecsleite@users.noreply.github.com>
Date: Tue, 21 May 2024 16:02:08 -0300
Subject: [PATCH] fix:breadcrumbCustom

---
 components/BenefitsList/BenefitsList.tsx      | 38 ++++----
 .../BannerWithTextColumn.tsx                  | 11 +--
 components/ui/Ellipse.tsx                     | 93 ++++++++++---------
 sections/Content/BreadcrumbCustom.tsx         | 70 +++++---------
 sections/Content/IconTitleAndTex.tsx          |  4 +-
 5 files changed, 103 insertions(+), 113 deletions(-)

diff --git a/components/BenefitsList/BenefitsList.tsx b/components/BenefitsList/BenefitsList.tsx
index f7cbb3e..7a6b40f 100644
--- a/components/BenefitsList/BenefitsList.tsx
+++ b/components/BenefitsList/BenefitsList.tsx
@@ -10,9 +10,9 @@ export interface Ellipse {
   vertical: "top" | "center" | "bottom";
   width: "100" | "200" | "300";
   height: "100" | "200" | "300";
-  color: 'yellow' | 'blue'
+  color: "yellow" | "blue";
   activeDesktop?: boolean;
-  activeMobile?: boolean; 
+  activeMobile?: boolean;
 }
 
 /** @title {{{description}}}  */
@@ -20,7 +20,6 @@ export interface Lists {
   /** @title Descrição */
   /** @format html */
   description: string;
-
 }
 export interface Props {
   /** @title Título */
@@ -30,20 +29,20 @@ export interface Props {
   titleStyle: {
     alignment?: "center" | "left" | "right";
   };
- 
+
   /**@description Quantidade de colunas */
-  columns?: "1" | "2" | "3" | "4"
+  columns?: "1" | "2" | "3" | "4";
 
   /**@title Lista */
   lists: Lists[];
 
   /** @description Largura máxima do container de lista */
-  maxWidth?: "285" | "392"
+  maxWidth?: "285" | "392";
 
   /** @description Icon backgroud */
   icon?: ImageWidget;
 
-  ellipse?: Ellipse; 
+  ellipse?: Ellipse;
 
   activeBackgroundImage: boolean;
   /** @tilte Margin top */
@@ -82,9 +81,9 @@ export default function BenefitsList(
     icon,
     activeBackgroundImage,
     titleStyle,
-    maxWidth = "285", 
-    columns ="4",
-    ellipse
+    maxWidth = "285",
+    columns = "4",
+    ellipse,
   }: Props,
 ) {
   const { alignment = "center" } = titleStyle || {};
@@ -101,7 +100,7 @@ export default function BenefitsList(
       >
         {title && (
           <div
-            className={ `w-full text-20 lg:text-48 text-[#fff] font-black not-italic font-archimoto-black mb-8 ${
+            className={`w-full text-20 lg:text-48 text-[#fff] font-black not-italic font-archimoto-black mb-8 ${
               positionTitle[alignment] ?? "text-left"
             }`}
             dangerouslySetInnerHTML={{ __html: title }}
@@ -109,11 +108,19 @@ export default function BenefitsList(
           </div>
         )}
 
-       <ul className={`grid grid-cols-1 ${qtyColumns[columns]}  lg:grid-cols-3 gap-8 justify-evenly"`}>
+        <ul
+          className={`grid grid-cols-1 ${
+            qtyColumns[columns]
+          }  lg:grid-cols-3 gap-8 justify-evenly"`}
+        >
           {lists && lists?.length > 0 &&
             lists.map((list, index) => (
               <li className="flex justify-center items-center gap-5 n1-custom-card-benefits py-4 px-4">
-                  <div className={`flex justify-center items-center gap-4 w-full   max-w-[${containerMaxWidth[maxWidth]}px]`}>
+                <div
+                  className={`flex justify-center items-center gap-4 w-full   max-w-[${
+                    containerMaxWidth[maxWidth]
+                  }px]`}
+                >
                   <div className="w-9 h-9">
                     <Icon
                       id="Check"
@@ -144,10 +151,7 @@ export default function BenefitsList(
           />
         )}
 
-        {ellipse && (
-          <Ellipse ellipse = {ellipse} />
-        )}
-
+        {ellipse && <Ellipse ellipse={ellipse} />}
       </div>
     </div>
   );
diff --git a/components/bannerWithTextColumn/BannerWithTextColumn.tsx b/components/bannerWithTextColumn/BannerWithTextColumn.tsx
index 2d78295..c61af48 100644
--- a/components/bannerWithTextColumn/BannerWithTextColumn.tsx
+++ b/components/bannerWithTextColumn/BannerWithTextColumn.tsx
@@ -97,9 +97,9 @@ export interface Ellipse {
   vertical: "top" | "center" | "bottom";
   width: "100" | "200" | "300";
   height: "100" | "200" | "300";
-  color: 'yellow' | 'blue'
+  color: "yellow" | "blue";
   activeDesktop?: boolean;
-  activeMobile?: boolean; 
+  activeMobile?: boolean;
 }
 
 export interface Props {
@@ -144,7 +144,6 @@ const widthContainer = {
   500: "500px",
 };
 
-
 export default function BannerWithTextColumn({
   bannerImg,
   contentText,
@@ -169,7 +168,7 @@ export default function BannerWithTextColumn({
     alignmentContent = "normal",
   } = contentText || {};
 
- const { activeDesktop } = ellipse || {}
+  const { activeDesktop } = ellipse || {};
   return (
     <div class="w-full relative overflow-x-clip">
       <div
@@ -353,9 +352,7 @@ export default function BannerWithTextColumn({
         </div>
       )}
 
-      {ellipse &&  (
-        <Ellipse ellipse={ellipse} />
-      )}
+      {ellipse && <Ellipse ellipse={ellipse} />}
     </div>
   );
 }
diff --git a/components/ui/Ellipse.tsx b/components/ui/Ellipse.tsx
index b2aba21..8095ce3 100644
--- a/components/ui/Ellipse.tsx
+++ b/components/ui/Ellipse.tsx
@@ -1,50 +1,57 @@
-
 export interface Ellipse {
-    horizontal: "left" | "center" | "right";
-    vertical: "top" | "center" | "bottom";
-    width: "100" | "200" | "300";
-    height: "100" | "200" | "300";
-    color: 'yellow' | 'blue'
-    activeDesktop?: boolean;
-    activeMobile?: boolean; 
-  }
+  horizontal: "left" | "center" | "right";
+  vertical: "top" | "center" | "bottom";
+  width: "100" | "200" | "300";
+  height: "100" | "200" | "300";
+  color: "yellow" | "blue";
+  activeDesktop?: boolean;
+  activeMobile?: boolean;
+}
 
-interface Props{
-    ellipse: Ellipse;
+interface Props {
+  ellipse: Ellipse;
 }
 
 const horizontalClasses = {
-    left: "-left-4",
-    center: "left-1/2 transform -translate-x-1/2",
-    right: "-right-4",
-  };
-  
-  const verticalClasses = {
-    top: "-top-6",
-    center: "top-1/2 transform -translate-y-1/2",
-    bottom: "bottom-0",
-  };
-  
-  const widthEllipse = {
-    100: "lg:w-28",
-    200: "lg:w-52",
-    300: "lg:w-80",
-  };
-  
-  const heightEllipse = {
-    100: "lg:h-28",
-    200: "lg:h-52",
-    300: "lg:h-80",
-  };
-  
-  const colorEllipse = {
-    yellow: 'n1-custom-color-yellow-ellipse', 
-    blue: 'n1-custom-color-blue-ellipse'
-  }
+  left: "-left-4",
+  center: "left-1/2 transform -translate-x-1/2",
+  right: "-right-4",
+};
+
+const verticalClasses = {
+  top: "-top-6",
+  center: "top-1/2 transform -translate-y-1/2",
+  bottom: "bottom-0",
+};
+
+const widthEllipse = {
+  100: "lg:w-28",
+  200: "lg:w-52",
+  300: "lg:w-80",
+};
+
+const heightEllipse = {
+  100: "lg:h-28",
+  200: "lg:h-52",
+  300: "lg:h-80",
+};
+
+const colorEllipse = {
+  yellow: "n1-custom-color-yellow-ellipse",
+  blue: "n1-custom-color-blue-ellipse",
+};
 
-export default function Ellipse({ellipse}: Props) {
-  const { width, height, horizontal, vertical, activeDesktop, activeMobile, color } = ellipse ;
-  return ( 
+export default function Ellipse({ ellipse }: Props) {
+  const {
+    width,
+    height,
+    horizontal,
+    vertical,
+    activeDesktop,
+    activeMobile,
+    color,
+  } = ellipse;
+  return (
     <div
       class={`absolute 
           ${widthEllipse[width || "100"]} 
@@ -52,8 +59,8 @@ export default function Ellipse({ellipse}: Props) {
           ${verticalClasses[vertical || "top"]}
           ${horizontalClasses[horizontal || "left"]}
           ${colorEllipse[color || "yellow"]}
-          ${activeDesktop ? 'lg:block' : 'lg:hidden'}
-          ${activeMobile ? 'block' : 'hidden'}
+          ${activeDesktop ? "lg:block" : "lg:hidden"}
+          ${activeMobile ? "block" : "hidden"}
           w-56
           h-56
           blur-[82px]
diff --git a/sections/Content/BreadcrumbCustom.tsx b/sections/Content/BreadcrumbCustom.tsx
index 61294a1..405f205 100644
--- a/sections/Content/BreadcrumbCustom.tsx
+++ b/sections/Content/BreadcrumbCustom.tsx
@@ -30,55 +30,35 @@ function Breadcrumb({ items }: Breadcrumb) {
 
             return (
               <>
-                {category && subcategory
-                  ? (
-                    <>
+                {category && (
+                  <>
+                    <li class="relative">
+                      <a href={"/"} class="n1-breadcrumb__item hover:underline">
+                        Home
+                      </a>
+                    </li>
+                    <li class="relative">
+                      <a
+                        href={`/${subcategory ? categoryScape : "#"}`}
+                        style={{ pointerEvents: subcategory ? "all" : "none" }}
+                        class={`${
+                          !subcategory
+                            ? "text-secondary after:content-[initial]"
+                            : "hover:underline"
+                        } n1-breadcrumb__item `}
+                      >
+                        {category}
+                      </a>
+                    </li>
+                    {subcategory && (
                       <li class="relative">
-                        <a
-                          href={"/"}
-                          class="n1-breadcrumb__item hover:underline"
-                        >
-                          Home
-                        </a>
-                      </li>
-                      <li class="relative">
-                        <a
-                          href={`/${categoryScape}`}
-                          class="n1-breadcrumb__item hover:underline"
-                        >
-                          {category}
-                        </a>
-                      </li>
-                      <li class="relative">
-                        <a
-                          href={`/${categoryScape}/${subcategoryScape}`}
-                          class="hover:underline text-secondary"
-                        >
-                          {subcategory}
-                        </a>
-                      </li>
-                    </>
-                  )
-                  : (
-                    <>
-                      <li class="relative">
-                        <a
-                          href={"/"}
-                          class="n1-breadcrumb__item hover:underline"
-                        >
-                          Home
-                        </a>
-                      </li>
-                      <li class="relative">
-                        <a
-                          href={`/${categoryScape}/${subcategoryScape}`}
-                          class="hover:underline text-secondary"
-                        >
+                        <a class="text-secondary">
                           {subcategory}
                         </a>
                       </li>
-                    </>
-                  )}
+                    )}
+                  </>
+                )}
               </>
             );
           })}
diff --git a/sections/Content/IconTitleAndTex.tsx b/sections/Content/IconTitleAndTex.tsx
index 5f7dffd..052293a 100644
--- a/sections/Content/IconTitleAndTex.tsx
+++ b/sections/Content/IconTitleAndTex.tsx
@@ -136,7 +136,9 @@ function IconTitleAndTex(props: SectionProps<ReturnType<typeof loader>>) {
               aria-label={`link fale conosco`}
               class="rounded-[100px] w-[316px] lg:w-[313px] h-[51px] flex items-center justify-center text-center mt-5 hover:brightness-90 bg-[#F6AB00] mb-20 lg:mb-0 "
             >
-              <span class="text-[#0C1F59] lg:text-16 font-archimoto-black pt-[1px] font-black">{button.textButton}</span>
+              <span class="text-[#0C1F59] lg:text-16 font-archimoto-black pt-[1px] font-black">
+                {button.textButton}
+              </span>
             </a>
           )}
         </div>