git.iko.soy/urbit.org
on master help sign in
components/ecosystem: add ecosystem page template
9f2222aMatilde Park
components/ecosystem/BasicPage.jsnew file+109
compare with master
unifiedsplit
@@ -0,0 +1,109 @@
1+import { useRouter } from "next/router";
2+import Link from "next/link";
3+import Head from "next/head";
4+import Meta from "../Meta";
5+import ErrorPage from "../../pages/404";
6+import classnames from "classnames";
7+import {
8+ Container,
9+ SingleColumn,
10+ Section,
11+ Markdown,
12+ IntraNav,
13+} from "foundation-design-system";
14+import Header from "../Header";
15+import Footer from "../Footer";
16+
17+export 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+ );
109+}