mintel.me/apps/web/src/components/BlogPostClient.tsx

"use client";

import * as React from "react";
import { useEffect } from "react";

interface BlogPostClientProps {
  readingTime: number;
  title: string;
}

export const BlogPostClient: React.FC<BlogPostClientProps> = () => {
  useEffect(() => {
    const handleScroll = () => {
      // Update progress bar
      const winScroll =
        document.body.scrollTop || document.documentElement.scrollTop;
      const height =
        document.documentElement.scrollHeight -
        document.documentElement.clientHeight;
      const scrolled = winScroll / height;
      const progressBar = document.querySelector(
        ".reading-progress-bar",
      ) as HTMLElement;
      if (progressBar) {
        progressBar.style.transform = `scaleX(${scrolled})`;
      }
    };
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  return <div className="reading-progress-bar" />;
};