用 Framer 组件自动生成关键词标签

import { addPropertyControls, ControlType } from "framer"

/**
 * These annotations control how your component sizes
 * Learn more: https://www.framer.com/developers/#code-components-auto-sizing
 *
 * @framerSupportedLayoutWidth auto
 * @framerSupportedLayoutHeight auto
 */
export default function Text(props) {
    const { text } = props

    // Split by commas, capitalize first letter of each phrase
    const formattedText = text.split(",").map((phrase) => {
        const trimmedPhrase = phrase.trim()
        return trimmedPhrase.charAt(0).toUpperCase() + trimmedPhrase.slice(1)
    })

    return (
        <div style={containerStyle}>
            {formattedText.map((phrase, index) => (
                <span key={index} style={tagStyle}>
                    {phrase}
                </span>
            ))}
        </div>
    )
}

// Define property controls for the component
addPropertyControls(Text, {
    text: {
        title: "Text",
        type: ControlType.String,
        defaultValue: "Photo Highlights",
    },
})

// Updated styles
const containerStyle = {
    display: "flex",
    flexWrap: "wrap",
    gap: "12px",
}

const tagStyle = {
    backgroundColor: "white",
    padding: "8px 16px",
    borderRadius: "999px",
    color: "#333333",
    fontSize: "14px",
}