Modal

'use client';
 
import React from 'react';
import { Modal } from 'ui-lab-components/modal'
import { Button } from 'ui-lab-components/button';
 
export default function Example() {
  const [isOpen, setIsOpen] = React.useState(false);
  return (
    <>
      <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
      <Modal open={isOpen} onOpenChange={setIsOpen}>
        <Modal.Header>Modal Title</Modal.Header>
        <Modal.Body>This is the modal content. It displays important information or actions.</Modal.Body>
        <Modal.Footer>Modal Footer</Modal.Footer>
      </Modal>
    </>
  );
}
 

'use client';
 
import React from 'react';
import { Modal } from 'ui-lab-components/modal'
import { Button } from 'ui-lab-components/button'
import { Input } from 'ui-lab-components/input'
import { Label } from 'ui-lab-components/label'
import { TextArea } from 'ui-lab-components/textarea'
import { Flex } from 'ui-lab-components/flex';
 
export default function Example() {
  const [isOpen, setIsOpen] = React.useState(false);
  const [formData, setFormData] = React.useState({
    name: 'John Doe',
    email: 'john.doe@example.com',
    bio: 'Software developer passionate about building great user experiences.',
  });
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // Handle form submission
    setIsOpen(false);
  };
  return (
    <>
      <Button onClick={() => setIsOpen(true)}>Edit Profile</Button>
      <Modal open={isOpen} onOpenChange={setIsOpen} size="auto">
        <Modal.Header>Edit Profile</Modal.Header>
        <Modal.Body>
          <form id="profile-form" onSubmit={handleSubmit}>
            <Flex direction="column" gap="md">
              <div>
                <Label htmlFor="name" required>
                  Full Name
                </Label>
                <Input
                  id="name"
                  value={formData.name}
                  onChange={(e) =>
                    setFormData({ ...formData, name: e.target.value })
                  }
                  placeholder="Enter your name"
                />
              </div>
              <div>
                <Label htmlFor="email" required>
                  Email Address
                </Label>
                <Input
                  id="email"
                  type="email"
                  value={formData.email}
                  onChange={(e) =>
                    setFormData({ ...formData, email: e.target.value })
                  }
                  placeholder="Enter your email"
                />
              </div>
              <div>
                <Label htmlFor="bio">Bio</Label>
                <TextArea
                  id="bio"
                  value={formData.bio}
                  onChange={(e) =>
                    setFormData({ ...formData, bio: e.target.value })
                  }
                  placeholder="Tell us about yourself"
                  rows={3}
                />
              </div>
            </Flex>
          </form>
        </Modal.Body>
        <Modal.Footer>
          <Flex gap="sm" justify-end>
            <Button variant="ghost" onClick={() => setIsOpen(false)}>
              Cancel
            </Button>
            <Button type="submit" form="profile-form">
              Save Changes
            </Button>
          </Flex>
        </Modal.Footer>
      </Modal>
    </>
  );
}
 

"use client";
 
import { useState } from "react";
import { Modal } from 'ui-lab-components/modal'
import { Button } from 'ui-lab-components/button';
 
export default function Example() {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <>
      <Button variant="destructive" onClick={() => setIsOpen(true)}>
        Delete workspace
      </Button>
      <Modal
        open={isOpen}
        onOpenChange={setIsOpen}
        title="Delete workspace"
        footer={
          <>
            <Button variant="ghost" onClick={() => setIsOpen(false)}>
              Cancel
            </Button>
            <Button variant="destructive" onClick={() => setIsOpen(false)}>
              Delete
            </Button>
          </>
        }
      >
        <p className="text-sm text-foreground-300">
          This will permanently delete <strong className="text-foreground-100">acme-corp</strong> and all
          its data. This action cannot be undone.
        </p>
      </Modal>
    </>
  );
}
 

"use client";
 
import { useState } from "react";
import { Modal } from 'ui-lab-components/modal'
import { Button } from 'ui-lab-components/button'
import { Input } from 'ui-lab-components/input'
import { Label } from 'ui-lab-components/label';
 
export default function Example() {
  const [isOpen, setIsOpen] = useState(false);
  const [name, setName] = useState("");
  return (
    <>
      <Button onClick={() => setIsOpen(true)}>New API key</Button>
      <Modal
        open={isOpen}
        onOpenChange={setIsOpen}
        title="New API key"
        footer={
          <>
            <Button variant="ghost" onClick={() => setIsOpen(false)}>
              Cancel
            </Button>
            <Button
              onClick={() => setIsOpen(false)}
              disabled={!name.trim()}
            >
              Create
            </Button>
          </>
        }
      >
        <div className="flex flex-col gap-4 px-6 py-4">
          <div className="flex flex-col gap-1.5">
            <Label htmlFor="key-name">Name</Label>
            <Input
              id="key-name"
              placeholder="e.g. CI deploy key"
              value={name}
              onChange={(e) => setName(e.target.value)}
            />
          </div>
          <p className="text-xs text-foreground-400">
            The key will only be shown once after creation.
          </p>
        </div>
      </Modal>
    </>
  );
}
 

