From d593b79de20e690ef44dba1abc7aadd580708325 Mon Sep 17 00:00:00 2001 From: Lucas Leite <70826073+leitecsleite@users.noreply.github.com> Date: Sat, 23 Mar 2024 18:10:46 -0300 Subject: [PATCH 01/10] feat:task/cases - created card cases --- components/cases/Cases.tsx | 208 ++++++++++++++++++++ components/header/Menu.tsx | 33 ++-- components/header/NavItem.tsx | 13 +- components/ui/Icon.tsx | 3 +- components/ui/LinkWithOptionArrow.tsx | 108 ++++++++-- deno.json | 5 +- manifest.gen.ts | 6 +- sections/Content/IconText.tsx | 7 +- sections/Content/Mosaic.tsx | 57 ++++-- sections/Content/TextIconAndImage.tsx | 89 ++++++--- sections/Content/TextWithImage.tsx | 15 +- sections/Content/TextWithImageAnimation.tsx | 48 +++-- sections/Content/TextWithImageCustom.tsx | 39 ++-- sections/cases/cases.tsx | 1 + static/sprites.svg | 4 + tailwind.css | 7 +- 16 files changed, 530 insertions(+), 113 deletions(-) create mode 100644 components/cases/Cases.tsx create mode 100644 sections/cases/cases.tsx diff --git a/components/cases/Cases.tsx b/components/cases/Cases.tsx new file mode 100644 index 0000000..8dcc49f --- /dev/null +++ b/components/cases/Cases.tsx @@ -0,0 +1,208 @@ +import type { ImageWidget } from "apps/admin/widgets.ts"; +import Image from "apps/website/components/Image.tsx"; +import Icon from "$store/components/ui/Icon.tsx"; + +export interface Technology { + /** @title Icon services desktop */ + IconDesktop: ImageWidget; + /** @title Icon services mobile */ + IconMobile: ImageWidget; + + services: string; +} + +export interface CardCases { + /** @title Image card desktop */ + imgCardDesktop: ImageWidget; + + alt: string; + + /** @description widht ex: 580 */ + widthDesktop?: number; + /** @description height ex: 430 */ + heightDesktop?: number; + + /** @title Image card mobile */ + + imgCardMobile: ImageWidget; + + /** @description widht ex: 350 */ + widthMobile?: number; + /** @description height ex: 342 */ + heightMobile?: number; + + /** @title Logo store desktop */ + imgIconStoreDesktop: ImageWidget; + + /**@title Logo store mobile */ + imgIconStoreMobile: ImageWidget; + + link: string; + buttonName: string; + technology: Technology[]; +} + +export interface Props { + /** @title Icon do background bottom */ + IconBackgroundBottom?: ImageWidget; + + /** */ + + iconBackgroundTop?: ImageWidget; + + iconBackgroundLeftBottom?: ImageWidget; + + /** @description Adicione os Cases */ + cardCases?: CardCases[]; +} + +export default function Cases(props: Props) { + if (!props.cardCases) { + return null; + } + + return ( +
+
+ {props.cardCases.map((card, index) => ( +
+
+
+
+ {card.technology.map((tech, techIndex) => ( +
+ + +
+ ))} +
+
+ + {card.imgCardDesktop && ( + + {card.alt} + + )} + + {card.imgCardMobile && ( + + {card.alt} + + )} + +
+
+ {card.imgIconStoreDesktop && ( + {card.alt} + )} + + {card.imgIconStoreMobile && ( + {card.alt} + )} + + {card.link && card.buttonName && ( + + + + + )} +
+
+
+
+ ))} +
+ + {props.IconBackgroundBottom && ( +
+ icon background +
+ )} + + {props.iconBackgroundTop && ( +
+ icon background +
+ )} + + {props.iconBackgroundLeftBottom && ( +
+ icon background +
)} +
+ ); +} diff --git a/components/header/Menu.tsx b/components/header/Menu.tsx index 2416f78..22fd648 100644 --- a/components/header/Menu.tsx +++ b/components/header/Menu.tsx @@ -14,17 +14,28 @@ interface PropsMenuItem { } function MenuItem({ item }: PropsMenuItem) { - const existsChildren = item && item.children && item.children.length > 0 ? true : false; + const existsChildren = item && item.children && item.children.length > 0 + ? true + : false; return ( <>
+ class={clx( + `${existsChildren ? "collapse collapse-arrow" : ""} n1-menu-mobile`, + )} + > {existsChildren && ( )} -
+
{item.name} {item && item.children && item.children.length === 0 && ( @@ -40,15 +51,15 @@ function MenuItem({ item }: PropsMenuItem) { } {existsChildren && item && item.children && item.children.map((node) => { - console.log('node -------> ', node) + console.log("node -------> ", node); return (
  • - - + style={{ pointerEvents: `${node?.url ? "all" : "none"}` }} + > - +
    • ); })} @@ -67,10 +78,10 @@ function Menu({ items, whatsapp }: Props) { {items.map((item) => { return (
  • - - + style={{ pointerEvents: `${item?.url ? "all" : "none"}` }} + >
    • diff --git a/components/header/NavItem.tsx b/components/header/NavItem.tsx index d5e7016..8fcc6fa 100644 --- a/components/header/NavItem.tsx +++ b/components/header/NavItem.tsx @@ -58,10 +58,11 @@ function NavItem({ item, btnTextMenu, btnUrlMenu }: Props) { } group flex justify-between text-16 font-archimoto-medium uppercase whitespace-nowrap is-${nameItemScape} items-center`)} > - + class="overflow-y-hidden h-5 mr-[10px]" + > {name} @@ -134,8 +135,12 @@ function NavItem({ item, btnTextMenu, btnUrlMenu }: Props) { return (
  • {node.image?.map((i) => { diff --git a/components/ui/Icon.tsx b/components/ui/Icon.tsx index 3ff8e13..2bce193 100644 --- a/components/ui/Icon.tsx +++ b/components/ui/Icon.tsx @@ -53,7 +53,8 @@ export type AvailableIcons = | "ArrowUpMenuMobile" | "ArrowDownMenuMobile" | "Banner-arrow-left" - | "Banner-arrow-right"; + | "Banner-arrow-right" + | "ArrowMoreInfor"; interface Props extends JSX.SVGAttributes { /** diff --git a/components/ui/LinkWithOptionArrow.tsx b/components/ui/LinkWithOptionArrow.tsx index 111024d..756c13e 100644 --- a/components/ui/LinkWithOptionArrow.tsx +++ b/components/ui/LinkWithOptionArrow.tsx @@ -33,26 +33,36 @@ function LinkWithOptionArrow( pointerEvents: `${link ? "all" : "none"}`, }} target="_blank" - class={clx(`${width && !margin + class={clx(`${ + width && !margin ? "mobile:my-0 mobile:mx-auto" : margin ? "ml-[0]" : "mobile:w-[130px]" } - ${activeArrowBlue + ${ + activeArrowBlue ? "bg-[#ffffff]" : activeArrowService ? "bg-secondary border-transparent" : "bg-transparent border-[#ffffff]" } n1-Link-with-option-arrow mobile:relative mobile:py-[7px] px-[10px] py-[10px] group flex items-center relative min-w-[125px] - border text-16 uppercase n1-btn-header-item--rounded ${customClass ? customClass : ""}`)} + border text-16 uppercase n1-btn-header-item--rounded ${ + customClass ? customClass : "" + }`)} > {text ? text : ""} @@ -60,24 +70,100 @@ function LinkWithOptionArrow( {activeArrow && (
    - - + +
    )} {activeArrowBlue && (
    - - - + + +
    )} {activeArrowService && (
    - + + + + + + + + + + + + + + + + + +
    )}     diff --git a/deno.json b/deno.json index 830a27e..884d2ed 100644 --- a/deno.json +++ b/deno.json @@ -1,10 +1,9 @@ { "imports": { "deco-sites/agencian1/": "./", - "$store/": "./", - "deco/": "https://denopkg.com/deco-cx/deco@1.52.20/", - "apps/": "https://denopkg.com/deco-cx/apps@0.32.29/", + "deco/": "https://denopkg.com/deco-cx/deco@1.57.28/", + "apps/": "https://denopkg.com/deco-cx/apps@0.35.15/", "$fresh/": "https://deno.land/x/fresh@1.6.3/", "preact": "https://esm.sh/preact@10.19.2", "preact/": "https://esm.sh/preact@10.19.2/", diff --git a/manifest.gen.ts b/manifest.gen.ts index 7fd2c39..6aa0f9d 100644 --- a/manifest.gen.ts +++ b/manifest.gen.ts @@ -2,6 +2,8 @@ // This file SHOULD be checked into source version control. // This file is automatically updated during development when running `dev.ts`. +import * as $$$$$$$$$$$0 from "./apps/decohub.ts"; +import * as $$$$$$$$$$$1 from "./apps/site.ts"; import * as $$$0 from "./loaders/Layouts/ProductCard.tsx"; import * as $$$1 from "./loaders/List/Sections.tsx"; import * as $$$$$$0 from "./sections/Animation/Animation.tsx"; @@ -9,6 +11,7 @@ import * as $$$$$$1 from "./sections/Cards/IconCardsCarousel.tsx"; import * as $$$$$$2 from "./sections/Cards/IconCardsCarouselWithImage.tsx"; import * as $$$$$$3 from "./sections/Cards/ImageCardsCarousel.tsx"; import * as $$$$$$4 from "./sections/Cards/ImageCardsCarouselWithImage.tsx"; +import * as $$$$$$61 from "./sections/cases/cases.tsx"; import * as $$$$$$5 from "./sections/Category/CategoryBanner.tsx"; import * as $$$$$$6 from "./sections/Category/CategoryGrid.tsx"; import * as $$$$$$7 from "./sections/Category/CategoryList.tsx"; @@ -65,8 +68,6 @@ import * as $$$$$$57 from "./sections/Product/Wishlist.tsx"; import * as $$$$$$58 from "./sections/Social/InstagramPosts.tsx"; import * as $$$$$$59 from "./sections/Social/WhatsApp.tsx"; import * as $$$$$$60 from "./sections/Theme/Theme.tsx"; -import * as $$$$$$$$$$$0 from "./apps/decohub.ts"; -import * as $$$$$$$$$$$1 from "./apps/site.ts"; const manifest = { "loaders": { @@ -81,6 +82,7 @@ const manifest = { "deco-sites/agencian1/sections/Cards/ImageCardsCarousel.tsx": $$$$$$3, "deco-sites/agencian1/sections/Cards/ImageCardsCarouselWithImage.tsx": $$$$$$4, + "deco-sites/agencian1/sections/cases/cases.tsx": $$$$$$61, "deco-sites/agencian1/sections/Category/CategoryBanner.tsx": $$$$$$5, "deco-sites/agencian1/sections/Category/CategoryGrid.tsx": $$$$$$6, "deco-sites/agencian1/sections/Category/CategoryList.tsx": $$$$$$7, diff --git a/sections/Content/IconText.tsx b/sections/Content/IconText.tsx index 08439e5..a0fe3c7 100644 --- a/sections/Content/IconText.tsx +++ b/sections/Content/IconText.tsx @@ -47,8 +47,7 @@ function IconText({ grid }: Props) { {subtitle && (
    @@ -57,7 +56,9 @@ function IconText({ grid }: Props) {
    • )} - {(!ishidden || device === "desktop") && contentText.list?.cardInfo && ( + {(!ishidden || device === "desktop") && + contentText.list?.cardInfo && (
      {contentText.list?.cardInfo.map((card, index) => ( -
    • - {card.percentage} -

      {card.about}

      +
    • + + {card.percentage} + +

      + {card.about} +

      • ))}
    @@ -221,30 +255,41 @@ export default function BannerWithTextColumn({ {contentText.list && (
      - {contentText.list.textList && contentText.list.textList.map((text, index) => ( -
    • - {text.descriptionList && ( -
      - -
      + {contentText.list.textList && + contentText.list.textList.map((text, index) => ( +
    • + {text.descriptionList && ( +
      + +
      +
      -
    - )} - - ))} + )} + + ))}
    )} - - + {contentText.button && ( - + )} @@ -254,7 +299,12 @@ export default function BannerWithTextColumn({ {imageBackground && (
    - +
    )}
    diff --git a/components/challenges/Challenges.tsx b/components/challenges/Challenges.tsx index c34d62b..57ba748 100644 --- a/components/challenges/Challenges.tsx +++ b/components/challenges/Challenges.tsx @@ -3,84 +3,88 @@ import type { FnContext } from "deco/types.ts"; import Image from "apps/website/components/Image.tsx"; export interface Cards { - /**@title Icon */ - Icon: ImageWidget; - /** @title title */ - /** @format html */ - title?: string; - /** @title description */ - /** @format html */ - description?: string; + /**@title Icon */ + Icon: ImageWidget; + /** @title title */ + /** @format html */ + title?: string; + /** @title description */ + /** @format html */ + description?: string; } export interface Props { + /** @tilte Title */ + /** @format html */ + title?: string; - /** @tilte Title */ - /** @format html */ - title?: string + cards?: Cards[]; - cards?: Cards[] + /** @tilte Margin top */ + /** @description Espaçamento entre uma section e outro ex:10px*/ + marginTop?: string; - - /** @tilte Margin top */ - /** @description Espaçamento entre uma section e outro ex:10px*/ - marginTop?:string; - - /** @tilte Margin Bottom */ - /** @description spaçamento entre uma section e outro ex:10px*/ - marginBottom?:string; - + /** @tilte Margin Bottom */ + /** @description spaçamento entre uma section e outro ex:10px*/ + marginBottom?: string; } -export default function Challenges({ title, cards, marginTop, marginBottom }: Props) { - return ( -
    - {title && ( -
    -
    - )} - - {/** Cards **/} - -
    -
      - {cards && cards.map((card, index) => ( -
    • - {card.Icon && ( - icon - )} +export default function Challenges( + { title, cards, marginTop, marginBottom }: Props, +) { + return ( +
      + {title && ( +
      +
      + )} -
      - {card.title && ( -
      -
      - )} - {card.description && ( -
      -
      - )} -
      + {/** Cards **/} -
      • - ))} -
    -
    +
    +
      + {cards && + cards.map((card, index) => ( +
    • + {card.Icon && ( + icon + )} -
    - ) +
    + {card.title && ( +
    +
    + )} + {card.description && ( +
    +
    + )} +
    + + ))} + +
    +
    + ); } - diff --git a/components/feedBack/FeedBack.tsx b/components/feedBack/FeedBack.tsx index 0341ba3..e7759a8 100644 --- a/components/feedBack/FeedBack.tsx +++ b/components/feedBack/FeedBack.tsx @@ -1,12 +1,7 @@ - - - - - -export default function FeedbackSection() { - return( - <> - olá - - ) -} \ No newline at end of file +export default function FeedbackSection() { + return ( + <> + olá + + ); +} diff --git a/components/result_chievements/Result_chievements.tsx b/components/result_chievements/Result_chievements.tsx index 05d37b6..5fbe184 100644 --- a/components/result_chievements/Result_chievements.tsx +++ b/components/result_chievements/Result_chievements.tsx @@ -1,127 +1,134 @@ - import type { ImageWidget } from "apps/admin/widgets.ts"; import Image from "apps/website/components/Image.tsx"; import type { FnContext } from "deco/types.ts"; export interface TagsIcons { - /**@title Tags Desktop*/ - IconsDesktop: ImageWidget; - widthDesktop?: number; - heightDesktop?: number; + /**@title Tags Desktop*/ + IconsDesktop: ImageWidget; + widthDesktop?: number; + heightDesktop?: number; - /**@title Tags Mobile*/ - IconsMobile: ImageWidget; - widthMobile?: number; - heightMobile?: number; + /**@title Tags Mobile*/ + IconsMobile: ImageWidget; + widthMobile?: number; + heightMobile?: number; } export interface Card { - /**@title Icon Seal Check */ - Iconcheck: ImageWidget; - /** @title description */ - /** @format html */ - description: string; + /**@title Icon Seal Check */ + Iconcheck: ImageWidget; + /** @title description */ + /** @format html */ + description: string; } export interface Props { - /** @title Título */ - /** @format html */ - title?: string; + /** @title Título */ + /** @format html */ + title?: string; + + tags?: TagsIcons[]; + cards?: Card[]; - tags?: TagsIcons[]; - cards?: Card[]; + /** @tilte Margin top */ + /** @description Espaçamento entre uma section e outra ex:10px*/ + marginTop?: string; - /** @tilte Margin top */ - /** @description Espaçamento entre uma section e outra ex:10px*/ - marginTop?:string; - - /** @tilte Margin Bottom*/ - /** @description spaçamento entre uma section e outra ex:10px*/ - marginBottom?:string; + /** @tilte Margin Bottom*/ + /** @description spaçamento entre uma section e outra ex:10px*/ + marginBottom?: string; } export default function Result_achievements({ - title, - tags, - cards, - device, - marginTop, - marginBottom + title, + tags, + cards, + device, + marginTop, + marginBottom, }: Props & { device: string }) { + return ( +
    + {title && ( +
    +
    + )} +
    + +
    - return ( -
    - {title && ( -
    -
    - )} -
    -
      - {tags && tags.map((tag, index) => ( -
    • - {device === 'desktop' ? ( - tags - ) : ( - tags - )} -
      • - ))} -
    -
    - - {/** Cards **/} - -
    -
      - {cards && cards.map((card, index) => ( -
    • - {card.Iconcheck && ( - tags - )} - {card.description && ( -
      -
      - )} -
      • - ))} -
    -
    + {/** Cards **/} -
    - ); +
    + +
    +
    + ); } export const loader = ( - props: Props, - _req: Request, - ctx: FnContext, + props: Props, + _req: Request, + ctx: FnContext, ) => { - const device = ctx.device; - return { - ...props, - device: device || "desktop", - }; + const device = ctx.device; + return { + ...props, + device: device || "desktop", + }; }; diff --git a/sections/BannerWithTextColumn/BannerWithTextColumn.tsx b/sections/BannerWithTextColumn/BannerWithTextColumn.tsx index 3a7a6e6..3464423 100644 --- a/sections/BannerWithTextColumn/BannerWithTextColumn.tsx +++ b/sections/BannerWithTextColumn/BannerWithTextColumn.tsx @@ -1 +1,4 @@ -export { loader, default } from "$store/components/bannerWithTextColumn/BannerWithTextColumn.tsx" \ No newline at end of file +export { + default, + loader, +} from "$store/components/bannerWithTextColumn/BannerWithTextColumn.tsx"; diff --git a/sections/Challenges/challenges.tsx b/sections/Challenges/challenges.tsx index 39f0a8f..d5fad72 100644 --- a/sections/Challenges/challenges.tsx +++ b/sections/Challenges/challenges.tsx @@ -1 +1 @@ -export { default } from "$store/components/challenges/Challenges.tsx"; \ No newline at end of file +export { default } from "$store/components/challenges/Challenges.tsx"; diff --git a/sections/Result_chievements/result_chievements.tsx b/sections/Result_chievements/result_chievements.tsx index a201a75..cb67eb9 100644 --- a/sections/Result_chievements/result_chievements.tsx +++ b/sections/Result_chievements/result_chievements.tsx @@ -1 +1,4 @@ -export {loader, default } from "$store/components/result_chievements/Result_chievements.tsx"; \ No newline at end of file +export { + default, + loader, +} from "$store/components/result_chievements/Result_chievements.tsx"; From 1f4e60e6e7165010ff88dcaeb55fe3e229443781 Mon Sep 17 00:00:00 2001 From: Lucas Leite <70826073+leitecsleite@users.noreply.github.com> Date: Sat, 30 Mar 2024 18:26:04 -0300 Subject: [PATCH 08/10] feat:task/cases - created section feedback --- .../BannerWithTextColumn.tsx | 4 - components/feedBack/FeedBack.tsx | 87 ++- components/ui/EllipseSnippet.tsx | 177 +++--- components/ui/Icon.tsx | 3 +- components/ui/ImagesAndBackgroundSide.tsx | 137 ++--- manifest.gen.ts | 130 ++--- sections/Content/BrandImage.tsx | 122 ++-- sections/Content/ImagesAndBackground.tsx | 199 +++---- sections/Content/TextWithImageCustom.tsx | 8 +- sections/Content/TitleTextIconsAndImage.tsx | 522 ++++++++++-------- sections/FeedBack/FeedBack.tsx | 1 + static/sprites.svg | 13 +- 12 files changed, 802 insertions(+), 601 deletions(-) create mode 100644 sections/FeedBack/FeedBack.tsx diff --git a/components/bannerWithTextColumn/BannerWithTextColumn.tsx b/components/bannerWithTextColumn/BannerWithTextColumn.tsx index 6b416ff..9412f5f 100644 --- a/components/bannerWithTextColumn/BannerWithTextColumn.tsx +++ b/components/bannerWithTextColumn/BannerWithTextColumn.tsx @@ -1,10 +1,6 @@ import { FnContext, SectionProps } from "deco/mod.ts"; import type { ImageWidget } from "apps/admin/widgets.ts"; import Image from "apps/website/components/Image.tsx"; -import { Picture, Source } from "apps/website/components/Picture.tsx"; -import LinkWithOptionArrow from "$store/components/ui/LinkWithOptionArrow.tsx"; -import { clx } from "$store/sdk/clx.ts"; -import { ImportAssetFromApiGatewayApiRequestDetails } from "https://esm.sh/v135/aws-sdk@2.1576.0/clients/dataexchange.js"; export interface Img { /**@title Image Desktop*/ diff --git a/components/feedBack/FeedBack.tsx b/components/feedBack/FeedBack.tsx index e7759a8..fa28ace 100644 --- a/components/feedBack/FeedBack.tsx +++ b/components/feedBack/FeedBack.tsx @@ -1,7 +1,86 @@ -export default function FeedbackSection() { +import type { ImageWidget } from "apps/admin/widgets.ts"; +import Image from "apps/website/components/Image.tsx"; +import Icon from "$store/components/ui/Icon.tsx"; +export interface Props { + comment: string; + photo: ImageWidget; + name: string; + profession: string; + + /** @tilte Margin top */ + /** @description Espaçamento entre uma section e outra ex:10px*/ + marginTop?: string; + + /** @tilte Margin Bottom*/ + /** @description spaçamento entre uma section e outra ex:10px*/ + marginBottom?: string; + + backgroundImage?: ImageWidget; +} + +export default function FeedbackSection({ + comment, + photo, + name, + profession, + marginTop, + marginBottom, + backgroundImage, +}: Props) { return ( - <> - olá - +
    +
    +
    +
    + + +

    + {comment && comment} +

    +
    + +
    +
    + photo user +
    +
    +

    + {name} +

    +

    + {profession} +

    +
    +
    +
    +
    + + {backgroundImage && ( + + )} +
    ); } diff --git a/components/ui/EllipseSnippet.tsx b/components/ui/EllipseSnippet.tsx index fb5b6b1..22304d4 100644 --- a/components/ui/EllipseSnippet.tsx +++ b/components/ui/EllipseSnippet.tsx @@ -1,83 +1,124 @@ import { clx } from "$store/sdk/clx.ts"; -interface EllipseProps{ - desktop?:boolean; - mobile?:boolean; +interface EllipseProps { + desktop?: boolean; + mobile?: boolean; } -interface Ellipse{ - ellipse01?:EllipseProps; - ellipse02?:EllipseProps; - ellipse03?:EllipseProps; - ellipse04?:EllipseProps; +interface Ellipse { + ellipse01?: EllipseProps; + ellipse02?: EllipseProps; + ellipse03?: EllipseProps; + ellipse04?: EllipseProps; } -interface Props{ - ellipse?:Ellipse; +interface Props { + ellipse?: Ellipse; } -function EllipseSnippet( { ellipse } : Props ){ - return( - <> -
    - -
    +function EllipseSnippet({ ellipse }: Props) { + return ( + <> +
    + +
    -
    -
    + mobile:[bottom:initial] mobile:-left-[30px] mobile:top-[310px] mobile:w-[126px] mobile:h-[28px]`)} + > + -
    -
    +
    +
    -
    - -
    - - -
    -
    - - ) + mobile:top-[270px] mobile:w-[230px] mobile:h-[230px]`)} + > + +
    + + +
    + + + ); } -export default EllipseSnippet; \ No newline at end of file +export default EllipseSnippet; diff --git a/components/ui/Icon.tsx b/components/ui/Icon.tsx index 2bce193..292914f 100644 --- a/components/ui/Icon.tsx +++ b/components/ui/Icon.tsx @@ -54,7 +54,8 @@ export type AvailableIcons = | "ArrowDownMenuMobile" | "Banner-arrow-left" | "Banner-arrow-right" - | "ArrowMoreInfor"; + | "ArrowMoreInfor" + | "Quotes"; interface Props extends JSX.SVGAttributes { /** diff --git a/components/ui/ImagesAndBackgroundSide.tsx b/components/ui/ImagesAndBackgroundSide.tsx index ac50bae..e40b1dc 100644 --- a/components/ui/ImagesAndBackgroundSide.tsx +++ b/components/ui/ImagesAndBackgroundSide.tsx @@ -1,79 +1,84 @@ import { Picture, Source } from "apps/website/components/Picture.tsx"; import type { ImageWidget } from "apps/admin/widgets.ts"; -interface ImageGeneric{ - src?:ImageWidget; - width?:number; - height?:number; +interface ImageGeneric { + src?: ImageWidget; + width?: number; + height?: number; } -interface DeviceImage{ - alt?:string; - desktop?:ImageGeneric; - mobile?:ImageGeneric; +interface DeviceImage { + alt?: string; + desktop?: ImageGeneric; + mobile?: ImageGeneric; } -interface Side{ - title?:string; - description?:string; - device?:DeviceImage[]; +interface Side { + title?: string; + description?: string; + device?: DeviceImage[]; } -interface Props{ - bg?:DeviceImage; - side?:Side; +interface Props { + bg?: DeviceImage; + side?: Side; } -function ImagesAndBackgroundSide( { bg, side }:Props ){ - return ( - <> -
    - {side?.title && side.title !== '


    ' && ( -
    -
    - )} - {side?.description && side.description !== '


    ' && ( -
    -
    - )} -
    - {side && side.device?.map(( { desktop, mobile, alt} )=> { - return( - <> - - {mobile?.src && mobile?.width && mobile?.height && ( - - )} - {desktop?.src && desktop?.width && desktop?.height && ( - - )} - {alt - - - ) - })} -
    -
    - - ) +function ImagesAndBackgroundSide({ bg, side }: Props) { + return ( + <> +
    + {side?.title && side.title !== '


    ' && ( +
    +
    + )} + {side?.description && + side.description !== '


    ' && ( +
    +
    + )} +
    + {side && side.device?.map(({ desktop, mobile, alt }) => { + return ( + <> + + {mobile?.src && mobile?.width && mobile?.height && ( + + )} + {desktop?.src && desktop?.width && desktop?.height && ( + + )} + {alt + + + ); + })} +
    +
    + + ); } -export default ImagesAndBackgroundSide; \ No newline at end of file +export default ImagesAndBackgroundSide; diff --git a/manifest.gen.ts b/manifest.gen.ts index bb7daec..aa63184 100644 --- a/manifest.gen.ts +++ b/manifest.gen.ts @@ -12,7 +12,7 @@ import * as $$$$$$2 from "./sections/Cards/IconCardsCarousel.tsx"; import * as $$$$$$3 from "./sections/Cards/IconCardsCarouselWithImage.tsx"; import * as $$$$$$4 from "./sections/Cards/ImageCardsCarousel.tsx"; import * as $$$$$$5 from "./sections/Cards/ImageCardsCarouselWithImage.tsx"; -import * as $$$$$$68 from "./sections/cases/cases.tsx"; +import * as $$$$$$69 from "./sections/cases/cases.tsx"; import * as $$$$$$6 from "./sections/Category/CategoryBanner.tsx"; import * as $$$$$$7 from "./sections/Category/CategoryGrid.tsx"; import * as $$$$$$8 from "./sections/Category/CategoryList.tsx"; @@ -44,37 +44,38 @@ import * as $$$$$$33 from "./sections/Content/TextWithImage.tsx"; import * as $$$$$$34 from "./sections/Content/TextWithImageAnimation.tsx"; import * as $$$$$$35 from "./sections/Content/TextWithImageCustom.tsx"; import * as $$$$$$36 from "./sections/Content/TitleTextIconsAndImage.tsx"; -import * as $$$$$$37 from "./sections/Footer/Footer.tsx"; -import * as $$$$$$38 from "./sections/Gallery.tsx"; -import * as $$$$$$39 from "./sections/Header/Header.tsx"; -import * as $$$$$$40 from "./sections/Images/BannerGrid.tsx"; -import * as $$$$$$41 from "./sections/Images/Carousel.tsx"; -import * as $$$$$$42 from "./sections/Images/ImageGallery.tsx"; -import * as $$$$$$43 from "./sections/Images/ShoppableBanner.tsx"; -import * as $$$$$$44 from "./sections/Layout/Container.tsx"; -import * as $$$$$$45 from "./sections/Layout/Flex.tsx"; -import * as $$$$$$46 from "./sections/Layout/Grid.tsx"; -import * as $$$$$$47 from "./sections/Layout/GridItem.tsx"; -import * as $$$$$$48 from "./sections/Links/LinkTree.tsx"; -import * as $$$$$$49 from "./sections/Links/Shortcuts.tsx"; -import * as $$$$$$50 from "./sections/Miscellaneous/CampaignTimer.tsx"; -import * as $$$$$$51 from "./sections/Miscellaneous/CookieConsent.tsx"; -import * as $$$$$$52 from "./sections/Miscellaneous/Slide.tsx"; -import * as $$$$$$53 from "./sections/Newsletter/Newsletter.tsx"; -import * as $$$$$$54 from "./sections/Product/ImageGalleryFrontBack.tsx"; -import * as $$$$$$55 from "./sections/Product/ImageGallerySlider.tsx"; -import * as $$$$$$56 from "./sections/Product/NotFound.tsx"; -import * as $$$$$$57 from "./sections/Product/NotFoundChallenge.tsx"; -import * as $$$$$$58 from "./sections/Product/ProductInfo.tsx"; -import * as $$$$$$59 from "./sections/Product/ProductShelf.tsx"; -import * as $$$$$$60 from "./sections/Product/ProductShelfTabbed.tsx"; -import * as $$$$$$61 from "./sections/Product/SearchResult.tsx"; -import * as $$$$$$62 from "./sections/Product/ShelfWithImage.tsx"; -import * as $$$$$$63 from "./sections/Product/Wishlist.tsx"; -import * as $$$$$$64 from "./sections/Result_chievements/result_chievements.tsx"; -import * as $$$$$$65 from "./sections/Social/InstagramPosts.tsx"; -import * as $$$$$$66 from "./sections/Social/WhatsApp.tsx"; -import * as $$$$$$67 from "./sections/Theme/Theme.tsx"; +import * as $$$$$$37 from "./sections/FeedBack/FeedBack.tsx"; +import * as $$$$$$38 from "./sections/Footer/Footer.tsx"; +import * as $$$$$$39 from "./sections/Gallery.tsx"; +import * as $$$$$$40 from "./sections/Header/Header.tsx"; +import * as $$$$$$41 from "./sections/Images/BannerGrid.tsx"; +import * as $$$$$$42 from "./sections/Images/Carousel.tsx"; +import * as $$$$$$43 from "./sections/Images/ImageGallery.tsx"; +import * as $$$$$$44 from "./sections/Images/ShoppableBanner.tsx"; +import * as $$$$$$45 from "./sections/Layout/Container.tsx"; +import * as $$$$$$46 from "./sections/Layout/Flex.tsx"; +import * as $$$$$$47 from "./sections/Layout/Grid.tsx"; +import * as $$$$$$48 from "./sections/Layout/GridItem.tsx"; +import * as $$$$$$49 from "./sections/Links/LinkTree.tsx"; +import * as $$$$$$50 from "./sections/Links/Shortcuts.tsx"; +import * as $$$$$$51 from "./sections/Miscellaneous/CampaignTimer.tsx"; +import * as $$$$$$52 from "./sections/Miscellaneous/CookieConsent.tsx"; +import * as $$$$$$53 from "./sections/Miscellaneous/Slide.tsx"; +import * as $$$$$$54 from "./sections/Newsletter/Newsletter.tsx"; +import * as $$$$$$55 from "./sections/Product/ImageGalleryFrontBack.tsx"; +import * as $$$$$$56 from "./sections/Product/ImageGallerySlider.tsx"; +import * as $$$$$$57 from "./sections/Product/NotFound.tsx"; +import * as $$$$$$58 from "./sections/Product/NotFoundChallenge.tsx"; +import * as $$$$$$59 from "./sections/Product/ProductInfo.tsx"; +import * as $$$$$$60 from "./sections/Product/ProductShelf.tsx"; +import * as $$$$$$61 from "./sections/Product/ProductShelfTabbed.tsx"; +import * as $$$$$$62 from "./sections/Product/SearchResult.tsx"; +import * as $$$$$$63 from "./sections/Product/ShelfWithImage.tsx"; +import * as $$$$$$64 from "./sections/Product/Wishlist.tsx"; +import * as $$$$$$65 from "./sections/Result_chievements/result_chievements.tsx"; +import * as $$$$$$66 from "./sections/Social/InstagramPosts.tsx"; +import * as $$$$$$67 from "./sections/Social/WhatsApp.tsx"; +import * as $$$$$$68 from "./sections/Theme/Theme.tsx"; const manifest = { "loaders": { @@ -91,7 +92,7 @@ const manifest = { "deco-sites/agencian1/sections/Cards/ImageCardsCarousel.tsx": $$$$$$4, "deco-sites/agencian1/sections/Cards/ImageCardsCarouselWithImage.tsx": $$$$$$5, - "deco-sites/agencian1/sections/cases/cases.tsx": $$$$$$68, + "deco-sites/agencian1/sections/cases/cases.tsx": $$$$$$69, "deco-sites/agencian1/sections/Category/CategoryBanner.tsx": $$$$$$6, "deco-sites/agencian1/sections/Category/CategoryGrid.tsx": $$$$$$7, "deco-sites/agencian1/sections/Category/CategoryList.tsx": $$$$$$8, @@ -125,38 +126,39 @@ const manifest = { "deco-sites/agencian1/sections/Content/TextWithImageCustom.tsx": $$$$$$35, "deco-sites/agencian1/sections/Content/TitleTextIconsAndImage.tsx": $$$$$$36, - "deco-sites/agencian1/sections/Footer/Footer.tsx": $$$$$$37, - "deco-sites/agencian1/sections/Gallery.tsx": $$$$$$38, - "deco-sites/agencian1/sections/Header/Header.tsx": $$$$$$39, - "deco-sites/agencian1/sections/Images/BannerGrid.tsx": $$$$$$40, - "deco-sites/agencian1/sections/Images/Carousel.tsx": $$$$$$41, - "deco-sites/agencian1/sections/Images/ImageGallery.tsx": $$$$$$42, - "deco-sites/agencian1/sections/Images/ShoppableBanner.tsx": $$$$$$43, - "deco-sites/agencian1/sections/Layout/Container.tsx": $$$$$$44, - "deco-sites/agencian1/sections/Layout/Flex.tsx": $$$$$$45, - "deco-sites/agencian1/sections/Layout/Grid.tsx": $$$$$$46, - "deco-sites/agencian1/sections/Layout/GridItem.tsx": $$$$$$47, - "deco-sites/agencian1/sections/Links/LinkTree.tsx": $$$$$$48, - "deco-sites/agencian1/sections/Links/Shortcuts.tsx": $$$$$$49, - "deco-sites/agencian1/sections/Miscellaneous/CampaignTimer.tsx": $$$$$$50, - "deco-sites/agencian1/sections/Miscellaneous/CookieConsent.tsx": $$$$$$51, - "deco-sites/agencian1/sections/Miscellaneous/Slide.tsx": $$$$$$52, - "deco-sites/agencian1/sections/Newsletter/Newsletter.tsx": $$$$$$53, - "deco-sites/agencian1/sections/Product/ImageGalleryFrontBack.tsx": $$$$$$54, - "deco-sites/agencian1/sections/Product/ImageGallerySlider.tsx": $$$$$$55, - "deco-sites/agencian1/sections/Product/NotFound.tsx": $$$$$$56, - "deco-sites/agencian1/sections/Product/NotFoundChallenge.tsx": $$$$$$57, - "deco-sites/agencian1/sections/Product/ProductInfo.tsx": $$$$$$58, - "deco-sites/agencian1/sections/Product/ProductShelf.tsx": $$$$$$59, - "deco-sites/agencian1/sections/Product/ProductShelfTabbed.tsx": $$$$$$60, - "deco-sites/agencian1/sections/Product/SearchResult.tsx": $$$$$$61, - "deco-sites/agencian1/sections/Product/ShelfWithImage.tsx": $$$$$$62, - "deco-sites/agencian1/sections/Product/Wishlist.tsx": $$$$$$63, + "deco-sites/agencian1/sections/FeedBack/FeedBack.tsx": $$$$$$37, + "deco-sites/agencian1/sections/Footer/Footer.tsx": $$$$$$38, + "deco-sites/agencian1/sections/Gallery.tsx": $$$$$$39, + "deco-sites/agencian1/sections/Header/Header.tsx": $$$$$$40, + "deco-sites/agencian1/sections/Images/BannerGrid.tsx": $$$$$$41, + "deco-sites/agencian1/sections/Images/Carousel.tsx": $$$$$$42, + "deco-sites/agencian1/sections/Images/ImageGallery.tsx": $$$$$$43, + "deco-sites/agencian1/sections/Images/ShoppableBanner.tsx": $$$$$$44, + "deco-sites/agencian1/sections/Layout/Container.tsx": $$$$$$45, + "deco-sites/agencian1/sections/Layout/Flex.tsx": $$$$$$46, + "deco-sites/agencian1/sections/Layout/Grid.tsx": $$$$$$47, + "deco-sites/agencian1/sections/Layout/GridItem.tsx": $$$$$$48, + "deco-sites/agencian1/sections/Links/LinkTree.tsx": $$$$$$49, + "deco-sites/agencian1/sections/Links/Shortcuts.tsx": $$$$$$50, + "deco-sites/agencian1/sections/Miscellaneous/CampaignTimer.tsx": $$$$$$51, + "deco-sites/agencian1/sections/Miscellaneous/CookieConsent.tsx": $$$$$$52, + "deco-sites/agencian1/sections/Miscellaneous/Slide.tsx": $$$$$$53, + "deco-sites/agencian1/sections/Newsletter/Newsletter.tsx": $$$$$$54, + "deco-sites/agencian1/sections/Product/ImageGalleryFrontBack.tsx": $$$$$$55, + "deco-sites/agencian1/sections/Product/ImageGallerySlider.tsx": $$$$$$56, + "deco-sites/agencian1/sections/Product/NotFound.tsx": $$$$$$57, + "deco-sites/agencian1/sections/Product/NotFoundChallenge.tsx": $$$$$$58, + "deco-sites/agencian1/sections/Product/ProductInfo.tsx": $$$$$$59, + "deco-sites/agencian1/sections/Product/ProductShelf.tsx": $$$$$$60, + "deco-sites/agencian1/sections/Product/ProductShelfTabbed.tsx": $$$$$$61, + "deco-sites/agencian1/sections/Product/SearchResult.tsx": $$$$$$62, + "deco-sites/agencian1/sections/Product/ShelfWithImage.tsx": $$$$$$63, + "deco-sites/agencian1/sections/Product/Wishlist.tsx": $$$$$$64, "deco-sites/agencian1/sections/Result_chievements/result_chievements.tsx": - $$$$$$64, - "deco-sites/agencian1/sections/Social/InstagramPosts.tsx": $$$$$$65, - "deco-sites/agencian1/sections/Social/WhatsApp.tsx": $$$$$$66, - "deco-sites/agencian1/sections/Theme/Theme.tsx": $$$$$$67, + $$$$$$65, + "deco-sites/agencian1/sections/Social/InstagramPosts.tsx": $$$$$$66, + "deco-sites/agencian1/sections/Social/WhatsApp.tsx": $$$$$$67, + "deco-sites/agencian1/sections/Theme/Theme.tsx": $$$$$$68, }, "apps": { "deco-sites/agencian1/apps/decohub.ts": $$$$$$$$$$$0, diff --git a/sections/Content/BrandImage.tsx b/sections/Content/BrandImage.tsx index b7a184c..dcfac39 100644 --- a/sections/Content/BrandImage.tsx +++ b/sections/Content/BrandImage.tsx @@ -1,71 +1,71 @@ import type { ImageWidget } from "apps/admin/widgets.ts"; /**@titleBy alt */ -interface Image{ - /**@title Imagem */ - src?: ImageWidget; - /**@title Largura da Imagem */ - width?: number; - /**@title Altura da Imagem */ - height?: number; - /**@title Nome da Imagem */ - alt?:string; +interface Image { + /**@title Imagem */ + src?: ImageWidget; + /**@title Largura da Imagem */ + width?: number; + /**@title Altura da Imagem */ + height?: number; + /**@title Nome da Imagem */ + alt?: string; } -interface Props{ - /**@title Título */ - /**@format html */ - title?:string; - /**@title Marca */ - /**@format maxItems 50 */ - /**@description (limite 50 itens) */ - brand?: Image[]; +interface Props { + /**@title Título */ + /**@format html */ + title?: string; + /**@title Marca */ + /**@format maxItems 50 */ + /**@description (limite 50 itens) */ + brand?: Image[]; } -function BrandImage( { title, brand }: Props ){ - return( - <> -
    -
    - {title && title !== '


    ' && ( -
    -
    - )} -
    - {brand && brand.map(( { src, width, height, alt } )=>{ - return( - <> - { src && width && height && ( - {`${alt - )} - - ) - })} - - - - - - -
    -
    +function BrandImage({ title, brand }: Props) { + return ( + <> +
    +
    + {title && title !== '


    ' && ( +
    - - ) + )} +
    + {brand && brand.map(({ src, width, height, alt }) => { + return ( + <> + {src && width && height && ( + {`${alt + )} + + ); + })} + + + + + + +
    +
    +
    + + ); } -export default BrandImage; \ No newline at end of file +export default BrandImage; diff --git a/sections/Content/ImagesAndBackground.tsx b/sections/Content/ImagesAndBackground.tsx index 7076bb8..7bb25a5 100644 --- a/sections/Content/ImagesAndBackground.tsx +++ b/sections/Content/ImagesAndBackground.tsx @@ -3,108 +3,121 @@ import type { ImageWidget } from "apps/admin/widgets.ts"; import ImagesAndBackgroundSide from "$store/components/ui/ImagesAndBackgroundSide.tsx"; import { clx } from "$store/sdk/clx.ts"; -interface ImageGeneric{ - /**@title Imagem */ - src?:ImageWidget; - /**@title Largura da Imagem */ - width?:number; - /**@title Altura da Imagem */ - height?:number; - +interface ImageGeneric { + /**@title Imagem */ + src?: ImageWidget; + /**@title Largura da Imagem */ + width?: number; + /**@title Altura da Imagem */ + height?: number; } /**@titleBy alt */ -interface DeviceImage{ - /**@title Nome da Imagem */ - alt?:string; - desktop?:ImageGeneric; - mobile?:ImageGeneric; +interface DeviceImage { + /**@title Nome da Imagem */ + alt?: string; + desktop?: ImageGeneric; + mobile?: ImageGeneric; } -interface Side{ - /**@title Título */ - /**@format html */ - title?:string; - /**@title Descrição */ - /**@format html */ - description?:string; - /**@title Imagem */ - device?:DeviceImage[]; +interface Side { + /**@title Título */ + /**@format html */ + title?: string; + /**@title Descrição */ + /**@format html */ + description?: string; + /**@title Imagem */ + device?: DeviceImage[]; } -interface Props{ - /**@title Imagem de fundo */ - bg?:DeviceImage; - /**@title Lado esquerdo */ - sideLeft?:Side; - /**@title Lado direito */ - sideRight?:Side; +interface Props { + /**@title Imagem de fundo */ + bg?: DeviceImage; + /**@title Lado esquerdo */ + sideLeft?: Side; + /**@title Lado direito */ + sideRight?: Side; } +function ImagesAndBackground({ bg, sideLeft, sideRight }: Props) { + return ( + <> +
    +
    + {bg && ( +
    + + {bg.mobile?.src && bg.mobile?.width && bg.mobile?.height && ( + + )} + {bg?.desktop?.src && bg.desktop?.width && bg.desktop?.height && + ( + + )} + + +
    + )} -function ImagesAndBackground( { bg, sideLeft, sideRight }:Props ){ - return( - <> -
    -
    - {bg && ( -
    - - {bg.mobile?.src && bg.mobile?.width && bg.mobile?.height && ( - - )} - {bg?.desktop?.src && bg.desktop?.width && bg.desktop?.height && ( - - )} - - -
    - )} - -

    ' ? 'flex-col' : "" } - absolute w-full h-full flex items-center justify-between`)}> -
    - -

    ' - ? 'w-full flex-row justify-around items-center mobile:flex-col mobile:gap-[20px]' - : 'flex-col gap-y-[20px]' - }`)}> - {sideLeft && ( - - )} - {sideRight?.title !== '


    ' && ( - - )} -
    -
    -
    - -
    -
    - - ) +

    ' + ? "flex-col" + : "" + } + absolute w-full h-full flex items-center justify-between`, + )} + > +
    +

    ' + ? "w-full flex-row justify-around items-center mobile:flex-col mobile:gap-[20px]" + : "flex-col gap-y-[20px]" + }`)} + > + {sideLeft && } + {sideRight?.title !== '


    ' && ( + + )} +
    +
    +
    +
    +
    + + ); } -export default ImagesAndBackground; \ No newline at end of file +export default ImagesAndBackground; diff --git a/sections/Content/TextWithImageCustom.tsx b/sections/Content/TextWithImageCustom.tsx index 216a62d..c4096a1 100644 --- a/sections/Content/TextWithImageCustom.tsx +++ b/sections/Content/TextWithImageCustom.tsx @@ -28,8 +28,12 @@ function TextWithImageCustom( )} > {textLarge && ( -
    +
    {textLarge}
    )} diff --git a/sections/Content/TitleTextIconsAndImage.tsx b/sections/Content/TitleTextIconsAndImage.tsx index 03e760c..fad1d3c 100644 --- a/sections/Content/TitleTextIconsAndImage.tsx +++ b/sections/Content/TitleTextIconsAndImage.tsx @@ -5,273 +5,321 @@ import { FnContext, SectionProps } from "deco/mod.ts"; import EllipseSnippet from "../../components/ui/EllipseSnippet.tsx"; /**@titleBy alt */ -interface ImageGeneric{ - /**@title Nome da Imagem */ - alt?:string; - /**@title Imagem */ - src?:ImageWidget; - /**@title Largura da Imagem */ - width?:number; - /**@title Altura da Imagem */ - height?:number; +interface ImageGeneric { + /**@title Nome da Imagem */ + alt?: string; + /**@title Imagem */ + src?: ImageWidget; + /**@title Largura da Imagem */ + width?: number; + /**@title Altura da Imagem */ + height?: number; } -interface ImageDevice{ - /**@title Desktop */ - desktop?:ImageGeneric; - /**@title Mobile */ - mobile?:ImageGeneric; +interface ImageDevice { + /**@title Desktop */ + desktop?: ImageGeneric; + /**@title Mobile */ + mobile?: ImageGeneric; } /**@titleBy textLink */ -interface Link{ - /**@title URL */ - /**@description (ex: https://agencian1.com.br/) */ - url?:string; - /**@title Texto do botão */ - textLink?:string; +interface Link { + /**@title URL */ + /**@description (ex: https://agencian1.com.br/) */ + url?: string; + /**@title Texto do botão */ + textLink?: string; } -interface EllipseProps{ - desktop?:boolean; - mobile?:boolean; +interface EllipseProps { + desktop?: boolean; + mobile?: boolean; } -interface Ellipse{ - /**@title Ellipse 01 */ - ellipse01?:EllipseProps; - /**@title Ellipse 02 */ - ellipse02?:EllipseProps; - /**@title Ellipse 03 */ - ellipse03?:EllipseProps; - /**@title Ellipse 04 */ - ellipse04?:EllipseProps; +interface Ellipse { + /**@title Ellipse 01 */ + ellipse01?: EllipseProps; + /**@title Ellipse 02 */ + ellipse02?: EllipseProps; + /**@title Ellipse 03 */ + ellipse03?: EllipseProps; + /**@title Ellipse 04 */ + ellipse04?: EllipseProps; } -interface Props{ - /**@title Espaço entre Bloco de texto e imagem (somente números) */ - /** @description (ex: 50 - somente números, o resultado é pixel) */ - spaceTextAndImage?:number; - /**@title Largura do Bloco de Texto (somente números) */ - /** @description (ex: 50 - somente números, o resultado é porcentagem) */ - widthBlock?:number; - /**@title Máximo de largura da descrição (somente números)*/ - /** @description (ex: 50 - somente números, o resultado é porcentagem) */ - maxWidthText?:number; - /**@title Título */ - /**@format html */ - title?:string - /**@title Descrição */ - /**@format html */ - description?:string; - /**@title Ícone */ - /**@maxItems 4 */ - iconWidthText?:ImageGeneric[]; - /**@title Fonte dos textos dos ícones */ - fontIconText?: "Noto Sans" | "Archimoto V01"; - /**@title Habilitar Negrito para fonte dos textos dos ícones? */ - activeBold?: boolean; - /**@title Habilitar grid para os ícones? */ - gridActive?:boolean; - /**@title Quantidade de colunas do grid */ - /**@description (opção somente se habilitar o grid) */ - gridColCustom?: 2 | 3 | 4; - /**@title Imagem */ - image?:ImageDevice; - /**@title Habilitar posição manual da imagem */ - activePositionManualImage?:boolean; - /**@title Posição Horizontal (somente números) */ - /**@description (obs: somente se habilitar posição manual, o resultado é pixel) */ - positionImageX?:number; - /**@title Posição Vertical (somente números) */ - /**@description (obs: somente se habilitar posição manual, o resultado é pixel) */ - positionImageY?:number; - /**@title Link */ - link?:Link; - /**@title Inverter Imagem */ - /**@description (Desktop) */ - flexRow: "Esquerdo" | "Direito"; - /**@title Inverter Imagem */ - /**@description (Mobile) */ - flexCol?: "Superior" | "Inferior"; - /**@title Desativar imagem de fundo? */ - ellipse?:Ellipse; +interface Props { + /**@title Espaço entre Bloco de texto e imagem (somente números) */ + /** @description (ex: 50 - somente números, o resultado é pixel) */ + spaceTextAndImage?: number; + /**@title Largura do Bloco de Texto (somente números) */ + /** @description (ex: 50 - somente números, o resultado é porcentagem) */ + widthBlock?: number; + /**@title Máximo de largura da descrição (somente números)*/ + /** @description (ex: 50 - somente números, o resultado é porcentagem) */ + maxWidthText?: number; + /**@title Título */ + /**@format html */ + title?: string; + /**@title Descrição */ + /**@format html */ + description?: string; + /**@title Ícone */ + /**@maxItems 4 */ + iconWidthText?: ImageGeneric[]; + /**@title Fonte dos textos dos ícones */ + fontIconText?: "Noto Sans" | "Archimoto V01"; + /**@title Habilitar Negrito para fonte dos textos dos ícones? */ + activeBold?: boolean; + /**@title Habilitar grid para os ícones? */ + gridActive?: boolean; + /**@title Quantidade de colunas do grid */ + /**@description (opção somente se habilitar o grid) */ + gridColCustom?: 2 | 3 | 4; + /**@title Imagem */ + image?: ImageDevice; + /**@title Habilitar posição manual da imagem */ + activePositionManualImage?: boolean; + /**@title Posição Horizontal (somente números) */ + /**@description (obs: somente se habilitar posição manual, o resultado é pixel) */ + positionImageX?: number; + /**@title Posição Vertical (somente números) */ + /**@description (obs: somente se habilitar posição manual, o resultado é pixel) */ + positionImageY?: number; + /**@title Link */ + link?: Link; + /**@title Inverter Imagem */ + /**@description (Desktop) */ + flexRow: "Esquerdo" | "Direito"; + /**@title Inverter Imagem */ + /**@description (Mobile) */ + flexCol?: "Superior" | "Inferior"; + /**@title Desativar imagem de fundo? */ + ellipse?: Ellipse; } const FONTICONTEXT = { - "Noto Sans": "font-noto-sans", - "Archimoto V01": "font-archimoto-medium" -} + "Noto Sans": "font-noto-sans", + "Archimoto V01": "font-archimoto-medium", +}; const GRIDCOLCUSTOM = { - 2 : 'xl:grid-cols-2-auto', - 3 : 'xl:grid-cols-3-auto', - 4 : 'xl:grid-cols-4-auto', -} + 2: "xl:grid-cols-2-auto", + 3: "xl:grid-cols-3-auto", + 4: "xl:grid-cols-4-auto", +}; const FLEXROW = { - "Esquerdo" : "xl:flex-row-reverse", - "Direito" : "xl:flex-row" -} + "Esquerdo": "xl:flex-row-reverse", + "Direito": "xl:flex-row", +}; const FLEXCOL = { - "Inferior" : "mobile:flex-col", - "Superior" : "mobile:flex-col-reverse" -} - -function TitleTextIconsAndImage( props: SectionProps> ){ - const { - title, - description, - iconWidthText, - fontIconText, - activeBold, - gridActive, - gridColCustom, - image, - activePositionManualImage, - positionImageX, - positionImageY, - link, - spaceTextAndImage, - widthBlock, - maxWidthText, - flexRow, - flexCol, - ellipse, - device - } = props; + "Inferior": "mobile:flex-col", + "Superior": "mobile:flex-col-reverse", +}; - return( - <> -
    - +function TitleTextIconsAndImage( + props: SectionProps>, +) { + const { + title, + description, + iconWidthText, + fontIconText, + activeBold, + gridActive, + gridColCustom, + image, + activePositionManualImage, + positionImageX, + positionImageY, + link, + spaceTextAndImage, + widthBlock, + maxWidthText, + flexRow, + flexCol, + ellipse, + device, + } = props; -
    -
    +
    + - style={{ - columnGap: device === 'desktop' && spaceTextAndImage ? spaceTextAndImage + 'px' : '30px' - }}> - -
    -
    -
    - { title && title !== '


    ' && ( -
    +
    +
    +
    +
    + {title && title !== '


    ' && ( +
    -
    - )} - { description && description !== '


    ' && ( -
    -
    - )} -
    - -
      - {iconWidthText && iconWidthText?.map(( { alt, src, width, height } )=>{ - return( - <> - { alt && src && width && height && ( -
    • +
    + )} + {description && + description !== '


    ' && ( +
    +
    + )} +
    + +
      + {iconWidthText && + iconWidthText?.map(({ alt, src, width, height }) => { + return ( + <> + {alt && src && width && height && ( +
    • - - {alt} - - {alt} - -
      • - )} - - ) - })} -
    - {link && ( -
    - - - { link?.textLink } - - -
    - )} -
    - -
    - {image && ( -
    - - - {image?.mobile?.src && ( - - )} - {image?.desktop?.src && ( - - )} - - -
    - )} -
    -
    + backdrop-filter backdrop-blur-[17px]`, + )} + > + {alt} + + {alt} + + + )} + + ); + })} + + {link && ( +
    + + + {link?.textLink} + + +
    + )} +
    - - ) + {image && ( +
    + + {image?.mobile?.src && ( + + )} + {image?.desktop?.src && ( + + )} + + +
    + )} +
    +
    +
    + + ); } export const loader = (props: Props, _req: Request, ctx: FnContext) => { - return { - ...props, - device: ctx.device, - }; + return { + ...props, + device: ctx.device, + }; }; -export default TitleTextIconsAndImage; \ No newline at end of file +export default TitleTextIconsAndImage; diff --git a/sections/FeedBack/FeedBack.tsx b/sections/FeedBack/FeedBack.tsx new file mode 100644 index 0000000..4806a77 --- /dev/null +++ b/sections/FeedBack/FeedBack.tsx @@ -0,0 +1 @@ +export { default } from "$store/components/feedBack/FeedBack.tsx"; diff --git a/static/sprites.svg b/static/sprites.svg index 5ac177b..72a0d8a 100644 --- a/static/sprites.svg +++ b/static/sprites.svg @@ -188,5 +188,16 @@ - + + + + + + + + + + + + From 3ec1a96f24bc25c57ea3463310d13b565dd30bec Mon Sep 17 00:00:00 2001 From: Lucas Leite <70826073+leitecsleite@users.noreply.github.com> Date: Tue, 2 Apr 2024 15:55:19 -0300 Subject: [PATCH 09/10] =?UTF-8?q?feat:task/cases=20-=20Inicio=20de=20cria?= =?UTF-8?q?=C3=A7=C3=A3o=20do=20banner=20com=20colunas?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/sliderColumn/BannerItems.tsx | 77 ++++++++++ components/sliderColumn/Buttons.tsx | 30 ++++ components/sliderColumn/Dots.tsx | 90 +++++++++++ components/sliderColumn/SliderColumn.tsx | 181 +++++++++++++++++++++++ components/ui/Slider.tsx | 2 + manifest.gen.ts | 18 ++- sections/SliderColumn/SliderColumn.tsx | 1 + 7 files changed, 391 insertions(+), 8 deletions(-) create mode 100644 components/sliderColumn/BannerItems.tsx create mode 100644 components/sliderColumn/Buttons.tsx create mode 100644 components/sliderColumn/Dots.tsx create mode 100644 components/sliderColumn/SliderColumn.tsx create mode 100644 sections/SliderColumn/SliderColumn.tsx diff --git a/components/sliderColumn/BannerItems.tsx b/components/sliderColumn/BannerItems.tsx new file mode 100644 index 0000000..34ca689 --- /dev/null +++ b/components/sliderColumn/BannerItems.tsx @@ -0,0 +1,77 @@ + +import type { ImageWidget } from "apps/admin/widgets.ts"; +import { Picture, Source } from "apps/website/components/Picture.tsx"; + + + +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 + */ + 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}, + ) { + const { + alt, + mobile, + desktop, + action, + } = image; + + return ( + <> +
    + + + + + {alt} + + + +
    + + ); + } \ No newline at end of file diff --git a/components/sliderColumn/Buttons.tsx b/components/sliderColumn/Buttons.tsx new file mode 100644 index 0000000..13b7b78 --- /dev/null +++ b/components/sliderColumn/Buttons.tsx @@ -0,0 +1,30 @@ + +import Icon from "$store/components/ui/Icon.tsx"; +import Slider from "$store/components/ui/Slider.tsx"; + + + +export default function Buttons() { + return ( + <> +
    + + +
    +
    + + +
    + + ); +} \ No newline at end of file diff --git a/components/sliderColumn/Dots.tsx b/components/sliderColumn/Dots.tsx new file mode 100644 index 0000000..c740989 --- /dev/null +++ b/components/sliderColumn/Dots.tsx @@ -0,0 +1,90 @@ + +import Slider from "$store/components/ui/Slider.tsx"; +import type { ImageWidget } from "apps/admin/widgets.ts"; + + +/** + * @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 + */ +interface Banner { + /** @title Imagem Desktop */ + desktop: ImageWidget; + /** @title Imagem Mobile */ + mobile: ImageWidget; + /** @title Texto da imagem */ + alt: string; + action?: ActionProps; +} + +interface Props { + images?: Banner[]; + /** + * @description (Marque esta opção quando este banner for a maior imagem na tela para otimizações de imagem) + */ + preload?: boolean; + /** + * @title Mostrar setas + * @description (mostre setas para navegar pelas imagens) + */ + arrows?: boolean; + /** + * @title Mostrar pontos + * @description (mostre pontos para navegar pelas imagens) + */ + dots?: boolean; + /** + * @title Autoplay intervalo + * @description [tempo (em segundos) para iniciar a reprodução automática do carrossel (ex: 1 - significa 1 segundo)] + */ + interval?: number; +} + + + + +export default function Dots({ images, interval = 0 }: Props) { + return ( + <> +