Avara Site in Framer

import React, { ComponentType, useRef } from "react"

const soundUrls = {
    click: "https://avara.xyz/sounds/click.wav",
    error: "https://avara.xyz/sounds/error.wav",
    open: "https://avara.xyz/sounds/open.wav",
    close: "https://avara.xyz/sounds/close.wav",
    forward: "https://avara.xyz/sounds/forward.wav",
    back: "https://avara.xyz/sounds/back.wav",
}

function useSound(url: string): HTMLAudioElement {
    const audioRef = useRef(new Audio(url))

    return audioRef.current
}

function isTouchDevice() {
    return "ontouchstart" in window
}

export function withError(Component): ComponentType {
    return (props) => {
        const clickSound = useSound(soundUrls.click)
        const errorSound = useSound(soundUrls.error)

        const handleStart = () => clickSound.play()
        const handleEnd = () => errorSound.play()

        const events = isTouchDevice()
            ? { onTouchStart: handleStart, onTouchEnd: handleEnd }
            : { onMouseDown: handleStart, onMouseUp: handleEnd }

        return <Component {...props} {...events} />
    }
}

export function withFigure(Component): ComponentType {
    return (props) => {
        const clickSound = useSound(soundUrls.click)
        const openSound = useSound(soundUrls.open)

        const handleStart = () => clickSound.play()
        const handleEnd = () => openSound.play()

        const events = isTouchDevice()
            ? { onTouchStart: handleStart, onTouchEnd: handleEnd }
            : { onMouseDown: handleStart, onMouseUp: handleEnd }

        return <Component {...props} {...events} />
    }
}

export function withLeave(Component): ComponentType {
    return (props: any) => {
        const closeSound = useSound(soundUrls.close)

        const handleEnd = () => closeSound.play()

        const events = isTouchDevice()
            ? { onTouchEnd: handleEnd }
            : { onMouseUp: handleEnd }

        return <Component {...props} {...events} />
    }
}

export function withForward(Component): ComponentType {
    return (props) => {
        const forwardSound = useSound(soundUrls.forward)

        const handleEnd = () => forwardSound.play()

        const events = isTouchDevice()
            ? { onTouchEnd: handleEnd }
            : { onMouseUp: handleEnd }

        return <Component {...props} {...events} />
    }
}

export function withBack(Component): ComponentType {
    return (props) => {
        const backSound = useSound(soundUrls.back)

        const handleEnd = () => backSound.play()

        const events = isTouchDevice()
            ? { onTouchEnd: handleEnd }
            : { onMouseUp: handleEnd }

        return <Component {...props} {...events} />
    }
}import React, { ComponentType, useRef } from "react"

const soundUrls = {
    click: "https://avara.xyz/sounds/click.wav",
    error: "https://avara.xyz/sounds/error.wav",
    open: "https://avara.xyz/sounds/open.wav",
    close: "https://avara.xyz/sounds/close.wav",
    forward: "https://avara.xyz/sounds/forward.wav",
    back: "https://avara.xyz/sounds/back.wav",
}

function useSound(url: string): HTMLAudioElement {
    const audioRef = useRef(new Audio(url))

    return audioRef.current
}

function isTouchDevice() {
    return "ontouchstart" in window
}

export function withError(Component): ComponentType {
    return (props) => {
        const clickSound = useSound(soundUrls.click)
        const errorSound = useSound(soundUrls.error)

        const handleStart = () => clickSound.play()
        const handleEnd = () => errorSound.play()

        const events = isTouchDevice()
            ? { onTouchStart: handleStart, onTouchEnd: handleEnd }
            : { onMouseDown: handleStart, onMouseUp: handleEnd }

        return <Component {...props} {...events} />
    }
}

export function withFigure(Component): ComponentType {
    return (props) => {
        const clickSound = useSound(soundUrls.click)
        const openSound = useSound(soundUrls.open)

        const handleStart = () => clickSound.play()
        const handleEnd = () => openSound.play()

        const events = isTouchDevice()
            ? { onTouchStart: handleStart, onTouchEnd: handleEnd }
            : { onMouseDown: handleStart, onMouseUp: handleEnd }

        return <Component {...props} {...events} />
    }
}

export function withLeave(Component): ComponentType {
    return (props: any) => {
        const closeSound = useSound(soundUrls.close)

        const handleEnd = () => closeSound.play()

        const events = isTouchDevice()
            ? { onTouchEnd: handleEnd }
            : { onMouseUp: handleEnd }

        return <Component {...props} {...events} />
    }
}

export function withForward(Component): ComponentType {
    return (props) => {
        const forwardSound = useSound(soundUrls.forward)

        const handleEnd = () => forwardSound.play()

        const events = isTouchDevice()
            ? { onTouchEnd: handleEnd }
            : { onMouseUp: handleEnd }

        return <Component {...props} {...events} />
    }
}

export function withBack(Component): ComponentType {
    return (props) => {
        const backSound = useSound(soundUrls.back)

        const handleEnd = () => backSound.play()

        const events = isTouchDevice()
            ? { onTouchEnd: handleEnd }
            : { onMouseUp: handleEnd }

        return <Component {...props} {...events} />
    }
}