bubble/devthread.ru
1
0
Fork 0
mirror of https://github.com/sergeyyarkov/devthread.ru.git synced 2026-10-11 02:09:04 +03:00
Code Issues Packages Projects Releases Wiki Activity

showing length

Browse Source
This commit is contained in:
Sergey Yarkov 2020-07-05 13:05:05 +03:00
parent cb0d8f9072
commit ce05970d51
4 changed files with 37 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/Articles/Articles.scss
View File

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

17
src/components/Articles/Search/Search.js Normal file
View File

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

6
src/pages/articles.js
View File

@ -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">
<input placeholder="Напишите сюда чтобы отфильтровать статьи" type="text" />
<span>278</span>
</div>
<Search articlesLength={edges.edges.length} />
</div>
</div>
</div>

11
src/templates/categoryTemplate.js
View File

@ -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">
<input placeholder="Напишите сюда чтобы отфильтровать статьи" type="text" />
<span>{edges.edges.length}</span>
<Search articlesLength={edges.edges.length} />
<div className="articles-info">
<p>Показано {edges.edges.length} из категории "{title}"</p>
</div>
</div>
</div>