@@ -11,47 +11,68 @@ export default function Post({ post }) {
1111 ? `/${post[feat].matchedPost.type.toLowerCase()}s/${childPath}`
1212 : null;
1313 return post?.[feat] ? (
14− <div
15− className="mt-8 mb-24"
16− id={post?.[feat].title.toLowerCase().replace(/ /, "-")}
17− >
18− <div className="flex space-x-4 items-center">
19− <img
20− className="rounded-xl w-24 object-cover"
21− src={post[feat].image}
22− />
23− <div className="flex flex-col">
24− <h4 className="text-xl pb-2 leading-6 font-bold">{post?.[feat].title}</h4>
25− {badge(post[feat].type)}
26− </div>
14+ <div
15+ className="mt-8 mb-24"
16+ id={post?.[feat].title.toLowerCase().replace(/ /, "-")}
17+ >
18+ <div className="flex space-x-4 items-center">
19+ <div
20+ className="h-24 w-24 rounded-xl items-center justify-center shrink-0 overflow-hidden"
21+ style={{
22+ backgroundColor:
23+ post[feat]?.matchedPost?.bgColor || "rgba(0,0,0,0)",
24+ }}
25+ >
26+ {post[feat]?.image && (
27+ <img
28+ className="rounded-xl w-24 object-cover"
29+ src={post[feat].image}
30+ />
31+ )}
2732 </div>
28− <div className="markdown mt-8 mb-8">
29− <Markdown.render content={JSON.parse(post[feat].content)} />
33+ <div className="flex flex-col">
34+ <h4 className="text-xl pb-2 leading-6 font-bold">
35+ {post?.[feat].title}
36+ </h4>
37+ {badge(post[feat].type)}
3038 </div>
39+ </div>
40+ <div className="markdown mt-8 mb-8">
41+ <Markdown.render content={JSON.parse(post[feat].content)} />
42+ </div>
3143
44+ {post[feat].type === "Podcast" && (
45+ <Link href={href || "#"} passHref>
46+ <a class="button-sm text-white flex-col bg-green-400 cursor-pointer pr-4 w-fit">
47+ Listen to {post[feat].type}
48+ </a>
49+ </Link>
50+ )}
3251
33− {post[feat].type === "Podcast" &&
34− (<Link href={href || "#"} passHref>
35− <a class="button-sm text-white flex-col bg-green-400 cursor-pointer pr-4 w-fit">Listen to {post[feat].type}</a>
36− </Link>)}
37−
38− {post[feat].type === "Application" &&
39− (<Link href={href || "#"} passHref>
40− <a class="button-sm text-white flex-col bg-green-400 cursor-pointer pr-4 w-fit">View {post[feat].type}</a>
41− </Link>)}
42−
43− {post[feat].type === "Organization" &&
44− (<Link href={href || "#"} passHref>
45− <a class="button-sm text-white flex-col bg-green-400 cursor-pointer pr-4 w-fit">More about {post[feat].title}</a>
46− </Link>)}
47−
48− {post[feat].type === "Marketplace" &&
49− (<Link href={href || "#"} passHref>
50− <a class="button-sm text-white flex-col bg-green-400 cursor-pointer pr-4 w-fit">More about {post[feat].title}</a>
51− </Link>)}
52+ {post[feat].type === "Application" && (
53+ <Link href={href || "#"} passHref>
54+ <a class="button-sm text-white flex-col bg-green-400 cursor-pointer pr-4 w-fit">
55+ View {post[feat].type}
56+ </a>
57+ </Link>
58+ )}
5259
53− </div>
60+ {post[feat].type === "Organization" && (
61+ <Link href={href || "#"} passHref>
62+ <a class="button-sm text-white flex-col bg-green-400 cursor-pointer pr-4 w-fit">
63+ More about {post[feat].title}
64+ </a>
65+ </Link>
66+ )}
5467
68+ {post[feat].type === "Marketplace" && (
69+ <Link href={href || "#"} passHref>
70+ <a class="button-sm text-white flex-col bg-green-400 cursor-pointer pr-4 w-fit">
71+ More about {post[feat].title}
72+ </a>
73+ </Link>
74+ )}
75+ </div>
5576 ) : null;
5677 });
5778}