feat: updated filters dropdown and created stories for it

components/navigation/BlogPostCard.stories.tsx

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import BlogPostItem from './BlogPostItem';
+
+const meta: Meta<typeof BlogPostItem> = {
+  title: 'Components/BlogPostCard',
+  component: BlogPostItem,
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          maxWidth: '400px'
+        }}
+      >
+        <Story />
+      </div>
+    )
+  ]
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BlogPostItem>;
+
+export const BlogPostCard: Story = {
+  args: {
+    post: {
+      title: 'Blog Post Title',
+      date: '2024-07-28T06:30:00.000Z',
+      type: 'Blog Category',
+      tags: ['Tag 1', 'Tag 2'],
+      cover: '/img/posts/release-notes-3.0.0/cover.webp',
+      authors: [
+        {
+          name: 'Author Name',
+          photo: '/favicon-194x194.png',
+          link: 'https://x.com/AsyncAPISpec',
+          byline: 'Author Byline'
+        }
+      ],
+      excerpt: 'This is a blog post excerpt.',
+      toc: [
+        {
+          content: 'Table of Content 1',
+          slug: 'table-of-content-1',
+          lvl: 1,
+          i: 0,
+          seen: 0
+        },
+        {
+          content: 'Table of Content 2',
+          slug: 'table-of-content-2',
+          lvl: 2,
+          i: 1,
+          seen: 0
+        },
+        {
+          content: 'Table of Content 3',
+          slug: 'table-of-content-3',
+          lvl: 2,
+          i: 2,
+          seen: 0
+        }
+      ],
+      readingTime: 22,
+      sectionSlug: '/blog-section-slug',
+      sectionWeight: 0,
+      id: 'pages/blog/blog-post-slug',
+      isIndex: false,
+      slug: '/blog-post-slug',
+      featured: false
+    }
+  }
+};

components/tools/FiltersDropdown.tsx

@@ -34,7 +34,9 @@ export default function FiltersDropdown({
 
   return (
     <div
-      className={twMerge(`max-w-lg flex gap-2 flex-wrap p-2 duration-200 delay-150 ${className}`)}
+      className={twMerge(
+        `max-w-lg flex flex-col max-h-[40vh] gap-1 overflow-y-auto p-2 px-0 duration-200 delay-150 bg-gray-400 ${className}`
+      )}
       data-testid='FiltersDropdown-div'
     >
       {dataList.map((data, index) => {
@@ -44,7 +46,7 @@ export default function FiltersDropdown({
           <div
             key={index}
             className={twMerge(
-              `border border-secondary-600 text-secondary-600 p-1 pb-0 rounded-2xl flex gap-1 cursor-pointer items-start ${checked ? 'bg-secondary-600 text-white' : ''}`
+              `hover:bg-gray-500 text-black p-1 gap-1 flex cursor-pointer items-start ${checked ? 'bg-gray-600 text-white' : ''}`
             )}
             onClick={(event) => handleClickOption(event, data.name)}
           >