diff --git a/services/frontend/src/components/Records.tsx b/services/frontend/src/components/Records.tsx index 41b63f6..9a256a8 100644 --- a/services/frontend/src/components/Records.tsx +++ b/services/frontend/src/components/Records.tsx @@ -1,11 +1,5 @@ import { styled } from "@mui/joy"; -import { - Fragment, - FunctionComponent, - ReactElement, - useCallback, - useState -} from "react"; +import { Fragment, FunctionComponent, ReactElement, useCallback } from "react"; import { ChevronDownIcon, ChevronUpIcon, @@ -19,6 +13,7 @@ import { useAccordionState } from "../hooks"; import { useParams } from "react-router-dom"; export interface IRecordsProps { + collapsible?: boolean; defaultOpen?: boolean; title: string; name: string; @@ -96,6 +91,7 @@ const Records: FunctionComponent = ( props: IRecordsProps ): ReactElement => { const { + collapsible = true, defaultOpen = false, title, name, @@ -138,13 +134,15 @@ const Records: FunctionComponent = ( return ( - {title} - - {open && } - {!open && } - + {title && {title}} + {collapsible && ( + + {open && } + {!open && } + + )} - {open && !empty && ( + {(!collapsible || open) && !empty && ( {items.map((_: unknown, index: number) => ( @@ -162,9 +160,11 @@ const Records: FunctionComponent = ( )} - {open && empty && No items available} + {(!collapsible || open) && empty && ( + No items available + )} - {open && ( + {(!collapsible || open) && (