git.iko.soy/urbit.org
on b9657df help sign in
urbit.org/components/ecosystem/Post.js
107 lines 3.7 kB history raw
1import { Markdown } from "@urbit/foundation-design-system";
2import EcosystemBadge from "./Badge";
4import Link from "next/link";
5export default function Post({ post }) {
6 return ["featured-1", "featured-2", "featured-3"].map((feat) => {
7 const childPath =
8 post[feat] && (post[feat]?.matchedPost?.type === "Application" || post[feat]?.matchedPost?.type === "Group")
9 ? `${post[feat]?.matchedPost.ship}/${post[feat].matchedPost.slug}`
10 : `${post[feat].matchedPost?.slug}`;
11 const href = post[feat]?.matchedPost
12 ? `/${post[feat].matchedPost.type.toLowerCase()}s/${childPath}`
13 : null;
14 return post?.[feat] ? (
15 <div
16 className="mt-8 mb-24"
17 id={post?.[feat].title.toLowerCase().replace(/ /, "-")}
18 >
19 <div className="flex space-x-4 items-center">
20 <div
21 className="h-24 w-24 rounded-xl items-center justify-center shrink-0 overflow-hidden"
22 style={{
23 backgroundColor:
24 post[feat]?.matchedPost?.bgColor || "rgba(0,0,0,0)",
25 }}
26 >
27 {(post[feat]?.matchedPost?.image || post[feat]?.matchedPost?.tile) && (
28 <img
29 className="rounded-xl w-24 object-cover"
30 src={post[feat]?.matchedPost?.image || post[feat]?.matchedPost?.tile}
31 />
32 )}
33 </div>
34 <div className="flex flex-col">
35 <h4 className="text-xl pb-2 leading-6 font-bold">
36 {post?.[feat].title}
37 </h4>
38 <EcosystemBadge type={post[feat].type} />
39 </div>
40 </div>
41 <div className="markdown mt-8 mb-8">
42 <Markdown.render content={JSON.parse(post[feat].content)} />
43 </div>
45 {post[feat].type === "Podcast" && (
46 <Link href={href || "#"} passHref>
47 <a class="button-sm text-white flex-col bg-green-400 cursor-pointer pr-4 w-fit">
48 Listen to {post[feat].type}
49 </a>
50 </Link>
51 )}
53 {post[feat].type === "Article" && (
54 <Link href={href || "#"} passHref>
55 <a class="button-sm text-white flex-col bg-green-400 cursor-pointer pr-4 w-fit">
56 Read {post[feat].type}
57 </a>
58 </Link>
59 )}
61 {post[feat].type === "Application" && (
62 <Link href={href || "#"} passHref>
63 <a class="button-sm text-white flex-col bg-green-400 cursor-pointer pr-4 w-fit">
64 View {post[feat].type}
65 </a>
66 </Link>
67 )}
69 {post[feat].type === "Organization" && (
70 <Link href={href || "#"} passHref>
71 <a class="button-sm text-white flex-col bg-green-400 cursor-pointer pr-4 w-fit">
72 More about {post[feat].title}
73 </a>
74 </Link>
75 )}
77 {post[feat].type === "Community" && (
78 <Link href={href || "#"} passHref>
79 <a class="button-sm text-white flex-col bg-green-400 cursor-pointer pr-4 w-fit">
80 More about {post[feat].title}
81 </a>
82 </Link>
83 )}
86 {post[feat].type === "Marketplace" && (
87 <Link href={href || "#"} passHref>
88 <a class="button-sm text-white flex-col bg-green-400 cursor-pointer pr-4 w-fit">
89 More about {post[feat].title}
90 </a>
91 </Link>
92 )}
94 {post[feat].type === "Group" && (
95 <Link href={href || "#"} passHref>
96 <a class="button-sm text-white flex-col bg-green-400 cursor-pointer pr-4 w-fit">
97 More about {post[feat].title}
98 </a>
99 </Link>
100 )}
102 </div>
103 ) : null;
104 });