git.iko.soy/urbit.org
on 625febc help sign in
urbit.org/components/ecosystem/Post.js
105 lines 3.5 kB history raw
1import { Markdown } from "@urbit/foundation-design-system";
2import classnames from "classnames";
3import Link from "next/link";
4export default function Post({ post }) {
5 return ["featured-1", "featured-2", "featured-3"].map((feat) => {
6 const childPath =
7 post[feat] && post[feat]?.matchedPost?.type === "Application"
8 ? `${post[feat]?.matchedPost.ship}/${post[feat].matchedPost.slug}`
9 : `${post[feat].matchedPost?.slug}`;
10 const href = post[feat]?.matchedPost
11 ? `/${post[feat].matchedPost.type.toLowerCase()}s/${childPath}`
12 : null;
13 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 <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]?.matchedPost?.image && (
27 <img
28 className="rounded-xl w-24 object-cover"
29 src={post[feat]?.matchedPost?.image}
30 />
31 )}
32 </div>
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)}
38 </div>
39 </div>
40 <div className="markdown mt-8 mb-8">
41 <Markdown.render content={JSON.parse(post[feat].content)} />
42 </div>
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 )}
52 {post[feat].type === "Article" && (
53 <Link href={href || "#"} passHref>
54 <a class="button-sm text-white flex-col bg-green-400 cursor-pointer pr-4 w-fit">
55 Read {post[feat].type}
56 </a>
57 </Link>
58 )}
60 {post[feat].type === "Application" && (
61 <Link href={href || "#"} passHref>
62 <a class="button-sm text-white flex-col bg-green-400 cursor-pointer pr-4 w-fit">
63 View {post[feat].type}
64 </a>
65 </Link>
66 )}
68 {post[feat].type === "Organization" && (
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 )}
76 {post[feat].type === "Marketplace" && (
77 <Link href={href || "#"} passHref>
78 <a class="button-sm text-white flex-col bg-green-400 cursor-pointer pr-4 w-fit">
79 More about {post[feat].title}
80 </a>
81 </Link>
82 )}
83 </div>
84 ) : null;
85 });
88const badge = (type) => {
89 return (
90 <div
91 className={classnames(
92 "uppercase font-bold text-white text-xs w-fit rounded-lg mb-2 px-2 py-1",
93 {
94 "bg-[#B37ED7]": type === "Organization",
95 "bg-[#83b2d4]": type === "Application",
96 "bg-wall-600": type === "Podcast",
97 "bg-[#8dd5b1]": type === "Marketplace",
98 "bg-[#B5966D]": type === "Article",
99 }
100 )}
101 >
102 {type}
103 </div>
104 );
105};