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