diff --git a/apps/client/src/common/components/state/Empty.tsx b/apps/client/src/common/components/state/Empty.tsx index 08662b034..11299a381 100644 --- a/apps/client/src/common/components/state/Empty.tsx +++ b/apps/client/src/common/components/state/Empty.tsx @@ -11,8 +11,7 @@ interface EmptyProps { className?: string; } -export default function Empty(props: EmptyProps) { - const { text, className, ...rest } = props; +export default function Empty({ text, className, ...rest }: EmptyProps) { return (
diff --git a/apps/client/src/common/components/state/EmptyTableBody.module.scss b/apps/client/src/common/components/state/EmptyTableBody.module.scss new file mode 100644 index 000000000..d51f7e752 --- /dev/null +++ b/apps/client/src/common/components/state/EmptyTableBody.module.scss @@ -0,0 +1,19 @@ +.emptyContainer { + width: 100%; + color: $white-10; + + .emptyCell { + margin-inline: auto; + text-align: center; + } + + .empty { + width: 100%; + opacity: 0.8; + } + + .text { + font-weight: 600; + font-size: 2em; + } +} diff --git a/apps/client/src/common/components/state/EmptyTableBody.tsx b/apps/client/src/common/components/state/EmptyTableBody.tsx new file mode 100644 index 000000000..98a771d4f --- /dev/null +++ b/apps/client/src/common/components/state/EmptyTableBody.tsx @@ -0,0 +1,20 @@ +import EmptyImage from '../../../assets/images/empty.svg?react'; + +import style from './EmptyTableBody.module.scss'; + +interface EmptyTableBodyProps { + text: string; +} + +export default function EmptyTableBody({ text }: EmptyTableBodyProps) { + return ( + + + + + {text && {text}} + + + + ); +} diff --git a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/CuesheetBody.tsx b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/CuesheetBody.tsx index e994931ea..123bcf94f 100644 --- a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/CuesheetBody.tsx +++ b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/CuesheetBody.tsx @@ -13,6 +13,7 @@ import { import { colourToHex, cssOrHexToColour } from 'ontime-utils'; import { RUNDOWN } from '../../../../common/api/constants'; +import EmptyTableBody from '../../../../common/components/state/EmptyTableBody'; import { useSelectedEventId } from '../../../../common/hooks/useSocket'; import { getAccessibleColour } from '../../../../common/utils/styleUtils'; import { usePersistedCuesheetOptions } from '../../cuesheet.options'; @@ -47,6 +48,10 @@ export default function CuesheetBody({ rowModel, selectedRef, table }: CuesheetB }; }, []); + if (rowModel.rows.length === 0) { + return ; + } + return ( {rowModel.rows.map((row, index) => {