Dialog

"use client";

import { Button } from "@/siteplane/components/button";
import {
  Dialog,
  DialogClose,
  DialogPopup,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogPanel,
  DialogTitle,
  DialogTrigger,
} from "@/siteplane/components/dialog";
import { Field, FieldError, FieldLabel } from "@/siteplane/components/field";
import { Form } from "@/siteplane/components/form";
import { Input } from "@/siteplane/components/input";
import { useState } from "react";

export default function Example() {
  const [open, setOpen] = useState(false);
  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger render={<Button variant="outline" />}>
        Rename project
      </DialogTrigger>
      <DialogPopup>
        <Form
          onSubmit={(event) => {
            event.preventDefault();
            setOpen(false);
          }}
        >
          <DialogHeader>
            <DialogTitle>Rename project</DialogTitle>
            <DialogDescription>
              Everyone in the workspace will see the new name.
            </DialogDescription>
          </DialogHeader>
          <DialogPanel>
            <Field name="name">
              <FieldLabel>Project name</FieldLabel>
              <Input defaultValue="Website Redesign" required />
              <FieldError match="valueMissing">
                Enter a project name.
              </FieldError>
            </Field>
          </DialogPanel>
          <DialogFooter>
            <DialogClose render={<Button variant="ghost" />}>
              Cancel
            </DialogClose>
            <Button type="submit">Save</Button>
          </DialogFooter>
        </Form>
      </DialogPopup>
    </Dialog>
  );
}

"use client";

import { CopyIcon, ShareIcon } from "lucide-react";
import { Button } from "@/siteplane/components/button";
import {
  Dialog,
  DialogClose,
  DialogPopup,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogPanel,
  DialogTitle,
} from "@/siteplane/components/dialog";
import { Input } from "@/siteplane/components/input";
import { Label } from "@/siteplane/components/label";
import {
  Menu,
  MenuItem,
  MenuPopup,
  MenuTrigger,
} from "@/siteplane/components/menu";
import { useId, useState } from "react";

export default function Example() {
  const linkId = useId();
  const [open, setOpen] = useState(false);
  return (
    <>
      <Menu>
        <MenuTrigger render={<Button variant="outline" />}>
          Project actions
        </MenuTrigger>
        <MenuPopup align="start">
          <MenuItem>
            <CopyIcon />
            Duplicate
          </MenuItem>
          <MenuItem onClick={() => setOpen(true)}>
            <ShareIcon />
            Share…
          </MenuItem>
        </MenuPopup>
      </Menu>
      <Dialog open={open} onOpenChange={setOpen}>
        <DialogPopup>
          <DialogHeader>
            <DialogTitle>Share project</DialogTitle>
            <DialogDescription>
              Anyone in the workspace with this link can view the project.
            </DialogDescription>
          </DialogHeader>
          <DialogPanel className="grid gap-3">
            <Label htmlFor={linkId}>Project link</Label>
            <Input
              id={linkId}
              defaultValue="https://app.example.com/projects/website-redesign"
              readOnly
            />
          </DialogPanel>
          <DialogFooter>
            <DialogClose render={<Button />}>Done</DialogClose>
          </DialogFooter>
        </DialogPopup>
      </Dialog>
    </>
  );
}

"use client";

import { Button } from "@/siteplane/components/button";
import {
  DataList,
  DataListItem,
  DataListLabel,
  DataListValue,
} from "@/siteplane/components/data-list";
import {
  Dialog,
  DialogClose,
  DialogPopup,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogPanel,
  DialogTitle,
  DialogTrigger,
} from "@/siteplane/components/dialog";
import { Field, FieldError, FieldLabel } from "@/siteplane/components/field";
import { Form } from "@/siteplane/components/form";
import { Input } from "@/siteplane/components/input";
import { useState } from "react";