"use client";
 
import { useState } from "react";
import { Modal } from 'ui-lab-components/modal'
import { Button } from 'ui-lab-components/button'
import { Switch } from 'ui-lab-components/switch';
 
 
export default function Example() {
  const [isOpen, setIsOpen] = useState(false);
  const [prefs, setPrefs] = useState({ email: true, push: false, marketing: false });
 
  const toggle = (key: keyof typeof prefs) =>
    setPrefs((p) => ({ ...p, [key]: !p[key] }));
 
  return (
    <>
      <Button variant="ghost" onClick={() => setIsOpen(true)}>
        Notification settings
      </Button>
 
      <Modal open={isOpen} onOpenChange={setIsOpen}>
        <Modal.Header>
          <span className="text-sm font-semibold text-foreground-100">Notification preferences</span>
        </Modal.Header>
 
        <Modal.Body>
          <div className="flex flex-col divide-y divide-border px-6">
            {(
              [
                { key: "email", label: "Email notifications", description: "Receive updates and alerts by email" },
                { key: "push", label: "Push notifications", description: "Browser and mobile push alerts" },
                { key: "marketing", label: "Product updates", description: "New features and announcements" },
              ] as const
            ).map(({ key, label, description }) => (
              <div key={key} className="flex items-center justify-between py-4">
                <div className="flex flex-col gap-0.5">
                  <span className="text-sm text-foreground-100">{label}</span>
                  <span className="text-xs text-foreground-400">{description}</span>
                </div>
                <Switch selected={prefs[key]} onChange={() => toggle(key)} />
              </div>
            ))}
          </div>
        </Modal.Body>
 
        <Modal.Footer>
          <Button variant="ghost" onClick={() => setIsOpen(false)}>
            Cancel
          </Button>
          <Button onClick={() => setIsOpen(false)}>Save</Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}
 

"use client";
 
import { useState } from "react";
import { Button } from "ui-lab-components/button";
import { Modal } from "ui-lab-components/modal";
import { Panel } from "ui-lab-components/panel";
import { Switch } from "ui-lab-components/switch";
 
export default function Example() {
  const [isOpen, setIsOpen] = useState(false);
  const [settings, setSettings] = useState({
    desktop: true,
    sounds: false,
    compactMode: false,
  });
  const toggle = (key: keyof typeof settings) =>
    setSettings((current) => ({ ...current, [key]: !current[key] }));
  return (
    <>
      <Button onClick={() => setIsOpen(true)}>Open settings</Button>
      <Modal
        open={isOpen}
        onOpenChange={setIsOpen}
        aria-label="Settings"
        close={false}
        className="h-[32rem] max-w-3xl"
        contentClassName="p-0"
      >
        <Panel spacing="none" collapseAt={0} className="h-full">
          <Panel.Sidebar
            id="settings-navigation"
            side="left"
            size={176}
            aria-label="Settings navigation"
            className="bg-background-950 p-3"
          >
            <p className="px-2 pb-3 text-sm font-semibold text-foreground-100">Settings</p>
            <nav className="flex flex-col gap-1 text-sm">
              <button type="button" className="rounded-sm bg-background-800 px-2 py-1.5 text-left text-foreground-100">
                General
              </button>
              <button type="button" className="rounded-sm px-2 py-1.5 text-left text-foreground-400">
                Notifications
              </button>
              <button type="button" className="rounded-sm px-2 py-1.5 text-left text-foreground-400">
                Appearance
              </button>
            </nav>
          </Panel.Sidebar>
          <section className="flex min-w-0 flex-1 flex-col overflow-hidden">
            <header className="shrink-0 border-b border-background-700 px-5 py-4">
              <div>
                <h2 className="text-sm font-semibold text-foreground-100">General settings</h2>
                <p className="mt-1 text-xs text-foreground-400">Manage your workspace preferences.</p>
              </div>
            </header>
            <main className="min-h-0 flex-1 space-y-5 overflow-auto p-5">
              {([
                ["desktop", "Desktop notifications", "Show updates even when the app is in the background."],
                ["sounds", "Notification sounds", "Play a sound for new activity."],
                ["compactMode", "Compact mode", "Use a denser layout throughout the app."],
              ] as const).map(([key, label, description]) => (
                <div key={key} className="flex items-center justify-between gap-6">
                  <div>
                    <p className="text-sm text-foreground-100">{label}</p>
                    <p className="mt-1 text-xs text-foreground-400">{description}</p>
                  </div>
                  <Switch selected={settings[key]} onChange={() => toggle(key)} />
                </div>
              ))}
            </main>
            <footer className="flex shrink-0 justify-end gap-2 border-t border-background-700 px-5 py-3">
              <Button variant="ghost" onClick={() => setIsOpen(false)}>
                Cancel
              </Button>
              <Button onClick={() => setIsOpen(false)}>Save changes</Button>
            </footer>
          </section>
        </Panel>
      </Modal>
    </>
  );
}