1import { Layer } from "../common"
 2import { interactive, toggleable } from "../element"
 3import { Border, text } from "../style_tree/components"
 4
 5type TabProps = {
 6    layer: Layer
 7}
 8
 9export const tab = ({ layer }: TabProps) => {
10    const active_color = text(layer, "sans", "base").color
11    const inactive_border: Border = {
12        color: "#FFFFFF00",
13        width: 1,
14        bottom: true,
15        left: false,
16        right: false,
17        top: false,
18    }
19    const active_border: Border = {
20        ...inactive_border,
21        color: active_color,
22    }
23
24    const base = {
25        ...text(layer, "sans", "variant"),
26        padding: {
27            top: 8,
28            left: 8,
29            right: 8,
30            bottom: 6,
31        },
32        border: inactive_border,
33    }
34
35    const i = interactive({
36        state: {
37            default: {
38                ...base,
39            },
40            hovered: {
41                ...base,
42                ...text(layer, "sans", "base", "hovered"),
43            },
44            clicked: {
45                ...base,
46                ...text(layer, "sans", "base", "pressed"),
47            },
48        },
49    })
50
51    return toggleable({
52        base: i,
53        state: {
54            active: {
55                default: {
56                    ...i,
57                    ...text(layer, "sans", "base"),
58                    border: active_border,
59                },
60                hovered: {
61                    ...i,
62                    ...text(layer, "sans", "base", "hovered"),
63                    border: active_border,
64                },
65                clicked: {
66                    ...i,
67                    ...text(layer, "sans", "base", "pressed"),
68                    border: active_border,
69                },
70            },
71        },
72    })
73}