git.iko.soy/urbit.org
on master help sign in
ecosystem: break out metadatablock component
397b1e7Matilde Park
components/ecosystem/BasicPage.js+19−18
compare with master
unifiedsplit
@@ -12,6 +12,7 @@ import {
12} from "@urbit/foundation-design-system";
12} from "@urbit/foundation-design-system";
13import Header from "../Header";
13import Header from "../Header";
14import Footer from "../Footer";
14import Footer from "../Footer";
15+import MetadataBlock from "./MetadataBlock";
15
16
16export default function BasicPage({
17export default function BasicPage({
17 section,
18 section,
@@ -28,7 +29,7 @@ export default function BasicPage({
28 metaPost.title = `${post.title} - ${section}`;
29 metaPost.title = `${post.title} - ${section}`;
29 metaPost.description =
30 metaPost.description =
30 section === "Podcast" ? `${post.podcast} - ${post.date}` : post.description;
31 section === "Podcast" ? `${post.podcast} - ${post.date}` : post.description;
31− section === "Article" ? `${post.publication} - ${post.date}` : post.description;
32+ section === "Article" ? `${post.publication} - ${post.date}` : post.description;
32 return (
33 return (
33 <Container>
34 <Container>
34 <Head>
35 <Head>
@@ -44,7 +45,7 @@ export default function BasicPage({
44 <div className="flex items-center space-x-4">
45 <div className="flex items-center space-x-4">
45 <img src={post.image} className="w-36" />
46 <img src={post.image} className="w-36" />
46 <div className="flex flex-col pl-2">
47 <div className="flex flex-col pl-2">
47− <h1 className={classnames({ "text-3xl": section === "Podcast" },{ "text-3xl": section === "Article" })}>
48+ <h1 className={classnames({ "text-3xl": section === "Podcast" }, { "text-3xl": section === "Article" })}>
48 {post.title}
49 {post.title}
49 </h1>
50 </h1>
50 <p>{section}</p>
51 <p>{section}</p>
@@ -54,28 +55,28 @@ export default function BasicPage({
54 <div className="flex justify-between">
55 <div className="flex justify-between">
55 <div className="flex space-x-12">
56 <div className="flex space-x-12">
56 {post?.podcast && (
57 {post?.podcast && (
57− <div className="flex flex-col">
58+ <MetadataBlock
58− <p className="font-bold text-wall-400">Podcast</p>
59+ title="Podcast"
59− <p>{post.podcast}</p>
60+ content={post.podcast}
60− </div>
61+ />
61 )}
62 )}
62 {post?.publication && (
63 {post?.publication && (
63− <div className="flex flex-col">
64+ <MetadataBlock
64− <p className="font-bold text-wall-400">Publication</p>
65+ title="Publication"
65− <p>{post.publication}</p>
66+ content={post.publication}
66− </div>
67+ />
67 )}
68 )}
68 {post?.author && (
69 {post?.author && (
69− <div className="flex flex-col">
70+ <MetadataBlock
70− <p className="font-bold text-wall-400">Author</p>
71+ title="Author"
71− <p>{post.author}</p>
72+ content={post.author}
72− </div>
73+ />
73 )}
74 )}
74 {post?.date && (
75 {post?.date && (
75− <div className="flex flex-col">
76+ <MetadataBlock
76− <p className="font-bold text-wall-400">Date</p>
77+ title="Date"
77− <p className="shrink-0">{post.date}</p>
78+ content={post.date}
78− </div>
79+ />
79 )}
80 )}
80
81
81 {post?.URL && section !== "Podcast" && section !== "Article" && (
82 {post?.URL && section !== "Podcast" && section !== "Article" && (
components/ecosystem/MetadataBlock.jsnew file+7
@@ -0,0 +1,7 @@
1+export default function MetadataBlock({ title, content }) {
2+ return <div className="flex flex-col">
3+ <p className="font-bold text-wall-400">{title}</p>
4+ <p>{content}</p>
5+ </div>
6+
7+}