// apps/docs/examples/ui/notice-screen.tsx'use client';
import {useState} from 'react';import {LockIcon} from 'lucide-react';
import {ErrorScreen} from '@workspace/active-ui/components/composed/error-screen';import {NoticeScreen} from '@workspace/active-ui/components/composed/notice-screen';import {Button} from '@workspace/active-ui/components/primitives/button';import {  ToggleGroup,  ToggleGroupItem,} from '@workspace/active-ui/components/primitives/toggle-group';
/** * Two screens that each carry one message: a refusal on the neutral notice * screen, and an error on the error screen with its reference. Both fill the * viewport in an application; here `className` bounds them to the frame. * The buttons do nothing. */export default function NoticeScreenExample() {  const [screen, setScreen] = useState('notice');  return (    <div className="grid w-full gap-4">      <ToggleGroup        aria-label="Screen"        variant="outline"        value={[screen]}        onValueChange={(next) => next[0] && setScreen(next[0])}      >        <ToggleGroupItem value="notice">NoticeScreen</ToggleGroupItem>        <ToggleGroupItem value="error">ErrorScreen</ToggleGroupItem>      </ToggleGroup>      <div className="overflow-hidden rounded-md border">        {screen === 'notice' ? (          <NoticeScreen            className="min-h-0 py-10"            icon={<LockIcon />}            title="No access"            description="You need the administrator role to open this page."            actions={<Button className="w-full">Back to the overview</Button>}          />        ) : (          <ErrorScreen            className="min-h-0 py-10"            title="Something went wrong"            description="The page could not be loaded. Try again in a moment."            actions={              <>                <Button className="w-full">Try again</Button>                <Button variant="outline" className="w-full">                  Back to the overview                </Button>              </>            }            referenceLabel="Reference:"            reference="ERR-a1b2c3d4"          />        )}      </div>    </div>  );}