import { useState, useEffect } from "react"

const MOBILE_BREAKPOINT = 768

export function useIsMobile(breakpoint: number = MOBILE_BREAKPOINT) {
    const [isMobile, setIsMobile] = useState<boolean | undefined>(undefined)

    useEffect(() => {
        const mql = window.matchMedia(`(max-width: ${breakpoint - 1}px)`)
        const onChange = () => {
            setIsMobile(window.innerWidth < breakpoint)
        }
        mql.addEventListener("change", onChange)
        setIsMobile(window.innerWidth < breakpoint)
        return () => mql.removeEventListener("change", onChange)
    }, []);

    return !!isMobile
}

import {
    useTimeline,
    TimelineProvider,
    TimelineControl,
    TimelineContent,
    TimelineHeader,
    TimelineRows
} from '@/components/calendar-timeline';

function Component() {
  const timeline = useTimeline({
    // configuration here...
  });

  return (
    <TimelineProvider context={timeline}>
      <TimelineControl>
        {/* your action controls */}
      </TimelineControl>
      <TimelineContent className='max-h-[30rem]'>
          <TimelineHeader />
          <TimelineRows />
      </TimelineContent>
  </TimelineProvider>
  )
}