blogs to dmag

2025-06-07 09:36:06 +03:30
parent 1a852837cf
commit 633e5ea147
26 changed files with 47 additions and 47 deletions
@@ -0,0 +1,47 @@
+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