Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

enhances the styling of full blog page for both light and dark theme #421

Merged
merged 1 commit into from
Nov 9, 2024
Merged

enhances the styling of full blog page for both light and dark theme #421

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
113 changes: 83 additions & 30 deletions client/src/component/Blog.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import { useEffect, useState, useRef } from "react";
import PropTypes from 'prop-types';
import { Search } from "lucide-react";
import { Link } from "react-router-dom";
import { motion } from "framer-motion";


import img1 from "../assets/blogs/1.webp";
import img2 from "../assets/blogs/2.jpeg";
Expand Down Expand Up @@ -112,49 +114,100 @@ export default function BlogPage(props) {
}, []);

return (
<div className="min-h-screen bg-gradient-to-b mt-20 from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800">
<div className={`min-h-screen bg-gradient-to-b mt-20 ${props.mode === "dark"
? "bg-gradient-to-br from-gray-900 to-black text-white"
: "bg-gradient-to-br from-white to-blue-100 text-black"
}`} >
{/* Hero Section */}
<div className="bg-gradient-to-r from-blue-500 to-purple-600 text-white py-20">
<div className="container mx-auto px-4 text-center">
<h1 className="text-5xl font-bold mb-4">Explore Our Blog</h1>
<p className="text-xl opacity-90">Discover stories, insights, and knowledge</p>
<section
className={`relative h-[60vh] flex items-center justify-center text-center ${props.mode === "dark"
? "bg-gradient-to-br from-gray-900 via-black to-gray-800"
: "bg-gradient-to-br from-white via-blue-100 to-blue-200"
}`}
>
<div
className={`absolute inset-0 ${props.mode === "dark" ? "bg-black/50" : "bg-white/50"
} backdrop-blur-sm`}
/>
<div className="relative z-10 space-y-6 max-w-4xl mx-auto px-4">
<motion.h1
className={`text-5xl font-bold sm:text-6xl md:text-7xl ${props.mode === "dark" ? "text-white" : "text-black"
}`}
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
>
Dive into the BitBox Blog!
</motion.h1>
<motion.p
className={`text-xl sm:text-2xl ${props.mode === "dark" ? "text-white/80" : "text-black/80"
}`}
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.2 }}
>
Where Projects Thrive and Connections Come Alive
</motion.p>
</div>
</div>
</section>

{/* Search and Filter Section */}
<div className="container mx-auto px-4 py-8">
<div className="flex flex-col md:flex-row gap-4 items-center justify-between mb-8">
<div className="relative w-full md:w-96">
<input
type="text"
placeholder="Search articles..."
className="w-full pr-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-800 dark:border-gray-700"
value={searchTerm}
style={{ paddingLeft: '40px' }}
onChange={(e) => setSearchTerm(e.target.value)}
/>
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" />
<div className=" mb-8">
<div className="flex justify-between px-10">
<div className={`relative w-full md:w-2/5 flex`}>
<input
type="text"
placeholder="Search articles..."
className={`w-full pr-4 py-2 rounded-lg text-lg border-none ${props.mode === 'dark' ? 'bg-gray-800 text-white border-gray-700' : 'bg-gray-200 text-black border-gray-300'} outline-none `}
value={searchTerm}
style={{ paddingLeft: '50px', border: 'none', outline: 'none' }}
onChange={(e) => setSearchTerm(e.target.value)}
/>
<Search className={`absolute left-3 top-1/2 transform -translate-y-1/2 h-7 w-7 ${props.mode === 'dark' ? 'text-gray-300' : 'text-gray-800'}`} />
</div>

<div>
<Link
to={"/createBlogPost"}
className="inline-block text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 rounded-lg px-6 py-3 transition-all duration-200 ease-in-out shadow-md transform hover:scale-105"
>
Create Blog
</Link>
</div>

</div>

<div className="flex gap-2 overflow-x-auto pb-2">
<div className="flex gap-2 overflow-x-auto pb-2 mt-5 justify-evenly w-[70%] m-auto">
{categories.map((category) => (
<button
<motion.div
key={category}
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
onClick={() => setSelectedCategory(category)}
className={`px-4 py-2 rounded-full text-sm font-medium transition-colors ${selectedCategory === category
? "bg-blue-500 text-white"
: "bg-gray-200 text-gray-700 hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-200"
className={`rounded-lg py-2 px-8 flex items-center border border-[#002b55] transition-all duration-300 cursor-pointer ${props.mode === 'dark'
? 'bg-black/30 backdrop-blur-md '
: 'bg-white backdrop-blur-sm border-gray-300'
} ${selectedCategory === category
? 'bg-[#1a7295] text-white border-[#2c9cc8]' // Add your highlighted styles here
: ''
}`}
>
{category}
</button>
<div>
<p
className={`text-lg ${props.mode === 'dark'
? 'text-white/70'
: 'text-gray-600'
} ${selectedCategory === category ? 'text-green-500' : ''}`} // Optional: Change text color when selected
>
{category}
</p>
</div>
</motion.div>
))}
</div>
<div>
<Link to={"/createBlogPost"} className="text-white">
Create blog
</Link>
</div>

</div>

{/* Blog Grid */}
Expand Down Expand Up @@ -209,7 +262,7 @@ export default function BlogPage(props) {
</button>
</div>
</div>
<div className={`${props.mode === 'light' ? 'text-gray-400' : 'text-gray-700'} leading-relaxed mb-4`}>
<div className={`${props.mode === 'light' ? 'text-gray-700' : 'text-gray-400'} leading-relaxed mb-4`}>
{blogPost.content.replace(/<[^>]+>/g, '')}
</div>
</div>
Expand Down
3 changes: 3 additions & 0 deletions client/src/component/Contributors.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -222,6 +222,9 @@ StatCard.propTypes = {
icon: PropTypes.node.isRequired,
onClick: PropTypes.func,
};
Contributor.propTypes = {
mode: PropTypes.string.isRequired,
};

export default function Contributor(props) {
const [contributors, setContributors] = useState([]);
Expand Down
Loading