Sticky Banner

"use client";
import React, { useRef } from "react";
import { StickyBanner } from "@/lab/aceternity/ui/sticky-banner";

export default function StickyBannerDemo() {
  const ref = useRef<HTMLDivElement>(null);
  return (
    <div ref={ref} className="@container relative flex h-full w-full flex-col overflow-y-auto">
      <StickyBanner containerRef={ref} hideOnScroll className="bg-gradient-to-b from-blue-500 to-blue-600">
        <p className="mx-0 max-w-[90%] text-[clamp(0.7rem,1.6cqw,1rem)] text-white drop-shadow-md">
          Announcing $10M seed funding from project mayhem ventures.{" "}
          <a href="#" className="transition duration-200 hover:underline">
            Read announcement
          </a>
        </p>
      </StickyBanner>
      <DummyContent />
    </div>
  );
}

const DummyContent = () => {
  return (
    <div className="relative mx-auto flex w-full max-w-7xl flex-col gap-6 px-4 py-6">
      <div className="h-48 w-full shrink-0 animate-pulse rounded-lg bg-neutral-100 dark:bg-neutral-800" />
      <div className="h-48 w-full shrink-0 animate-pulse rounded-lg bg-neutral-100 dark:bg-neutral-800" />
      <div className="h-48 w-full shrink-0 animate-pulse rounded-lg bg-neutral-100 dark:bg-neutral-800" />
    </div>
  );
}