Function TrackPreview

apps/web/components/TrackPreview.tsx:23–95

({ showPreview, setShowPreview, track }: TrackPreviewProps)

};

export function TrackPreview({ showPreview, setShowPreview, track }: TrackPreviewProps) {
  const [isMediumOrLarger, setIsMediumOrLarger] = useState(false);

  const updateScreenSize = () => {
    setIsMediumOrLarger(window.innerWidth >= 768);
  };

  useEffect(() => {
    updateScreenSize(); // Set the initial state
    window.addEventListener("resize", updateScreenSize); // Add resize listener

    return () => {
      window.removeEventListener("resize", updateScreenSize); // Cleanup listener on unmount
    };
  }, []);

  const truncatedDescription = isMediumOrLarger ? track.description : truncateDescription(track.description, 15);

  return (
    <Dialog open={showPreview} onOpenChange={() => setShowPreview(false)}>
      <DialogContent className="flex items-center gap-4">
        <div className="flex flex-col gap-4 w-full">
          <img src={track.image} className="h-[25vh] w-full object-cover rounded-lg" />
          <div className="flex flex-col gap-4 bg-primary/5 rounded-lg p-4">
            <div className="flex flex-col gap-4">
              <h3 className="text-xl md:text-2xl font-semibold w-full tracking-tight">{track.title}</h3>
              <div className="flex items-center gap-4">
                {track.categories.map((item: any, idx: number) => (
                  <p
                    key={item.category.id}
                    className="bg-secondary/25 border border-primary/10 rounded-lg px-3 py-2 text-sm w-fit cursor-default"
                  >
                    {item.category.category}{" "}
                  </p>
                ))}
              </div>
            </div>
            <p className="md:text-lg tracking-tighter line-clamp-3 text-primary/60">{truncatedDescription}</p>
          </div>
          <div className="flex flex-col gap-4 w-full">
            <div className="flex gap-2 items-center">
              <p className="flex tracking-tighter gap-2 text-primary text-lg md:text-xl font-semibold">
                {track.problems.length} Chapters
              </p>
              <p className="flex tracking-tight gap-2 text-primary/60 md:text-lg">
                {formatDistanceToNow(new Date(track.createdAt), { addSuffix: true })}
              </p>
            </div>
            <div className="max-h-[25vh] overflow-y-auto flex flex-col gap-3 w-full py-2">
              {track.problems.map((topic: any, idx: number) => (
                <Link key={topic.id} href={`/tracks/${track.id}/${track.problems[idx]?.id}`}>
                  <div className="cursor-pointer hover:-translate-y-1 flex items-center justify-between bg-primary/5 rounded-lg px-4 py-3 hover:bg-primary/10 transition-all duration-300 scroll-smooth w-full">
                    {topic.title}
                    <ArrowRight className="size-4" />
                  </div>
                </Link>
              ))}
            </div>