git.iko.soy/urbit.org
on 04cb079 help sign in
urbit.org/components/ecosystem/BasicPage.js
108 lines 3.6 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 return (
32 <Container>
33 <Head>
34 <title>
35 {post.title} • {section}
36 </title>
37 {Meta(metaPost)}
38 </Head>
39 <IntraNav ourSite="https://urbit.org" search={search} />
40 <SingleColumn>
41 <Header search={search} />
42 <Section narrow className="space-y-12">
43 <div className="flex items-center space-x-4">
44 <img src={post.image} className="w-36" />
45 <div className="flex flex-col pl-2">
46 <h1 className={classnames({ "text-3xl": section === "Podcast" })}>
47 {post.title}
48 </h1>
49 <p>{section}</p>
50 </div>
51 </div>
52 {/* General purpose metadata bar -- podcast listen button is special-cased URL, flexed at the end of the row */}
53 <div className="flex justify-between">
54 <div className="flex space-x-12">
55 {post?.podcast && (
56 <div className="flex flex-col">
57 <p className="font-bold text-wall-400">Podcast</p>
58 <p>{post.podcast}</p>
59 </div>
60 )}
61 {post?.date && (
62 <div className="flex flex-col">
63 <p className="font-bold text-wall-400">Date</p>
64 <p className="shrink-0">{post.date}</p>
65 </div>
66 )}
67 {post?.URL && section !== "Podcast" && (
68 <div className="flex flex-col">
69 <p className="font-bold text-wall-400">Website</p>
70 <a
71 className="text-green-400 text-sm font-semibold font-mono"
72 href={post.URL}
73 >
74 {post.URL.slice(post.URL.indexOf("://") + 3)}
75 </a>
76 </div>
77 )}
78 {post?.URL && section === "Urbit Marketplace" && (
79 <div className="flex flex-col">
80 <p className="font-bold text-wall-400">Accepts</p>
81 <p className="text-sm font-semibold font-mono">
82 {post.payment.join(", ")}
83 </p>
84 </div>
85 )}
86 </div>
87 {post?.URL && section === "Podcast" && (
88 <a
89 href={post.URL}
90 className="button-lg bg-green-400 text-white cursor-pointer flex space-x-2"
91 >
92 <img src="/images/sound.svg" />
93 &nbsp;Listen
94 </a>
95 )}
96 </div>
97 <div className="flex">
98 <div className="markdown w-full">
99 <Markdown.render content={JSON.parse(markdown)} />
100 {children}
101 </div>
102 </div>
103 </Section>
104 </SingleColumn>
105 <Footer />
106 </Container>
107 );