principle-chatHead-drag.tsx

import * as React from "react"
import { Override, Data, useAnimation } from "framer"

// Learn more: https://framer.com/docs/overrides/

const bottomSheetHeight = 129

const appState = Data({
    bottomSheetY: bottomSheetHeight,
})

export function ChatHead(props): Override {
    const anim = useAnimation()
    return {
        drag: true,
        animate: anim,
        onDragStart: () => {
            appState.bottomSheetY = 0
        },
        onDragEnd: () => {
            appState.bottomSheetY = bottomSheetHeight
            anim.start({ x: 0 })
        },
    }
}

export function BottomSheet(props): Override {
    return {
        animate: { y: appState.bottomSheetY },
        transition: { duration: 0.2 },
    }
}