render tag

src/components/Offers/Offers.js

@@ -1,12 +1,16 @@
 import React from 'react';
+import useTagsQuery from '../../hooks/useTagsQuery'
 import './Offers.scss'
 import Tags from './Tags/Tags'
+import TagItem from './Tags/TagItem'
 
 import PopularIcon from '../../images/popular-icon.svg'
 import ViewsIcon from '../../images/views-icon.svg'
 import BooksIcon from '../../images/books-icon.svg'
 
 const Offers = () => {
+  const { tags } = useTagsQuery()
+
   return (
     <div className="offers">
       <div className="offers-popular offer-box">
@@ -25,7 +29,9 @@ const Offers = () => {
           </div>)}
         </div>
       </div>
-      <Tags />
+      <Tags>
+        {tags.map(({ node }, i) => <TagItem key={i} title={node.frontmatter.title} />)}
+      </Tags>
       <div className="offers-books offer-box">
         <div className="offers-books__heading offer-heading">
           <BooksIcon />

src/components/Offers/Tags/TagItem.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Link } from 'gatsby'
+import sligify from '../../../helpers/slugify'
+
+const TagItem = ({ title }) => {
+  return (
+    <div className="tag-item">
+      <Link to={`/tag/${sligify(title)}`}>{title}</Link>
+    </div>
+  )
+}
+
+export default TagItem

src/components/Offers/Tags/Tags.js

@@ -1,20 +1,8 @@
 import React from 'react'
-import { Link } from 'gatsby'
-import sligify from '../../../helpers/slugify'
-import useTagsQuery from '../../../hooks/useTagsQuery'
 
 import TagIcon from '../../../images/tag-icon.svg'
 
-const TagItem = ({ title }) => {
+const Tags = ({ children }) => {
-  return (
-    <div className="tag-item">
-      <Link to={`/tag/${sligify(title)}`}>{title}</Link>
-    </div>
-  )
-}
-
-const Tags = () => {
-  const { edges } = useTagsQuery()
 
   return (
     <div className="offers-tags offer-box">
@@ -23,7 +11,7 @@ const Tags = () => {
         Тэги
       </div>
       <div className="offers-tags__content">
-        {edges.map(({ node }, i) => <TagItem key={i} title={node.frontmatter.title} />)}
+        {children}
       </div>
     </div>
   )

src/hooks/useTagsQuery.js

@@ -14,7 +14,7 @@ const useTagsQuery = () => {
       }
     }
   `)
-  return { edges }
+  return { tags: edges }
 }
 
 export default useTagsQuery