import { X } from '~/components/Icons';
import * as React from 'react';
import { Platform, StyleSheet, View } from 'react-native';
import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
import * as DialogPrimitive from '~/components/primitives/dialog';
import { cn } from '~/lib/utils';
const Dialog = DialogPrimitive.Root;
const DialogTrigger = DialogPrimitive.Trigger;
const DialogPortal = DialogPrimitive.Portal;
const DialogClose = DialogPrimitive.Close;
const DialogOverlayWeb = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Overlay>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
>(({ className, ...props }, ref) => {
const { open } = DialogPrimitive.useRootContext();
style={StyleSheet.absoluteFill}
'z-50 bg-black/80 flex justify-center items-center p-2',
open ? 'web:animate-in web:fade-in-0' : 'web:animate-out web:fade-out-0',
DialogOverlayWeb.displayName = 'DialogOverlayWeb';
const DialogOverlayNative = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Overlay>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
>(({ className, children, ...props }, ref) => {
style={StyleSheet.absoluteFill}
className={cn('z-50 flex bg-black/80 justify-center items-center p-2', className)}
<Animated.View entering={FadeIn.duration(150)} exiting={FadeOut.duration(150)}>
</DialogPrimitive.Overlay>
DialogOverlayNative.displayName = 'DialogOverlayNative';
const DialogOverlay = Platform.select({
default: DialogOverlayNative,
const DialogContent = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & { portalHost?: string }
>(({ className, children, portalHost, ...props }, ref) => {
const { open } = DialogPrimitive.useRootContext();
<DialogPortal hostName={portalHost}>
'z-50 max-w-lg gap-4 border border-border web:cursor-default bg-background p-6 shadow-lg web:duration-200 rounded-lg',
? 'web:animate-in web:fade-in-0 web:zoom-in-95'
: 'web:animate-out web:fade-out-0 web:zoom-out-95',
'absolute right-4 top-4 p-0.5 web:group rounded-sm opacity-70 web:ring-offset-background web:transition-opacity web:hover:opacity-100 web:focus:outline-none web:focus:ring-2 web:focus:ring-ring web:focus:ring-offset-2 web:disabled:pointer-events-none'
size={Platform.OS === 'web' ? 16 : 18}
className={cn('text-muted-foreground', open && 'text-accent-foreground')}
</DialogPrimitive.Content>
DialogContent.displayName = DialogPrimitive.Content.displayName;
const DialogHeader = ({ className, ...props }: React.ComponentPropsWithoutRef<typeof View>) => (
<View className={cn('flex flex-col gap-1.5 text-center sm:text-left', className)} {...props} />
DialogHeader.displayName = 'DialogHeader';
const DialogFooter = ({ className, ...props }: React.ComponentPropsWithoutRef<typeof View>) => (
className={cn('flex flex-col-reverse sm:flex-row sm:justify-end gap-2', className)}
DialogFooter.displayName = 'DialogFooter';
const DialogTitle = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Title>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
>(({ className, ...props }, ref) => (
'text-lg native:text-xl text-foreground font-semibold leading-none tracking-tight',
DialogTitle.displayName = DialogPrimitive.Title.displayName;
const DialogDescription = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Description>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
>(({ className, ...props }, ref) => (
<DialogPrimitive.Description
className={cn('text-sm native:text-base text-muted-foreground', className)}
DialogDescription.displayName = DialogPrimitive.Description.displayName;