export default function Example() {
  const [editOpen, setEditOpen] = useState(false);
  return (
    <Dialog>
      <DialogTrigger render={<Button variant="outline" />}>
        Manage member
      </DialogTrigger>
      <DialogPopup>
        <DialogHeader>
          <DialogTitle>Manage team member</DialogTitle>
          <DialogDescription>
            View and update this member of your workspace.
          </DialogDescription>
        </DialogHeader>
        <DialogPanel>
          <DataList orientation="vertical">
            <DataListItem>
              <DataListLabel>Name</DataListLabel>
              <DataListValue>Ben Carter</DataListValue>
            </DataListItem>
            <DataListItem>
              <DataListLabel>Email</DataListLabel>
              <DataListValue>ben.carter@example.com</DataListValue>
            </DataListItem>
          </DataList>
        </DialogPanel>
        <DialogFooter>
          <DialogClose render={<Button variant="ghost" />}>Close</DialogClose>
          <Dialog open={editOpen} onOpenChange={setEditOpen}>
            <DialogTrigger render={<Button />}>Edit details</DialogTrigger>
            <DialogPopup>
              <Form
                onSubmit={(event) => {
                  event.preventDefault();
                  setEditOpen(false);
                }}
              >
                <DialogHeader>
                  <DialogTitle>Edit details</DialogTitle>
                  <DialogDescription>
                    Update the member&apos;s name and email address.
                  </DialogDescription>
                </DialogHeader>
                <DialogPanel className="grid gap-4">
                  <Field name="name">
                    <FieldLabel>Name</FieldLabel>
                    <Input defaultValue="Ben Carter" required />
                    <FieldError match="valueMissing">Enter a name.</FieldError>
                  </Field>
                  <Field name="email">
                    <FieldLabel>Email</FieldLabel>
                    <Input
                      type="email"
                      defaultValue="ben.carter@example.com"
                      required
                    />
                    <FieldError>Enter a valid email address.</FieldError>
                  </Field>
                </DialogPanel>
                <DialogFooter>
                  <DialogClose render={<Button variant="ghost" />}>
                    Cancel
                  </DialogClose>
                  <Button type="submit">Save changes</Button>
                </DialogFooter>
              </Form>
            </DialogPopup>
          </Dialog>
        </DialogFooter>
      </DialogPopup>
    </Dialog>
  );
}

"use client";

import { Button } from "@/siteplane/components/button";
import {
  Dialog,
  DialogClose,
  DialogPopup,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogPanel,
  DialogTitle,
  DialogTrigger,
} from "@/siteplane/components/dialog";

const sections = [
  {
    title: "Your account",
    text: "You are responsible for activity in your account and for keeping your sign-in details secure. Tell us right away if you notice access you don't recognize.",
  },
  {
    title: "Workspace content",
    text: "You keep ownership of the projects, files and comments you add. We store and process them only to provide the service to your workspace.",
  },
  {
    title: "Acceptable use",
    text: "Don't upload malicious code, try to access other workspaces, or use the service to send unsolicited messages.",
  },
  {
    title: "Plans and billing",
    text: "Paid plans renew automatically at the end of each billing period. You can cancel at any time, and access continues until the period ends.",
  },
  {
    title: "Deleted projects",
    text: "Deleted projects stay in the trash for 30 days. After that, they are removed permanently and can't be restored.",
  },
  {
    title: "Service availability",
    text: "We may pause parts of the service for maintenance. Planned maintenance is announced to workspace owners in advance.",
  },
  {
    title: "Changes to these terms",
    text: "We notify workspace owners at least 30 days before a material change takes effect. Continuing to use the service means you accept the updated terms.",
  },
  {
    title: "Closing your account",
    text: "You can export your data and close your account from the account settings. Workspace owners can also remove members at any time.",
  },
  {
    title: "Contact",
    text: "Send questions about these terms to your workspace administrator or contact support from the help menu.",
  },
];

export default function Example() {
  return (
    <Dialog>
      <DialogTrigger render={<Button variant="outline" />}>
        Review terms
      </DialogTrigger>
      <DialogPopup showCloseButton={false}>
        <DialogHeader>
          <DialogTitle>Updated terms of service</DialogTitle>
          <DialogDescription>
            Review the changes before you continue.
          </DialogDescription>
        </DialogHeader>
        <DialogPanel className="grid gap-4">
          {sections.map((section) => (
            <div key={section.title} className="grid gap-1 text-sm">
              <h3 className="font-medium">{section.title}</h3>
              <p className="text-muted-foreground">{section.text}</p>
            </div>
          ))}
        </DialogPanel>
        <DialogFooter>
          <DialogClose render={<Button variant="ghost" />}>Cancel</DialogClose>
          <DialogClose render={<Button />}>Accept</DialogClose>
        </DialogFooter>
      </DialogPopup>
    </Dialog>
  );
}