Desenvolvedores
src_
components_
ui_
dialog.js

Explicação

Este arquivo fornece uma implementação de um componente de Diálogo (modal) usando o Radix UI. Ele inclui vários subcomponentes para controlar o comportamento do diálogo, como o DialogTrigger, DialogContent, DialogOverlay e outros.

Código

Aqui está a explicação de cada parte do código:

  1. Imports e Configuração Inicial 📦

    Importamos o necessário para trabalhar com o Radix UI e com animações. Também trazemos o ícone de fechar da biblioteca lucide-react.

"use client"
 
import * as React from "react"
import * as DialogPrimitive from "@radix-ui/react-dialog"
import { X } from "lucide-react"
 
import { cn } from "@/lib/utils"

  1. Componente Dialog 🗣️

    O Dialog é um wrapper principal fornecido pelo Radix UI, que lida com o controle do estado do modal, como abrir e fechar.

const Dialog = DialogPrimitive.Root

  1. Componente DialogTrigger 🔑

    O DialogTrigger é o elemento que, quando clicado, vai abrir o diálogo. Ele é passado como um filho para o componente principal Dialog.

const DialogTrigger = DialogPrimitive.Trigger

  1. Componente DialogPortal 🌐

    O DialogPortal é usado para renderizar o conteúdo do diálogo fora do fluxo normal do DOM, garantindo que o modal não afete outros elementos da página.

const DialogPortal = DialogPrimitive.Portal

  1. Componente DialogClose ❌

    O DialogClose é utilizado para fechar o modal, geralmente vinculado a um botão de "fechar".

const DialogClose = DialogPrimitive.Close

  1. Componente DialogOverlay 🌓

    Este componente gerencia a sobreposição (overlay) do fundo quando o modal está ativo. Ele escurece a área ao redor do conteúdo, indicando que o foco está no modal.

const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (
  <DialogPrimitive.Overlay
    ref={ref}
    className={cn(
      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
      className
    )}
    {...props} />
))
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
  • Explicação: O DialogOverlay é estilizado com uma cor de fundo escura e animações associadas ao estado aberto/fechado. Utilizamos a classe cn para adicionar classes dinâmicas e modificar seu comportamento.

  1. Componente DialogContent 📝

    Este é o conteúdo principal do modal. Ele aparece quando o Dialog é aberto e contém o que será exibido dentro do modal.

const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (
  <DialogPortal>
    <DialogOverlay />
    <DialogPrimitive.Content
      ref={ref}
      className={cn(
        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200",
        className
      )}
      {...props}>
      {children}
      <DialogPrimitive.Close
        className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
        <X className="h-4 w-4" />
        <span className="sr-only">Close</span>
      </DialogPrimitive.Close>
    </DialogPrimitive.Content>
  </DialogPortal>
))
DialogContent.displayName = DialogPrimitive.Content.displayName
  • Explicação: Dentro do DialogContent, colocamos a sobreposição (DialogOverlay) e o conteúdo do modal, que inclui um botão de fechamento representado pelo ícone X.

  1. Componente DialogHeader 🏷️

    O DialogHeader define a parte do cabeçalho do modal, normalmente onde coloca-se o título ou outros elementos informativos.

const DialogHeader = ({ className, ...props }) => (
  <div
    className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)}
    {...props} />
)
DialogHeader.displayName = "DialogHeader"

  1. Componente DialogFooter 🦶

    O DialogFooter é a parte inferior do modal, onde geralmente ficam os botões de ação, como Salvar ou Cancelar.

const DialogFooter = ({ className, ...props }) => (
  <div
    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
    {...props} />
)
DialogFooter.displayName = "DialogFooter"
  1. Componente DialogTitle 🏷️

O DialogTitle é o título exibido dentro do conteúdo do modal.

const DialogTitle = React.forwardRef(({ className, ...props }, ref) => (
  <DialogPrimitive.Title
    ref={ref}
    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
    {...props} />
))
DialogTitle.displayName = DialogPrimitive.Title.displayName
  1. Componente DialogDescription 📝

O DialogDescription descreve o conteúdo do modal e normalmente é usado para fornecer mais informações ou instruções.

const DialogDescription = React.forwardRef(({ className, ...props }, ref) => (
  <DialogPrimitive.Description
    ref={ref}
    className={cn("text-sm text-muted-foreground", className)}
    {...props} />
))
DialogDescription.displayName = DialogPrimitive.Description.displayName

Código Completo

"use client"
 
import * as React from "react"
import * as DialogPrimitive from "@radix-ui/react-dialog"
import { X } from "lucide-react"
 
import { cn } from "@/lib/utils"
 
const Dialog = DialogPrimitive.Root
 
const DialogTrigger = DialogPrimitive.Trigger
 
const DialogPortal = DialogPrimitive.Portal
 
const DialogClose = DialogPrimitive.Close
 
const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (
  <DialogPrimitive.Overlay
    ref={ref}
    className={cn(
      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
      className
    )}
    {...props} />
))
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 
const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (
  <DialogPortal>
    <DialogOverlay />
    <DialogPrimitive.Content
      ref={ref}
      className={cn(
        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200",
        className
      )}
      {...props}>
      {children}
      <DialogPrimitive.Close
        className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
        <X className="h-4 w-4" />
        <span className="sr-only">Close</span>
      </DialogPrimitive.Close>
    </DialogPrimitive.Content>
  </DialogPortal>
))
DialogContent.displayName = DialogPrimitive.Content.displayName
 
const DialogHeader = ({ className, ...props }) => (
  <div
    className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)}
    {...props} />
)
DialogHeader.displayName = "DialogHeader"
 
const DialogFooter = ({ className, ...props }) => (
  <div
    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
    {...props} />
)
DialogFooter.displayName = "DialogFooter"
 
const DialogTitle = React.forwardRef(({ className, ...props }, ref) => (
  <DialogPrimitive.Title
    ref={ref}
    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
    {...props} />
))
DialogTitle.displayName = DialogPrimitive.Title.displayName
 
const DialogDescription = React.forwardRef(({ className, ...props }, ref) => (
  <DialogPrimitive.Description
    ref={ref}
    className={cn("text-sm text-muted-foreground", className)}
    {...props} />
))
DialogDescription.displayName = DialogPrimitive.Description.displayName
 
export {
  Dialog,
  DialogPortal,
  DialogOverlay,
  DialogClose,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogDescription,
}

Esta implementação do Dialog com Radix UI é robusta e flexível, oferecendo animações e estilos dinâmicos. Ela pode ser usada para exibir modais em sua aplicação React com animações e controle total sobre o estado.

Collapsible.jsxDrawer.jsx