// Copyright (c) Meta Platforms, Inc. and affiliates. 'use client'; import {useState} from 'react'; import {BottomSheet} from '@astryxdesign/core/BottomSheet'; import {Button} from '@astryxdesign/core/Button'; import {CheckboxList, CheckboxListItem} from '@astryxdesign/core/CheckboxList'; import {Divider} from '@astryxdesign/core/Divider'; import {Heading} from '@astryxdesign/core/Heading'; import {Section} from '@astryxdesign/core/Section'; import {HStack, VStack} from '@astryxdesign/core/Stack'; import {Text} from '@astryxdesign/core/Text'; import {RadioList, RadioListItem} from '@astryxdesign/core/RadioList'; type NotificationSheetHeight = 'hug' | 'capped'; /** * Each step is a standalone sheet. Closing the open step and opening the * next one in the same update (one `step` state value) replaces it in place. */ interface StepSheetProps { isOpen: boolean; onOpenChange: (isOpen: boolean) => void; hasScrim: boolean; height: NotificationSheetHeight; } interface NotificationOverviewSheetProps extends StepSheetProps { onCancel: () => void; onContinue: () => void; } function NotificationOverviewSheet({ isOpen, onOpenChange, hasScrim, height, onCancel, onContinue, }: NotificationOverviewSheetProps) { return (

Set up notifications Step 1 of 3 Stay informed about activity that matters without checking back throughout the day. Important activity Know when someone mentions you or needs your attention. Timely reminders Get a reminder before work reaches its due date. Useful summaries Catch up on anything you may have missed.

); } interface NotificationFrequencySheetProps extends StepSheetProps { onBack: () => void; onContinue: () => void; } function NotificationFrequencySheet({ isOpen, onOpenChange, hasScrim, height, onBack, onContinue, }: NotificationFrequencySheetProps) { const [frequency, setFrequency] = useState('daily'); return (

How often? Step 2 of 3

); } interface NotificationChannelsSheetProps extends StepSheetProps { onBack: () => void; onFinish: () => void; } function NotificationChannelsSheet({ isOpen, onOpenChange, hasScrim, height, onBack, onFinish, }: NotificationChannelsSheetProps) { const [email, setEmail] = useState(true); const [pushNotifications, setPushNotifications] = useState(true); const [textMessages, setTextMessages] = useState(false); return (

Where should we notify you? Step 3 of 3 Choose any combination. You can change these preferences later.

); } type Step = 'overview' | 'frequency' | 'channels' | null; interface MultiStepExampleProps { height: NotificationSheetHeight; hasScrim?: boolean; } function MultiStepExample({height, hasScrim = true}: MultiStepExampleProps) { // One state value names the open step. Moving on closes one sheet and // opens the next in the same update, which replaces it in place. const [step, setStep] = useState(null); const stepProps = (id: Step) => ({ isOpen: step === id, onOpenChange: (isOpen: boolean) => { // Clear the step only if it is still the open one: a step that closes // because the person moved on must not undo the move. if (!isOpen) { setStep(current => (current === id ? null : current)); } }, hasScrim, height, }); return ( <>