git.iko.soy/urbit.org
on 625febc help sign in
urbit.org/components/ecosystem/IndexCard.js
53 lines 1.6 kB history raw
1import Link from "next/link";
2import classnames from "classnames";
3export default function IndexCard({ slug, feat }) {
4 return (
5 <Link href={slug}>
6 <div className="cursor-pointer bg-wall-100 rounded-xl min-h-0 flex-1">
7 <div className="flex flex-col p-4 h-full relative">
8 {feat.image ? (
9 <div
10 className="w-64 md:w-full rounded-xl object-cover overflow-hidden basis-1/2"
11 style={{
12 backgroundColor: feat?.matchedPost?.bgColor || "rgba(0,0,0,0)",
13 }}
14 >
15 <img className="h-full w-64 md:w-full object-cover" src={feat.image} />
16 </div>
17 ) : (
18 <div
19 className="rounded-xl w-full"
20 style={{
21 backgroundColor: feat?.matchedPost?.bgColor || "rgba(0,0,0,0)",
22 }}
23 />
24 )}
25 <div className="pt-4">
26 <p className="mb-2 font-semibold leading-5">{feat.title}</p>
27 {badge(feat.type)}
28 <p className="text-sm leading-5">{feat?.description}</p>
29 </div>
30 </div>
31 </div>
32 </Link>
33 );
36const badge = (type) => {
37 return (
38 <div
39 className={classnames(
40 "uppercase font-bold text-white text-xs w-fit rounded-lg mb-5 px-2 py-1",
41 {
42 "bg-[#B37ED7]": type === "Organization",
43 "bg-[#83b2d4]": type === "Application",
44 "bg-wall-600": type === "Podcast",
45 "bg-[#8dd5b1]": type === "Marketplace",
46 "bg-[#B5966D]": type === "Article"
47 }
48 )}
49 >
50 {type}
51 </div>
52 );
53};