-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.tsx
115 lines (100 loc) · 2.45 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
import { ReactNode, ReactElement, ComponentProps } from 'react';
import { css } from 'styled-components';
import FlexBox from '@components/common/FlexBox';
import Text from '@components/common/Text';
type TableDefaultProps = {
children: ReactElement | ReactElement[];
};
export interface TableProps extends TableDefaultProps {
caption: string;
cellWidth?: string[];
children: ReactElement | ReactElement[];
}
const Table = ({ caption, cellWidth, children }: TableProps) => (
<table
css={css`
width: 100%;
overflow: hidden;
border-top: ${({ theme }) => `0.1rem solid ${theme.palette.borderLine}`};
table-layout: fixed;
`}
>
<caption
css={css`
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip-path: polygon(0 0, 0 0, 0 0);
`}
>
{caption}
</caption>
{cellWidth && (
<colgroup>
{cellWidth?.map((width, index) => (
<col key={index} width={width} />
))}
</colgroup>
)}
{children}
</table>
);
const Thead = ({ children }: TableDefaultProps) => <thead>{children}</thead>;
const Tbody = ({ children }: TableDefaultProps) => (
<tbody
css={css`
tr:hover {
background: ${({ theme }) => theme.palette.hoverColor};
}
`}
>
{children}
</tbody>
);
const Tr = ({ children }: TableDefaultProps) => (
<tr
css={css`
border-bottom: ${({ theme }) =>
`0.1rem solid ${theme.palette.borderLine}`};
`}
>
{children}
</tr>
);
type CellSX = {
width?: string;
justifyContent?: 'center' | 'flex-start';
};
const flexCss = {
justifyContent: 'center',
alignItems: 'center',
gap: '10px',
} as Pick<ComponentProps<typeof FlexBox>, 'sx'>;
type ThProps = {
colSpan?: number;
sx?: CellSX;
children: ReactNode;
};
const Th = ({ sx = {}, children, ...restProps }: ThProps) => (
<th scope="col" css={{ padding: '1.7rem 2rem' }} {...restProps}>
<Text as="div" sx={{ fontWeight: 'bold' }}>
<FlexBox sx={{ ...flexCss, ...sx }}>{children}</FlexBox>
</Text>
</th>
);
export interface TdProps extends ThProps {
rowSpan?: number;
}
const Td = ({ sx = {}, children, ...restProps }: TdProps) => (
<td css={{ padding: '1.7rem 2rem' }} {...restProps}>
<FlexBox sx={{ ...flexCss, ...sx }}>{children}</FlexBox>
</td>
);
Table.Thead = Thead;
Table.Tbody = Tbody;
Table.Tr = Tr;
Table.Th = Th;
Table.Td = Td;
export default Table;