Desenvolvedores
src_
components_
ui_
Separator.jsx

Explicação detalhada 💡

Este código cria um componente separador (separator) em React, usando a biblioteca @radix-ui/react-separator. O separador pode ser configurado para ser horizontal ou vertical, e sua aparência é facilmente personalizável.

Código: Importação de dependências 🧩

import * as React from "react"
import * as SeparatorPrimitive from "@radix-ui/react-separator"
import { cn } from "@/lib/utils"
  • React: A importação do React é necessária para criar os componentes.
  • SeparatorPrimitive: A biblioteca @radix-ui/react-separator oferece componentes para criar separadores, que são usados para dividir visualmente seções de conteúdo.
  • cn: Função utilitária para combinar classes CSS dinamicamente, facilitando a personalização das classes com base nas condições.

Componente Separator 📜

const Separator = React.forwardRef((
  { className, orientation = "horizontal", decorative = true, ...props },
  ref
) => (
  <SeparatorPrimitive.Root
    ref={ref}
    decorative={decorative}
    orientation={orientation}
    className={cn(
      "shrink-0 bg-border",
      orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
      className
    )}
    {...props} />
))
Separator.displayName = SeparatorPrimitive.Root.displayName
  • Separator: Este componente cria o separador e pode ser personalizado com diferentes orientações e estilos. Ele utiliza o componente Root da biblioteca Radix para implementar a funcionalidade.
    • orientation: Controla a orientação do separador, podendo ser horizontal (default) ou vertical.
    • decorative: Define se o separador é puramente decorativo (não acessível) ou se é semântico. Isso afeta a acessibilidade, onde true faz o separador ser decorativo.
    • className: Permite customizar o estilo do separador.
    • bg-border: Aplica uma cor de fundo para o separador, utilizando a classe bg-border que provavelmente está definida em algum arquivo de estilo global.

Estilos Condicionais 🎨

orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]"
  • Dependendo da orientação (horizontal ou vertical), o separador recebe estilos diferentes:
    • Para horizontal: a altura é 1px e a largura é 100% (w-full).
    • Para vertical: a altura é 100% (h-full) e a largura é 1px.

Exemplo de uso 💻

<Separator orientation="horizontal" />
<Separator orientation="vertical" />

Código Completo 📄

"use client"
 
import * as React from "react"
import * as SeparatorPrimitive from "@radix-ui/react-separator"
import { cn } from "@/lib/utils"
 
const Separator = React.forwardRef((
  { className, orientation = "horizontal", decorative = true, ...props },
  ref
) => (
  <SeparatorPrimitive.Root
    ref={ref}
    decorative={decorative}
    orientation={orientation}
    className={cn(
      "shrink-0 bg-border",
      orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
      className
    )}
    {...props} />
))
Separator.displayName = SeparatorPrimitive.Root.displayName
 
export { Separator }
Select.jsxsheet.jsx