Tab Bar

TabBar.tsx

import * as React from "react"
import { Frame, Stack } from "framer"

function capitalize(name) {
    // Capitalizes a word: feed -> Feed
    return name.charAt(0).toUpperCase() + name.slice(1)
}

function Button({ title, active, onTap }) {
    const opacity = active ? 1 : 0.35
    const style = { color: "#fff", fontSize: 18 }
    return (
        <Frame height={80} onTap={onTap} opacity={opacity} style={style}>
            {capitalize(title)}
        </Frame>
    )
}

export function TabBar() {
    // This remembers the active tab, defaults to home
    const [active, setActive] = React.useState("home")

    // This generates title, active and onTap props for a given name
    function propsFor(title) {
        return {
            title,
            active: active === title,
            onTap: () => setActive(title),
        }
    }

    // A simple stack with 4 different buttons
    return (
        <Stack gap={0}>
            <Button {...propsFor("home")} />
            <Button {...propsFor("feed")} />
            <Button {...propsFor("profile")} />
            <Button {...propsFor("settings")} />
        </Stack>
    )
}