astryx-dracula 0.1.3 → 0.2.0

package/templates/settings-sidebar.tsx

@@ -0,0 +1,952 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {useState, type CSSProperties} from 'react';
+import {useMediaQuery} from '@astryxdesign/core/hooks';
+import {
+  VStack,
+  HStack,
+  StackItem,
+  Layout,
+  LayoutContent,
+  LayoutPanel,
+} from '@astryxdesign/core/Layout';
+import {List, ListItem} from '@astryxdesign/core/List';
+import {Toolbar} from '@astryxdesign/core/Toolbar';
+import {Text, Heading} from '@astryxdesign/core/Text';
+import {Link} from '@astryxdesign/core/Link';
+import {Button} from '@astryxdesign/core/Button';
+import {Selector} from '@astryxdesign/core/Selector';
+import {TextInput} from '@astryxdesign/core/TextInput';
+import {Card} from '@astryxdesign/core/Card';
+import {Switch} from '@astryxdesign/core/Switch';
+import {Divider} from '@astryxdesign/core/Divider';
+import {TabList, Tab} from '@astryxdesign/core/TabList';
+import {Badge} from '@astryxdesign/core/Badge';
+import {Icon} from '@astryxdesign/core/Icon';
+import {Center} from '@astryxdesign/core/Center';
+import {
+  User,
+  Lock,
+  ShieldCheck,
+  Bell,
+  FileText,
+  CreditCard,
+  Globe,
+  Briefcase,
+  Wrench,
+  Monitor,
+  SquarePen,
+  Share2,
+  ArrowLeft,
+  ChevronRight,
+} from 'lucide-react';
+
+// Anchor the page to the viewport height so the sidebar + content fill the
+// screen. Layout height="fill" is min-height:100% which collapses when the
+// host container is content-sized; Layout has no viewport-height prop.
+const fillViewport: CSSProperties = {
+  minHeight: '100dvh',
+};
+const iconBox: CSSProperties = {
+  borderRadius: 'var(--radius-container)',
+  backgroundColor: 'var(--color-background-surface)',
+  flexShrink: 0,
+};
+const rowPadding: CSSProperties = {
+  paddingBlock: 'var(--spacing-4)',
+};
+const sideNavPadding: CSSProperties = {
+  paddingBlock: 'var(--spacing-4)',
+  paddingInline: 'var(--spacing-3)',
+};
+const sideNavHeading: CSSProperties = {
+  marginInline: 'var(--spacing-4)',
+};
+
+const NAV_ITEMS = [
+  {label: 'Personal information', icon: User},
+  {label: 'Login & security', icon: Lock},
+  {label: 'Privacy', icon: ShieldCheck},
+  {label: 'Notifications', icon: Bell},
+  {label: 'Taxes', icon: FileText},
+  {label: 'Payments', icon: CreditCard},
+  {label: 'Languages & currency', icon: Globe},
+  {label: 'Travel for work', icon: Briefcase},
+];
+
+// Section title shown beside the mobile back button (matches each section's
+// in-content heading, which is hidden on mobile to avoid a duplicate).
+const SECTION_TITLES: Record<string, string> = {
+  'Personal information': 'Personal info',
+  'Login & security': 'Login & security',
+  Privacy: 'Privacy',
+  Notifications: 'Notifications',
+  Taxes: 'Taxes',
+  Payments: 'Payments',
+  'Languages & currency': 'Languages & currency',
+  'Travel for work': 'Travel for work',
+  'Professional hosting tools': 'Hosting tools',
+};
+
+interface InfoRow {
+  label: string;
+  value: string;
+  action: string;
+}
+
+const LOGIN_ROWS: InfoRow[] = [
+  {label: 'Password', value: 'Not created', action: 'Create'},
+];
+
+const SOCIAL_ROWS: InfoRow[] = [
+  {label: 'Google', value: 'Connected', action: 'Disconnect'},
+];
+
+const TAX_ROWS: InfoRow[] = [
+  {label: 'Taxpayer information', value: 'Not provided', action: 'Add'},
+  {label: 'Tax documents', value: 'No documents yet', action: 'View'},
+];
+
+const PAYOUT_ROWS: InfoRow[] = [
+  {label: 'Payout method', value: 'Not set up', action: 'Add'},
+  {label: 'Past payments', value: 'No payments yet', action: 'View'},
+];
+
+const DEVICE_ROWS: {
+  label: string;
+  badge?: string;
+  location: string;
+  action?: string;
+}[] = [
+  {
+    label: 'OS X 10.15.7 · Chrome',
+    badge: 'CURRENT SESSION',
+    location: 'Brașov, Transylvania · March 30, 2026 at 19:31',
+  },
+  {label: 'Session', location: 'August 9, 2023 at 04:19', action: 'Log out'},
+  {
+    label: 'OS X 10.15.7 · unknown',
+    location: 'Whitby, England · April 14, 2023 at 17:47',
+    action: 'Log out',
+  },
+];
+
+function InfoRowItem({label, value, action}: InfoRow) {
+  return (
+    <>
+      <HStack hAlign="between" vAlign="start" style={rowPadding}>
+        <VStack gap={0}>
+          <Text type="body" weight="semibold" display="block">
+            {label}
+          </Text>
+          <Text type="supporting" color="secondary" display="block">
+            {value}
+          </Text>
+        </VStack>
+        {action && <Link href="#/templates/settings-sidebar">{action}</Link>}
+      </HStack>
+      <Divider />
+    </>
+  );
+}
+
+interface ExpandableRowProps {
+  label: string;
+  value: string;
+  children: React.ReactNode;
+  isExpanded: boolean;
+  onEdit: () => void;
+  onCancel: () => void;
+  onSave: () => void;
+}
+
+function ExpandableRow({
+  label,
+  value,
+  children,
+  isExpanded,
+  onEdit,
+  onCancel,
+  onSave,
+}: ExpandableRowProps) {
+  return (
+    <>
+      {isExpanded ? (
+        <VStack gap={4} style={rowPadding}>
+          <Text type="body" weight="semibold" display="block">
+            {label}
+          </Text>
+          {children}
+          <HStack gap={2}>
+            <Button label="Save" variant="primary" onClick={onSave} />
+            <Button label="Cancel" variant="ghost" onClick={onCancel} />
+          </HStack>
+        </VStack>
+      ) : (
+        <HStack hAlign="between" vAlign="start" style={rowPadding}>
+          <VStack gap={0}>
+            <Text type="body" weight="semibold" display="block">
+              {label}
+            </Text>
+            <Text type="supporting" color="secondary" display="block">
+              {value}
+            </Text>
+          </VStack>
+          <Link
+            href="#/templates/settings-sidebar"
+            onClick={(e: React.MouseEvent) => {
+              e.preventDefault();
+              onEdit();
+            }}>
+            Edit
+          </Link>
+        </HStack>
+      )}
+      <Divider />
+    </>
+  );
+}
+
+const LANGUAGES = [
+  {label: 'English (Canada)', value: 'en-CA'},
+  {label: 'English (US)', value: 'en-US'},
+  {label: 'French', value: 'fr'},
+  {label: 'Spanish', value: 'es'},
+  {label: 'German', value: 'de'},
+  {label: 'Japanese', value: 'ja'},
+];
+
+const CURRENCIES = [
+  {label: 'Canadian dollar (CAD)', value: 'CAD'},
+  {label: 'US dollar (USD)', value: 'USD'},
+  {label: 'Euro (EUR)', value: 'EUR'},
+  {label: 'British pound (GBP)', value: 'GBP'},
+  {label: 'Japanese yen (JPY)', value: 'JPY'},
+];
+
+const TIMEZONES = [
+  {label: '(GMT-05:00) Eastern Time (US & Canada)', value: 'ET'},
+  {label: '(GMT-06:00) Central Time (US & Canada)', value: 'CT'},
+  {label: '(GMT-07:00) Mountain Time (US & Canada)', value: 'MT'},
+  {label: '(GMT-08:00) Pacific Time (US & Canada)', value: 'PT'},
+  {label: '(GMT+00:00) UTC', value: 'UTC'},
+  {label: '(GMT+01:00) London', value: 'GMT+1'},
+];
+
+export default function SettingsSidebar() {
+  const isNarrow = useMediaQuery('(max-width: 768px)');
+  // Mobile is a master→detail drill-down: 'nav' shows the menu, 'detail' shows
+  // the selected section with a back button. Desktop shows both side-by-side.
+  const [mobileView, setMobileView] = useState<'nav' | 'detail'>('nav');
+  const [activeNav, setActiveNav] = useState('Personal information');
+  const [activeTab, setActiveTab] = useState('login');
+  const [readReceipts, setReadReceipts] = useState(true);
+  const [searchEngines, setSearchEngines] = useState(true);
+  const [showCity, setShowCity] = useState(true);
+  const [showTripType, setShowTripType] = useState(true);
+  const [showStayLength, setShowStayLength] = useState(true);
+  const [showServices, setShowServices] = useState(true);
+  const [aiFeatures, setAiFeatures] = useState(true);
+  const [emailNotif, setEmailNotif] = useState(true);
+  const [pushNotif, setPushNotif] = useState(true);
+  const [workTrips, setWorkTrips] = useState(false);
+
+  const [expandedRow, setExpandedRow] = useState<string | null>(null);
+  const [language, setLanguage] = useState('en-CA');
+  const [currency, setCurrency] = useState('CAD');
+  const [timezone, setTimezone] = useState('ET');
+
+  const [legalName, setLegalName] = useState('Vlad Dracul');
+  const [preferredName, setPreferredName] = useState('');
+  const [email, setEmail] = useState('v***d@castle-dracula.ro');
+  const [phone, setPhone] = useState('+1 ***-***-0123');
+  const [address, setAddress] = useState('');
+  const [mailingAddress, setMailingAddress] = useState('');
+  const [emergencyContact, setEmergencyContact] = useState('Provided');
+
+  // Selecting a nav item also drills into the detail view on mobile.
+  const selectNav = (label: string) => {
+    setActiveNav(label);
+    setMobileView('detail');
+  };
+
+  const navList = (
+    <VStack gap={4} style={sideNavPadding}>
+      <Heading level={2} style={sideNavHeading}>
+        Account settings
+      </Heading>
+      <List density="spacious">
+        {NAV_ITEMS.map(item => (
+          <ListItem
+            key={item.label}
+            label={item.label}
+            startContent={<Icon icon={item.icon} />}
+            endContent={
+              isNarrow ? (
+                <Icon icon={ChevronRight} size="sm" color="secondary" />
+              ) : undefined
+            }
+            isSelected={!isNarrow && activeNav === item.label}
+            onClick={() => selectNav(item.label)}
+          />
+        ))}
+      </List>
+      <Divider />
+      <List density="spacious">
+        <ListItem
+          label="Professional hosting tools"
+          startContent={<Icon icon={Wrench} />}
+          onClick={() => {}}
+        />
+      </List>
+    </VStack>
+  );
+
+  // Mobile, nav view: show only the menu (full width, no sidebar slot).
+  if (isNarrow && mobileView === 'nav') {
+    return (
+      <Layout
+        height="fill"
+        style={fillViewport}
+        content={<LayoutContent padding={2}>{navList}</LayoutContent>}
+      />
+    );
+  }
+
+  return (
+    <Layout
+      height="fill"
+      contentWidth={1200}
+      style={fillViewport}
+      start={
+        isNarrow ? undefined : (
+          <LayoutPanel hasDivider padding={0}>
+            {navList}
+          </LayoutPanel>
+        )
+      }
+      content={
+        <LayoutContent padding={4}>
+          <VStack gap={0}>
+            {/* Mobile detail view: a back button sits beside the section title
+                (the per-section headings below are hidden on mobile). Toolbar's
+                start slot edge-compensates the ghost button so its icon aligns
+                flush with the content edge. */}
+            {isNarrow && (
+              <Toolbar
+                label={`Back to Account settings — ${SECTION_TITLES[activeNav]}`}
+                gap={2}
+                startContent={
+                  <>
+                    <Button
+                      label="Back to Account settings"
+                      variant="ghost"
+                      size="sm"
+                      isIconOnly
+                      icon={<Icon icon={ArrowLeft} size="sm" />}
+                      onClick={() => setMobileView('nav')}
+                    />
+                    <Heading level={2}>{SECTION_TITLES[activeNav]}</Heading>
+                  </>
+                }
+              />
+            )}
+            {activeNav === 'Login & security' && (
+              <VStack gap={6}>
+                {!isNarrow && <Heading level={2}>Login &amp; security</Heading>}
+
+                <TabList value={activeTab} onChange={setActiveTab} hasDivider>
+                  <Tab value="login" label="Login" />
+                  <Tab value="shared" label="Shared access" />
+                </TabList>
+
+                {activeTab === 'login' && (
+                  <VStack gap={8}>
+                    <VStack gap={0}>
+                      <Heading level={3}>Login</Heading>
+                      <Divider />
+                      {LOGIN_ROWS.map(row => (
+                        <InfoRowItem key={row.label} {...row} />
+                      ))}
+                    </VStack>
+
+                    <VStack gap={0}>
+                      <Heading level={3}>Social accounts</Heading>
+                      <Divider />
+                      {SOCIAL_ROWS.map(row => (
+                        <InfoRowItem key={row.label} {...row} />
+                      ))}
+                    </VStack>
+
+                    <VStack gap={0}>
+                      <Heading level={3}>Device history</Heading>
+                      <Divider />
+                      {DEVICE_ROWS.map((device, i) => (
+                        <HStack
+                          key={i}
+                          gap={3}
+                          vAlign="start"
+                          style={rowPadding}>
+                          <Icon icon={Monitor} />
+                          <StackItem size="fill">
+                            <VStack gap={0}>
+                              <HStack gap={2} vAlign="center">
+                                <Text type="body" weight="semibold">
+                                  {device.label}
+                                </Text>
+                                {device.badge && <Badge label={device.badge} />}
+                              </HStack>
+                              <Text
+                                type="supporting"
+                                color="secondary"
+                                display="block"
+                                hasTabularNumbers>
+                                {device.location}
+                              </Text>
+                            </VStack>
+                          </StackItem>
+                          {device.action && (
+                            <Link href="#/templates/settings-sidebar">{device.action}</Link>
+                          )}
+                        </HStack>
+                      ))}
+                      <Divider />
+                    </VStack>
+
+                    <VStack gap={0}>
+                      <Heading level={3}>Account</Heading>
+                      <Divider />
+                      <HStack
+                        hAlign="between"
+                        vAlign="start"
+                        style={rowPadding}>
+                        <VStack gap={0}>
+                          <Text type="body" weight="semibold" display="block">
+                            Deactivate your account
+                          </Text>
+                          <Text
+                            type="supporting"
+                            color="secondary"
+                            display="block">
+                            This action cannot be undone
+                          </Text>
+                        </VStack>
+                        <Link href="#/templates/settings-sidebar">Deactivate</Link>
+                      </HStack>
+                      <Divider />
+                    </VStack>
+                  </VStack>
+                )}
+
+                {activeTab === 'shared' && (
+                  <VStack gap={8}>
+                    <VStack gap={2}>
+                      <Heading level={3}>Shared access</Heading>
+                      <Divider />
+                      <Text type="body" color="secondary">
+                        Review each request carefully before approving access.
+                        We&apos;ll email your employee or co-worker a 4-digit
+                        code that lets them log into your account with their
+                        trusted device.
+                      </Text>
+                    </VStack>
+
+                    <Card variant="muted">
+                      <HStack gap={4} vAlign="start">
+                        <Center width={48} height={48} style={iconBox}>
+                          <Icon icon={Lock} />
+                        </Center>
+                        <VStack gap={1}>
+                          <Text type="body" weight="bold">
+                            Adding devices from people you trust
+                          </Text>
+                          <Text type="body" color="secondary">
+                            When you approve a request, you grant someone full
+                            access to your account. They&apos;ll be able to
+                            change reservations and send messages on your
+                            behalf.
+                          </Text>
+                        </VStack>
+                      </HStack>
+                    </Card>
+                  </VStack>
+                )}
+              </VStack>
+            )}
+
+            {activeNav === 'Languages & currency' && (
+              <VStack gap={6}>
+                {!isNarrow && (
+                  <Heading level={2}>Languages &amp; currency</Heading>
+                )}
+                <VStack gap={0}>
+                  <ExpandableRow
+                    label="Preferred language"
+                    value={
+                      LANGUAGES.find(l => l.value === language)?.label ??
+                      language
+                    }
+                    isExpanded={expandedRow === 'language'}
+                    onEdit={() => setExpandedRow('language')}
+                    onCancel={() => setExpandedRow(null)}
+                    onSave={() => setExpandedRow(null)}>
+                    <Selector
+                      label="Language"
+                      isLabelHidden
+                      size="lg"
+                      value={language}
+                      onChange={setLanguage}
+                      options={LANGUAGES}
+                    />
+                  </ExpandableRow>
+                  <ExpandableRow
+                    label="Preferred currency"
+                    value={
+                      CURRENCIES.find(c => c.value === currency)?.label ??
+                      currency
+                    }
+                    isExpanded={expandedRow === 'currency'}
+                    onEdit={() => setExpandedRow('currency')}
+                    onCancel={() => setExpandedRow(null)}
+                    onSave={() => setExpandedRow(null)}>
+                    <Selector
+                      label="Currency"
+                      isLabelHidden
+                      size="lg"
+                      value={currency}
+                      onChange={setCurrency}
+                      options={CURRENCIES}
+                    />
+                  </ExpandableRow>
+                  <ExpandableRow
+                    label="Time zone"
+                    value={
+                      TIMEZONES.find(t => t.value === timezone)?.label ??
+                      timezone
+                    }
+                    isExpanded={expandedRow === 'timezone'}
+                    onEdit={() => setExpandedRow('timezone')}
+                    onCancel={() => setExpandedRow(null)}
+                    onSave={() => setExpandedRow(null)}>
+                    <Selector
+                      label="Time zone"
+                      isLabelHidden
+                      size="lg"
+                      value={timezone}
+                      onChange={setTimezone}
+                      options={TIMEZONES}
+                    />
+                  </ExpandableRow>
+                </VStack>
+              </VStack>
+            )}
+
+            {activeNav === 'Personal information' && (
+              <VStack gap={6}>
+                {!isNarrow && <Heading level={2}>Personal info</Heading>}
+                <VStack gap={0}>
+                  <ExpandableRow
+                    label="Legal name"
+                    value={legalName}
+                    isExpanded={expandedRow === 'legalName'}
+                    onEdit={() => setExpandedRow('legalName')}
+                    onCancel={() => setExpandedRow(null)}
+                    onSave={() => setExpandedRow(null)}>
+                    <TextInput
+                      label="Legal name"
+                      isLabelHidden
+                      value={legalName}
+                      onChange={setLegalName}
+                    />
+                  </ExpandableRow>
+                  <ExpandableRow
+                    label="Preferred first name"
+                    value={preferredName || 'Not provided'}
+                    isExpanded={expandedRow === 'preferredName'}
+                    onEdit={() => setExpandedRow('preferredName')}
+                    onCancel={() => setExpandedRow(null)}
+                    onSave={() => setExpandedRow(null)}>
+                    <TextInput
+                      label="Preferred first name"
+                      isLabelHidden
+                      value={preferredName}
+                      onChange={setPreferredName}
+                    />
+                  </ExpandableRow>
+                  <ExpandableRow
+                    label="Email address"
+                    value={email}
+                    isExpanded={expandedRow === 'email'}
+                    onEdit={() => setExpandedRow('email')}
+                    onCancel={() => setExpandedRow(null)}
+                    onSave={() => setExpandedRow(null)}>
+                    <TextInput
+                      label="Email address"
+                      isLabelHidden
+                      value={email}
+                      onChange={setEmail}
+                    />
+                  </ExpandableRow>
+                  <ExpandableRow
+                    label="Phone number"
+                    value={phone}
+                    isExpanded={expandedRow === 'phone'}
+                    onEdit={() => setExpandedRow('phone')}
+                    onCancel={() => setExpandedRow(null)}
+                    onSave={() => setExpandedRow(null)}>
+                    <TextInput
+                      label="Phone number"
+                      isLabelHidden
+                      value={phone}
+                      onChange={setPhone}
+                    />
+                  </ExpandableRow>
+                  <InfoRowItem
+                    label="Identity verification"
+                    value="Verified"
+                    action=""
+                  />
+                  <ExpandableRow
+                    label="Residential address"
+                    value={address || 'Not provided'}
+                    isExpanded={expandedRow === 'address'}
+                    onEdit={() => setExpandedRow('address')}
+                    onCancel={() => setExpandedRow(null)}
+                    onSave={() => setExpandedRow(null)}>
+                    <TextInput
+                      label="Residential address"
+                      isLabelHidden
+                      value={address}
+                      onChange={setAddress}
+                    />
+                  </ExpandableRow>
+                  <ExpandableRow
+                    label="Mailing address"
+                    value={mailingAddress || 'Not provided'}
+                    isExpanded={expandedRow === 'mailingAddress'}
+                    onEdit={() => setExpandedRow('mailingAddress')}
+                    onCancel={() => setExpandedRow(null)}
+                    onSave={() => setExpandedRow(null)}>
+                    <TextInput
+                      label="Mailing address"
+                      isLabelHidden
+                      value={mailingAddress}
+                      onChange={setMailingAddress}
+                    />
+                  </ExpandableRow>
+                  <ExpandableRow
+                    label="Emergency contact"
+                    value={emergencyContact}
+                    isExpanded={expandedRow === 'emergencyContact'}
+                    onEdit={() => setExpandedRow('emergencyContact')}
+                    onCancel={() => setExpandedRow(null)}
+                    onSave={() => setExpandedRow(null)}>
+                    <TextInput
+                      label="Emergency contact"
+                      isLabelHidden
+                      value={emergencyContact}
+                      onChange={setEmergencyContact}
+                    />
+                  </ExpandableRow>
+                </VStack>
+
+                <Card padding={4}>
+                  <VStack gap={4}>
+                    <HStack gap={3} vAlign="start">
+                      <Center width={48} height={48} style={iconBox}>
+                        <Icon icon={Lock} />
+                      </Center>
+                      <VStack gap={0}>
+                        <Text type="body" weight="semibold" display="block">
+                          Why isn&apos;t my info shown here?
+                        </Text>
+                        <Text
+                          type="supporting"
+                          color="secondary"
+                          display="block">
+                          We&apos;re hiding some account details to protect your
+                          identity.
+                        </Text>
+                      </VStack>
+                    </HStack>
+                    <Divider />
+                    <HStack gap={3} vAlign="start">
+                      <Center width={48} height={48} style={iconBox}>
+                        <Icon icon={SquarePen} />
+                      </Center>
+                      <VStack gap={0}>
+                        <Text type="body" weight="semibold" display="block">
+                          Which details can be edited?
+                        </Text>
+                        <Text
+                          type="supporting"
+                          color="secondary"
+                          display="block">
+                          Contact info and personal details can be edited. If
+                          this info was used to verify your identity,
+                          you&apos;ll need to get verified again the next time
+                          you book—or to continue hosting.
+                        </Text>
+                      </VStack>
+                    </HStack>
+                    <Divider />
+                    <HStack gap={3} vAlign="start">
+                      <Center width={48} height={48} style={iconBox}>
+                        <Icon icon={Share2} />
+                      </Center>
+                      <VStack gap={0}>
+                        <Text type="body" weight="semibold" display="block">
+                          What info is shared with others?
+                        </Text>
+                        <Text
+                          type="supporting"
+                          color="secondary"
+                          display="block">
+                          We only release contact information after a
+                          reservation is confirmed.
+                        </Text>
+                      </VStack>
+                    </HStack>
+                  </VStack>
+                </Card>
+              </VStack>
+            )}
+
+            {activeNav === 'Privacy' && (
+              <VStack gap={6}>
+                {!isNarrow && <Heading level={2}>Privacy</Heading>}
+
+                <VStack gap={8}>
+                  <VStack gap={0}>
+                    <Heading level={3}>Messages</Heading>
+                    <VStack style={rowPadding}>
+                      <Switch
+                        label="Show people when I've read their messages."
+                        value={readReceipts}
+                        onChange={setReadReceipts}
+                        labelPosition="start"
+                        labelSpacing="spread"
+                      />
+                    </VStack>
+                    <HStack hAlign="between" vAlign="center" style={rowPadding}>
+                      <Text type="body" weight="semibold">
+                        Blocked people
+                      </Text>
+                      <Link href="#/templates/settings-sidebar">View</Link>
+                    </HStack>
+                    <Divider />
+                  </VStack>
+
+                  <VStack gap={0}>
+                    <Heading level={3}>Listings</Heading>
+                    <VStack style={rowPadding}>
+                      <Switch
+                        label="Include my listing(s) in search engines"
+                        description="Turning this on means search engines, like Google, will display your listing page(s) in search results."
+                        value={searchEngines}
+                        onChange={setSearchEngines}
+                        labelPosition="start"
+                        labelSpacing="spread"
+                      />
+                    </VStack>
+                    <Divider />
+                  </VStack>
+
+                  <VStack gap={4}>
+                    <Heading level={3}>Reviews</Heading>
+                    <Text type="body" color="secondary">
+                      Choose what&apos;s shared when you write a review.{' '}
+                      <Link href="#/templates/settings-sidebar" type="supporting">
+                        Learn more
+                      </Link>
+                    </Text>
+                    <VStack gap={4}>
+                      <Switch
+                        label="Show my home city and country"
+                        description="Ex: City and country"
+                        value={showCity}
+                        onChange={setShowCity}
+                        labelPosition="start"
+                        labelSpacing="spread"
+                      />
+                      <Switch
+                        label="Show my trip type"
+                        description="Ex: Stayed with kids or pets"
+                        value={showTripType}
+                        onChange={setShowTripType}
+                        labelPosition="start"
+                        labelSpacing="spread"
+                      />
+                      <Switch
+                        label="Show my length of stay"
+                        description="Ex: A few nights, about a week, etc."
+                        value={showStayLength}
+                        onChange={setShowStayLength}
+                        labelPosition="start"
+                        labelSpacing="spread"
+                      />
+                      <Switch
+                        label="Show my booked services"
+                        description="Ex: Gourmet brunch or tasting menu"
+                        value={showServices}
+                        onChange={setShowServices}
+                        labelPosition="start"
+                        labelSpacing="spread"
+                      />
+                    </VStack>
+                    <Divider />
+                  </VStack>
+
+                  <VStack gap={4}>
+                    <Heading level={3}>Data privacy</Heading>
+                    <Card>
+                      <HStack hAlign="between" vAlign="center">
+                        <Text type="body">Request my personal data</Text>
+                        <Link href="#/templates/settings-sidebar">Request</Link>
+                      </HStack>
+                    </Card>
+                    <Switch
+                      label="Help improve AI-powered features"
+                      description="When this is on, we use your data to develop and improve AI models."
+                      value={aiFeatures}
+                      onChange={setAiFeatures}
+                      labelPosition="start"
+                      labelSpacing="spread"
+                    />
+                    <Card>
+                      <HStack hAlign="between" vAlign="center">
+                        <Text type="body">Delete my account</Text>
+                        <Link href="#/templates/settings-sidebar">Delete</Link>
+                      </HStack>
+                    </Card>
+                    <Card variant="muted">
+                      <HStack gap={4} vAlign="start">
+                        <Center width={48} height={48} style={iconBox}>
+                          <Icon icon={ShieldCheck} />
+                        </Center>
+                        <VStack gap={1}>
+                          <Text type="body" weight="bold">
+                            Committed to privacy
+                          </Text>
+                          <Text type="supporting" color="secondary">
+                            We&apos;re committed to keeping your data protected.
+                            See details in our{' '}
+                            <Link href="#/templates/settings-sidebar" type="supporting">
+                              Privacy Policy
+                            </Link>
+                            .
+                          </Text>
+                        </VStack>
+                      </HStack>
+                    </Card>
+                  </VStack>
+                </VStack>
+              </VStack>
+            )}
+
+            {activeNav === 'Notifications' && (
+              <VStack gap={6}>
+                {!isNarrow && <Heading level={2}>Notifications</Heading>}
+                <VStack gap={0}>
+                  <Heading level={3}>Messages</Heading>
+                  <VStack style={rowPadding}>
+                    <Switch
+                      label="Email notifications"
+                      description="Listing updates, trip reminders, and account activity."
+                      value={emailNotif}
+                      onChange={setEmailNotif}
+                      labelPosition="start"
+                      labelSpacing="spread"
+                    />
+                  </VStack>
+                  <Divider />
+                  <VStack style={rowPadding}>
+                    <Switch
+                      label="Push notifications"
+                      description="Instant alerts for messages and reservation requests."
+                      value={pushNotif}
+                      onChange={setPushNotif}
+                      labelPosition="start"
+                      labelSpacing="spread"
+                    />
+                  </VStack>
+                  <Divider />
+                </VStack>
+              </VStack>
+            )}
+
+            {activeNav === 'Taxes' && (
+              <VStack gap={6}>
+                {!isNarrow && <Heading level={2}>Taxes</Heading>}
+                <VStack gap={0}>
+                  <Heading level={3}>Tax documents</Heading>
+                  <Divider />
+                  {TAX_ROWS.map(row => (
+                    <InfoRowItem key={row.label} {...row} />
+                  ))}
+                </VStack>
+              </VStack>
+            )}
+
+            {activeNav === 'Payments' && (
+              <VStack gap={6}>
+                {!isNarrow && <Heading level={2}>Payments</Heading>}
+                <VStack gap={0}>
+                  <Heading level={3}>Payouts</Heading>
+                  <Divider />
+                  {PAYOUT_ROWS.map(row => (
+                    <InfoRowItem key={row.label} {...row} />
+                  ))}
+                </VStack>
+              </VStack>
+            )}
+
+            {activeNav === 'Travel for work' && (
+              <VStack gap={6}>
+                {!isNarrow && <Heading level={2}>Travel for work</Heading>}
+                <VStack gap={0}>
+                  <Heading level={3}>Work trips</Heading>
+                  <VStack style={rowPadding}>
+                    <Switch
+                      label="Show work-trip options at checkout"
+                      description="Add a work email to expense trips and unlock business-ready listings."
+                      value={workTrips}
+                      onChange={setWorkTrips}
+                      labelPosition="start"
+                      labelSpacing="spread"
+                    />
+                  </VStack>
+                  <Divider />
+                </VStack>
+              </VStack>
+            )}
+
+            {activeNav === 'Professional hosting tools' && (
+              <VStack gap={6}>
+                {!isNarrow && (
+                  <Heading level={2}>Professional hosting tools</Heading>
+                )}
+                <Card variant="muted">
+                  <HStack gap={4} vAlign="start">
+                    <Center width={48} height={48} style={iconBox}>
+                      <Icon icon={Wrench} />
+                    </Center>
+                    <VStack gap={1}>
+                      <Text type="body" weight="bold">
+                        Tools for professional hosts
+                      </Text>
+                      <Text type="supporting" color="secondary">
+                        Manage multiple listings, route tasks to co-hosts, and
+                        review consolidated payouts from one place.
+                      </Text>
+                    </VStack>
+                  </HStack>
+                </Card>
+              </VStack>
+            )}
+          </VStack>
+        </LayoutContent>
+      }
+    />
+  );
+}