git.iko.soy/urbit.org
on 04cb079 help sign in
urbit.org/components/ecosystem/Post.js
96 lines 3.2 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 === "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 )}
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 )}
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>
76 ) : null;
77 });
80const badge = (type) => {
81 return (
82 <div
83 className={classnames(
84 "uppercase font-bold text-white text-xs w-fit rounded-lg mb-2 px-2 py-1",
85 {
86 "bg-[#B37ED7]": type === "Organization",
87 "bg-[#83b2d4]": type === "Application",
88 "bg-wall-600": type === "Podcast",
89 "bg-[#8dd5b1]": type === "Marketplace",
90 }
91 )}
92 >
93 {type}
94 </div>
95 );
96};