Show the rest of a list

// apps/docs/examples/ui/collapsible.tsx'use client';
import {useState} from 'react';import {ChevronsUpDownIcon} from 'lucide-react';
import {Button} from '@workspace/active-ui/components/primitives/button';import {  Collapsible,  CollapsibleContent,  CollapsibleTrigger,} from '@workspace/active-ui/components/primitives/collapsible';
const RULES = [  'Contribution rate 7.5% of the pensionable salary',  'A franchise set each year by law',  'Retirement at the state pension age',  'Partner pension of 70% of the old-age pension',];
/** * One section that shows and hides itself: the first rule is always shown, * the rest behind a button that says what it does. The open state is * controlled here, to change the label. */export default function CollapsibleExample() {  const [open, setOpen] = useState(false);  return (    <Collapsible      open={open}      onOpenChange={setOpen}      className="flex w-full max-w-sm flex-col gap-2"    >      <div className="flex items-center justify-between gap-4">        <h4 className="text-sm font-semibold">Scheme rules</h4>        <CollapsibleTrigger render={<Button variant="ghost" size="sm" />}>          <ChevronsUpDownIcon data-icon="inline-start" aria-hidden />          {open ? 'Show less' : `Show all ${RULES.length}`}        </CollapsibleTrigger>      </div>      <p className="rounded-md border px-3 py-2 text-sm">{RULES[0]}</p>      <CollapsibleContent className="flex flex-col gap-2">        {RULES.slice(1).map((rule) => (          <p key={rule} className="rounded-md border px-3 py-2 text-sm">            {rule}          </p>        ))}      </CollapsibleContent>    </Collapsible>  );}