feat: categories filter

Author: Huzaifa-code

src/App.css

@@ -90,9 +90,6 @@ img.blog_image {
 
 @media (min-width: 768px) {
   /* Main Image */
-  img.blog_image{
-    height: 600px;
-  }
 
   .block_content p {
     font-size: 20px;

src/Pages/Blog.jsx

@@ -2,42 +2,57 @@
 import React, { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import client from '../client';
-import { NavBarBlog } from '../components/Blog';
+import { Filter, NavBarBlog } from '../components/Blog';
 import { motion } from 'framer-motion';
 import Loader from '../components/Loader/Loader'; // Import the Loader component
 
 const Blog = () => {
   const [posts, setPosts] = useState([]);
+  const [categories, setCategories] = useState([])
   const [loading, setLoading] = useState(true); // Loading state
+  const [activeFilter, setActiveFilter] = useState('All')
 
   useEffect(() => {
-    client.fetch(
-      `*[_type == "post"] | order(publishedAt desc) {
-        title,
-        slug,
-        body,
-        publishedAt,
-        mainImage {
-          asset -> {
-            _id,
-            url
-          },
-          alt
-        },
-        categories[]->{
-          _id,
-          title
-        }
-      }`
-    )
-    .then((data) => {
-      setPosts(data);
-      setLoading(false); // Set loading to false once data is fetched
-    })
-    .catch((error) => {
-      console.error(error);
-      setLoading(false); // In case of error, also stop loading
-    });
+    const fetchData = async () => {
+      try {
+        const [postsData, categoriesData] = await Promise.all([
+          client.fetch(`
+            *[_type == "post"] | order(publishedAt desc) {
+              title,
+              slug,
+              body,
+              publishedAt,
+              mainImage {
+                asset -> {
+                  _id,
+                  url
+                },
+                alt
+              },
+              categories[]->{
+                _id,
+                title
+              }
+            }
+          `),
+          client.fetch(`
+            *[_type == "category"] {
+              _id,
+              title
+            }
+          `)
+        ])
+
+        setPosts(postsData)
+        setCategories([{ _id: 'all', title: 'All' }, ...categoriesData])
+        setLoading(false)
+      } catch (error) {
+        console.error(error)
+        setLoading(false)
+      }
+    }
+
+    fetchData();
   }, []);
 
   const formatDate = (isoString) => {
@@ -49,9 +64,17 @@ const Blog = () => {
     });
   };
 
+  const filteredPosts = activeFilter === 'All' 
+    ? posts 
+    : posts.filter(post => post.categories?.some(category => category?.title === activeFilter))
+
+
   return (
     <div className='bg-white'>
       <NavBarBlog/>
+
+      <Filter categories={categories} activeFilter={activeFilter} setActiveFilter={setActiveFilter} />
+
       <section className='px-10'>
         <motion.div 
           style={{ y: 30 }} animate={{ y: 0 }}
@@ -67,7 +90,7 @@ const Blog = () => {
           <Loader /> // Show loader when posts are being fetched
         ) : (
           <div className='grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 lg:gap-24 mb-11'>
-            {posts.map((post) => (
+            {filteredPosts.map((post) => (
               <motion.div
                 style={{ y: 30 }} animate={{ y: 0 }} 
                 transition={{duration: 0.55}}

src/Pages/SinglePost.jsx

@@ -134,7 +134,7 @@ const SinglePost = () => {
       {isLoading ? (
             <Loader />
         ): 
-        <section className='px-5 xl:max-w-5xl xl:mx-auto pb-10'>
+        <section className='px-5 md:max-w-4xl md:mx-auto pb-10'>
 
           <motion.div 
             style={{ y: 30 }} animate={{ y: 0 }}
@@ -144,7 +144,7 @@ const SinglePost = () => {
               style={{
                 fontFamily: "'Sriracha', cursive"
               }} 
-              className="text-4xl md:text-6xl pt-5 mb-10 text-center " 
+              className="text-4xl md:text-5xl pt-5 mb-10 text-center " 
             >
               {SinglePost.title}
             </h1>
@@ -157,7 +157,7 @@ const SinglePost = () => {
               style={{ x: -200 }} animate={{ x: 0 }}
               transition={{duration: 0.6}}
               >
-              <img className='blog_image rounded-lg mx-auto' src={SinglePost.mainImage.asset.url} alt={SinglePost.title} title={SinglePost.title} />
+              <img className='blog_image rounded-lg ' src={SinglePost.mainImage.asset.url} alt={SinglePost.title} title={SinglePost.title} />
              </motion.div>
 
               <div className='flex justify-between items-center'>

src/components/Blog/Filter.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+export default function Filter({ categories, activeFilter, setActiveFilter }) {
+  return (
+    <div className="w-full overflow-x-auto py-3 px-10 sticky bg-white top-0 z-10">
+      <div className="flex space-x-4">
+        {categories?.map((category, index) => (
+          // Check if category is not null or undefined before rendering
+          category && (
+            <button
+              key={index}
+              className={`whitespace-nowrap px-3 py-1 rounded-full text-sm font-medium ${
+                activeFilter === category.title
+                ? 'bg-black text-white '
+                : 'bg-neutral-200 hover:bg-neutral-300 text-black'
+              }`}
+              onClick={() => setActiveFilter(category.title)}
+            >
+              {category.title}
+            </button>
+          )
+        ))}
+      </div>
+    </div>
+  );
+}

src/components/Blog/index.js

@@ -2,10 +2,12 @@ import ClapButton from "./ClapButton";
 import YouTubeEmbed from "./YouTubeEmbed";
 import NavBarBlog from "./NavBarBlog/NavBarBlog";
 import Comments from "./Comments/Comments";
+import Filter from './Filter'
 
 export {
     ClapButton,
     YouTubeEmbed,
     NavBarBlog,
-    Comments
+    Comments,
+    Filter
 }

tailwind.config.js

@@ -10,6 +10,9 @@ module.exports = {
           borderRadius: '10px',
         },
       },
+      backgroundImage: {
+        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+      }
     },
   },
   plugins: [],