page update

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,
         }

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>
 )

src/components/PageHeader/index.tsx

@@ -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>
-)

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>
+)

src/components/PageMeta/styles.css

@@ -0,0 +1,5 @@
+.pageMeta {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}

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>

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);
     }

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[]
 }