diff --git a/islands/LiveProjects.tsx b/islands/LiveProjects.tsx index 3d0b52ef..15017975 100644 --- a/islands/LiveProjects.tsx +++ b/islands/LiveProjects.tsx @@ -1 +1 @@ -export { default } from "deco-sites/starting/sections/Live Projects/ProjectsGrid.tsx"; +export { default } from "deco-sites/starting/sections/Live Projects/ProjectsGrid.tsx"; \ No newline at end of file diff --git a/sections/Live Projects/Hero.tsx b/sections/Live Projects/Hero.tsx index 7819662f..efd6085a 100644 --- a/sections/Live Projects/Hero.tsx +++ b/sections/Live Projects/Hero.tsx @@ -3,39 +3,40 @@ import type { Image as DecoImage } from "deco-sites/std/components/types.ts"; /** @title {{{title}}} - {{{href}}} */ export interface Props { - Banner?: { + Banner?:{ bannerHero?: DecoImage; bannerHeroMobile?: DecoImage; titleImg?: string; - }; + } headline?: string; headlineSubtitle?: string; - ctaButtons?: { + ctaButtons?:{ titleGreenButton?: string; hrefGreenButton?: string; titleWhiteButton?: string; hrefWhiteButton?: string; - }; + } } export default function Hero({ Banner = { - bannerHero: "", - bannerHeroMobile: "", - titleImg: "Escolha uma Imagem", + bannerHero: "", + bannerHeroMobile: "", + titleImg:"Escolha uma Imagem", }, headline = "Live Projects", headlineSubtitle = "Com mais de 100 implementações bem-sucedidas só no Brasil, a deco.cx é a plataforma de Frontend que você precisa para levar seu site ao próximo nível. Seja B2B ou B2C, nossa solução é comprovada no mercado para oferecer uma experiência de compra excepcional!", ctaButtons = { - titleGreenButton: "Agende uma demo", + titleGreenButton: "Agende uma demo", hrefGreenButton: "", - titleWhiteButton: "Customer Stories", + titleWhiteButton: "Customer Stories", hrefWhiteButton: "", - }, + } + }: Props) { return ( -
+
@@ -82,4 +83,4 @@ export default function Hero({
); -} +} \ No newline at end of file diff --git a/sections/Live Projects/ProjectsGrid.tsx b/sections/Live Projects/ProjectsGrid.tsx index af64bd86..9e46bdc9 100644 --- a/sections/Live Projects/ProjectsGrid.tsx +++ b/sections/Live Projects/ProjectsGrid.tsx @@ -15,12 +15,12 @@ export interface Screenshot { export interface Template { label: string; - category?: string; description?: string; link?: string; image?: Screenshot[]; } + export interface TemplateInfo { label?: string; category?: string; @@ -34,10 +34,16 @@ export interface Classification { itensPorPagina: number; } -export interface Props { - /* @default */ - indexCategories?: string[]; - cards?: Template[]; + +interface Category { + label: string; + hideCategory?: boolean; + cards: Template[]; +} + +interface Props { + itensPerPage?: number; + indexCategories?: Category[]; layoutCategoryCard?: { textPosition?: "top" | "bottom"; textAlignment?: "center" | "left"; @@ -45,7 +51,7 @@ export interface Props { } function CardText( - { label, category, description, alignment }: TemplateInfo, + { label, category, description, alignment }: TemplateInfo, ) { return (
- - + +
{description && ( -
+
{description} -
+
)}
+ ); } function TemplatesGrid(props: Props) { const id = `category-cards-${useId()}`; const { + itensPerPage = 6, indexCategories = [ - "Todos", - "Fashion", - "PET", - "Farma", - "B2B", - "Saúde", - "Outros", - ], - cards = [ { - label: "Feminino", - category: "MODA", - description: "Moda feminina direto de Milão", - link: "feminino", - image: { - img: - "https://ik.imagekit.io/decocx/tr:w-680,h-680/https:/ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/239/fdcb3c8f-d629-485e-bf70-8060bd8a9f65", - color: "", - }, + label: "MODA", + hideCategory: false, + cards: [ + { + label: "Feminino", + category: "MODA", + description: "Moda feminina direto de Milão", + link: "feminino", + image: { + img: "https://ik.imagekit.io/decocx/tr:w-680,h-680/https:/ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/239/fdcb3c8f-d629-485e-bf70-8060bd8a9f65", + color: "", + }, + }, + { + label: "Invisível", + category: "Todos", // Marque como "Todos" + description: "Este card é invisível", + link: "invisivel", + image: { + img: "https://exemplo.com/invisivel.jpg", + color: "", + }, + }, + ], }, ], layoutCategoryCard = { @@ -122,34 +125,21 @@ function TemplatesGrid(props: Props) { textAlignment: "center", }, } = props; - const [themes, setThemes] = useState(cards.map(() => 0)); + + const [themes, setThemes] = useState(indexCategories.flatMap(category => category.cards.map(() => 0))); const [classification, setClassification] = useState({ - categoriaSelecionada: "Todos", + categoriaSelecionada: 'Todos', paginaAtual: 1, - itensPorPagina: 6, + itensPorPagina: itensPerPage, }); - const [mostrarCardsOutrasCategorias, setMostrarCardsOutrasCategorias] = - useState(false); - const handleChangeCategoria = (novaCategoria: string) => { - if (novaCategoria === "Outros") { - console.log("Clicou em Outros"); - setClassification({ - categoriaSelecionada: novaCategoria, - paginaAtual: 1, - itensPorPagina: classification.itensPorPagina, - }); - setMostrarCardsOutrasCategorias(true); - } else { - setClassification({ - categoriaSelecionada: novaCategoria, - paginaAtual: 1, - itensPorPagina: classification.itensPorPagina, - }); - setMostrarCardsOutrasCategorias(false); - } + setClassification({ + categoriaSelecionada: novaCategoria, + paginaAtual: 1, + itensPorPagina: classification.itensPorPagina, + }); }; const handleChangePagina = (novaPagina: number) => { @@ -162,57 +152,65 @@ function TemplatesGrid(props: Props) { const { categoriaSelecionada, paginaAtual, itensPorPagina } = classification; - const itensFiltrados = mostrarCardsOutrasCategorias - ? cards.filter((item) => - item.category && !indexCategories.includes(item.category) - ) - : (categoriaSelecionada === "Todos" - ? cards - : cards.filter((item) => item.category === categoriaSelecionada)); + const findCategoryByLabel = (label: string, categories: { label: string }[]) => { + return categories.find(category => category.label === label); +}; + +const itensParaExibir = categoriaSelecionada === 'Todos' +? indexCategories.flatMap(category => category.cards.map(card => ({ + ...card, + category: category.label, // Adiciona o campo category ao card + }))) +: categoriaSelecionada + ? indexCategories.find(category => category.label === categoriaSelecionada)?.cards.map(card => ({ + ...card, + category: categoriaSelecionada, // Adiciona o campo category ao card + })) || [] + : []; - const totalPaginas = Math.ceil(itensFiltrados.length / itensPorPagina); + const totalPaginas = Math.ceil(itensParaExibir.length / itensPorPagina); const primeiroItem = (paginaAtual - 1) * itensPorPagina; - const ultimoItem = Math.min( - primeiroItem + itensPorPagina, - itensFiltrados.length, - ); - const itensPaginaAtual = itensFiltrados.slice(primeiroItem, ultimoItem); + const ultimoItem = Math.min(primeiroItem + itensPorPagina, itensParaExibir.length); + const itensPaginaAtual = itensParaExibir.slice(primeiroItem, ultimoItem); return (
-
- { + const selectedValue = (e.target as HTMLSelectElement).value; + handleChangeCategoria(selectedValue); + }} + > + + {indexCategories.map((category, index) => ( + ))}
- {indexCategories.map((category) => ( -
handleChangeCategoria(category)} - > - {category} -
+
handleChangeCategoria('Todos')} + > + Todos +
+ {indexCategories.map((category, index) => ( +
handleChangeCategoria(category.label)} + > + {category.label} +
))}
@@ -220,49 +218,50 @@ function TemplatesGrid(props: Props) { id={id} className="sm:container md:mx-0 flex flex-col text-base-content lg:grid-cols-4 relative" > +
- {itensPaginaAtual.map(( - { - label, - category, - description, - link, - image, - }, - index, - ) => ( - - {image && - ( -
- {category -
- )} - {layoutCategoryCard?.textPosition === "bottom" && - ( - - )} - - ))} + {itensPaginaAtual.map(({ label, description, link, image, category }, index) => { + let categoryInfo; + if (category) { + categoryInfo = indexCategories.find(cat => cat.label === category); + } else { + categoryInfo = indexCategories.find(cat => cat.label === categoriaSelecionada); + } + + const shouldHideCategory = categoryInfo?.hideCategory || false; + + console.log(shouldHideCategory) + + return ( + + {image && ( +
+ {label} +
+ )} + {layoutCategoryCard?.textPosition === "bottom" && ( + + )} + + ); + })}