Collapsible

1import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "passport-ui";
2import { Button } from "passport-ui";
3import { ChevronsUpDown } from "lucide-react";

1<Collapsible className="w-sm list-container">
2  <div className="flex justify-between items-center">
3    <h4>Do you know today's date?</h4>
4    <CollapsibleTrigger asChild>
5      <Button variant="ghost">
6        <ChevronsUpDown />
7        <span className="sr-only">Toggle</span>
8      </Button>
9    </CollapsibleTrigger>
10  </div>
11  <CollapsibleContent className="flex flex-col gap-2">
12    <div className="meta-container">
13      <p>Today's date is {new Date().toLocaleDateString()}.</p>
14      <p>The current time is {new Date().toLocaleTimeString()}.</p>
15    </div>
16  </CollapsibleContent>
17</Collapsible>