Skip to content

Commit

Permalink
Merge pull request #8 from deco-sites/feat/servicos
Browse files Browse the repository at this point in the history 
style: add section 2 + ajustes de atribuir valores nos filhos
  • Loading branch information
@RodolfoN1
RodolfoN1 authored Mar 18, 2024
2 parents 975689a + df57b36 commit a97a5d4
Show file tree
Hide file tree
Showing 11 changed files with 378 additions and 228 deletions.
2 changes: 1 addition & 1 deletion components/ui/CasesComponentTextWithButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ function CasesComponentTextWithButton({ subtitle, text, textButton, hrefButton,
<div class="mobile:my-[24px] text-[#ffffff] flex items-center justify-between">
<div>
{subtitle && (
<h2 class="n1-cases-component__title font-archimoto-medium text-24 leading-[28.8px] md:text-56 md:leading-[20px]"
<h2 class="n1-cases-component__title font-archimoto-medium mobile:[&_*]:!text-24 leading-[28.8px] md:text-56 md:leading-[20px]"
dangerouslySetInnerHTML={{__html: subtitle}}> </h2>
)}
{text && (
Expand Down
100 changes: 56 additions & 44 deletions components/ui/CategoryBanner.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,42 +3,42 @@ import type { SectionProps } from "deco/types.ts";
import type { ImageWidget } from "apps/admin/widgets.ts";
import Image from "apps/website/components/Image.tsx";

/** @titleBy alt */
interface ImageGeneric{
/**@title Imagem */
image:ImageWidget
/**@title largura da imagem */
/**@description (ex: 600) */
width:string;
/**@title Altura da imagem */
/**@description (ex: 300) */
height:string;
// Nome da Imagem
alt:string;
}


interface ImageProps{
/** @description Image for big screens */
desktop: ImageGeneric;
/** @description Image for small screens */
mobile: ImageGeneric;
}

/**
* @titleBy matcher
*/
export interface Banner {
/** @description RegExp to enable this banner on the current URL. Use /feminino/* to display this banner on feminino category */
/** @description Para habilitar este banner na URL atual. Usuário /feminino/* para exibir este banner na categoria feminina */
matcher: string;
/** @description text to be rendered on top of the image */
/** @description Título a ser renderizado no topo da imagem */
title?: string;
/** @description text to be rendered on top of the image */
/** @description Subtítulo a ser renderizado no topo da imagem */
subtitle?: string;
image: {
/** @description Image for big screens */
desktop: ImageWidget;
/** @description Image for small screens */
mobile: ImageWidget;
/** @description image alt text */
alt?: string;
};
/**@title Imagem */
images: ImageProps;
}

const DEFAULT_PROPS = {
banners: [
{
image: {
mobile:
"https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/239/91102b71-4832-486a-b683-5f7b06f649af",
desktop:
"https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/239/ec597b6a-dcf1-48ca-a99d-95b3c6304f96",
alt: "a",
},
title: "Woman",
matcher: "/*",
subtitle: "As",
},
],
};

function Banner(props: SectionProps<ReturnType<typeof loader>>) {
const { banner } = props;
Expand All @@ -47,24 +47,36 @@ function Banner(props: SectionProps<ReturnType<typeof loader>>) {
return null;
}

const { title, subtitle, image } = banner;
const { title, subtitle, images } = banner;

// console.log('images --> ', images)

return (
<div class="grid grid-cols-1 grid-rows-1">
<Picture preload class="col-start-1 col-span-1 row-start-1 row-span-1">
<Source
src={image.mobile}
width={360}
height={120}
media="(max-width: 767px)"
/>
<Source
src={image.desktop}
width={1440}
height={200}
media="(min-width: 767px)"
/>
<img class="w-full" src={image.desktop} alt={image.alt ?? title} />
{images && images?.desktop && images.desktop?.image && images.desktop?.width && images.desktop?.height && (
<Source
src={images.desktop.image}
width={Number(images.desktop.width)}
height={Number(images.desktop.height)}
media="(min-width: 768px)"
/>
)}

{images && images?.mobile && images.mobile?.image && images.mobile?.width && images.mobile?.height && (
<Source
src={images.mobile.image}
width={Number(images.mobile.width)}
height={Number(images.mobile.height)}
media="(max-width: 767px)"
/>
)}
{images && images?.desktop && images.desktop?.image && images.desktop?.width && images.desktop?.height && (
<img class="w-full"
src={images.desktop.image}
alt={images.desktop?.alt ?? title}
/>
)}
</Picture>

<div class="container flex flex-col items-center justify-center sm:items-start col-start-1 col-span-1 row-start-1 row-span-1 w-full">
Expand All @@ -88,9 +100,9 @@ export interface Props {
}

export const loader = (props: Props, req: Request) => {
const { banners } = { ...DEFAULT_PROPS, ...props };

const banner = banners.find(({ matcher }) =>
const { banners } = props;
const banner = banners?.find(({ matcher }) =>
new URLPattern({ pathname: matcher }).test(req.url)
);

Expand Down
138 changes: 70 additions & 68 deletions manifest.gen.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,40 +28,41 @@ import * as $$$$$$20 from "./sections/Content/Partners.tsx";
import * as $$$$$$21 from "./sections/Content/RichText.tsx";
import * as $$$$$$22 from "./sections/Content/Table.tsx";
import * as $$$$$$23 from "./sections/Content/Testimonials.tsx";
import * as $$$$$$24 from "./sections/Content/TextTopWidthCarousel.tsx";
import * as $$$$$$25 from "./sections/Content/TextWithImage.tsx";
import * as $$$$$$26 from "./sections/Content/TextWithImageAnimation.tsx";
import * as $$$$$$27 from "./sections/Content/TextWithImageCustom.tsx";
import * as $$$$$$28 from "./sections/Footer/Footer.tsx";
import * as $$$$$$29 from "./sections/Gallery.tsx";
import * as $$$$$$30 from "./sections/Header/Header.tsx";
import * as $$$$$$31 from "./sections/Images/BannerGrid.tsx";
import * as $$$$$$32 from "./sections/Images/Carousel.tsx";
import * as $$$$$$33 from "./sections/Images/ImageGallery.tsx";
import * as $$$$$$34 from "./sections/Images/ShoppableBanner.tsx";
import * as $$$$$$35 from "./sections/Layout/Container.tsx";
import * as $$$$$$36 from "./sections/Layout/Flex.tsx";
import * as $$$$$$37 from "./sections/Layout/Grid.tsx";
import * as $$$$$$38 from "./sections/Layout/GridItem.tsx";
import * as $$$$$$39 from "./sections/Links/LinkTree.tsx";
import * as $$$$$$40 from "./sections/Links/Shortcuts.tsx";
import * as $$$$$$41 from "./sections/Miscellaneous/CampaignTimer.tsx";
import * as $$$$$$42 from "./sections/Miscellaneous/CookieConsent.tsx";
import * as $$$$$$43 from "./sections/Miscellaneous/Slide.tsx";
import * as $$$$$$44 from "./sections/Newsletter/Newsletter.tsx";
import * as $$$$$$45 from "./sections/Product/ImageGalleryFrontBack.tsx";
import * as $$$$$$46 from "./sections/Product/ImageGallerySlider.tsx";
import * as $$$$$$47 from "./sections/Product/NotFound.tsx";
import * as $$$$$$48 from "./sections/Product/NotFoundChallenge.tsx";
import * as $$$$$$49 from "./sections/Product/ProductInfo.tsx";
import * as $$$$$$50 from "./sections/Product/ProductShelf.tsx";
import * as $$$$$$51 from "./sections/Product/ProductShelfTabbed.tsx";
import * as $$$$$$52 from "./sections/Product/SearchResult.tsx";
import * as $$$$$$53 from "./sections/Product/ShelfWithImage.tsx";
import * as $$$$$$54 from "./sections/Product/Wishlist.tsx";
import * as $$$$$$55 from "./sections/Social/InstagramPosts.tsx";
import * as $$$$$$56 from "./sections/Social/WhatsApp.tsx";
import * as $$$$$$57 from "./sections/Theme/Theme.tsx";
import * as $$$$$$24 from "./sections/Content/TextIconAndImage.tsx";
import * as $$$$$$25 from "./sections/Content/TextTopWidthCarousel.tsx";
import * as $$$$$$26 from "./sections/Content/TextWithImage.tsx";
import * as $$$$$$27 from "./sections/Content/TextWithImageAnimation.tsx";
import * as $$$$$$28 from "./sections/Content/TextWithImageCustom.tsx";
import * as $$$$$$29 from "./sections/Footer/Footer.tsx";
import * as $$$$$$30 from "./sections/Gallery.tsx";
import * as $$$$$$31 from "./sections/Header/Header.tsx";
import * as $$$$$$32 from "./sections/Images/BannerGrid.tsx";
import * as $$$$$$33 from "./sections/Images/Carousel.tsx";
import * as $$$$$$34 from "./sections/Images/ImageGallery.tsx";
import * as $$$$$$35 from "./sections/Images/ShoppableBanner.tsx";
import * as $$$$$$36 from "./sections/Layout/Container.tsx";
import * as $$$$$$37 from "./sections/Layout/Flex.tsx";
import * as $$$$$$38 from "./sections/Layout/Grid.tsx";
import * as $$$$$$39 from "./sections/Layout/GridItem.tsx";
import * as $$$$$$40 from "./sections/Links/LinkTree.tsx";
import * as $$$$$$41 from "./sections/Links/Shortcuts.tsx";
import * as $$$$$$42 from "./sections/Miscellaneous/CampaignTimer.tsx";
import * as $$$$$$43 from "./sections/Miscellaneous/CookieConsent.tsx";
import * as $$$$$$44 from "./sections/Miscellaneous/Slide.tsx";
import * as $$$$$$45 from "./sections/Newsletter/Newsletter.tsx";
import * as $$$$$$46 from "./sections/Product/ImageGalleryFrontBack.tsx";
import * as $$$$$$47 from "./sections/Product/ImageGallerySlider.tsx";
import * as $$$$$$48 from "./sections/Product/NotFound.tsx";
import * as $$$$$$49 from "./sections/Product/NotFoundChallenge.tsx";
import * as $$$$$$50 from "./sections/Product/ProductInfo.tsx";
import * as $$$$$$51 from "./sections/Product/ProductShelf.tsx";
import * as $$$$$$52 from "./sections/Product/ProductShelfTabbed.tsx";
import * as $$$$$$53 from "./sections/Product/SearchResult.tsx";
import * as $$$$$$54 from "./sections/Product/ShelfWithImage.tsx";
import * as $$$$$$55 from "./sections/Product/Wishlist.tsx";
import * as $$$$$$56 from "./sections/Social/InstagramPosts.tsx";
import * as $$$$$$57 from "./sections/Social/WhatsApp.tsx";
import * as $$$$$$58 from "./sections/Theme/Theme.tsx";
import * as $$$$$$$$$$$0 from "./apps/decohub.ts";
import * as $$$$$$$$$$$1 from "./apps/site.ts";

Expand Down Expand Up @@ -97,41 +98,42 @@ const manifest = {
"deco-sites/agencian1/sections/Content/RichText.tsx": $$$$$$21,
"deco-sites/agencian1/sections/Content/Table.tsx": $$$$$$22,
"deco-sites/agencian1/sections/Content/Testimonials.tsx": $$$$$$23,
"deco-sites/agencian1/sections/Content/TextTopWidthCarousel.tsx": $$$$$$24,
"deco-sites/agencian1/sections/Content/TextWithImage.tsx": $$$$$$25,
"deco-sites/agencian1/sections/Content/TextIconAndImage.tsx": $$$$$$24,
"deco-sites/agencian1/sections/Content/TextTopWidthCarousel.tsx": $$$$$$25,
"deco-sites/agencian1/sections/Content/TextWithImage.tsx": $$$$$$26,
"deco-sites/agencian1/sections/Content/TextWithImageAnimation.tsx":
$$$$$$26,
"deco-sites/agencian1/sections/Content/TextWithImageCustom.tsx": $$$$$$27,
"deco-sites/agencian1/sections/Footer/Footer.tsx": $$$$$$28,
"deco-sites/agencian1/sections/Gallery.tsx": $$$$$$29,
"deco-sites/agencian1/sections/Header/Header.tsx": $$$$$$30,
"deco-sites/agencian1/sections/Images/BannerGrid.tsx": $$$$$$31,
"deco-sites/agencian1/sections/Images/Carousel.tsx": $$$$$$32,
"deco-sites/agencian1/sections/Images/ImageGallery.tsx": $$$$$$33,
"deco-sites/agencian1/sections/Images/ShoppableBanner.tsx": $$$$$$34,
"deco-sites/agencian1/sections/Layout/Container.tsx": $$$$$$35,
"deco-sites/agencian1/sections/Layout/Flex.tsx": $$$$$$36,
"deco-sites/agencian1/sections/Layout/Grid.tsx": $$$$$$37,
"deco-sites/agencian1/sections/Layout/GridItem.tsx": $$$$$$38,
"deco-sites/agencian1/sections/Links/LinkTree.tsx": $$$$$$39,
"deco-sites/agencian1/sections/Links/Shortcuts.tsx": $$$$$$40,
"deco-sites/agencian1/sections/Miscellaneous/CampaignTimer.tsx": $$$$$$41,
"deco-sites/agencian1/sections/Miscellaneous/CookieConsent.tsx": $$$$$$42,
"deco-sites/agencian1/sections/Miscellaneous/Slide.tsx": $$$$$$43,
"deco-sites/agencian1/sections/Newsletter/Newsletter.tsx": $$$$$$44,
"deco-sites/agencian1/sections/Product/ImageGalleryFrontBack.tsx": $$$$$$45,
"deco-sites/agencian1/sections/Product/ImageGallerySlider.tsx": $$$$$$46,
"deco-sites/agencian1/sections/Product/NotFound.tsx": $$$$$$47,
"deco-sites/agencian1/sections/Product/NotFoundChallenge.tsx": $$$$$$48,
"deco-sites/agencian1/sections/Product/ProductInfo.tsx": $$$$$$49,
"deco-sites/agencian1/sections/Product/ProductShelf.tsx": $$$$$$50,
"deco-sites/agencian1/sections/Product/ProductShelfTabbed.tsx": $$$$$$51,
"deco-sites/agencian1/sections/Product/SearchResult.tsx": $$$$$$52,
"deco-sites/agencian1/sections/Product/ShelfWithImage.tsx": $$$$$$53,
"deco-sites/agencian1/sections/Product/Wishlist.tsx": $$$$$$54,
"deco-sites/agencian1/sections/Social/InstagramPosts.tsx": $$$$$$55,
"deco-sites/agencian1/sections/Social/WhatsApp.tsx": $$$$$$56,
"deco-sites/agencian1/sections/Theme/Theme.tsx": $$$$$$57,
$$$$$$27,
"deco-sites/agencian1/sections/Content/TextWithImageCustom.tsx": $$$$$$28,
"deco-sites/agencian1/sections/Footer/Footer.tsx": $$$$$$29,
"deco-sites/agencian1/sections/Gallery.tsx": $$$$$$30,
"deco-sites/agencian1/sections/Header/Header.tsx": $$$$$$31,
"deco-sites/agencian1/sections/Images/BannerGrid.tsx": $$$$$$32,
"deco-sites/agencian1/sections/Images/Carousel.tsx": $$$$$$33,
"deco-sites/agencian1/sections/Images/ImageGallery.tsx": $$$$$$34,
"deco-sites/agencian1/sections/Images/ShoppableBanner.tsx": $$$$$$35,
"deco-sites/agencian1/sections/Layout/Container.tsx": $$$$$$36,
"deco-sites/agencian1/sections/Layout/Flex.tsx": $$$$$$37,
"deco-sites/agencian1/sections/Layout/Grid.tsx": $$$$$$38,
"deco-sites/agencian1/sections/Layout/GridItem.tsx": $$$$$$39,
"deco-sites/agencian1/sections/Links/LinkTree.tsx": $$$$$$40,
"deco-sites/agencian1/sections/Links/Shortcuts.tsx": $$$$$$41,
"deco-sites/agencian1/sections/Miscellaneous/CampaignTimer.tsx": $$$$$$42,
"deco-sites/agencian1/sections/Miscellaneous/CookieConsent.tsx": $$$$$$43,
"deco-sites/agencian1/sections/Miscellaneous/Slide.tsx": $$$$$$44,
"deco-sites/agencian1/sections/Newsletter/Newsletter.tsx": $$$$$$45,
"deco-sites/agencian1/sections/Product/ImageGalleryFrontBack.tsx": $$$$$$46,
"deco-sites/agencian1/sections/Product/ImageGallerySlider.tsx": $$$$$$47,
"deco-sites/agencian1/sections/Product/NotFound.tsx": $$$$$$48,
"deco-sites/agencian1/sections/Product/NotFoundChallenge.tsx": $$$$$$49,
"deco-sites/agencian1/sections/Product/ProductInfo.tsx": $$$$$$50,
"deco-sites/agencian1/sections/Product/ProductShelf.tsx": $$$$$$51,
"deco-sites/agencian1/sections/Product/ProductShelfTabbed.tsx": $$$$$$52,
"deco-sites/agencian1/sections/Product/SearchResult.tsx": $$$$$$53,
"deco-sites/agencian1/sections/Product/ShelfWithImage.tsx": $$$$$$54,
"deco-sites/agencian1/sections/Product/Wishlist.tsx": $$$$$$55,
"deco-sites/agencian1/sections/Social/InstagramPosts.tsx": $$$$$$56,
"deco-sites/agencian1/sections/Social/WhatsApp.tsx": $$$$$$57,
"deco-sites/agencian1/sections/Theme/Theme.tsx": $$$$$$58,
},
"apps": {
"deco-sites/agencian1/apps/decohub.ts": $$$$$$$$$$$0,
Expand Down
8 changes: 4 additions & 4 deletions sections/Content/Hero.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,30 +122,30 @@ export default function HeroFlats(props: SectionProps<ReturnType<typeof loader>>
>
{title && (
<div
class="inline-block font-archimoto-medium n1-hero__title"
class="inline-block font-archimoto-medium n1-hero__title mobile:[&_*]:!text-24"
dangerouslySetInnerHTML={{
__html: title,
}}
>
</div>
)}
{descriptionAnimation &&(
<div class="n1-typing">
<div class="n1-typing mobile:[&_*]:!text-24">
<span class={`font-archimoto-medium `}>{descriptionAnimation}</span>
</div>
)}

{description && (
<div
class="inline-block font-noto-sans font-normal md:max-w-[80%] n1-hero__description"
class="inline-block font-noto-sans font-normal md:max-w-[80%] n1-hero__description mobile:mt-[16px] mobile:mb-[24px] mobile:[&_*]:!text-14"
dangerouslySetInnerHTML={{
__html: description,
}}
>
</div>
)}
{titleCta && (
<div class="inline-block font-medium n1-hero__titleCta md:mt-[30px] md:mb-[20px]"
<div class="inline-block font-medium n1-hero__titleCta mobile:mb-[10px] mobile:[&_*]:!text-14 md:mt-[30px] md:mb-[20px]"
dangerouslySetInnerHTML={{
__html: titleCta,
}}
Expand Down
21 changes: 16 additions & 5 deletions sections/Content/ImageSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,29 @@ import type { ImageWidget } from "apps/admin/widgets.ts";
import Icon from "$store/components/ui/Icon.tsx";
import Image from "apps/website/components/Image.tsx";

interface CtaProps{
/** @title Imagem */
href?: string;
/** @title Texto do link */
text?: string;
}
export interface Props {
/**
* @title Título
* @format textarea
*/
title: string;
/**
* @title Descrição
* @format textarea
*/
description: string;
/** @title Imagem */
image: ImageWidget;
/** @title Posicionamento */
placement: "left" | "right";
cta?: {
href?: string;
text?: string;
};
cta?: CtaProps;
/** @title Desabilitar espaço? */
disableSpacing?: {
top?: boolean;
bottom?: boolean;
Expand All @@ -37,7 +48,7 @@ export default function ImageSection({
cta,
}: Props) {
return (
<div class="w-full">
<div class="w-full text-[#ffffff]">
<div
class={`flex lg:container lg:max-w-6xl lg:mx-auto mx-5 md:mx-10 ${
PLACEMENT[placement]
Expand Down
Loading

0 comments on commit a97a5d4

Please sign in to comment.