git.iko.soy/urbit.org
on fbd04ff help sign in
urbit.org/components/ecosystem/BasicPage.js
107 lines 3.4 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 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 pl-2">
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 {post?.URL && section === "Marketplaces" && (
78 <div className="flex flex-col">
79 <p className="font-bold text-wall-400">Accepts</p>
80 <p className="text-sm font-semibold font-mono">
81 {post.payment.join(", ")}
82 </p>
83 </div>
84 )}
85 </div>
86 {post?.URL && section === "Podcasts" && (
87 <a
88 href={post.URL}
89 className="button-lg bg-green-400 text-white cursor-pointer flex space-x-2"
90 >
91 <img src="/images/sound.svg" />
92 &nbsp;Listen
93 </a>
94 )}
95 </div>
96 <div className="flex">
97 <div className="markdown w-full">
98 <Markdown.render content={JSON.parse(markdown)} />
99 {children}
100 </div>
101 </div>
102 </Section>
103 </SingleColumn>
104 <Footer />
105 </Container>
106 );