Declarative React

interface SwitchCaseProps<T extends string> {
  value: T
  caseBy: Record<T, React.ReactNode>
  defaultComponent?: React.ReactNode
}
 
export function SwitchCase<T extends string>({ value, caseBy, defaultComponent }: SwitchCaseProps<T>) {
  return caseBy[value] || defaultComponent || null
}

import { PropsWithChildren } from 'react'
 
interface Props extends PropsWithChildren {
  isEmpty: boolean
  EmptyComponent: React.ReactNode
}
 
export function Empty({ isEmpty, EmptyComponent, children }: Props) {
  return isEmpty ? EmptyComponent : children
}

import { Skeleton, SkeletonProps } from '@mui/material'
 
interface Props extends SkeletonProps {
  isLoading: boolean
}
 
export function Loading({ isLoading, children, ...props }: Props) {
  if (!isLoading) {
    return <>{children}</>
  }
 
  return <Skeleton {...props} />
}

import { TableCell, TableRow } from '@mui/material'
import { PropsWithChildren } from 'react'
 
interface Props extends PropsWithChildren {
  isEmpty: boolean
  colSpan: number
  emptyContent: string
}
 
export function TableBodyEmpty({ isEmpty, colSpan, emptyContent, children }: Props) {
  if (!isEmpty) {
    return <>{children}</>
  }
 
  return (
    <TableRow>
      <TableCell colSpan={colSpan} align="center">
        {emptyContent}
      </TableCell>
    </TableRow>
  )
}

import { Skeleton, TableCell, TableRow } from '@mui/material'
import { PropsWithChildren } from 'react'
 
interface Props extends PropsWithChildren {
  isLoading: boolean
  rows: number
  colSpan: number
  height?: number
}
 
export function TableBodyLoading({ isLoading, rows, colSpan, height, children }: Props) {
  if (!isLoading) {
    return <>{children}</>
  }
 
  return (
    <>
      {Array.from({ length: rows }, (_, index) => (
        <TableRow key={index} sx={{ m: 0, p: 0 }}>
          <TableCell colSpan={colSpan} sx={{ m: 0, p: 0, px: 3, height: height }}>
            <Skeleton width="100%" height="100%" />
          </TableCell>
        </TableRow>
      ))}
    </>
  )
}