Skip to content

Commit

Permalink
added tabs in blogs section
Browse files Browse the repository at this point in the history
  • Loading branch information
@Stiffpixels
Stiffpixels committed Jun 3, 2024
1 parent e0c3f01 commit 5792769
Show file tree
Hide file tree
Showing 3 changed files with 147 additions and 177 deletions.
213 changes: 120 additions & 93 deletions src/Pages/BlogPage.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,105 +1,132 @@
import React from 'react'
import { useState } from 'react'
import { Link } from 'react-router-dom'
import SingleBlog from '../components/SingleBlog';

const BlogPage = () => {
const [blogs, setblogs] = useState([
{
"id":1,
"title": "Lorem Ipsum Blog",
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
"author": "John Doe",
"publication_date": "2024-05-03"
},
{
"id":2,
"title": "Lorem Ipsum Blog",
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
"author": "John Doe",
"publication_date": "2024-05-03"
},
{
"id":3,
"title": "Lorem Ipsum Blog",
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
"author": "John Doe",
"publication_date": "2024-05-03"
},
{
"id":4,
"title": "Lorem Ipsum Blog",
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
"author": "John Doe",
"publication_date": "2024-05-03"
},
{
"id":5,
"title": "Lorem Ipsum Blog",
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
"author": "John Doe",
"publication_date": "2024-05-03"
},
{
"id":6,
"title": "Lorem Ipsum Blog",
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
"author": "John Doe",
"publication_date": "2024-05-03"
},
{
"id":7,
"title": "Lorem Ipsum Blog",
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
"author": "John Doe",
"publication_date": "2024-05-03"
},
{
"id":8,
"title": "Lorem Ipsum Blog",
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
"author": "John Doe",
"publication_date": "2024-05-03"
},
{
"id":9,
"title": "Lorem Ipsum Blog",
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
"author": "John Doe",
"publication_date": "2024-05-03"
},
{
"id":10,
"title": "Lorem Ipsum Blog",
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
"author": "John Doe",
"publication_date": "2024-05-03"
},
// Add more blog objects as needed
])
const [activeTab, setActiveTab] = useState("latest")
const [blogs, setblogs] = useState([
{
id: 1,
title: "Lorem Ipsum Blog latest-blog",
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
author: "John Doe",
publication_date: "2024-05-03",
tag:"latest"
},
{
id: 2,
title: "Lorem Ipsum Blog latest blog",
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
author: "John Doe",
publication_date: "2024-05-03",
tag:"latest"
},
{
id: 3,
title: "Lorem Ipsum Blog latest blog",
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
author: "John Doe",
publication_date: "2024-05-03",
tag:"latest"
},
{
id: 4,
title: "Lorem Ipsum Blog latest blog",
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
author: "John Doe",
publication_date: "2024-05-03",
tag:"latest"
},
{
id: 5,
title: "Lorem Ipsum Blog trending blog",
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
author: "John Doe",
publication_date: "2024-05-03",
tag:"trending"
},
{
id: 6,
title: "Lorem Ipsum Blog trending blog",
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
author: "John Doe",
publication_date: "2024-05-03",
tag:"trending"
},
{
id: 7,
title: "Lorem Ipsum Blog trending blog",
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
author: "John Doe",
publication_date: "2024-05-03",
tag:"trending"
},
{
id: 8,
title: "Lorem Ipsum Blog top blog",
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
author: "John Doe",
publication_date: "2024-05-03",
tag:"top"
},
{
id: 9,
title: "Lorem Ipsum Blog top blog",
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
author: "John Doe",
publication_date: "2024-05-03",
tag:"top"
},
{
id: 10,
title: "Lorem Ipsum Blog top blog",
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
author: "John Doe",
publication_date: "2024-05-03",
tag:"top"
},
// Add more blog objects as needed
]);
const blogsGroupedByTags = Object.groupBy(blogs, ({tag})=> tag)
const handleTabClick = (e)=>{
console.log(e.target.id)
const previousActiveButton= document.querySelector(`#${activeTab + "Tab"}`)
const previousActiveContainer = document.querySelector(`#${activeTab + "TabContainer"}`)
const activeContainer = document.querySelector(`#${e.target.id + "Container"}`)

const buttonValue = e.target.textContent.toLowerCase();
if(activeTab!==buttonValue){
previousActiveButton.classList.add("text-gray-600")
previousActiveContainer.classList.remove("border-black")

activeContainer.classList.add("border-black")
e.target.classList.remove("text-gray-600")
setActiveTab(buttonValue)
}

}
return (
<>
<h1 class="text-3xl font-bold mb-4 mt-10 text-center">Latest Blogs</h1>
<div className="grid grid-cols-3 lg:w-1/2 xl:w-1/4 md:w-2/3 w-5/6 mx-auto align-items-center justify-items-center">
<div id="topTabContainer" className="border-b-2 w-full text-center transition-border duration-300">
<button id="topTab" className="relative p-0 m-0 border-0 bg-transparent w-full h-full text-gray-600" onClick={(e)=>handleTabClick(e)}>
<h1 className="sticky top-0 left-0 z-[-1] text-2xl font-bold mb-4 mt-10 text-center transition-color duration-300">Top</h1>
</button>
</div>
<div id="trendingTabContainer" className="border-b-2 w-full text-center transition-border duration-300">
<button id="trendingTab" className="relative p-0 m-0 border-0 bg-transparent w-full h-full relative z-1 text-gray-600" onClick={(e)=>handleTabClick(e)}>
<h1 className="sticky top-0 left-0 z-[-1] text-2xl font-bold mb-4 mt-10 text-center transition-color duration-300">Trending</h1>
</button>
</div>
<div id="latestTabContainer" className="border-b-2 w-full border-black text-center transition-border duration-300">
<button id="latestTab" className="relative p-0 m-0 border-0 bg-transparent w-full h-full" onClick={(e)=>handleTabClick(e)}>
<h1 className="sticky top-0 left-0 w-full z-[-1] text-2xl font-bold mb-4 mt-10 text-center transition-color duration-300">Latest</h1>
</button>
</div>
</div>
<div class="container mx-auto px-4 py-8 w-full">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10 w-[80%] mx-auto">
{blogs.map((blog) => {
return <Link className='blog-card' to={`/blog/${blog.id}/`}>
<div class="bg-white shadow-md rounded-lg overflow-hidden">
<img className="w-full h-52 object-cover" src="https://imgs.search.brave.com/q3MJLK_ILOJjNNpDQfAoodURIpLLbhskPAuceu6vI6c/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9tZWRp/YS5nZXR0eWltYWdl/cy5jb20vaWQvMTM0/OTE4MzAxMy9waG90/by9hZnJpY2FuLW1h/bGUtam91cm5hbGlz/dC1wcmVwYXJpbmct/cXVlc3Rpb25zLWZv/ci1wcmVzcy1jb25m/ZXJlbmNlLmpwZz9z/PTYxMng2MTImdz0w/Jms9MjAmYz1xaWRi/U3pfNmhwa2tyNmpS/QjUtMWhTTUsxSjZL/RUM2YXZJVkJsYXht/WmdvPQ" alt="Blog Image" />
<div class="p-4 flex flex-col gap-1 blog-text">
<h2 class="font-bold text-xl mb-2">{blog.title}</h2>
<p class="text-gray-700">{blog.content}</p>
<div class="mt-4 flex items-center">
<img className="w-10 h-10 rounded-full mr-4" src="https://imgs.search.brave.com/g2CJldyVpLs0sy-8TKaPqzJiC1DwIWh0fglnNnFqmSA/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9pLnBp/bmltZy5jb20vb3Jp/Z2luYWxzL2NlL2Y4/L2I1L2NlZjhiNWNl/ZDAwMjM0MzE3MmZk/MDRkNTljYjJlMTcy/LmpwZw" alt="Author Image" />
<div>
<p class="text-gray-900 font-semibold">{blog.author}</p>
<p class="text-gray-600">{blog.publication_date}</p>
</div>
</div>
</div>
</div>
</Link>
})}
{blogsGroupedByTags[activeTab].map((blog)=> <SingleBlog blog={blog}/>)}
</div>
</div>
</>
Expand Down
87 changes: 3 additions & 84 deletions src/Pages/Blogs.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,93 +1,12 @@
import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { useParams,useLocation } from "react-router-dom";

const Blogs = () => {
const params = useParams();
const { slug } = params;
const [blogs, setblogs] = useState([
{
id: 1,
title: "Lorem Ipsum Blog",
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
author: "John Doe",
publication_date: "2024-05-03",
},
{
id: 2,
title: "Lorem Ipsum Blog",
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
author: "John Doe",
publication_date: "2024-05-03",
},
{
id: 3,
title: "Lorem Ipsum Blog",
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
author: "John Doe",
publication_date: "2024-05-03",
},
{
id: 4,
title: "Lorem Ipsum Blog",
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
author: "John Doe",
publication_date: "2024-05-03",
},
{
id: 5,
title: "Lorem Ipsum Blog",
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
author: "John Doe",
publication_date: "2024-05-03",
},
{
id: 6,
title: "Lorem Ipsum Blog",
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
author: "John Doe",
publication_date: "2024-05-03",
},
{
id: 7,
title: "Lorem Ipsum Blog",
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
author: "John Doe",
publication_date: "2024-05-03",
},
{
id: 8,
title: "Lorem Ipsum Blog",
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
author: "John Doe",
publication_date: "2024-05-03",
},
{
id: 9,
title: "Lorem Ipsum Blog",
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
author: "John Doe",
publication_date: "2024-05-03",
},
{
id: 10,
title: "Lorem Ipsum Blog",
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
author: "John Doe",
publication_date: "2024-05-03",
},
// Add more blog objects as needed
]);
const location = useLocation();

const [blog, setBlog] = useState(null);

useEffect(() => {
const selectedBlog = blogs.find((blog) => blog.id === parseInt(slug));
setBlog(selectedBlog);
}, [slug]);

if (!blog) {
return <div>Loading...</div>;
}
const [blog, setBlog] = useState(location.state.blogProp);

const getAvatarLetter = (author) => {
return author.charAt(0).toUpperCase();
Expand Down
24 changes: 24 additions & 0 deletions src/components/SingleBlog.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import React from 'react'
import { Link } from 'react-router-dom'

const SingleBlog = ({blog}) => {

return <Link className='blog-card' to={`/blog/${blog.id}/`} state={{blogProp:blog}}>
<div class="bg-white shadow-md rounded-lg overflow-hidden">
<img className="w-full h-52 object-cover" src="https://imgs.search.brave.com/q3MJLK_ILOJjNNpDQfAoodURIpLLbhskPAuceu6vI6c/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9tZWRp/YS5nZXR0eWltYWdl/cy5jb20vaWQvMTM0/OTE4MzAxMy9waG90/by9hZnJpY2FuLW1h/bGUtam91cm5hbGlz/dC1wcmVwYXJpbmct/cXVlc3Rpb25zLWZv/ci1wcmVzcy1jb25m/ZXJlbmNlLmpwZz9z/PTYxMng2MTImdz0w/Jms9MjAmYz1xaWRi/U3pfNmhwa2tyNmpS/QjUtMWhTTUsxSjZL/RUM2YXZJVkJsYXht/WmdvPQ" alt="Blog Image" />
<div class="p-4 flex flex-col gap-1 blog-text">
<h2 class="font-bold text-xl mb-2">{blog.title}</h2>
<p class="text-gray-700">{blog.content}</p>
<div class="mt-4 flex items-center">
<img className="w-10 h-10 rounded-full mr-4" src="https://imgs.search.brave.com/g2CJldyVpLs0sy-8TKaPqzJiC1DwIWh0fglnNnFqmSA/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9pLnBp/bmltZy5jb20vb3Jp/Z2luYWxzL2NlL2Y4/L2I1L2NlZjhiNWNl/ZDAwMjM0MzE3MmZk/MDRkNTljYjJlMTcy/LmpwZw" alt="Author Image" />
<div>
<p class="text-gray-900 font-semibold">{blog.author}</p>
<p class="text-gray-600">{blog.publication_date}</p>
</div>
</div>
</div>
</div>
</Link>
}

export default SingleBlog

0 comments on commit 5792769

Please sign in to comment.