import * as React from "react"; import { SettingsSectionMobileFirstQuickSettingsDrawerEight } from "@/registry/settings-section-mobile-first-quick-settings-drawer-eight/settings-section-mobile-first-quick-settings-drawer-eight"; import { Badge } from "@/components/ui/badge"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; type ComponentProps = React.ComponentPropsWithoutRef< typeof SettingsSectionMobileFirstQuickSettingsDrawerEight >; type QuickSettingGroup = NonNullable[number]; export function SettingsSectionMobileFirstQuickSettingsDrawerEightDemo() { const [prefs, setPrefs] = React.useState({ darkMode: true, pushEnabled: true, locale: "en-US", inboxHint: true, }); const groups: QuickSettingGroup[] = [ { id: "profile", label: "Profile", description: "Common personalization controls for your account.", items: [ { type: "select", id: "locale", label: "Language", value: prefs.locale, onChange: (v) => setPrefs((p) => ({ ...p, locale: v })), options: [ { value: "en-US", label: "English (US)" }, { value: "en-GB", label: "English (UK)" }, { value: "es-ES", label: "Español" }, ], helperText: "Affects emails and in-product copy.", }, ], }, { id: "notifications", label: "Notifications", badge: "New", items: [ { type: "toggle", id: "push", label: "Enable push", description: "Get mobile push for critical events.", checked: prefs.pushEnabled, onChange: (c) => setPrefs((p) => ({ ...p, pushEnabled: c })), }, { type: "toggle", id: "inbox", label: "Inbox tips", description: "Show contextual tips in your inbox.", checked: prefs.inboxHint, onChange: (c) => setPrefs((p) => ({ ...p, inboxHint: c })), }, ], }, { id: "appearance", label: "Appearance", items: [ { type: "toggle", id: "dark", label: "Dark mode", description: "Match system setting if available.", checked: prefs.darkMode, onChange: (c) => setPrefs((p) => ({ ...p, darkMode: c })), }, ], }, ]; return (

Your dashboard

Interact with the page and open the quick settings drawer using the floating button.

Dark: {String(prefs.darkMode)} Push: {String(prefs.pushEnabled)} Locale: {prefs.locale}

); } export default SettingsSectionMobileFirstQuickSettingsDrawerEightDemo;

Simple