aboutsummaryrefslogtreecommitdiffhomepage
path: root/frontend/app/components/FoldableBorderedContainerWithCaption.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/app/components/FoldableBorderedContainerWithCaption.tsx')
-rw-r--r--frontend/app/components/FoldableBorderedContainerWithCaption.tsx64
1 files changed, 32 insertions, 32 deletions
diff --git a/frontend/app/components/FoldableBorderedContainerWithCaption.tsx b/frontend/app/components/FoldableBorderedContainerWithCaption.tsx
index 2d21b61..49b1d2e 100644
--- a/frontend/app/components/FoldableBorderedContainerWithCaption.tsx
+++ b/frontend/app/components/FoldableBorderedContainerWithCaption.tsx
@@ -4,42 +4,42 @@ import React, { useState } from "react";
import BorderedContainer from "./BorderedContainer";
type Props = {
- caption: string;
- children: React.ReactNode;
+ caption: string;
+ children: React.ReactNode;
};
export default function FoldableBorderedContainerWithCaption({
- caption,
- children,
+ caption,
+ children,
}: Props) {
- const [isOpen, setIsOpen] = useState(true);
+ const [isOpen, setIsOpen] = useState(true);
- const handleToggle = () => {
- setIsOpen((prev) => !prev);
- };
+ 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>
- );
+ 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>
+ );
}