56 lines
1.6 KiB
TypeScript
56 lines
1.6 KiB
TypeScript
import { ColorScheme, 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: ColorScheme, { 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"),
|
|
}
|
|
},
|
|
},
|
|
})
|
|
)
|
|
}
|