The overview of an account

// apps/docs/examples/ui/overview-row.tsx'use client';
import {useState} from 'react';
import {FormSection} from '@workspace/active-ui/components/composed/form-section';import {  OverviewRow,  OverviewRows,} from '@workspace/active-ui/components/composed/overview-row';import {StatusBadge} from '@workspace/active-ui/components/composed/status-badge';import {Button} from '@workspace/active-ui/components/primitives/button';
/** * The overview of one account: a label per row, its state or value on the * right, and the one action that belongs to it. Below the `sm` width each * row stacks. */export default function OverviewRowExample() {  const [active, setActive] = useState(true);  return (    <FormSection title="Account" className="w-full max-w-xl">      <OverviewRows>        <OverviewRow          label="Status"          action={            <Button              size="sm"              variant="outline"              onClick={() => setActive(!active)}            >              {active ? 'Deactivate' : 'Activate'}            </Button>          }        >          <StatusBadge tone={active ? 'success' : 'neutral'}>            {active ? 'Active' : 'Inactive'}          </StatusBadge>        </OverviewRow>        <OverviewRow          label="Two-step sign-in"          description="With an authenticator app"        >          On        </OverviewRow>        <OverviewRow label="Created">16 May 2026</OverviewRow>        <OverviewRow          label="Sign-in history"          action={            <Button size="sm" variant="outline">              View            </Button>          }        />      </OverviewRows>    </FormSection>  );}