link

src/app/blogs/components/BigBlogItem.tsx

@@ -12,11 +12,15 @@ interface BigBlogItemProps {
 const BigBlogItem: FC<BigBlogItemProps> = ({ item }) => {
     return (
         <div className='w-full rounded-4xl bg-white p-7 flex xl:flex-row flex-col gap-6'>
-            <Image src={item.imageUrl} alt='blog' width={300} height={300} className='size-[150px] object-cover mx-auto xl:mx-0 rounded-4xl' />
+            <Link href={`/blogs/${item.id}`}>
+                <Image src={item.imageUrl} alt='blog' width={300} height={300} className='size-[150px] object-cover mx-auto xl:mx-0 rounded-4xl' />
+            </Link>
             <div className='flex-1'>
-                <h4 className='font-bold text-sm leading-6'>
-                    {item.title}
-                </h4>
+                <Link href={`/blogs/${item.id}`}>
+                    <h4 className='font-bold text-sm leading-6 hover:opacity-70 transition-opacity'>
+                        {item.title}
+                    </h4>
+                </Link>
 
                 <div className='mt-3 flex gap-3 text-xs'>
                     <div className='flex text-[#7D818C] items-center gap-1'>

src/app/blogs/components/BlogList.tsx

@@ -6,9 +6,11 @@ import BigBlogItem from './BigBlogItem'
 import MostVisited from './MostVisited'
 import ContactUs from './ContactUs'
 import { useGetBlogs } from '../hooks/useBlogsData'
+import { useBlogStore } from '../store/BlogStore'
 const BlogList: FC = () => {
 
-    const { data } = useGetBlogs()
+    const { selectedCategory } = useBlogStore()
+    const { data } = useGetBlogs(selectedCategory)
 
     return (
         <div className=''>

src/app/blogs/components/Category.tsx

@@ -4,11 +4,10 @@ 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()
 
-    console.log(data);
-
     return (
         <div className='w-full rounded-4xl bg-white p-4'>
             <h4>

src/app/blogs/components/HeroSection.tsx

@@ -41,7 +41,7 @@ const HeroSection: FC = () => {
             <div className='flex xl:flex-row flex-col gap-8 mt-10'>
                 {
                     data?.data?.mostVisitedBlogs?.map((item, index: number) => {
-                        if (index !== 0) {
+                        if (index !== 0 && index < 4) {
                             return (
                                 <BlogItem key={item.id} item={item} />
                             )

src/app/blogs/components/MiniBlogItem.tsx

@@ -1,19 +1,25 @@
 import Image from 'next/image'
 import { FC } from 'react'
 import { Blog } from '../types/BlogTypes'
+import Link from 'next/link'
 const MiniBlogItem: FC<{ item: Blog }> = ({ item }) => {
     return (
         <div className='flex items-center gap-2'>
-            <Image
-                src={item.imageUrl}
-                alt={item.title}
-                width={72}
-                height={72}
-                className='rounded-xl size-[72px] min-w-[72px] object-cover'
-            />
-            <h6 className='text-xs leading-5 font-bold'>
-                {item.title}
-            </h6>
+            <Link href={`/blogs/${item.id}`}>
+                <Image
+                    src={item.imageUrl}
+                    alt={item.title}
+                    width={72}
+                    height={72}
+                    className='rounded-xl size-[72px] min-w-[72px] object-cover'
+                />
+            </Link>
+
+            <Link href={`/blogs/${item.id}`}>
+                <h6 className='text-xs leading-5 font-bold hover:opacity-70 transition-opacity'>
+                    {item.title}
+                </h6>
+            </Link>
         </div>
     )
 }

src/app/blogs/hooks/useBlogsData.ts

@@ -2,10 +2,10 @@ import { useQuery } from "@tanstack/react-query";
 import * as api from "../service/BlogService";
 
 // برای client
-export const useGetBlogs = () =>
+export const useGetBlogs = (categoryId: string) =>
   useQuery({
-    queryKey: ["blogs"],
-    queryFn: api.getBlogs,
+    queryKey: ["blogs", categoryId],
+    queryFn: () => api.getBlogs(categoryId),
   });
 
 export const useGetMostVisitedBlogs = () =>
@@ -40,8 +40,8 @@ export const useGetBlogSingle = (id: string) =>
 
 // برای server prefetch
 export const blogsQueryOptions = {
-  queryKey: ["blogs"],
-  queryFn: api.getBlogs,
+  queryKey: ["blogs", ""],
+  queryFn: () => api.getBlogs(""),
 };
 
 export const blogSingleQueryOptions = (id: string) => ({

src/app/blogs/service/BlogService.ts

@@ -6,8 +6,12 @@ import {
   BlogSingleResponse,
 } from "../types/BlogTypes";
 
-export const getBlogs = async () => {
-  const { data } = await axios.get<BlogResponse>(`/blogs`);
+export const getBlogs = async (categoryId: string) => {
+  let query = "";
+  if (categoryId) {
+    query = `?categoryId=${categoryId}`;
+  }
+  const { data } = await axios.get<BlogResponse>(`/blogs${query}`);
   return data;
 };
 

src/app/globals.css

@@ -103,3 +103,7 @@ tbody tr {
 .rc-rate-star {
   margin-right: 3px !important; /* فاصله بین ستاره‌ها */
 }
+
+#blog-preview-content * {
+  color: white !important;
+}

src/app/home/Blog.tsx

@@ -14,10 +14,11 @@ const Blog: FC = () => {
 
             <div className='flex xl:flex-row flex-col gap-8 xl:mt-16 mt-10 items-center'>
                 {
-                    data?.data?.pinnedBlogs?.map((item) => {
-                        return (
-                            <BlogItem key={item.id} item={item} />
-                        )
+                    data?.data?.pinnedBlogs?.map((item, index: number) => {
+                        if (index < 3)
+                            return (
+                                <BlogItem key={item.id} item={item} />
+                            )
                     })
                 }