feat(frontend): make container foldable

1 files changed, 45 insertions, 0 deletions

diff --git a/frontend/app/components/FoldableBorderedContainerWithCaption.tsx b/frontend/app/components/FoldableBorderedContainerWithCaption.tsx
new file mode 100644
index 0000000..2d21b61
--- /dev/null
+++ b/frontend/app/components/FoldableBorderedContainerWithCaption.tsx
@@ -0,0 +1,45 @@
+import { faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState } from "react";
+import BorderedContainer from "./BorderedContainer";
+
+type Props = {
+	caption: string;
+	children: React.ReactNode;
+};
+
+export default function FoldableBorderedContainerWithCaption({
+	caption,
+	children,
+}: Props) {
+	const [isOpen, setIsOpen] = useState(true);
+
+	const handleToggle = () => {
+		setIsOpen((prev) => !prev);
+	};
+
+	return (
+		<BorderedContainer>
+			<div className="flex flex-col gap-4">
+				<div className="flex items-center">
+					<div className="flex-1 text-center">
+						<h2 className="text-lg font-semibold">{caption}</h2>
+					</div>
+					<div className="flex-shrink-0">
+						<button
+							onClick={handleToggle}
+							className="p-1 bg-gray-50 border-1 border-gray-300 rounded-sm"
+						>
+							<FontAwesomeIcon
+								icon={isOpen ? faChevronUp : faChevronDown}
+								fixedWidth
+								className="text-gray-500"
+							/>
+						</button>
+					</div>
+				</div>
+				<div className={isOpen ? "" : "hidden"}>{children}</div>
+			</div>
+		</BorderedContainer>
+	);
+}