-
Notifications
You must be signed in to change notification settings - Fork 160
/
index.tsx
86 lines (85 loc) · 2.06 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
import { FC, PropsWithChildren, ReactNode } from "react";
import { useAntdTheme } from "@lepton-dashboard/hooks/use-antd-theme";
import { css } from "@emotion/react";
import { EmotionProps } from "@lepton-dashboard/interfaces/emotion-props";
export const Card: FC<
PropsWithChildren<
{
title?: ReactNode;
titleIcon?: ReactNode;
extra?: ReactNode;
borderless?: boolean;
shadowless?: boolean;
paddingless?: boolean;
} & EmotionProps
>
> = ({
children,
title,
titleIcon,
extra,
borderless = false,
shadowless = false,
paddingless = false,
className,
}) => {
const theme = useAntdTheme();
return (
<div
css={css`
display: flex;
flex-direction: column;
overflow: hidden;
background-color: ${theme.colorBgContainer};
border-color: ${theme.colorBorder};
border-radius: ${theme.borderRadius}px;
border-style: solid;
border-width: ${borderless ? 0 : "1px"};
box-shadow: ${shadowless ? "none" : theme.boxShadowTertiary};
`}
>
{(title || extra) && (
<div
css={css`
flex: 0 0 48px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid ${theme.colorBorder};
background-color: ${theme.colorBgContainer};
color: ${theme.colorTextHeading};
font-size: 14px;
font-weight: 500;
padding: 0 16px;
`}
>
<div
css={css`
display: flex;
`}
>
{titleIcon && (
<div
css={css`
margin-right: 12px;
`}
>
{titleIcon}
</div>
)}
{title}
</div>
<div>{extra}</div>
</div>
)}
<div
className={className}
css={css`
padding: ${paddingless ? 0 : "16px"};
`}
>
{children}
</div>
</div>
);
};