gitcoin_co_30/src/components/cards/ContentCard.tsx at 2380fb52ecb3d780a341fc3d66698ed520d819b6 · gitcoinco/gitcoin_co_30 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
import Link from "next/link";
import Image from "next/image";
import TagsList from "../ui/TagsList";
import ReadTimeBadge from "../ui/ReadTimeBadge";
import { formatRelativeDate } from "@/lib/utils";

interface ContentCardProps {
  href: string;
  name: string;
  shortDescription: string;
  tags: string[];
  featured?: boolean;
  layout?: "logo" | "banner";
  logo?: string;
  banner?: string;
  bannerHeight?: string;
  readTime?: number;
  date?: string;
  authors?: string[];
}

export default function ContentCard({
  href,
  name,
  shortDescription,
  tags,
  featured = false,
  layout = "logo",
  logo,
  banner = "/content-images/placeholder.png",
  bannerHeight,
  readTime,
  date,
  authors,
}: ContentCardProps) {
  const isBanner = layout === "banner";

  return (
    <Link href={href}>
      <div
        className={`${
          featured ? "card-featured" : "card"
        } bg-gray-950 group h-full flex flex-col transition-all duration-300 ${
          isBanner
            ? "hover:border-teal-500 hover:shadow-[0_0_12px_-3px_rgba(2,226,172,0.6)] bg-bottom bg-no-repeat bg-size-[100%_6%] hover:bg-size-[100%_50%] bg-[linear-gradient(to_top,rgba(2,226,172,0.5),transparent)]"
            : ""
        }`}
      >
        <>
          {isBanner && !!banner && (
            <div
              className={`relative ${bannerHeight || "aspect-video"} -mx-6 -mt-6 mb-4 overflow-hidden rounded-t-xl`}
            >
              <Image
                src={banner}
                alt={name}
                fill
                sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
                className="object-cover group-hover:scale-105 transition-transform duration-300"
              />
              <div className="absolute inset-0 bg-linear-to-b from-transparent to-gray-950 group-hover:opacity-0 transition-all duration-500" />
              {readTime !== undefined && <ReadTimeBadge minutes={readTime} />}
            </div>
          )}

          <div className="flex items-center gap-4 mb-4 min-h-16">
            {layout === "logo" && logo ? (
              <Image
                src={logo}
                alt={`${name} logo`}
                width={48}
                height={48}
                className="rounded-lg object-cover bg-gray-800"
              />
            ) : layout === "logo" ? (
              <div className="w-12 h-12 rounded-lg border border-gray-25 flex items-center justify-center flex-shrink-0">
                <span className="text-xl font-heading text-gray-25">
                  {name.charAt(0)}
                </span>
              </div>
            ) : (
              ""
            )}
            <h3 className="text-xl md:text-2xl font-semibold text-gray-25 group-hover:text-gray-25 transition-colors line-clamp-2">
              {name}
            </h3>
          </div>

          <p className="text-gray-300 font-serif text-sm line-clamp-3 flex-grow">
            {shortDescription}
          </p>
          {(authors?.length || date) && (
            <div className="flex items-center justify-between mt-2 gap-2">
              {authors && authors.length > 0 && (
                <p className="text-xs text-gray-300 truncate">
                  By {authors.join(", ")}
                </p>
              )}
              {date && <p className="text-xs text-gray-300 shrink-0 ml-auto">{formatRelativeDate(date)}</p>}
            </div>
          )}
        </>

        {/* Tags */}
        <div className="pt-4 border-t border-gray-500/60 h-[3.7rem] mt-3">
          <TagsList tags={tags} />
        </div>
      </div>
    </Link>
  );
}