useMeasureScrollbar

"use client";
import { useState } from "react";
import { Button } from "@/ui/button";
import { Typography } from "@/ui/typography";
import { useMeasureScrollbar } from "@/hooks/use-measure-scrollbar";

export function UseMeasureScrollbarDemo() {
  const [open, setOpen] = useState<boolean>(false);
  const [, scrollbarWidth] = useMeasureScrollbar(open);

  return (
    <>
      <Button data-state={open ? "open" : "closed"} onClick={() => setOpen(o => !o)} className="w-24">
        {open ? "Close" : "Open"}
      </Button>
      {open && (
        <div
          data-state={open ? "open" : "closed"}
          className="absolute top-[calc(50%+20px)] rounded-md border bg-background p-4 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-100 data-[state=open]:zoom-in-100"
        >
          <Typography prose="muted">Scroll body removed</Typography>
        </div>
      )}
      <Typography el="p" prose="h4" className="absolute left-0 top-0">
        browser scrollbar: {scrollbarWidth}px
      </Typography>
    </>
  );
}