45 lines
1.0 KiB
TypeScript
45 lines
1.0 KiB
TypeScript
|
import { Checkbox, Flex, Skeleton } from '@chakra-ui/react'
|
||
|
|
import React from 'react'
|
||
|
|
|
||
|
|
type LoadingRowsProps = {
|
||
|
|
totalColumns: number
|
||
|
|
}
|
||
|
|
|
||
|
|
export const LoadingRows = ({ totalColumns }: LoadingRowsProps) => {
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
{Array.from(Array(3)).map((row, idx) => (
|
||
|
|
<Flex as="tr" key={idx}>
|
||
|
|
<Flex
|
||
|
|
key={idx}
|
||
|
|
py={2}
|
||
|
|
px={4}
|
||
|
|
border="1px"
|
||
|
|
as="td"
|
||
|
|
borderColor="gray.200"
|
||
|
|
flex="0"
|
||
|
|
>
|
||
|
|
<Checkbox isDisabled />
|
||
|
|
</Flex>
|
||
|
|
{Array.from(Array(totalColumns)).map((cell, idx) => {
|
||
|
|
return (
|
||
|
|
<Flex
|
||
|
|
key={idx}
|
||
|
|
py={2}
|
||
|
|
px={4}
|
||
|
|
border="1px"
|
||
|
|
as="td"
|
||
|
|
borderColor="gray.200"
|
||
|
|
flex="1"
|
||
|
|
align="center"
|
||
|
|
>
|
||
|
|
<Skeleton height="5px" w="full" />
|
||
|
|
</Flex>
|
||
|
|
)
|
||
|
|
})}
|
||
|
|
</Flex>
|
||
|
|
))}
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|