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"), }, }, }, })}
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"),
},
},
},
})
}