Timescale

1"use client"
2 
3// Inspired by Evil Rabbit's Lifeline: https://lifeline.evilrabbit.com
4import { useEffect, useRef } from "react"
5 
6import { cn } from "@/lib/utils"
7 
8export type TimescaleRootProps = React.ComponentProps<"div"> & {
9  orientation?: "horizontal" | "vertical"
10}
11 
12export function TimescaleRoot({
13  className,
14  orientation = "horizontal",
15  ...props
16}: TimescaleRootProps) {
17  return (
18    <div
19      data-slot="timescale-root"
20      data-orientation={orientation}
21      className={cn(
22        "group/timescale relative flex w-full [--timescale-rail:--spacing(14)]",
23        "data-[orientation=vertical]:flex-col",
24        className
25      )}
26      {...props}
27    />
28  )
29}
30 
31export type TimescaleViewportProps = React.ComponentProps<"div">
32 
33export function TimescaleViewport({
34  className,
35  ...props
36}: TimescaleViewportProps) {
37  return (
38    <div
39      data-slot="timescale-viewport"
40      className={cn(
41        "no-scrollbar w-full",
42        "group-data-[orientation=horizontal]/timescale:flex group-data-[orientation=horizontal]/timescale:flex-1 group-data-[orientation=horizontal]/timescale:scroll-fade-x group-data-[orientation=horizontal]/timescale:overflow-x-auto group-data-[orientation=horizontal]/timescale:overscroll-x-contain group-data-[orientation=horizontal]/timescale:pl-20 group-data-[orientation=horizontal]/timescale:scroll-fade-s-40",
43        className
44      )}
45      {...props}
46    />
47  )
48}
49 
50export type TimescaleHeaderProps = React.ComponentProps<"div">
51 
52export function TimescaleHeader({ className, ...props }: TimescaleHeaderProps) {
53  return (
54    <div
55      data-slot="timescale-header"
56      aria-hidden="true"
57      className={cn(
58        "z-10",
59        "group-data-[orientation=horizontal]/timescale:absolute group-data-[orientation=horizontal]/timescale:top-0 group-data-[orientation=horizontal]/timescale:left-0 group-data-[orientation=horizontal]/timescale:w-20 group-data-[orientation=horizontal]/timescale:shrink-0 group-data-[orientation=horizontal]/timescale:bg-linear-to-r group-data-[orientation=horizontal]/timescale:from-background group-data-[orientation=horizontal]/timescale:from-75% group-data-[orientation=horizontal]/timescale:to-transparent group-data-[orientation=horizontal]/timescale:pr-4 group-data-[orientation=horizontal]/timescale:text-right",
60// … truncated