Desenvolvedores
src_
components_
ui_
Resizable.jsx

Explicação detalhada 💡

Neste arquivo, estamos criando componentes para suportar painéis redimensionáveis em um layout usando a biblioteca react-resizable-panels. A ideia é permitir que o usuário possa ajustar o tamanho dos painéis interativamente. Vamos analisar o código em detalhes.

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

import { GripVertical } from "lucide-react"
import * as ResizablePrimitive from "react-resizable-panels"
import { cn } from "@/lib/utils"
  • GripVertical: Importa o ícone de redimensionamento vertical da biblioteca lucide-react, que será exibido no controle de redimensionamento.
  • ResizablePrimitive: A biblioteca react-resizable-panels fornece os componentes necessários para criar painéis redimensionáveis.
  • cn: Função utilitária para combinar classes CSS de forma condicional, permitindo que as classes sejam adicionadas ou modificadas dinamicamente.

Componente ResizablePanelGroup 📏

const ResizablePanelGroup = ({
  className,
  ...props
}) => (
  <ResizablePrimitive.PanelGroup
    className={cn(
      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
      className
    )}
    {...props} />
)
  • ResizablePanelGroup: Este componente cria um contêiner para os painéis redimensionáveis. Ele usa o componente PanelGroup da biblioteca react-resizable-panels.
    • className: Permite que o estilo seja personalizado.
    • flex h-full w-full: Define o layout como flexível, ocupando toda a altura e largura do contêiner pai.
    • data-[panel-group-direction=vertical]:flex-col: Quando o grupo de painéis é vertical, ele se organiza em coluna.
    • ...props: Espalha outras propriedades para o PanelGroup, permitindo personalizações adicionais.

Componente ResizablePanel 🖼️

const ResizablePanel = ResizablePrimitive.Panel
  • ResizablePanel: Apenas mapeia o componente Panel da biblioteca react-resizable-panels para um nome mais simples de usar. Esse painel pode ser redimensionado dentro do ResizablePanelGroup.

Componente ResizableHandle 🖱️

const ResizableHandle = ({
  withHandle,
  className,
  ...props
}) => (
  <ResizablePrimitive.PanelResizeHandle
    className={cn(
      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
      className
    )}
    {...props}>
    {withHandle && (
      <div
        className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
        <GripVertical className="h-2.5 w-2.5" />
      </div>
    )}
  </ResizablePrimitive.PanelResizeHandle>
)
  • ResizableHandle: Este componente representa o controle de redimensionamento dos painéis. Ele usa o PanelResizeHandle da biblioteca react-resizable-panels para permitir que os usuários redimensionem os painéis interativamente.
    • withHandle: Se essa propriedade for verdadeira, o ícone de redimensionamento (um pequeno controle com o ícone GripVertical) será exibido.
    • className: Permite a personalização adicional das classes CSS para o controle de redimensionamento.
    • after:absolute: Garante que a linha do controle de redimensionamento se posicione corretamente sobre os painéis.
    • data-[panel-group-direction=vertical]: Aplica estilos específicos quando os painéis estão organizados verticalmente, ajustando o controle de redimensionamento para ser mostrado de forma apropriada.

Exemplo de uso 💻

<ResizablePanelGroup>
  <ResizablePanel>
    <div>Conteúdo do Painel 1</div>
  </ResizablePanel>
  <ResizablePanel>
    <div>Conteúdo do Painel 2</div>
  </ResizablePanel>
  <ResizableHandle withHandle={true} />
</ResizablePanelGroup>

Código Completo 📄

"use client"
 
import { GripVertical } from "lucide-react"
import * as ResizablePrimitive from "react-resizable-panels"
import { cn } from "@/lib/utils"
 
const ResizablePanelGroup = ({
  className,
  ...props
}) => (
  <ResizablePrimitive.PanelGroup
    className={cn(
      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
      className
    )}
    {...props} />
)
 
const ResizablePanel = ResizablePrimitive.Panel
 
const ResizableHandle = ({
  withHandle,
  className,
  ...props
}) => (
  <ResizablePrimitive.PanelResizeHandle
    className={cn(
      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
      className
    )}
    {...props}>
    {withHandle && (
      <div
        className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
        <GripVertical className="h-2.5 w-2.5" />
      </div>
    )}
  </ResizablePrimitive.PanelResizeHandle>
)
 
export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
RadioGroup.jsxScrollArea.jsx