General Example

import { useRef } from 'react';
import BottomSheet, { type BottomSheetRef } from '@wldyslw/react-bottom-sheet';
 
export default function General() {
    const sheetRef = (useRef < BottomSheetRef) | (null > null);
 
    return (
        <div className="flex items-center justify-center py-4">
            <button
                className="block rounded bg-blue-500 px-3 py-2 text-white drop-shadow-md"
                onClick={() => {
                    sheetRef.current.open();
                }}
            >
                Open Sheet
            </button>
            <BottomSheet
                ref={sheetRef}
                grabberVisible
                detents={['50%', '90%']}
                className="dark:bg-zinc-800"
            >
                <div
                    id="header"
                    className="sticky inset-x-0 top-0 flex items-baseline justify-between bg-white/90 px-4 dark:bg-zinc-800/90"
                >
                    <button
                        onClick={() => sheetRef.current?.collapse()}
                        className="text-blue-500"
                    >
                        Collapse
                    </button>
                    <h1 className="mb-2 text-xl font-bold">Bottom Sheet</h1>
                    <button
                        onClick={() => sheetRef.current?.expand()}
                        className="text-blue-500"
                    >
                        Expand
                    </button>
                </div>
                <div id="content" className="px-4">
                    <p>{text}</p>
                </div>
            </BottomSheet>
        </div>
    );
}