Button.tsx

// Get Started: https://www.framer.com/developers

import { addPropertyControls, ControlType } from "framer"
import { useState } from "react"

/**
 * @framerSupportedLayoutWidth auto
 * @framerSupportedLayoutHeight auto
 */
export default function Button({ title, loadingText }) {
    const [text, setText] = useState("")
    const [isLoading, setIsLoading] = useState(false)

    const handleStart = () => {
        if (!("webkitSpeechRecognition" in window)) {
            alert("Not supported Browser")
            return
        }

        // @ts-ignore
        const recognition = new window.webkitSpeechRecognition()
        recognition.lang = "ko-KR"
        recognition.interimResults = false

        setIsLoading(true)

        recognition.onresult = (event) => {
            const transcript = event.results[0][0].transcript
            setText(transcript)
            setIsLoading(false)
        }

        recognition.onerror = (event) => {
            console.error("Speech recognition error", event)
            setText("Error")
            setIsLoading(false)
        }

        recognition.onend = () => {
            setIsLoading(false)
        }

        recognition.start()
    }

    return (
        <div style={{ textAlign: "center", marginTop: "100px" }}>
            <div style={{ marginBottom: "20px", fontSize: "1.5rem" }}>
                {text}
            </div>
            <button
                onClick={handleStart}
                style={{
                    backgroundColor: "black",
                    color: "white",
                    paddingTop: 8,
                    paddingBottom: 8,
                    paddingLeft: 12,
                    paddingRight: 12,
                    borderRadius: 10,
                    fontSize: 14,
                    border: "none",
                    fontFamily: "Inter",
                    fontWeight: 500,
                    cursor: "pointer",
                }}
            >
                {isLoading ? loadingText : title}
            </button>
        </div>
    )
}

addPropertyControls(Button, {
    title: {
        type: ControlType.String,
        defaultValue: "Button",
    },
    loadingText: {
        type: ControlType.String,
        defaultValue: "Loading...",
    },
})