refactor(blog): updated blog-component & blog-related post section as per design

Author: Vatsal6288

src/components/blocks/blog-component/blog-component.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, useEffect } from 'react'
+import { useState } from 'react'
 
 import { SearchIcon, ArrowRightIcon, CalendarDaysIcon } from 'lucide-react'
 
@@ -111,31 +111,6 @@ const Blog = ({ blogData = [] }: BlogProps) => {
   const uniqueCategories = [...new Set(nonFeaturedPosts.map(post => post.category))]
   const categories = ['All', ...uniqueCategories.sort()]
 
-  // Handle hash change to automatically switch tabs
-  useEffect(() => {
-    const handleHashChange = () => {
-      const hash = window.location.hash
-
-      if (hash.startsWith('#category-')) {
-        const category = hash.replace('#category-', '')
-
-        if (categories.includes(category)) {
-          setSelectedTab(category)
-        }
-      }
-    }
-
-    // Check hash on initial load
-    handleHashChange()
-
-    // Listen for hash changes
-    window.addEventListener('hashchange', handleHashChange)
-
-    return () => {
-      window.removeEventListener('hashchange', handleHashChange)
-    }
-  }, [categories])
-
   const handleTabChange = (tab: string) => {
     setSelectedTab(tab)
 

src/components/blocks/blog-related-post/blog-related-post.tsx

@@ -36,50 +36,42 @@ const Blog = ({ relatedPosts }: { relatedPosts: BlogPost[] }) => {
         {/* Tabs and Search */}
         <div className='grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3'>
           {relatedPosts.map(post => (
-            <div
+            <a
+              href={`/blog/${post.slug}`}
               key={post.id}
               className='group h-full cursor-pointer overflow-hidden shadow-none transition-all duration-300 hover:shadow-md'
             >
               <Card>
                 <CardContent className='space-y-3.5'>
-                  <a href={`/blog/${post.slug}`} className='mb-6 block overflow-hidden rounded-lg sm:mb-12'>
+                  <div className='mb-6 overflow-hidden rounded-lg sm:mb-12'>
                     <img
                       src={post.imageUrl}
                       alt={post.imageAlt}
                       className='h-59.5 w-full object-cover transition-transform duration-300 group-hover:scale-105'
                     />
-                  </a>
+                  </div>
                   <div className='flex items-center justify-between gap-1.5'>
                     <div className='text-muted-foreground flex items-center gap-1.5'>
                       <CalendarDaysIcon className='size-6' />
                       <span>{post.pubDate}</span>
                     </div>
-                    <Badge className='bg-primary/10 text-primary border-0 text-sm' asChild>
-                      <a href={`/#category-${post.category}`} className='hover:bg-primary/10!'>
-                        {post.category}
-                      </a>
-                    </Badge>
+                    <Badge className='bg-primary/10 text-primary border-0 text-sm'>{post.category}</Badge>
                   </div>
-                  <a href={`/blog/${post.slug}`} className='block'>
-                    <h3 className='line-clamp-2 text-lg font-medium md:text-xl'>{post.title}</h3>
-                  </a>
+                  <h3 className='line-clamp-2 text-lg font-medium md:text-xl'>{post.title}</h3>
                   <p className='text-muted-foreground line-clamp-2'>{post.description}</p>
                   <div className='flex items-center justify-between'>
                     <span className='text-sm font-medium'>{post.author}</span>
                     <Button
                       size='icon'
                       className='group-hover:bg-primary! bg-background text-foreground hover:bg-primary! hover:text-primary-foreground group-hover:text-primary-foreground border group-hover:border-transparent hover:border-transparent'
-                      asChild
                     >
-                      <a href={`/blog/${post.slug}`}>
-                        <ArrowRightIcon className='size-4 -rotate-45' />
-                        <span className='sr-only'>Read more: {post.title}</span>
-                      </a>
+                      <ArrowRightIcon className='size-4 -rotate-45' />
+                      <span className='sr-only'>Read more: {post.title}</span>
                     </Button>
                   </div>
                 </CardContent>
               </Card>
-            </div>
+            </a>
           ))}
         </div>
       </div>