Add collapsible component

src/components/Collapse/Collapse.css

@@ -0,0 +1,30 @@
+.collapse {
+  width: 100%;
+}
+
+.collapse-summary {
+  color: var(--codex-color-primary);
+  font-weight: 600;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.collapse-summary:hover {
+  text-decoration: underline;
+  opacity: 0.7;
+  text-decoration-thickness: 2px;
+}
+
+.collapse-details {
+  max-height: 0;
+  transition: max-height 0.2s;
+  overflow: hidden;
+  word-break: break-word;
+  color: var(--codex-color);
+}
+
+.collapse-details[aria-expanded] {
+  max-height: 50px;
+}

src/components/Collapse/Collapse.tsx

@@ -0,0 +1,46 @@
+import { useState } from "react";
+import "./Collapse.css";
+import { attributes } from "../utils/attributes";
+
+type Props = {
+  summary: string;
+  details: string;
+  className?: string;
+};
+
+export function Collapse({ summary, details, className = "" }: Props) {
+  const [expanded, setExpanded] = useState(false);
+
+  const onClick = () => setExpanded(!expanded);
+
+  return (
+    <div className={"collapse " + className}>
+      <span className="collapse-summary" onClick={onClick}>
+        {summary}
+        <ArrowRight />
+      </span>
+      <div
+        {...attributes({ "aria-expanded": expanded })}
+        className={"collapse-details"}
+      >
+        {details}
+      </div>
+    </div>
+  );
+}
+
+const ArrowRight = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1rem"
+    height="1rem"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="m6 9 6 6 6-6"></path>
+  </svg>
+);

stories/Collapse.stories.css

@@ -0,0 +1,3 @@
+.collapse-demo {
+  min-width: 250px;
+}

stories/Collapse.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Collapse } from "../src/components/Collapse/Collapse";
+import "./Collapse.stories.css";
+
+const meta = {
+  title: "Components/Collapse",
+  component: Collapse,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {},
+} satisfies Meta<typeof Collapse>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    summary: "Read more",
+    details: "More details for collapse component",
+    className: "collapse-demo",
+  },
+};