Function TrackCard2

apps/web/components/TrackCard-2.tsx:18–99

({ track }: { track: TrackCardProps })

}

export function TrackCard2({ track }: { track: TrackCardProps }) {
  const router = useRouter();
  const controls = useAnimation();
  const ref = useRef<HTMLDivElement | null>(null);
  const [showPreview, setShowPreview] = useState<boolean>(false);

  const handleTrackClick = () => {
    if (track.trackType === "CANVA") {
      const searchParams = new URLSearchParams();
      if (track.canvaLink) {
        searchParams.set("canvaLink", track.canvaLink);
        searchParams.set("title", track.title);
      }
      router.push(`/canva-track/${track.id}?${searchParams.toString()}`);
    } else {
      setShowPreview(true);
    }
  };

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry && entry.isIntersecting) {
          controls.start("visible");
        }
      },
      { threshold: 0.3 }
    );

    if (ref.current) {
      observer.observe(ref.current);
    }

    return () => {
      if (ref.current) {
        observer.unobserve(ref.current);
      }
    };
  }, [controls]);

  const variants = {
    hidden: { opacity: 0 },
    visible: { opacity: 1, transition: { duration: 0.1, ease: "easeOut" } },
  };

  return (
    <>
      <motion.div
        ref={ref}
        initial="hidden"
        animate={controls}
        variants={variants}
        className="bg-primary/5 flex cursor-pointer flex-row items-start justify-between gap-4 rounded-xl p-4 backdrop-blur-xl transition-all duration-300 hover:-translate-y-1 md:items-center"
        onClick={handleTrackClick}
      >
        <img src={track.image} alt={track.title} className="size-20 aspect-square object-cover rounded-xl" />
        <div className="flex flex-col md:flex-row gap-4 w-full md:items-center justify-between">
          <div className="flex flex-col gap-2">