diff options
Diffstat (limited to 'frontend/app/components/FoldableBorderedContainerWithCaption.tsx')
| -rw-r--r-- | frontend/app/components/FoldableBorderedContainerWithCaption.tsx | 64 |
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> + ); } |
