Skip to content

Commit

Permalink
Merge branch 'task/sliderColumn' into staging
Browse files Browse the repository at this point in the history
  • Loading branch information
@leitecsleite
leitecsleite committed Apr 9, 2024
2 parents f9a9fc2 + e1a18fc commit 76d8f35
Show file tree
Hide file tree
Showing 3 changed files with 130 additions and 69 deletions.
71 changes: 53 additions & 18 deletions components/sliderColumn/BannerItems.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,23 @@
import type { ImageWidget } from "apps/admin/widgets.ts";
import { Picture, Source } from "apps/website/components/Picture.tsx";

export interface Banner {
/** @title Imagem Desktop */
desktop: ImageWidget;
/** @title Imagem Mobile */
mobile: ImageWidget;
/** @title Alt */
alt: string;

action?: ActionProps;

/** @format html */
subTitle?: string;

/** @format html */
description?: string;
}

interface ActionProps {
/** @title link */
/** @description (ex: https://agencian1.com.br/) */
Expand All @@ -13,32 +30,50 @@ interface ActionProps {
label: string;
}

/**
* @titleBy alt
*/
interface Banner {
/** @title Imagem Desktop */
desktop: ImageWidget;
/** @title Imagem Mobile */
mobile: ImageWidget;
/** @title Texto da imagem */
alt: string;
action?: ActionProps;
}

export function BannerItem(
{ image, lcp, id }: { image: Banner; lcp?: boolean; id: string },
{ image, lcp, id, title }: {
image: Banner;
lcp?: boolean;
id: string;
title?: string;
},
) {
const {
alt,
mobile,
desktop,
description,
subTitle,
action,
} = image;

return (
<>
<div class="w-full overflow-y-hidden">
<div class="flex flex-col-reverse lg:flex-row lg:px-16 justify-end w-full">
<div class="flex flex-col w-full max-w-[583px]">
{title && (
<div
class=" hidden lg:block text-20 lg:text-[40px] text-[#fff] font-black not-italic font-archimoto-black mb-6 mt-7 lg:mt-[70px] "
dangerouslySetInnerHTML={{ __html: title }}
>
</div>
)}
{subTitle && (
<div
class=" text-14 lg:text-24 font-archimoto-black font-black text-[#F3F4F7] !leading-[120%] mt-6 "
dangerouslySetInnerHTML={{ __html: subTitle }}
>
</div>
)}
{description && (
<div
class=" text-14 lg:text-16 font-noto-sans font-normal text-[#F3F4F7] !leading-[160%] mt-5 w-full max-w-[530px]"
dangerouslySetInnerHTML={{ __html: description }}
>
</div>
)}
</div>

<div class="w-full overflow-y-hidden rounded-[20px] max-w-[623px]">
<a
id={id}
href={action?.href ?? "#"}
Expand All @@ -61,14 +96,14 @@ export function BannerItem(
height={600}
/>
<img
class="mobile:object-none mobile:h-auto mobile:max-w-full object-cover w-full h-full"
class="mobile:h-auto mobile:max-w-full object-cover w-full h-full"
loading={lcp ? "eager" : "lazy"}
src={desktop}
alt={alt}
/>
</Picture>
</a>
</div>
</>
</div>
);
}
66 changes: 47 additions & 19 deletions components/sliderColumn/Buttons.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,55 @@
import Icon from "$store/components/ui/Icon.tsx";
import Slider from "$store/components/ui/Slider.tsx";

export default function Buttons() {
export default function Buttons({ device }: { device: string }) {
console.log(device);
return (
<>
<div class="flex items-center justify-start z-10 col-start-1 row-start-2">
<Slider.PrevButton class="btn btn-circle bg-[#ffffff] w-[40px] !h-[40px]">
<Icon
size={18}
id="Banner-arrow-left"
strokeWidth={3}
/>
</Slider.PrevButton>
</div>
<div class="flex items-center justify-end z-10 col-start-3 row-start-2">
<Slider.NextButton class="btn btn-circle bg-[#ffffff] w-[40px] !h-[40px]">
<Icon
size={18}
id="Banner-arrow-right"
strokeWidth={3}
/>
</Slider.NextButton>
</div>
{device === "desktop"
? (
<>
<div class="flex items-center justify-start z-10 col-start-1 row-start-2">
<Slider.PrevButton class="btn btn-circle bg-[#ffffff] w-[40px] !h-[40px]">
<Icon
size={18}
id="Banner-arrow-left"
strokeWidth={3}
/>
</Slider.PrevButton>
</div>
<div class="flex items-center justify-end z-10 col-start-3 row-start-2">
<Slider.NextButton class="btn btn-circle bg-[#ffffff] w-[40px] !h-[40px]">
<Icon
size={18}
id="Banner-arrow-right"
strokeWidth={3}
/>
</Slider.NextButton>
</div>
</>
)
: (
<div class="flex lg:hidden absolute -bottom-0 justify-evenly items-center w-[60%]">
<div class="flex items-center justify-start z-10 col-start-1 row-start-2">
<Slider.PrevButton class="btn btn-circle bg-[#ffffff] w-[40px] !h-[40px]">
<Icon
size={18}
id="Banner-arrow-left"
strokeWidth={3}
/>
</Slider.PrevButton>
</div>
<div class="flex items-center justify-end z-10 col-start-3 row-start-2">
<Slider.NextButton class="btn btn-circle bg-[#ffffff] w-[40px] !h-[40px]">
<Icon
size={18}
id="Banner-arrow-right"
strokeWidth={3}
/>
</Slider.NextButton>
</div>
</div>
)}
</>
);
}
62 changes: 30 additions & 32 deletions components/sliderColumn/SliderColumn.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,37 +8,35 @@ import { BannerItem } from "deco-sites/agencian1/components/sliderColumn/BannerI
import Dots from "deco-sites/agencian1/components/sliderColumn/Dots.tsx";
import Buttons from "deco-sites/agencian1/components/sliderColumn/Buttons.tsx";

/**
* @titleBy title
*/
interface ActionProps {
/** @title link */
/** @description (ex: https://agencian1.com.br/) */
href: string;
/** @title Título da imagem */
title: string;
/** @title Subtítulo da imagem */
subTitle: string;
/** @title Texto do botão */
label: string;
}

/**
* @titleBy alt
*/
export interface Banner {
/** @title Imagem Desktop */
desktop: ImageWidget;
/** @title Imagem Mobile */
mobile: ImageWidget;
/** @title Texto da imagem */
/** @title Alt */
alt: string;

action?: ActionProps;

/** @format html */
subTitle: string;

/** @format html */
description: string;
}

interface ActionProps {
/** @title link */
/** @description (ex: https://agencian1.com.br/) */
href: string;
/** @title Título da imagem */
title: string;
/** @title Subtítulo da imagem */
subTitle: string;
/** @title Texto do botão */
label: string;
}

export interface Props {
/** @format html */
title?: string;
Expand Down Expand Up @@ -81,30 +79,30 @@ export default function SliderColumn(
{ ...DEFAULT_PROPS, ...props };
return (
<div
class="w-full flex flex-row relative max-w-[1300px] m-auto justify-between px-5 md:px-0 lg:py-0 z-10"
class="w-full flex flex-col lg:flex-row relative max-w-[1300px] m-auto justify-between px-5 md:px-0 lg:py-0 z-10"
style={{ marginTop: `${marginTop}`, marginBottom: `${marginBottom}` }}
>
<div class="w-1/2">
{title && (
<div
class=" text-20 lg:text-[40px] text-[#fff] font-black not-italic font-archimoto-black mb-6 mt-7 lg:mb-[30px] lg:mt-[12px] "
dangerouslySetInnerHTML={{ __html: title }}
>
</div>
)}
</div>
{title && (
<div
class=" block lg:hidden text-20 lg:text-[40px] text-[#fff] font-black not-italic font-archimoto-black mb-5"
dangerouslySetInnerHTML={{ __html: title }}
>
</div>
)}

<div
id={id}
class="grid grid-cols-[48px_1fr_48px] sm:grid-cols-[120px_1fr_120px] grid-rows-[1fr_48px_1fr_64px] sm:min-h-min min-h-[660px] w-full max-w-[800px] "
class="lg:grid grid-cols-[48px_1fr_48px] sm:grid-cols-[120px_1fr_120px] grid-rows-[1fr_48px_1fr_64px]
h-[521px] lg:h-auto lg:min-h-[660px] w-full flex items-center justify-end flex-col-reverse"
>
<Slider class="carousel carousel-center col-span-full row-span-full gap-6 w-full rounded-[20px] max-w-[623px] m-auto">
<Slider class="carousel carousel-center col-span-full row-span-full gap-6 w-full rounded-[20px]">
{images?.map((image, index) => {
return (
<>
<Slider.Item index={index} class="carousel-item w-full">
<BannerItem
image={image}
title={title}
lcp={index === 0 && preload}
id={`${id}::${index}`}
/>
Expand All @@ -114,7 +112,7 @@ export default function SliderColumn(
})}
</Slider>

{props.arrows && <Buttons />}
{props.arrows && <Buttons device={device} />}
{props.dots && <Dots images={images} interval={interval} />}

<SliderJS rootId={id} interval={interval && interval * 1e3} infinite />
Expand Down

0 comments on commit 76d8f35

Please sign in to comment.