git.iko.soy/urbit.org
on 625febc help sign in
urbit.org/components/ecosystem/BasicPage.js
131 lines 4.5 kB history raw
1import { useRouter } from "next/router";
2import Head from "next/head";
3import Meta from "../Meta";
4import ErrorPage from "../../pages/404";
5import classnames from "classnames";
6import {
7 Container,
8 SingleColumn,
9 Section,
10 Markdown,
11 IntraNav,
12} from "@urbit/foundation-design-system";
13import Header from "../Header";
14import Footer from "../Footer";
16export default function BasicPage({
17 section,
18 post,
19 markdown,
20 search,
21 children,
22}) {
23 const router = useRouter();
24 if (!router.isFallback && !post?.slug) {
25 return <ErrorPage />;
26 }
27 const metaPost = Object.assign({}, post);
28 metaPost.title = `${post.title} - ${section}`;
29 metaPost.description =
30 section === "Podcast" ? `${post.podcast} - ${post.date}` : post.description;
31 section === "Article" ? `${post.publication} - ${post.date}` : post.description;
32 return (
33 <Container>
34 <Head>
35 <title>
36 {post.title} • {section}
37 </title>
38 {Meta(metaPost)}
39 </Head>
40 <IntraNav ourSite="https://urbit.org" search={search} />
41 <SingleColumn>
42 <Header search={search} />
43 <Section narrow className="space-y-12">
44 <div className="flex items-center space-x-4">
45 <img src={post.image} className="w-36" />
46 <div className="flex flex-col pl-2">
47 <h1 className={classnames({ "text-3xl": section === "Podcast" },{ "text-3xl": section === "Article" })}>
48 {post.title}
49 </h1>
50 <p>{section}</p>
51 </div>
52 </div>
53 {/* General purpose metadata bar -- podcast listen button is special-cased URL, flexed at the end of the row */}
54 <div className="flex justify-between">
55 <div className="flex space-x-12">
56 {post?.podcast && (
57 <div className="flex flex-col">
58 <p className="font-bold text-wall-400">Podcast</p>
59 <p>{post.podcast}</p>
60 </div>
61 )}
62 {post?.publication && (
63 <div className="flex flex-col">
64 <p className="font-bold text-wall-400">Publication</p>
65 <p>{post.publication}</p>
66 </div>
67 )}
68 {post?.author && (
69 <div className="flex flex-col">
70 <p className="font-bold text-wall-400">Author</p>
71 <p>{post.author}</p>
72 </div>
73 )}
74 {post?.date && (
75 <div className="flex flex-col">
76 <p className="font-bold text-wall-400">Date</p>
77 <p className="shrink-0">{post.date}</p>
78 </div>
79 )}
81 {post?.URL && section !== "Podcast" && section !== "Article" && (
82 <div className="flex flex-col">
83 <p className="font-bold text-wall-400">Website</p>
84 <a
85 className="text-green-400 text-sm font-semibold font-mono"
86 href={post.URL}
87 >
88 {post.URL.slice(post.URL.indexOf("://") + 3)}
89 </a>
90 </div>
91 )}
93 {post?.URL && section === "Urbit Marketplace" && (
94 <div className="flex flex-col">
95 <p className="font-bold text-wall-400">Accepts</p>
96 <p className="text-sm font-semibold font-mono">
97 {post.payment.join(", ")}
98 </p>
99 </div>
100 )}
101 </div>
102 {post?.URL && section === "Podcast" && (
103 <a
104 href={post.URL}
105 className="button-lg bg-green-400 text-white cursor-pointer flex space-x-2"
106 >
107 <img src="/images/sound.svg" />
108 &nbsp;Listen
109 </a>
110 )}
111 {post?.URL && section === "Article" && (
112 <a
113 href={post.URL}
114 className="button-lg bg-green-400 text-white cursor-pointer flex space-x-2"
115 >
116 Read
117 </a>
118 )}
119 </div>
120 <div className="flex">
121 <div className="markdown w-full">
122 <Markdown.render content={JSON.parse(markdown)} />
123 {children}
124 </div>
125 </div>
126 </Section>
127 </SingleColumn>
128 <Footer />
129 </Container>
130 );