cover

1"use client";
2import React, { useEffect, useId, useState } from "react";
3import { AnimatePresence, motion } from "motion/react";
4import { useRef } from "react";
5import { cn } from "@/lib/utils";
6import { SparklesCore } from "@/components/ui/sparkles";
7 
8export const Cover = ({
9  children,
10  className,
11}: {
12  children?: React.ReactNode;
13  className?: string;
14}) => {
15  const [hovered, setHovered] = useState(false);
16 
17  const ref = useRef<HTMLDivElement>(null);
18 
19  const [containerWidth, setContainerWidth] = useState(0);
20  const [beamPositions, setBeamPositions] = useState<number[]>([]);
21 
22  useEffect(() => {
23    if (ref.current) {
24      setContainerWidth(ref.current?.clientWidth ?? 0);
25 
26      const height = ref.current?.clientHeight ?? 0;
27      const numberOfBeams = Math.floor(height / 10); // Adjust the divisor to control the spacing
28      const positions = Array.from(
29        { length: numberOfBeams },
30        (_, i) => (i + 1) * (height / (numberOfBeams + 1))
31      );
32      setBeamPositions(positions);
33    }
34  }, [ref.current]);
35 
36  return (
37    <div
38      onMouseEnter={() => setHovered(true)}
39      onMouseLeave={() => setHovered(false)}
40      ref={ref}
41      className="relative hover:bg-neutral-900  group/cover inline-block dark:bg-neutral-900 bg-neutral-100 px-2 py-2  transition duration-200 rounded-sm"
42    >
43      <AnimatePresence>
44        {hovered && (
45          <motion.div
46            initial={{ opacity: 0 }}
47            animate={{ opacity: 1 }}
48            exit={{ opacity: 0 }}
49            transition={{
50              opacity: {
51                duration: 0.2,
52              },
53            }}
54            className="h-full w-full overflow-hidden absolute inset-0"
55          >
56            <motion.div
57              animate={{
58                translateX: ["-50%", "0%"],
59              }}
60              transition={{
61                translateX: {
62                  duration: 10,
63                  ease: "linear",
64                  repeat: Infinity,
65                },
66              }}
67              className="w-[200%] h-full flex"
68            >
69              <SparklesCore
70                background="transparent"
71                minSize={0.4}
72                maxSize={1}
73                particleDensity={500}
74                className="w-full h-full"
75                particleColor="#FFFFFF"
76              />
77              <SparklesCore
78                background="transparent"
79                minSize={0.4}
80                maxSize={1}
81                particleDensity={500}
82// … truncated