showing length

src/components/Articles/Articles.scss

@@ -29,7 +29,7 @@
     margin-bottom: 10px;
   }
   & .articles-search {
-    margin-bottom: 35px;
+    margin-bottom: 20px;
     & input {
       width: 90%;
       height: 45px;
@@ -41,6 +41,12 @@
       font-weight: 700;
     }
   }
+  & .articles-info {
+    margin-bottom: 20px;
+    & p {
+      font-size: 18px;
+    }
+  }
   & .articles-content {
     display: flex;
     justify-content: space-between;
@@ -76,6 +82,11 @@
       color: $white-clr;
     }
   }
+  & .articles-info {
+    & p {
+      color: $white-clr;
+    }
+  }
 }
 
 @media (max-width: 1023px) {

src/components/Articles/Search/Search.js

@@ -0,0 +1,17 @@
+import React from 'react'
+
+const Search = ({ articlesLength }) => {
+	const [length, setLength] = React.useState(0)
+	React.useEffect(() => {
+		setLength(articlesLength)
+	}, [articlesLength])
+	
+	return (
+		<div className="articles-search">
+			<input placeholder="Напишите сюда чтобы отфильтровать статьи" type="text" />
+			<span>{length}</span>
+    </div>
+	)
+}
+
+export default Search

src/pages/articles.js

@@ -4,6 +4,7 @@ import SEO from '../components/SEO/SEO'
 import Layout from '../components/Layout/Layout'
 import Articles from '../components/Articles/Articles'
 import Categories from '../components/Articles/Categories/Categories'
+import Search from '../components/Articles/Search/Search'
 import Offers from '../components/Offers/Offers'
 import Newsletter from '../components/Newsletter/Newsletter'
 
@@ -20,10 +21,7 @@ const ArticlesPage = ({ data: { allMarkdownRemark: edges } }) => {
                   <h1>Статьи</h1>
                 </div>
                 <Categories />
-                <div className="articles-search">
+                <Search articlesLength={edges.edges.length} />
-                  <input placeholder="Напишите сюда чтобы отфильтровать статьи" type="text" />
-                  <span>278</span>
-                </div>
               </div>
             </div>
           </div>

src/templates/categoryTemplate.js

@@ -3,14 +3,15 @@ import { graphql } from 'gatsby'
 import SEO from '../components/SEO/SEO'
 import Layout from '../components/Layout/Layout'
 import Articles from '../components/Articles/Articles'
+import Search from '../components/Articles/Search/Search'
 import Categories from '../components/Articles/Categories/Categories'
 import Offers from '../components/Offers/Offers'
 import Newsletter from '../components/Newsletter/Newsletter'
 
-const CategoryPage = ({ data: { allMarkdownRemark: edges } }) => {
+const CategoryPage = ({ data: { allMarkdownRemark: edges }, pathContext: { title } }) => {
   return (
     <Layout>
-      <SEO title='Категория' />
+      <SEO title={title} />
       <main>
         <div className="container-fluid">
           <div className="row">
@@ -20,9 +21,9 @@ const CategoryPage = ({ data: { allMarkdownRemark: edges } }) => {
                   <h1>Статьи</h1>
                 </div>
                 <Categories />
-                <div className="articles-search">
+                <Search articlesLength={edges.edges.length} />
-                  <input placeholder="Напишите сюда чтобы отфильтровать статьи" type="text" />
+                <div className="articles-info">
-                  <span>{edges.edges.length}</span>
+                  <p>Показано {edges.edges.length} из категории "{title}"</p>
                 </div>
               </div>
             </div>