article tags refactoring

pages/article/[slug].tsx

@@ -1,7 +1,7 @@
 import Head from 'next/head'
 import { get } from 'lodash'
 import { App } from 'src/components/App'
-import Article from 'src/components/Article'
+import { Article } from 'src/components/Article'
 import { Html } from 'src/components/Html'
 import menuModel from 'src/models/menu'
 import { buildMenu } from 'src/lib/menu'
@@ -9,11 +9,12 @@ import { Meta } from 'src/components/Meta'
 import { meta } from 'src/lib/meta'
 import { createApiUrl, requestGet, IResponseItems } from 'src/next-lib'
 import { NextPage } from 'next'
+import { IArticle } from 'src/types'
 
 type Props = {
     pageUrl: string
     meta: any
-    data: any //(article)
+    data: IArticle
 }
 
 const Page: NextPage<Props> = props => {

src/components/Article/index.tsx

@@ -1,21 +1,21 @@
 import { dateFormat } from 'src/lib/date'
 import { Share } from '../Share'
+import { TagList } from '../TagList'
+import { ITag } from 'src/types'
 
-const Tag = ({ children }) => (
+export type ArticleProps = {
-    <li className="ArticleTags-Item">
+    date: string
-        {children}
+    title: string
-    </li>
+    tags: ITag[]
-)
+    shareable: boolean
+}
 
-const TagList = ({ tags }) => (
+type HeadProps = {
-    <ul className="ArticleTags">
+    date: string
-        {tags.map((x, i) => (
+    tags: ITag[]
-            <Tag key={i}># {x.name}</Tag>
+}
-        ))}
-    </ul>
-)
 
-const Head = ({ date, tags = [], children }) => (
+const Head: React.FC<HeadProps> = ({ date, tags = [], children }) => (
     <header className="Article-Head">
         <style jsx>{`
             .date {
@@ -29,13 +29,13 @@ const Head = ({ date, tags = [], children }) => (
             <p className={'date'}>{dateFormat(date)}</p>
         )}
 
-        {!(tags.length) ? null : (
+        {!tags.length ? null : (
-            <TagList tags={tags} />
+            <TagList items={tags} />
         )}
     </header>
 )
 
-export const Article = ({ children, date, tags, title, shareable }) => (
+export const Article: React.FC<ArticleProps> = ({ children, date, tags, title, shareable }) => (
     <article className="Article">
         <Head
             date={date}

src/components/TagList/index.tsx

@@ -0,0 +1,27 @@
+import './styles.css'
+
+import { ITag } from 'src/types'
+import { Button } from '../Button'
+
+export const Tag: React.FC<{ href: string }> = props => (
+    <li className={'tagsItem'}>
+        <Button href={props.href}>{props.children}</Button>
+    </li>
+)
+
+export type TagListProps = {
+    items: ITag[]
+}
+
+export const TagList: React.FC<TagListProps> = props => (
+    <ul className={'tags'}>
+        {props.items.map(x => (
+            <Tag
+                key={x.slug}
+                href={x.href}
+            >
+                # {x.name}
+            </Tag>
+        ))}
+    </ul>
+)

src/components/TagList/styles.css

@@ -0,0 +1,17 @@
+/* ELEMENTS */
+
+.tags {
+    display: flex;
+    flex-direction: row;
+    /* justify-content: center; */
+
+    list-style: none;
+}
+
+.tagsItem {
+    margin-right: var(--size-s);
+}
+
+.tagsItem:last-child {
+    margin-right: 0;
+}

src/style/components/ArticleTags.scss

@@ -1,29 +0,0 @@
-.ArticleTags {
-  --article-card-width: 30%;
-  --article-card-margin: var(--single-margin) var(--half-margin);
-
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-
-  list-style: none;
-
-  &-Item {
-    background: #99bde1;
-    padding: 3px 9px;
-
-    font-size: 14px;
-    color: #393939;
-
-    border-radius: 3px;
-  }
-
-  &-Item {
-    margin-right: 0.5em;
-
-    &:last-child {
-      margin-right: 0;
-
-    }
-  }
-}

src/style/style.scss

@@ -7,7 +7,6 @@
 @import "components/footer-links";
 @import "components/Article";
 @import "components/album";
-@import "components/ArticleTags";
 
 @import "content";
 

src/types.ts

@@ -31,8 +31,15 @@ export interface IImage {
     set: any // TODO
 }
 
+export interface ITag {
+    name: string
+    slug: string
+    href: string
+}
+
 export interface IArticle {
     id: string
+    tags: ITag[]
     featured: boolean
     url: string
     title: string