lookingglass/hyperglass/ui/components/table/cell.tsx
2021-12-17 21:08:45 -07:00

27 lines
694 B
TypeScript

import { chakra } from '@chakra-ui/react';
import { useColorValue } from '~/context';
import type { TTableCell } from './types';
export const TableCell = (props: TTableCell): JSX.Element => {
const { bordersVertical = [false, 0], align, ...rest } = props;
const [doVerticalBorders, index] = bordersVertical;
const borderLeftColor = useColorValue('blackAlpha.100', 'whiteAlpha.100');
let borderProps = {};
if (doVerticalBorders && index !== 0) {
borderProps = { borderLeft: '1px solid', borderLeftColor };
}
return (
<chakra.td
p={4}
m={0}
w="1%"
textAlign={align}
whiteSpace="nowrap"
{...borderProps}
{...rest}
/>
);
};