Add expandable functionality to Panel component

src/shared-ui/Panel.tsx

@@ -1,14 +1,31 @@
-import type { PropsWithChildren } from "react";
+import { useId, useState, type PropsWithChildren } from "react";
 
 interface PanelProps extends PropsWithChildren {
   title: string;
+  defaultExpanded?: boolean;
 }
 
-export function Panel({ title, children }: PanelProps) {
+export function Panel({ title, children, defaultExpanded = true }: PanelProps) {
+  const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+  const bodyId = useId();
+
   return (
-    <section className="panel">
-      <div className="panel__header">{title}</div>
-      <div className="panel__body">{children}</div>
+    <section className={`panel ${isExpanded ? "" : "panel--collapsed"}`}>
+      <button
+        className="panel__header"
+        type="button"
+        aria-expanded={isExpanded}
+        aria-controls={bodyId}
+        onClick={() => setIsExpanded((expanded) => !expanded)}
+      >
+        <span className={`panel__chevron ${isExpanded ? "panel__chevron--expanded" : ""}`} aria-hidden="true" />
+        <span>{title}</span>
+      </button>
+      {isExpanded ? (
+        <div className="panel__body" id={bodyId}>
+          {children}
+        </div>
+      ) : null}
     </section>
   );
 }