Responsive dialog

"use client"

import * as React from "react"
import { Button } from "@/components/candor/ui/button"
import { Input } from "@/components/candor/ui/input"
import { Label } from "@/components/candor/ui/label"
import {
  ResponsiveDialog,
  ResponsiveDialogBody,
  ResponsiveDialogClose,
  ResponsiveDialogContent,
  ResponsiveDialogDescription,
  ResponsiveDialogFooter,
  ResponsiveDialogHeader,
  ResponsiveDialogTitle,
  ResponsiveDialogTrigger,
} from "@/components/candor/ui/responsive-dialog"

export default function Example() {
  const [name, setName] = React.useState("Refunds team")
  const [saved, setSaved] = React.useState("Refunds team")
  return (
    // A centred dialog from 640px wide, a drawer from the bottom below it. Narrow the window, or open it on a phone.
    <ResponsiveDialog onOpenChange={(open) => open && setName(saved)}>
      <ResponsiveDialogTrigger render={<Button variant="outline">Rename workspace</Button>} />
      <ResponsiveDialogContent>
        <ResponsiveDialogHeader>
          <ResponsiveDialogTitle>Rename workspace</ResponsiveDialogTitle>
          <ResponsiveDialogDescription>Everyone in {saved} sees the new name. Links to it keep working.</ResponsiveDialogDescription>
        </ResponsiveDialogHeader>
        <ResponsiveDialogBody>
          <div className="flex flex-col gap-2 py-1">
            <Label htmlFor="workspace-name">Name</Label>
            <Input id="workspace-name" value={name} onChange={(e) => setName(e.target.value)} />
          </div>
        </ResponsiveDialogBody>
        <ResponsiveDialogFooter>
          <ResponsiveDialogClose render={<Button variant="outline">Cancel</Button>} />
          <ResponsiveDialogClose render={<Button onClick={() => setSaved(name.trim() || saved)}>Rename</Button>} />
        </ResponsiveDialogFooter>
      </ResponsiveDialogContent>
    </ResponsiveDialog>
  )
}