Settings List

"use client";

import {
  Select,
  SelectPopup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/siteplane/components/select";
import {
  SettingsList,
  SettingsListItem,
} from "@/siteplane/components/settings-list";
import { Switch } from "@/siteplane/components/switch";

const visibilityOptions = [
  { label: "Workspace", value: "workspace" },
  { label: "Private", value: "private" },
];

export default function Example() {
  return (
    <SettingsList
      className="max-w-md"
      description="Manage visibility and notifications for your project."
      title="Project settings"
    >
      <SettingsListItem
        control={(controlProps) => (
          <Select defaultValue="workspace" items={visibilityOptions}>
            <SelectTrigger className="w-40" {...controlProps}>
              <SelectValue />
            </SelectTrigger>
            <SelectPopup>
              {visibilityOptions.map(({ label, value }) => (
                <SelectItem key={value} value={value}>
                  {label}
                </SelectItem>
              ))}
            </SelectPopup>
          </Select>
        )}
        description="Choose who can access this project."
        title="Visibility"
      />
      <SettingsListItem
        control={(controlProps) => <Switch {...controlProps} defaultChecked />}
        description="Receive updates about activity in this project."
        layout="inline"
        title="Email notifications"
      />
      <SettingsListItem
        control={(controlProps) => <Switch {...controlProps} />}
        description="A summary of project activity every Monday."
        layout="inline"
        title="Weekly digest"
      />
    </SettingsList>
  );
}

"use client";

import { useState } from "react";
import { Badge } from "@/siteplane/components/badge";
import { Input } from "@/siteplane/components/input";
import {
  SettingsList,
  SettingsListItem,
} from "@/siteplane/components/settings-list";
import { Switch } from "@/siteplane/components/switch";

export default function Example() {
  const [name, setName] = useState("Mara");
  const [productUpdates, setProductUpdates] = useState(true);
  return (
    <SettingsList
      description="How other members see you in this workspace."
      title="Profile"
    >
      <SettingsListItem
        control={(props) => (
          <Input {...props} onValueChange={setName} value={name} />
        )}
        title="Display name"
      />
      <SettingsListItem
        control={(props) => (
          <Switch
            {...props}
            checked={productUpdates}
            onCheckedChange={setProductUpdates}
          />
        )}
        description="Occasional news about new features."
        layout="inline"
        title="Product updates"
      />
      <SettingsListItem
        control={(props) => <Switch {...props} defaultChecked disabled />}
        description="Your organization manages sign-in for this workspace."
        layout="inline"
        tag={<Badge variant="outline">Managed</Badge>}
        title="Single sign-on"
      />
    </SettingsList>
  );
}