Blog U I - Copy this React, Tailwind Component to your project
Import React, { useState } from "react"; import Head from "next/head"; import { FiSearch, FiSun, FiMoon, FiHeart, FiMessageSquare, FiShare2, FiChevronDown, FiChevronUp, } from "react icons/fi"; import { FaFacebookF, FaTwitter, FaLinkedinIn } from "react icons/fa"; import { MdOutlineCode } from "react icons/md"; const BlogUI: React.FC = () => { const [darkMode, setDarkMode] = useState(true); const [currentPage, setCurrentPage] = useState(1); const [expandedCategory, setExpandedCategory] = useState<string | null>(null); const [showBlogDetail, setShowBlogDetail] = useState(false); const [selectedBlog, setSelectedBlog] = useState<any>(null); const blogPosts = [ { id: 1, title: "The Future of Web Development: Trends to Watch in 2024", author: "John Doe", date: "January 15, 2024", image: "images.unsplash.com/photo 1498050108023 c5249f4df085", excerpt: "Explore the cutting edge trends shaping the future of web development...", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", comments: 15, likes: 45, }, { id: 2, title: "Mastering React Hooks: A Comprehensive Guide", author: "Jane Smith", date: "January 14, 2024", image: "images.unsplash.com/photo 1517694712202 14dd9538aa97", excerpt: "Deep dive into React Hooks and learn how to leverage them effectively...", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", comments: 23, likes: 67, }, { id: 3, title: "Building Scalable Applications with Modern Architecture", author: "Mike Johnson", date: "January 13, 2024", image: "images.unsplash.com/photo 1537432376769 00f5c2f4c8d2", excerpt: "Learn the best practices for building scalable and maintainable applications...", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", comments: 8, likes: 32, }, ]; const categories = [ { name: "All", subCategories: ["Featured", "Popular", "Recent"], }, { name: "Technology", subCategories: ["AI", "Machine Learning", "Cloud Computing"], }, { name: "Development", subCategories: ["Frontend", "Backend", "Mobile"], }, { name: "Design", subCategories: ["UI/UX", "Graphic Design", "Web Design"], }, { name: "Career", subCategories: ["Job Tips", "Interviews", "Growth"], }, { name: "Tutorial", subCategories: ["Beginner", "Intermediate", "Advanced"], }, ]; const toggleDarkMode = () => setDarkMode(!darkMode); const toggleCategory = (categoryName: string) => { setExpandedCategory( expandedCategory === categoryName ? null : categoryName ); }; const handleBlogClick = (blog: any) => { setSelectedBlog(blog); setShowBlogDetail(true); }; const BlogDetail = ({ blog }: { blog: any }) => ( <div className={`${darkMode ? "bg gray 900" : "bg white"} p 8 rounded lg`}> <Head> <title>{blog.title} | TechBlog</title> <meta name="description" content={blog.excerpt} /> <meta name="keywords" content="TechBlog, Blog, Web Development, Technology" /> <meta property="og:title" content={blog.title} /> <meta property="og:description" content={blog.excerpt} /> <meta property="og:image" content={`https://${blog.image}`} /> </Head> <nav className="mb 6" aria label="Breadcrumb"> <ol className="flex items center space x 2 text gray 400"> <li> <MdOutlineCode className="w 5 h 5" /> </li> <li>/</li> <li> <button onClick={() => setShowBlogDetail(false)} className="hover:text gray 300" > Blogs </button> </li> <li>/</li> <li className={darkMode ? "text white" : "text gray 900"}> {blog.title} </li> </ol> </nav> <img src={`https://${blog.image}`} alt={blog.title} className="w full h 96 object cover rounded lg mb 8" /> <h1 className="text 3xl font bold mb 4">{blog.title}</h1> <div className="flex items center space x 4 mb 6"> <p className="text gray 400">By {blog.author}</p> <span className="text gray 400">|</span> <p className="text gray 400">{blog.date}</p> </div> <p className="text lg mb 8">{blog.content}</p> <div className="flex items center justify between"> <div className="flex items center space x 4"> <button className="flex items center space x 1"> <FiHeart /> <span>{blog.likes}</span> </button> <button className="flex items center space x 1"> <FiMessageSquare /> <span>{blog.comments}</span> </button> </div> <div className="flex items center space x 2"> <FiShare2 className="cursor pointer" /> <FaFacebookF className="cursor pointer" /> <FaTwitter className="cursor pointer" /> <FaLinkedinIn className="cursor pointer" /> </div> </div> </div> ); return ( <div className={`min h screen ${ darkMode ? "bg gray 900 text gray 100" : "bg white text gray 900" }`} > <Head> <title>TechBlog Insights into Technology and Development</title> <meta name="description" content="TechBlog offers the latest insights and trends in technology, development, and design." /> <meta name="keywords" content="Technology, Web Development, Blogs, Design" /> <meta property="og:title" content="TechBlog" /> <meta property="og:description" content="Explore insights in technology and development." /> </Head> <nav className={`fixed w full z 10 ${ darkMode ? "bg gray 800" : "bg white" } shadow lg`} > <div className="container mx auto px 4 py 3 flex items center justify between"> <h1 className="text 2xl font bold">TechBlog</h1> <div className="flex items center space x 6"> <div className="relative"> <input type="text" placeholder="Search..." className={`pl 10 pr 4 py 2 rounded lg ${ darkMode ? "bg gray 700" : "bg gray 100" } focus:outline none`} /> <FiSearch className="absolute left 3 top 3" /> </div> <button onClick={toggleDarkMode} className="p 2 rounded lg hover:bg gray 700 transition colors" > {darkMode ? <FiSun size={20} /> : <FiMoon size={20} />} </button> </div> </div> </nav> <div className="container mx auto px 4 pt 20 pb 12 flex flex col lg:flex row gap 8"> <aside className="lg:w 1/4"> <div className={`sticky top 24 p 6 rounded lg ${ darkMode ? "bg gray 800" : "bg gray 100" }`} > <h2 className="text xl font bold mb 4">Categories</h2> <ul className="space y 2"> {categories.map((category) => ( <li key={category.name}> <div className={`cursor pointer p 2 rounded lg ${ darkMode ? "hover:bg gray 700" : "hover:bg gray 200" } transition colors flex justify between items center`} onClick={() => toggleCategory(category.name)} > <span>{category.name}</span> {expandedCategory === category.name ? ( <FiChevronUp /> ) : ( <FiChevronDown /> )} </div> {expandedCategory === category.name && ( <ul className="ml 4 mt 2 space y 2"> {category.subCategories.map((subCategory) => ( <li key={subCategory} className={`cursor pointer p 2 rounded lg ${ darkMode ? "hover:bg gray 700" : "hover:bg gray 200" } transition colors text sm`} > {subCategory} </li> ))} </ul> )} </li> ))} </ul> </div> </aside> <main className="lg:w 3/4"> {showBlogDetail ? ( <BlogDetail blog={selectedBlog} /> ) : ( <> <div className="grid md:grid cols 2 gap 8"> {blogPosts.map((post) => ( <article key={post.id} className={`rounded lg overflow hidden ${ darkMode ? "bg gray 800" : "bg gray 100" } shadow lg transition transform hover:scale 105 cursor pointer`} onClick={() => handleBlogClick(post)} > <img src={`https://${post.image}`} alt={post.title} className="w full h 48 object cover" /> <div className="p 6"> <h2 className="text xl font bold mb 2">{post.title}</h2> <p className="text gray 400 text sm mb 4"> By {post.author} | {post.date} </p> <p className="mb 4">{post.excerpt}</p> <div className="flex items center justify between"> <div className="flex items center space x 4"> <button className="flex items center space x 1"> <FiHeart /> <span>{post.likes}</span> </button> <button className="flex items center space x 1"> <FiMessageSquare /> <span>{post.comments}</span> </button> </div> <div className="flex items center space x 2"> <FiShare2 className="cursor pointer" /> <FaFacebookF className="cursor pointer" /> <FaTwitter className="cursor pointer" /> <FaLinkedinIn className="cursor pointer" /> </div> </div> </div> </article> ))} </div> <div className="mt 12 flex justify center"> <div className="flex space x 2"> {[1, 2, 3, 4, 5].map((page) => ( <button key={page} onClick={() => setCurrentPage(page)} className={`px 4 py 2 rounded lg ${ currentPage === page ? darkMode ? "bg blue 600" : "bg blue 500" : darkMode ? "bg gray 800" : "bg gray 200" } transition colors`} > {page} </button> ))} </div> </div> </> )} </main> </div> <footer className={`${darkMode ? "bg gray 800" : "bg gray 100"} py 8`}> <div className="container mx auto px 4"> <div className="flex flex col md:flex row justify between items center"> <div className="mb 4 md:mb 0"> <p>© 2024 TechBlog. All rights reserved.</p> </div> <div className="flex space x 4"> <FaFacebookF className="cursor pointer" /> <FaTwitter className="cursor pointer" /> <FaLinkedinIn className="cursor pointer" /> </div> </div> </div> </footer> </div> ); }; export default BlogUI; create button to show or hide the Categories
