git.iko.soy/urbit.org
on 5a44199 help sign in
urbit.org/components/ecosystem/BasicPage.js
109 lines 3.5 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 group,
21 markdown,
22 search,
23 children,
24}) {
25 const router = useRouter();
26 if (!router.isFallback && !post?.slug) {
27 return <ErrorPage />;
28 }
29 return (
30 <Container>
31 <Head>
32 <title>
33 {post.title} • {section} • Urbit
34 </title>
35 {Meta(post)}
36 </Head>
37 <IntraNav ourSite="https://urbit.org" search={search} />
38 <SingleColumn>
39 <Header />
40 <Section narrow className="space-y-12">
41 <div className="flex items-center space-x-4">
42 <img src={post.image} className="w-36" />
43 <div className="flex flex-col">
44 <h1
45 className={classnames({ "text-3xl": section === "Podcasts" })}
46 >
47 {post.title}
48 </h1>
49 <p>{section.slice(0, -1)}</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 !== "Podcasts" && (
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 {(group || post?.group) && (
79 <div className="flex flex-col">
80 <p className="font-bold text-wall-400">Group</p>
81 <Link href={`/groups/${post.group}`} passHref>
82 <a className="text-green-400 text-sm font-semibold font-mono">
83 {group?.title || post.group}
84 </a>
85 </Link>
86 </div>
87 )}
88 </div>
89 {post?.URL && section === "Podcasts" && (
90 <div className="button-lg bg-green-400 text-white cursor-pointer flex space-x-2">
91 <img src="/images/sound.svg" />
92 <a target="_blank" href={post.URL}>
93 Listen
94 </a>
95 </div>
96 )}
97 </div>
98 <div className="flex">
99 <div className="markdown">
100 <Markdown.render content={JSON.parse(markdown)} />
101 {children}
102 </div>
103 </div>
104 </Section>
105 </SingleColumn>
106 <Footer />
107 </Container>
108 );