Aceitando Outras Seções como Parâmetros em Sua Seção

No deco, você pode criar Seções poderosas e flexíveis ao aceitar outras seções como parâmetros. Isso permite que você construa componentes modulares e componíveis que podem ser facilmente personalizados e reutilizados em diferentes contextos.

Visão Geral

Ao criar uma Seção que aceita outras seções como parâmetros, você define uma interface para as props do seu componente de Seção. Essa interface inclui uma propriedade com o nome da sua escolha, que é do tipo Section. O tipo Section é um tipo genérico que representa qualquer outra seção no deco.

Implementação

Para criar uma Seção que aceita outras Seções como parâmetros, siga estas etapas:

1. Importe o tipo Section de deco/blocks/section.ts.

2. Defina uma interface para as props do seu componente de seção. Inclua uma propriedade com nome de sua escolha, que é do tipo Section.

// MySection.tsx

import { Section } from "deco/blocks/section.ts";

export interface Props {
  myProp: Section;
}

export default function MySection({ myProp: { Component, props } }: Props) {
  return (
    <div>
      <Component {...props} />
    </div>
  );
}

1. Dentro do seu componente de seção, acesse as propriedades Component e props da prop myProp. A propriedade Component representa a função do componente da seção passada como parâmetro, e a propriedade props contém as props dessa seção.

Exemplo

Digamos que você tenha uma seção chamada ProductCardSection que renderiza um cartão de produto com base em algumas props:

// ProductCardSection.tsx

export interface Props {
  title: string;
  price: number;
  imageUrl: string;
}

export default function ProductCardSection({ title, price, imageUrl }: Props) {
  return (
    <div>
      <img src={imageUrl} alt={title} />
      <h3>{title}</h3>
      <p>{price}</p>
    </div>
  );
}

Agora, você deseja criar uma seção de ordem superior chamada ProductContainerSection, que aceita uma ProductCardSection como parâmetro e a envolve em um contêiner:

// ProductContainerSection.tsx

import { Section } from "deco/blocks/section.ts";

export interface Props {
  myProp: Section;
}

export default function ProductContainerSection(
  { myProp: { Component, props } }: Props,
) {
  return (
    <div className="flex gap-4">
      <Component {...props} />
    </div>
  );
}

Com essa configuração, agora você pode usar ProductContainerSection para envolver qualquer outra seção, incluindo ProductCardSection, e adicionar um contêiner ao redor dela.

Agora, suponha que você queira restringir sua seção a ProductCard porque tem muitas seções em seu site, mas apenas essa deve se encaixar nesse local, você pode fazer o seguinte:

// ProductCardSection.tsx

import { JSX } from "preact";

// Defina um tipo nomeado, por exemplo, "ProductCard," apontando para `JSX.Element`
export type ProductCard = JSX.Element;

// Defina a interface de props
export interface Props {
  title: string;
  price: number;
  imageUrl: string;
}

// Implemente a seção e especifique o tipo de retorno como "ProductCard"
export default function ProductCardSection(
  { title, price, imageUrl }: Props,
): ProductCard {
  return (
    <div>
      <img src={imageUrl} alt={title} />
      <h3>{title}</h3>
      <p>{price}</p>
    </div>
  );
}

Agora, você pode depender diretamente de ProductCard:

// ProductContainerSection.tsx

import { Section } from "deco/blocks/section.ts";
import { ProductCard } from "./ProductCardSection.tsx";

// Especifique a interface de propriedades com `Section<ProductCard>`
export interface Props {
  myProp: Section<ProductCard>;
}

// Implemente a seção
export default function ProductContainerSection(
  { myProp: { Component, props } }: Props,
) {
  return (
    <div className="flex gap-4">
      <Component {...props} />
    </div>
  );
}

Isso garante consistência e reforça o conceito de um tipo nomeado, tornando mais fácil para os desenvolvedores e usuários de negócios restringirem suas seções conforme desejado!

Nota

Com a capacidade de aceitar outras seções como parâmetros, você pode criar seções altamente modulares e personalizáveis que se adaptam a diferentes casos de uso e tornam suas aplicações deco ainda mais poderosas e flexíveis. Boa codificação! 🧩🚀