DownloadButton.tsx

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

// Welcome to Code in Framer
// Get Started: https://www.framer.com/docs/guides/

/**
 * These annotations control how your component sizes
 * Learn more: https://www.framer.com/docs/guides/auto-sizing
 *
 * @framerSupportedLayoutWidth any
 * @framerSupportedLayoutHeight any
 */
export default function Download(props) {
    const { title, tint, style, file } = props

    return (
        <motion.div style={{ ...style, ...containerStyle }}>
            <motion.div
                onTap={() => {
                    const link = document.createElement("a")
                    link.href = file
                    link.download = "download"
                    document.body.appendChild(link)
                    link.click()
                    link.remove()
                }}
                style={{
                    margin: 40,
                    padding: 40,
                    borderRadius: 20,
                    backgroundColor: tint,
                    color: "white",
                    fontSize: "2em",
                    fontWeight: "bold",
                }}
                whileHover={{ scale: 1.01 }}
            >
                {title}
            </motion.div>
        </motion.div>
    )
}

Download.defaultProps = {
    tint: "#09F",
    title: "Download",
}

addPropertyControls(Download, {
    tint: {
        title: "Tint",
        type: ControlType.Color,
    },
    title: {
        title: "Label",
        type: ControlType.String,
    },
    file: {
        title: "File",
        type: ControlType.File,
        allowedFileTypes: [],
    },
})

const containerStyle = {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    overflow: "hidden",
}