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