hamid zarghami
47 lines
1.8 KiB
TypeScript
47 lines
1.8 KiB
TypeScript
import { clx } from '@/helpers/utils'
|
||
import { FC } from 'react'
|
||
import { useGetBlogCategories } from '../hooks/useBlogsData'
|
||
import Image from 'next/image'
|
||
import { useBlogStore } from '../store/BlogStore'
|
||
const Category: FC = () => {
|
||
|
||
const { data } = useGetBlogCategories()
|
||
const { selectedCategory, setSelectedCategory } = useBlogStore()
|
||
|
||
return (
|
||
<div className='w-full rounded-4xl bg-white p-4'>
|
||
<h4>
|
||
دسته بندی مطالب
|
||
</h4>
|
||
|
||
<div className='flex flex-col gap-4 mt-7 text-sm'>
|
||
<div className={clx(
|
||
'h-10 bg-[#ECEFF6] rounded-xl p-2.5 flex items-center gap-2 ',
|
||
selectedCategory === "" ? 'bg-black text-white' : ''
|
||
)} onClick={() => setSelectedCategory("")}>
|
||
<div className='size-5 bg-white rounded-full'></div>
|
||
<h6>همه</h6>
|
||
</div>
|
||
{
|
||
data?.data?.categories?.map((item) => {
|
||
return (
|
||
<div key={item.id} className={clx(
|
||
'h-10 bg-[#ECEFF6] rounded-xl p-2.5 flex items-center gap-2 cursor-pointer',
|
||
selectedCategory === item.id ? 'bg-black text-white' : ''
|
||
)} onClick={() => setSelectedCategory(item.id)}>
|
||
<div className='size-5 rounded-full overflow-hidden'>
|
||
<Image src={item.iconUrl} alt={item.title} width={20} height={20} />
|
||
</div>
|
||
<h6>{item.title}</h6>
|
||
</div>
|
||
)
|
||
})
|
||
}
|
||
|
||
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default Category |