src/components/postRoute/Posts.jsx - master - sigma/Cyberblog

src/components/postRoute/Posts.jsx
146 строк4 KB
Александр Пимкин
first_commit
08 авг 2026, 07:59
08 авг 2026, 07:59d7b7ab5
'use client'

import { useSearchParams } from 'next/navigation'
import { useState } from 'react'
import { FiSearch } from 'react-icons/fi'
import { RiMenu4Fill } from 'react-icons/ri'
import { RxCross1 } from 'react-icons/rx'
import Select from 'react-select'
import styles from '../../styles/Header.module.css'
import ButtonBack from '../ButtonBack'
import Card from '../Card'

export default function Posts({ posts: cards }) {
	const searchParams = useSearchParams()

	const enteredText = searchParams.get('enteredText')

	const providedContent = cards.filter(post =>
		post.title.toLowerCase().includes(enteredText)
	)
	const [posts, setPosts] = useState(
		providedContent.length !== 0 ? providedContent : cards
	)

	const [click, setClick] = useState(true)
	const [optionsPicked, setOptionsPicked] = useState([])
	const [optionsTag, setOptionsTag] = useState([])

	console.log(providedContent)

	const cathegories = []
	cards.map(post =>
		cathegories.push({ value: post.cathegory, label: post.cathegory })
	)

	const tags = []
	cards.map(post => {
		post.tags.split(',').map(tag => {
			tags.push({ value: tag, label: tag })
		})
	})

	const filteredCathegories = []
	optionsPicked.map(filter => {
		filteredCathegories.push(filter.value)
	})

	const filteredTags = []

	optionsTag.map(option => {
		filteredTags.push(option.value)
	})

	const filters = [...filteredCathegories, ...filteredTags]
	return (
		<div>
			<span className='flex justify-center h-28 items-center'>
				<ButtonBack />
				<span className={styles.box}>
					<FiSearch className='text-2xl font-bold text-white' />
					<input
						type='search'
						className={styles.field}
						placeholder='Нажмите для поиска'
						onChange={e =>
							setPosts(
								cards.filter(post =>
									post.title.toLowerCase().includes(e.target.value)
								)
							)
						}
						onFocus={() => setPosts(cards)}
					/>
				</span>
				<div className='flex justify-end fixed right-6 top-10'>
					{click ? (
						<button onClick={() => setClick(!click)}>
							<RiMenu4Fill
								className={'text-white text-4xl mt-3 pointer mr-3'}
							/>
						</button>
					) : (
						<div className='w-64 h-screen bg-extra bg-opacity-35 backdrop-blur-lg p-3 flex flex-col rounded-lg'>
							<button onClick={() => setClick(!click)}>
								<RxCross1
									className={'text-white text-4xl pointer relative left-[80%]'}
								/>
							</button>
							<span className='flex flex-col gap-5 text-white text-center '>
								<h1 className='text-lg mb-3'>Фильтры</h1>
								<h2>Категории</h2>
								<Select
									options={cathegories}
									isMulti
									name='Категории'
									onChange={option => {
										setOptionsPicked(option)
									}}
									className='text-black'
									on
								/>
								<h2>#Тэги</h2>
								<Select
									options={tags}
									isMulti
									name='Тэги'
									onChange={option => {
										setOptionsTag(option)
									}}
									className='text-black'
									on
								/>
								<button
									onClick={() => {
										if (filters.length !== 0) {
											const filtered = cards.filter(post => {
												const postTags = post.tags.split(',').join(' ')
												console.log(postTags)
												return filters.includes(post.cathegory || postTags)
											})
											setPosts(filtered)
										} else {
											setPosts(cards)
										}
									}}
									className='text-lg py-2 px-2 text-white bg-extra rounded-full'
								>
									Применить
								</button>
							</span>
						</div>
					)}
				</div>
			</span>
			<ul className='flex justify-center flex-col gap-24 pt-20'>
				{posts.length !== 0 ? (
					posts.map(post => {
						return <Card key={post.id} post={post} />
					})
				) : (
					<h1 className='text-3xl text-white text-center'>Ничего не найдено</h1>
				)}
			</ul>
		</div>
	)
}