git.iko.soy/urbit.org
on master help sign in
components: add ecosystem card
150480dMatilde Park
components/ecosystem/IndexCard.jsnew file+47
compare with master
unifiedsplit
@@ -0,0 +1,47 @@
1+import Link from "next/link";
2+import classnames from "classnames";
3+export default function IndexCard({ slug, feat }) {
4+ return (
5+ <Link href={slug}>
6+ <div className="cursor-pointer bg-wall-100 rounded-xl basis-1/3 h-full">
7+ <div className="flex flex-col p-6 justify-between items-between h-full relative">
8+ {feat.image ? (
9+ <img
10+ className="rounded-xl w-full flex-1 object-cover"
11+ src={feat.image}
12+ style={{ aspectRatio: "4 / 3" }}
13+ />
14+ ) : (
15+ <div
16+ className="bg-wall-200 rounded-xl w-full flex-1"
17+ style={{ aspectRatio: "4 / 3" }}
18+ />
19+ )}
20+ <div className="grow-1 shrink-0 flex flex-col h-full min-h-0 pt-4">
21+ <h3 className="mb-2">{feat.title}</h3>
22+ {badge(feat.type)}
23+ <p>{feat?.description}</p>
24+ </div>
25+ </div>
26+ </div>
27+ </Link>
28+ );
29+}
30+
31+const badge = (type) => {
32+ return (
33+ <div
34+ className={classnames(
35+ "uppercase font-bold text-white text-xs w-fit rounded-lg mb-2 px-2 py-1",
36+ {
37+ "bg-[#B37ED7]": type === "Organization",
38+ "bg-[#83b2d4]": type === "Application",
39+ "bg-[#8dd5b1]": type === "Podcast",
40+ "bg-[#8dd5b1]": type === "Marketplace",
41+ }
42+ )}
43+ >
44+ {type}
45+ </div>
46+ );
47+};