From 9a105ba45e48bc45394dc28cbb5c473670e3a8fe Mon Sep 17 00:00:00 2001
From: Roman Timashev <roman@tmshv.ru>
Date: Tue, 3 Mar 2020 02:25:07 +0300
Subject: [PATCH] page update

---
 pages/[...slug].tsx                 |  9 +++++++--
 src/components/Page/index.tsx       | 25 +++++++++++++++++++++----
 src/components/PageHeader/index.tsx | 22 ----------------------
 src/components/PageMeta/index.tsx   | 23 +++++++++++++++++++++++
 src/components/PageMeta/styles.css  |  5 +++++
 src/components/TagList/index.tsx    | 10 ++++++++--
 src/style/components/Article.scss   |  4 ----
 src/types.ts                        |  2 ++
 8 files changed, 66 insertions(+), 34 deletions(-)
 delete mode 100644 src/components/PageHeader/index.tsx
 create mode 100644 src/components/PageMeta/index.tsx
 create mode 100644 src/components/PageMeta/styles.css

diff --git a/pages/[...slug].tsx b/pages/[...slug].tsx
index e632e75f..b5e261df 100644
--- a/pages/[...slug].tsx
+++ b/pages/[...slug].tsx
@@ -6,7 +6,7 @@ import { Meta } from 'src/components/Meta'
 import { MetaBuilder } from 'src/lib/meta'
 import { createApiUrl, requestGet, IResponseItems } from 'src/next-lib'
 import { NextPage } from 'next'
-import { IBreadcumbsPart, IMeta, IPage } from 'src/types'
+import { IBreadcumbsPart, IMeta, IPage, ITag } from 'src/types'
 
 function array<T>(value: T | T[]) {
     return Array.isArray(value)
@@ -16,6 +16,8 @@ function array<T>(value: T | T[]) {
 
 type Props = {
     title: string
+    tags: ITag[]
+    date: string
     content: string
     breadcrumb: IBreadcumbsPart[]
     meta?: IMeta
@@ -37,7 +39,8 @@ const Index: NextPage<Props> = props => (
         </Head>
 
         <Page
-            showSocialShare={true}
+            tags={props.tags}
+            date={props.date ? new Date(props.date) : null}
         >
             {props.content}
         </Page>
@@ -68,6 +71,8 @@ export const unstable_getStaticProps = async (ctx: any) => {
         props: {
             content: page.data,
             title: page.title,
+            tags: page.tags,
+            date: page.date,
             meta,
             breadcrumb,
         }
diff --git a/src/components/Page/index.tsx b/src/components/Page/index.tsx
index 5fcf8f0d..09176002 100644
--- a/src/components/Page/index.tsx
+++ b/src/components/Page/index.tsx
@@ -1,21 +1,38 @@
 import { Share } from '../Share'
 import { Html } from '../Html'
+import { PageMeta } from '../PageMeta'
+import { ITag } from 'src/types'
 
 export interface IPageProps {
-    showSocialShare: boolean
     children: string
+    date: Date
+    tags: ITag[]
 }
 
 export const Page: React.FC<IPageProps> = props => (
     <div className={'Article'}>
+        <style jsx>{`
+            hr {
+                border: 1px solid black;
+                margin-top: var(--size-m);
+                margin-bottom: var(--size-m);
+            }
+        `}</style>
         <div className={'Article-Body'}>
             <Html
                 html={props.children}
             />
         </div>
 
-        {!props.showSocialShare ? null : (
-            <Share />
-        )}
+        <hr />
+        <Share />
+
+        <PageMeta
+            style={{
+                marginTop: 'var(--size-m)',
+            }}
+            date={props.date}
+            tags={props.tags}
+        />
     </div>
 )
diff --git a/src/components/PageHeader/index.tsx b/src/components/PageHeader/index.tsx
deleted file mode 100644
index 6dbcd894..00000000
--- a/src/components/PageHeader/index.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as React from 'react'
-import { dateFormat } from '../../lib/date'
-
-export interface IPageHeaderProps {
-    tags?: string[]
-    date?: Date
-    title: string
-}
-
-export const PageHeader: React.FC<IPageHeaderProps> = props => (
-    <header className="Article-Head">
-        <h1>{props.title}</h1>
-
-        {!props.date ? null : (
-            <p className="date">{dateFormat(props.date)}</p>
-        )}
-
-        {/* {!(tags.length) ? null : (
-            <TagList tags={tags} />
-        )} */}
-    </header>
-)
diff --git a/src/components/PageMeta/index.tsx b/src/components/PageMeta/index.tsx
new file mode 100644
index 00000000..4a0fc8c0
--- /dev/null
+++ b/src/components/PageMeta/index.tsx
@@ -0,0 +1,23 @@
+import './styles.css'
+
+import { dateFormat } from 'src/lib/date'
+import { ITag } from 'src/types'
+import { TagList } from '../TagList'
+
+export type PageMetaProps = {
+    style?: React.CSSProperties
+    date?: Date
+    tags?: ITag[]
+}
+
+export const PageMeta: React.FC<PageMetaProps> = props => (
+    <header className={'pageMeta'} style={props.style}>
+        {!props.date ? null : (
+            <p className={'date'}>Опубликовано: {dateFormat(props.date)}</p>
+        )}
+
+        {!(props.tags.length) ? null : (
+            <TagList items={props.tags} />
+        )}
+    </header>
+)
diff --git a/src/components/PageMeta/styles.css b/src/components/PageMeta/styles.css
new file mode 100644
index 00000000..fa1c61b1
--- /dev/null
+++ b/src/components/PageMeta/styles.css
@@ -0,0 +1,5 @@
+.pageMeta {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
diff --git a/src/components/TagList/index.tsx b/src/components/TagList/index.tsx
index 644ed604..3b72b3b8 100644
--- a/src/components/TagList/index.tsx
+++ b/src/components/TagList/index.tsx
@@ -5,7 +5,13 @@ import { Button } from '../Button'
 
 export const Tag: React.FC<{ href: string }> = props => (
     <li className={'tagsItem'}>
-        <Button href={props.href}>{props.children}</Button>
+        <Button
+            href={props.href}
+            size={'small'}
+            disabled={true}
+        >
+            {props.children}
+        </Button>
     </li>
 )
 
@@ -20,7 +26,7 @@ export const TagList: React.FC<TagListProps> = props => (
                 key={x.slug}
                 href={x.href}
             >
-                # {x.name}
+                {x.name}
             </Tag>
         ))}
     </ul>
diff --git a/src/style/components/Article.scss b/src/style/components/Article.scss
index 02aacff5..79100fa9 100644
--- a/src/style/components/Article.scss
+++ b/src/style/components/Article.scss
@@ -6,10 +6,6 @@
     hyphens: auto;
     margin-bottom: var(--post-margin);
 
-    &-Head {
-        margin-bottom: 1.25em;
-    }
-
     h1 {
         margin-bottom: var(--size-s);
     }
diff --git a/src/types.ts b/src/types.ts
index 7fe64ce1..11d3d5da 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -13,9 +13,11 @@ export interface IPage {
     title: string
     url: string
     data: string
+    date: string
     preview: ImageDefinition
     description: string
     tokens: any[]
+    tags: ITag[]
     breadcrumb?: IBreadcumbsPart[]
 }