Button Container Component: FramerX

SectionButtonContainer.tsx

import * as React from "react"
import {
    Frame,
    useCycle,
    Stack,
    addPropertyControls,
    ControlType,
} from "framer"
import { SelectionButton } from "./SelectionButton"
import { colors } from "./colors"

// Open Preview (CMD + P)
// API Reference: https://www.framer.com/api

interface Props {
    columns: boolean
    choices: string[]
    isResolution: boolean
    resolutionColors: string[]
    primary: boolean
}
export function SectionButtonContainer(props: Props) {
    const [choices, setChoices] = React.useState(props.choices)
    const [tagColors, setTagColors] = React.useState(props.resolutionColors)

    React.useEffect(() => {
        if (choices !== props.choices) {
            setChoices(props.choices)
        }

        if (tagColors !== props.resolutionColors) {
            setTagColors(props.resolutionColors)
        }
    }, [props.choices, props.resolutionColors])

    console.log(colors)
    console.log(choices)

    const ParentStyle: React.CSSProperties = {
        width: "100%",
        display: "grid",
        gridTemplateColumns: props.columns
            ? "repeat( 1, 1fr)"
            : "repeat( 2, 1fr)",
        gap: 8,
        padding: "0 16px 16px 16px",
    }

    return (
        <div style={ParentStyle}>
            {choices.map((choice, index) => (
                <div>
                    <SelectionButton
                        key={index}
                        label={choice}
                        fontSize={props.primary ? "14px" : "12px"}
                        height={props.primary ? 44 : 36}
                        position="relative"
                        borderLeft={props.isResolution ? "4px solid" : "none"}
                        borderColor={
                            props.isResolution ? tagColors[index] : "none"
                        }
                    />
                </div>
            ))}
        </div>
    )
}

addPropertyControls(SectionButtonContainer, {
    columns: {
        type: ControlType.Boolean,
        enabledTitle: "1",
        disabledTitle: "2",
        title: "Columns",
        defaultValue: true,
    },
    choices: {
        type: ControlType.Array,
        propertyControl: {
            type: ControlType.String,
        },
        title: "Choices",
        defaultValue: ["Selection", "Selection", "Selection"],
    },
    primary: {
        type: ControlType.Boolean,
        enabledTitle: "Primary",
        disabledTitle: "Secondary",
        title: "Type",
        defaultValue: true,
    },

    isResolution: {
        type: ControlType.Boolean,
        title: "isResolution",
        defaultValue: false,
        hidden(props) {
            return props.primary === true
        },
    },
    resolutionColors: {
        type: ControlType.Array,
        propertyControl: {
            type: ControlType.Color,
        },
        title: "Tag Color",
        hidden(props) {
            return props.isResolution === false
        },
    },
})