Skip to content

Commit

Permalink
fix:breadcrumbCustom
Browse files Browse the repository at this point in the history
  • Loading branch information
@leitecsleite
leitecsleite committed May 21, 2024
1 parent 01895c2 commit 67e9bd6
Show file tree
Hide file tree
Showing 5 changed files with 103 additions and 113 deletions.
38 changes: 21 additions & 17 deletions components/BenefitsList/BenefitsList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,16 @@ 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}}} */
export interface Lists {
/** @title Descrição */
/** @format html */
description: string;

}
export interface Props {
/** @title Título */
Expand All @@ -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 */
Expand Down Expand Up @@ -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 || {};
Expand All @@ -101,19 +100,27 @@ 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 }}
>
</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"
Expand Down Expand Up @@ -144,10 +151,7 @@ export default function BenefitsList(
/>
)}

{ellipse && (
<Ellipse ellipse = {ellipse} />
)}

{ellipse && <Ellipse ellipse={ellipse} />}
</div>
</div>
);
Expand Down
11 changes: 4 additions & 7 deletions components/bannerWithTextColumn/BannerWithTextColumn.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -144,7 +144,6 @@ const widthContainer = {
500: "500px",
};


export default function BannerWithTextColumn({
bannerImg,
contentText,
Expand All @@ -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
Expand Down Expand Up @@ -353,9 +352,7 @@ export default function BannerWithTextColumn({
</div>
)}

{ellipse && (
<Ellipse ellipse={ellipse} />
)}
{ellipse && <Ellipse ellipse={ellipse} />}
</div>
);
}
Expand Down
93 changes: 50 additions & 43 deletions components/ui/Ellipse.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,59 +1,66 @@

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"]}
${heightEllipse[height || "100"]}
${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]
Expand Down
70 changes: 25 additions & 45 deletions sections/Content/BreadcrumbCustom.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
</>
)}
)}
</>
)}
</>
);
})}
Expand Down
4 changes: 3 additions & 1 deletion sections/Content/IconTitleAndTex.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

0 comments on commit 67e9bd6

Please sign in to comment.