59 lines
1.5 KiB
TypeScript
59 lines
1.5 KiB
TypeScript
import { Theme, StyleSets } from "../common"
|
|
import { interactive } from "../element"
|
|
import { InteractiveState } from "../element/interactive"
|
|
import { background, foreground } from "../style_tree/components"
|
|
|
|
interface TabBarButtonOptions {
|
|
icon: string
|
|
color?: StyleSets
|
|
}
|
|
|
|
type TabBarButtonProps = TabBarButtonOptions & {
|
|
state?: Partial<Record<InteractiveState, Partial<TabBarButtonOptions>>>
|
|
}
|
|
|
|
export function tab_bar_button(
|
|
theme: Theme,
|
|
{ icon, color = "base" }: TabBarButtonProps
|
|
) {
|
|
const button_spacing = 8
|
|
|
|
return interactive({
|
|
base: {
|
|
icon: {
|
|
color: foreground(theme.middle, color),
|
|
asset: icon,
|
|
dimensions: {
|
|
width: 15,
|
|
height: 15,
|
|
},
|
|
},
|
|
container: {
|
|
corner_radius: 4,
|
|
padding: {
|
|
top: 4,
|
|
bottom: 4,
|
|
left: 4,
|
|
right: 4,
|
|
},
|
|
margin: {
|
|
left: button_spacing / 2,
|
|
right: button_spacing / 2,
|
|
},
|
|
},
|
|
},
|
|
state: {
|
|
hovered: {
|
|
container: {
|
|
background: background(theme.middle, color, "hovered"),
|
|
},
|
|
},
|
|
clicked: {
|
|
container: {
|
|
background: background(theme.middle, color, "pressed"),
|
|
},
|
|
},
|
|
},
|
|
})
|
|
}
|