spb/uqo-chat

1import * as RD from '@radix-ui/react-dialog';2import { X } from 'lucide-react';3import type { ReactNode } from 'react';4import { cn } from '@/lib/cn';56export function Dialog({ open, onOpenChange, title, children, className, description }: {7  open: boolean;8  onOpenChange: (v: boolean) => void;9  title: string;10  description?: string;11  children: ReactNode;12  className?: string;13}) {14  return (15    <RD.Root open={open} onOpenChange={onOpenChange}>16      <RD.Portal>17        <RD.Overlay className="fixed inset-0 z-40 bg-uqo-blue-dark/40 backdrop-blur-[2px] animate-fadein" />18        <RD.Content19          className={cn(20            'fixed z-50 bg-white shadow-card focus:outline-none',21            'inset-x-0 bottom-0 rounded-t-2xl max-h-[92dvh] overflow-y-auto pb-[var(--safe-bottom)]',22            'sm:inset-auto sm:left-1/2 sm:top-1/2 sm:-translate-x-1/2 sm:-translate-y-1/2 sm:w-[min(92vw,560px)] sm:rounded-2xl sm:max-h-[85vh]',23            className,24          )}25        >26          <div className="sticky top-0 flex items-center justify-between gap-3 border-b border-neutral-line bg-white px-5 py-3 rounded-t-2xl">27            <div>28              <RD.Title className="text-lg font-semibold text-uqo-blue-dark">{title}</RD.Title>29              {description && <RD.Description className="text-sm text-neutral-muted">{description}</RD.Description>}30            </div>31            <RD.Close className="h-11 w-11 inline-flex items-center justify-center rounded-xl hover:bg-neutral-surface" aria-label="Fermer">32              <X size={20} />33            </RD.Close>34          </div>35          <div className="px-5 py-4">{children}</div>36        </RD.Content>37      </RD.Portal>38    </RD.Root>39  );40}41