Merge pull request #135 from xsnippet/tags

[TAGS] Separate tags into component to be able to reuse

Author: lotrien

src/components/RecentSnippetItem.jsx

@@ -2,6 +2,8 @@ import React from 'react'
 import { Link } from 'react-router-dom'
 import bemi from 'bemi'
 
+import SnippetTags from './common/SnippetTags'
+
 import { downloadSnippet } from '../misc/download'
 import { getCurrentModeCaption } from '../misc/modes'
 import { getSnippetTitle, formatDate } from '../misc/snippet'
@@ -21,9 +23,7 @@ const RecentSnippetItem = ({ snippet }) => {
       <div className={rsi.e('meta')}>
         <div>
           <Link to={`${snippet.get('id')}`} className={rsi.e('meta-title')}>{title}</Link>
-          <div className={rsi.e('meta-tags')}>
-            {snippet.get('tags').map(item => <span className={rsi.e('meta-tag')} key={item}>{item}</span>)}
-          </div>
+          <SnippetTags className={rsi} snippet={snippet} />
         </div>
         <span className={rsi.e('meta-info')}>{formatDate(snippet.get('created_at'))}, by Guest</span>
       </div>

src/components/Snippet.jsx

@@ -5,6 +5,7 @@ import bemi from 'bemi'
 
 import 'brace/theme/textmate'
 
+import SnippetTags from './common/SnippetTags'
 import Spinner from './common/Spinner'
 
 import { fetchSnippet } from '../actions'
@@ -69,20 +70,14 @@ const Snippet = ({ snippet, fetchSnippet, match }) => {
     </div>
   )
 
-  const renderTags = () => (
-    <div className={block.e('data-tags')}>
-      {snippet.get('tags').map(item => <span className={block.e('data-tag')} key={item}>{item}</span>)}
-    </div>
-  )
-
   const renderMetadata = () => (<span className={block.e('data-meta')}>{formatDate(snippet.get('created_at'))}, by Guest</span>)
 
   return (
     <div className={block.b()}>
       <div className={block.e('header')}>
         <div className={block.e('data')}>
           <span className={block.e('data-title')}>{title}</span>
-          {renderTags()}
+          <SnippetTags className={block} snippet={snippet} />
           {renderMetadata()}
         </div>
         <div className={block.e('data-actions')}>

src/components/common/SnippetTags.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const SnippetTags = ({ className, snippet }) => {
+  return (
+    <div className={className.e('meta-tags')}>
+      {snippet.get('tags').map(item => <span className={className.e('meta-tag')} key={item}>{item}</span>)}
+    </div>
+  )
+}
+
+export default SnippetTags

src/styles/Snippet.styl

@@ -19,6 +19,21 @@ button-group-width = 312px
     border-left: 40px solid snippet-header-border
     font-family: font-roboto
 
+  &__meta
+    &-tags
+      margin: 10px 0
+    &-tag
+      margin-right: 5px
+      padding: 3px 8px
+      font-size: 12px
+      font-weight: 300
+      color: text-light
+      border-radius: 9.5px
+      background-color: rgba(text-light, .2)
+      letter-spacing: .4px
+      &:last-shild
+        margin-right: 0
+
   &__data
     display: flex
     flex-flow: column nowrap
@@ -32,8 +47,6 @@ button-group-width = 312px
       display: block
       margin-top: 7px
       font-size: 14px
-    &-tags
-      margin: 10px 0
     &-actions
       display: flex
       flex-flow: column nowrap
@@ -45,17 +58,6 @@ button-group-width = 312px
       color: snippet-header-data
       font-size: 12px
       font-weight: 300
-    &-tag
-      margin-right: 5px
-      padding: 3px 8px
-      font-size: 12px
-      font-weight: 300
-      color: text-light
-      border-radius: 9.5px
-      background-color: rgba(text-light, .2)
-      letter-spacing: .4px
-      &:last-shild
-        margin-right: 0
 
   &__button
     margin-right: 10px