+ {isDefined(preview.headerMedia) ? (
+ 
+ ) : null}
+
+
+);
diff --git a/components/post-overview/elements/Avatar.tsx b/components/post-overview/elements/Avatar.tsx
new file mode 100644
index 0000000..79ba545
--- /dev/null
+++ b/components/post-overview/elements/Avatar.tsx
@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+type Props = {
+ imgUrl: string;
+};
+
+export default ({ imgUrl }: Props) => (
+
+
+
+
+ {title}
+
+
+ {tags.length > 0 ? (
+
+
+ ) : null}
+
+
+
+
+
+ 
+);
diff --git a/components/post-overview/elements/NameAndData.tsx b/components/post-overview/elements/NameAndData.tsx
new file mode 100644
index 0000000..d440ab4
--- /dev/null
+++ b/components/post-overview/elements/NameAndData.tsx
@@ -0,0 +1,16 @@
+import { DateTime } from 'luxon';
+import * as React from 'react';
+
+type Props = {
+ name: string;
+ date: DateTime;
+};
+
+export default ({ name, date }: Props) => (
+
+
+);
diff --git a/components/post-overview/elements/Share.tsx b/components/post-overview/elements/Share.tsx
new file mode 100644
index 0000000..c179954
--- /dev/null
+++ b/components/post-overview/elements/Share.tsx
@@ -0,0 +1,31 @@
+import { DateTime } from 'luxon';
+import * as React from 'react';
+
+import { faTwitter } from '@fortawesome/free-brands-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+const twitterShareLink = 'https://twitter.com/intent/tweet';
+
+type Props = {
+ link: string;
+ text: string;
+};
+
+function buildTwitterShareLink(link: string, text: string): string {
+ return `${twitterShareLink}?text=${escape(text.slice(0, 279))}&url=${encodeURI(link)}`;
+}
+
+export default ({ link, text }: Props) => {
+ const twitterUrl = buildTwitterShareLink(link, text);
+ return (
+ {name}
+
+ {date.toLocaleString({ month: 'long', day: 'numeric' })}
+
+
+
+ );
+};
diff --git a/components/post-overview/elements/Tags.tsx b/components/post-overview/elements/Tags.tsx
new file mode 100644
index 0000000..533899d
--- /dev/null
+++ b/components/post-overview/elements/Tags.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { Tag } from '../../../src/posts/post';
+
+type Props = {
+ tags: Tag[];
+};
+
+export default ({ tags }: Props) => (
+ Share:
+
+
+ {tags.map((t) => (
+
+);
diff --git a/package.json b/package.json
index 5f96af7..9d3feff 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
"export": "next build && next export",
"build": "next build",
"start": "next start",
- "storybook": "start-storybook -s ./public -p 6006 ",
+ "storybook": "start-storybook -s ./story-static -p 6006 ",
"build-storybook": "build-storybook"
},
"dependencies": {
@@ -15,6 +15,9 @@
"@fortawesome/free-brands-svg-icons": "^5.15.3",
"@fortawesome/free-solid-svg-icons": "^5.15.3",
"@fortawesome/react-fontawesome": "^0.1.14",
+ "@types/luxon": "^1.26.5",
+ "install": "^0.13.0",
+ "luxon": "^1.26.0",
"next": "^10.1.0",
"react": "17.0.1",
"react-dom": "17.0.1"
diff --git a/src/posts/paging.ts b/src/posts/paging.ts
new file mode 100644
index 0000000..dd717eb
--- /dev/null
+++ b/src/posts/paging.ts
@@ -0,0 +1,4 @@
+export type Paging = {
+ totalPages: number;
+ currentPage: number;
+};
diff --git a/src/posts/post.ts b/src/posts/post.ts
new file mode 100644
index 0000000..5b337d4
--- /dev/null
+++ b/src/posts/post.ts
@@ -0,0 +1,39 @@
+import { DateTime } from 'luxon';
+import { User } from '../user/user';
+
+export type Post = {
+ createdAt: DateTime;
+ createdBy: User;
+ title: string;
+ preview: Preview;
+ tags: Tag[];
+ postBody: PostBody;
+};
+
+export type Preview = {
+ readTime?: number;
+ headerMedia?: MediaElement;
+};
+
+export type Tag = {
+ text: string;
+};
+
+export type PostBody = {
+ elements: Element[];
+};
+
+type Paragraph = {
+ key: 'Paragraph';
+ text: string;
+};
+
+type Image = {
+ key: 'Image';
+ url: string;
+ alt: string;
+};
+
+type MediaElement = Image;
+
+type Element = Paragraph | MediaElement;
diff --git a/src/user/user.ts b/src/user/user.ts
new file mode 100644
index 0000000..7065e90
--- /dev/null
+++ b/src/user/user.ts
@@ -0,0 +1,4 @@
+export type User = {
+ name: string;
+ avatar: string;
+};
diff --git a/src/util/types.ts b/src/util/types.ts
new file mode 100644
index 0000000..60d12d7
--- /dev/null
+++ b/src/util/types.ts
@@ -0,0 +1,3 @@
+export function isDefined
+ {'#' + t.text}
+
+ ))}
+