Dialog

import { Canvas } from "@react-three/fiber";
import { Fullscreen } from "@react-three/uikit";
import { colors } from "@react-three/uikit-default";
import { Text, Container } from '@react-three/uikit'
import {
Button,
Label,
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
VanillaDialog,
} from '@react-three/uikit-default'
import { useMemo } from 'react'
import { signal } from '@preact/signals-core'

function DialogDemo() {
const ref = useMemo(() => signal<VanillaDialog | undefined>(undefined), [])
return (
  <>
    <DialogTrigger dialog={ref}>
      <Button variant="outline">
        <Text>Edit Profile</Text>
      </Button>
    </DialogTrigger>
    <Dialog ref={(dialog) => void (ref.value = dialog ?? undefined)}>
      <DialogContent sm={{ maxWidth: 425 }}>
        <DialogHeader>
          <DialogTitle>
            <Text>Edit profile</Text>
          </DialogTitle>
          <DialogDescription>
            <Text>Make changes to your profile here. Click save when you're done.</Text>
          </DialogDescription>
        </DialogHeader>
        <Container flexDirection="column" alignItems="center" gap={16} paddingY={16}>
          <Container alignItems="center" gap={16}>
            <Label>
              <Text textAlign="right">Name</Text>
            </Label>
            {/*<Input defaultValue="Pedro Duarte" className="col-span-3" />*/}
          </Container>
          <Container alignItems="center" gap={16}>
            <Label>
              <Text textAlign="right">Username</Text>
            </Label>
            {/*<Input id="username" defaultValue="@peduarte" className="col-span-3" />*/}
          </Container>
        </Container>
        <DialogFooter>
          <Button>
            <Text>Save changes</Text>
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  </>
)
}

export default function App() {
return (
  <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }}>
    <ambientLight intensity={0.5} />
    <directionalLight intensity={1} position={[-5, 5, 10]} />
    <Fullscreen
      overflow="scroll"
      flexDirection="column"
      alignItems="center"
      padding={32}
      backgroundColor={colors.background}
    >
      <DialogDemo />
    </Fullscreen>
  </Canvas>
)
}