jamsrui_collapsible_component_quickstart_with_trigger_and_content.ts

1import React from "react";
2import {
3  Collapsible,
4  CollapsibleContent,
5  CollapsibleTrigger,
6} from "@jamsrui/collapsible";
7
8export const CollapsibleDemo = () => {
9  return (
10    <Collapsible className="w-[350px] space-y-2">
11      <div className="flex items-center justify-between space-x-4 px-4">
12        <h4 className="text-sm font-semibold">
13          @peduarte starred 3 repositories
14        </h4>
15        <CollapsibleTrigger asChild>
16          <button className="rounded-md border p-2 hover:bg-slate-100">
17            Toggle
18          </button>
19        </CollapsibleTrigger>
20      </div>
21      <div className="rounded-md border px-4 py-3 font-mono text-sm">
22        @radix-ui/primitives
23      </div>
24      <CollapsibleContent className="space-y-2">
25        <div className="rounded-md border px-4 py-3 font-mono text-sm">
26          @radix-ui/colors
27        </div>
28        <div className="rounded-md border px-4 py-3 font-mono text-sm">
29          @stitches/react
30        </div>
31      </CollapsibleContent>
32    </Collapsible>
33  );
34};
35
36export default CollapsibleDemo;