git.iko.soy/urbit.org
on 1144faa help sign in
urbit.org/components/ecosystem/BasicPage.js
109 lines 3.6 kB history raw
1import { useRouter } from "next/router";
2import Link from "next/link";
3import Head from "next/head";
4import Meta from "../Meta";
5import ErrorPage from "../../pages/404";
6import classnames from "classnames";
7import {
8 Container,
9 SingleColumn,
10 Section,
11 Markdown,
12 IntraNav,
13} from "@urbit/foundation-design-system";
14import Header from "../Header";
15import Footer from "../Footer";
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 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 />
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" })}>
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?.date && (
63 <div className="flex flex-col">
64 <p className="font-bold text-wall-400">Date</p>
65 <p className="shrink-0">{post.date}</p>
66 </div>
67 )}
68 {post?.URL && section !== "Podcast" && (
69 <div className="flex flex-col">
70 <p className="font-bold text-wall-400">Website</p>
71 <a
72 className="text-green-400 text-sm font-semibold font-mono"
73 href={post.URL}
74 >
75 {post.URL.slice(post.URL.indexOf("://") + 3)}
76 </a>
77 </div>
78 )}
79 {post?.URL && section === "Urbit Marketplace" && (
80 <div className="flex flex-col">
81 <p className="font-bold text-wall-400">Accepts</p>
82 <p className="text-sm font-semibold font-mono">
83 {post.payment.join(", ")}
84 </p>
85 </div>
86 )}
87 </div>
88 {post?.URL && section === "Podcast" && (
89 <a
90 href={post.URL}
91 className="button-lg bg-green-400 text-white cursor-pointer flex space-x-2"
92 >
93 <img src="/images/sound.svg" />
94 &nbsp;Listen
95 </a>
96 )}
97 </div>
98 <div className="flex">
99 <div className="markdown w-full">
100 <Markdown.render content={JSON.parse(markdown)} />
101 {children}
102 </div>
103 </div>
104 </Section>
105 </SingleColumn>
106 <Footer />
107 </Container>
108 );