1import { Theme, StyleSets } from "../common"
 2import { interactive } from "../element"
 3import { InteractiveState } from "../element/interactive"
 4import { background, foreground } from "../style_tree/components"
 5
 6interface TabBarButtonOptions {
 7    icon: string
 8    color?: StyleSets
 9}
10
11type TabBarButtonProps = TabBarButtonOptions & {
12    state?: Partial<Record<InteractiveState, Partial<TabBarButtonOptions>>>
13}
14
15export function tab_bar_button(theme: Theme, { icon, color = "base" }: TabBarButtonProps) {
16    const button_spacing = 8
17
18    return (
19        interactive({
20            base: {
21                icon: {
22                    color: foreground(theme.middle, color),
23                    asset: icon,
24                    dimensions: {
25                        width: 15,
26                        height: 15,
27                    },
28                },
29                container: {
30                    corner_radius: 4,
31                    padding: {
32                        top: 4, bottom: 4, left: 4, right: 4
33                    },
34                    margin: {
35                        left: button_spacing / 2,
36                        right: button_spacing / 2,
37                    },
38                },
39            },
40            state: {
41                hovered: {
42                    container: {
43                        background: background(theme.middle, color, "hovered"),
44
45                    }
46                },
47                clicked: {
48                    container: {
49                        background: background(theme.middle, color, "pressed"),
50                    }
51                },
52            },
53        })
54    )
55}