blog + sidebar

src/app/blogs/components/BigBlogItem.tsx

@@ -12,11 +12,11 @@ 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'>
-            <Link href={`/blogs/${item.id}`}>
+            <Link href={`/blogs/${item.slug}`}>
                 <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'>
-                <Link href={`/blogs/${item.id}`}>
+                <Link href={`/blogs/${item.slug}`}>
                     <h4 className='font-bold text-sm leading-6 hover:opacity-70 transition-opacity'>
                         {item.title}
                     </h4>
@@ -47,7 +47,7 @@ const BigBlogItem: FC<BigBlogItemProps> = ({ item }) => {
                     {item.previewContent.replace(/<\/?[^>]+(>|$)/g, "")}
                 </div>
 
-                <Link href={`/blogs/${item.id}`}>
+                <Link href={`/blogs/${item.slug}`}>
                     <div className='mt-3 flex gap-1 text-sm text-[#8C90A3]'>
                         <div>ادامه ی مطلب</div>
                         <ArrowLeft

src/app/blogs/components/MiniBlogItem.tsx

@@ -5,7 +5,7 @@ import Link from 'next/link'
 const MiniBlogItem: FC<{ item: Blog }> = ({ item }) => {
     return (
         <div className='flex items-center gap-2'>
-            <Link href={`/blogs/${item.id}`}>
+            <Link href={`/blogs/${item.slug}`}>
                 <Image
                     src={item.imageUrl}
                     alt={item.title}
@@ -15,7 +15,7 @@ const MiniBlogItem: FC<{ item: Blog }> = ({ item }) => {
                 />
             </Link>
 
-            <Link href={`/blogs/${item.id}`}>
+            <Link href={`/blogs/${item.slug}`}>
                 <h6 className='text-xs leading-5 font-bold hover:opacity-70 transition-opacity'>
                     {item.title}
                 </h6>

src/app/blogs/service/BlogService.ts

@@ -37,7 +37,7 @@ export const getCombinedBlogs = async () => {
   return data;
 };
 
-export const getBlogSingle = async (id: string) => {
-  const { data } = await axios.get<BlogSingleResponse>(`/blogs/${id}`);
+export const getBlogSingle = async (slug: string) => {
+  const { data } = await axios.get<BlogSingleResponse>(`/blogs/slug/${slug}`);
   return data;
 };