Skip to content

Commit

Permalink
Merge pull request #153 from priyachau12/main
Browse files Browse the repository at this point in the history 
I have added newsletter page in tool tab
  • Loading branch information
@shivamyadavrgipt
shivamyadavrgipt authored Oct 28, 2024
2 parents d922c7a + aa1421f commit fc162d3
Show file tree
Hide file tree
Showing 6 changed files with 290 additions and 29 deletions.
10 changes: 10 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
"react": "^18.3.1",
"react-chartjs-2": "^5.2.0",
"react-dom": "^18.3.1",
"react-icons": "^5.3.0",
"react-router-dom": "^6.27.0",
"twind": "^0.16.19"
},
Expand Down
2 changes: 2 additions & 0 deletions src/App.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import LandingPage from "./pages/LandingPage"; // Ensure this path is correct

import Signup from "./pages/SignUp";
import Login from "./pages/Login";
import Newsletter from "./pages/Newsletter";

function App() {
return (
Expand All @@ -31,6 +32,7 @@ function App() {
<Route path="/settings" element={<Settings />} />
<Route path="/signup" element={<Signup />} />
<Route path="/login" element={<Login />} />
<Route path="/newsletter" element={<Newsletter />} />
</Routes>
</div>
</Router>
Expand Down
163 changes: 134 additions & 29 deletions src/components/Navbar.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import React, { useState, useEffect } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
faChevronDown,
faThLarge,
Expand All @@ -10,33 +10,40 @@ import {
faMoon,
faFileAlt,
faLightbulb,
} from '@fortawesome/free-solid-svg-icons';
} from "@fortawesome/free-solid-svg-icons";
import { FaNewspaper } from "react-icons/fa";
import {
faFacebookF,
faInstagram,
faXTwitter, // or faTwitter if using the classic icon
faLinkedinIn,
faYoutube,
faTiktok,
} from '@fortawesome/free-brands-svg-icons';
import { Link } from 'react-router-dom';
} from "@fortawesome/free-brands-svg-icons";
import { Link } from "react-router-dom";

// Dropdown item component
const DropdownItem = ({ icon, title, description }) => (
<div className="flex items-start space-x-2">
<FontAwesomeIcon icon={icon} className="text-xl" />
<div>
<div className="font-semibold">{title}</div>
{description && <div className="text-sm text-gray-600 dark:text-gray-400">{description}</div>}
{description && (
<div className="text-sm text-gray-600 dark:text-gray-400">
{description}
</div>
)}
</div>
</div>
);

const Navbar = () => {
const [isToolsDropdownOpen, setIsToolsDropdownOpen] = useState(false);
const [isChannelsDropdownOpen, setIsChannelsDropdownOpen] = useState(false);
const [isDarkMode, setIsDarkMode] = useState(localStorage.getItem("theme") === "dark");
const [searchTerm, setSearchTerm] = useState('');
const [isDarkMode, setIsDarkMode] = useState(
localStorage.getItem("theme") === "dark"
);
const [searchTerm, setSearchTerm] = useState("");

const toggleToolsDropdown = () => {
setIsToolsDropdownOpen(!isToolsDropdownOpen);
Expand All @@ -57,14 +64,18 @@ const Navbar = () => {
useEffect(() => {
const theme = localStorage.getItem("theme") || "light";
if (theme === "dark") {
document.body.classList.add('dark');
document.body.classList.add("dark");
} else {
document.body.classList.remove('dark');
document.body.classList.remove("dark");
}
}, [isDarkMode]);

return (
<header className={`w-full bg-white shadow-lg z-50 flex justify-between items-center p-4 ${isDarkMode ? 'dark:bg-gray-800' : ''}`}>
<header
className={`w-full bg-white shadow-lg z-50 flex justify-between items-center p-4 ${
isDarkMode ? "dark:bg-gray-800" : ""
}`}
>
{/* Logo Section */}
<div className="flex items-center">
<img
Expand All @@ -73,60 +84,142 @@ const Navbar = () => {
className="mr-2 w-10 h-10 rounded-full" // Adjust the size here
/>
<a href="/">
<span className={`text-xl font-bold ${isDarkMode ? 'dark:text-white' : ''}`}>SS͜͡o͜͡c͜͡i͜͡a͜͡l͜͡p͜͡l͜͡u͜͡s͜͡</span>
<span
className={`text-xl font-bold ${
isDarkMode ? "dark:text-white" : ""
}`}
>
SS͜͡o͜͡c͜͡i͜͡a͜͡l͜͡p͜͡l͜͡u͜͡s͜͡
</span>
</a>
</div>

{/* Navbar Section */}
<nav className="flex items-center space-x-6">
<Link to="/dashboard" className={`text-lg font-medium ${isDarkMode ? 'dark:text-white' : ''}`}>Dashboard</Link>
<Link
to="/dashboard"
className={`text-lg font-medium ${
isDarkMode ? "dark:text-white" : ""
}`}
>
Dashboard
</Link>

{/* Tools Dropdown */}
<div className="relative">
<button className={`text-lg font-medium ${isDarkMode ? 'dark:text-white' : ''}`} onMouseEnter={toggleToolsDropdown}>
<button
className={`text-lg font-medium ${
isDarkMode ? "dark:text-white" : ""
}`}
onMouseEnter={toggleToolsDropdown}
>
Tools <FontAwesomeIcon icon={faChevronDown} />
</button>

{isToolsDropdownOpen && (
<div onMouseLeave={(()=> setIsToolsDropdownOpen(false))} className={`absolute left-0 mt-2 w-80 bg-white shadow-lg z-50 rounded-lg p-6 ${isDarkMode ? 'dark:bg-gray-700' : ''}`}>
<div
onMouseLeave={() => setIsToolsDropdownOpen(false)}
className={`absolute left-0 mt-2 w-80 bg-white shadow-lg z-50 rounded-lg p-6 ${
isDarkMode ? "dark:bg-gray-700" : ""
}`}
>
<div className="grid grid-cols-2 gap-4">
<DropdownItem icon={faThLarge} title="Create" description="Build content ideas" />
<Link to="/posts" className={`text-lg font-medium flex items-start space-x-2 ${isDarkMode ? 'dark:text-white' : ''}`}>
<DropdownItem
icon={faThLarge}
title="Create"
description="Build content ideas"
/>
<Link
to="/posts"
className={`text-lg font-medium flex items-start space-x-2 ${
isDarkMode ? "dark:text-white" : ""
}`}
>
<FontAwesomeIcon icon={faPaperPlane} />
<div>
<div className="font-semibold">Publish</div>
<div className="text-sm text-gray-600 dark:text-gray-400">Plan & publish content</div>
<div className="text-sm text-gray-600 dark:text-gray-400">
Plan & publish content
</div>
</div>
</Link>

<Link
to="/newsletter"
className={`text-lg font-medium flex items-start space-x-2 ${
isDarkMode ? "dark:text-white" : ""
}`}
>
<FaNewspaper icon={faComments} size={36} />
<div>
<div className="font-semibold">Newsletter</div>
<div className="text-sm text-gray-600 dark:text-gray-400">
Subscribe for Updates
</div>
</div>
</Link>
<Link to="/analytics" className={`text-lg font-medium flex items-start space-x-2 ${isDarkMode ? 'dark:text-white' : ''}`}>

<Link
to="/analytics"
className={`text-lg font-medium flex items-start space-x-2 ${
isDarkMode ? "dark:text-white" : ""
}`}
>
<FontAwesomeIcon icon={faChartLine} />
<div>
<div className="font-semibold">Analyze</div>
<div className="text-sm text-gray-600 dark:text-gray-400">Analyze performance</div>
<div className="text-sm text-gray-600 dark:text-gray-400">
Analyze performance
</div>
</div>
</Link>
<Link to="/contributors" className={`text-lg font-medium flex items-start space-x-2 ${isDarkMode ? 'dark:text-white' : ''}`}>
<Link
to="/contributors"
className={`text-lg font-medium flex items-start space-x-2 ${
isDarkMode ? "dark:text-white" : ""
}`}
>
<FontAwesomeIcon icon={faComments} />
<div>
<div className="font-semibold">Engage</div>
<div className="text-sm text-gray-600 dark:text-gray-400">Engage with your audience</div>
<div className="text-sm text-gray-600 dark:text-gray-400">
Engage with your audience
</div>
</div>
</Link>
<DropdownItem icon={faFileAlt} title="Start Page" description="Create a landing page" />
<DropdownItem icon={faLightbulb} title="AI Assistant" description="Generate ideas & rewrite content" />
<DropdownItem
icon={faFileAlt}
title="Start Page"
description="Create a landing page"
/>
<DropdownItem
icon={faLightbulb}
title="AI Assistant"
description="Generate ideas & rewrite content"
/>
</div>
</div>
)}
</div>

{/* Channels Dropdown */}
<div className="relative">
<button className={`text-lg font-medium ${isDarkMode ? 'dark:text-white' : ''}`} onMouseEnter={toggleChannelsDropdown}>
<button
className={`text-lg font-medium ${
isDarkMode ? "dark:text-white" : ""
}`}
onMouseEnter={toggleChannelsDropdown}
>
Channels <FontAwesomeIcon icon={faChevronDown} />
</button>

{isChannelsDropdownOpen && (
<div onMouseLeave={(()=> setIsChannelsDropdownOpen(false))} className={`absolute left-0 mt-2 z-50 w-80 bg-white shadow-lg rounded-lg p-6 ${isDarkMode ? 'dark:bg-gray-700' : ''}`}>
<div
onMouseLeave={() => setIsChannelsDropdownOpen(false)}
className={`absolute left-0 mt-2 z-50 w-80 bg-white shadow-lg rounded-lg p-6 ${
isDarkMode ? "dark:bg-gray-700" : ""
}`}
>
<div className="grid grid-cols-2 gap-4">
<DropdownItem icon={faFacebookF} title="Facebook" />
<DropdownItem icon={faInstagram} title="Instagram" />
Expand All @@ -140,7 +233,14 @@ const Navbar = () => {
</div>

{/* Other Links */}
<Link to="/settings" className={`text-lg font-medium ${isDarkMode ? 'dark:text-white' : ''}`}>Settings</Link>
<Link
to="/settings"
className={`text-lg font-medium ${
isDarkMode ? "dark:text-white" : ""
}`}
>
Settings
</Link>

{/* Search */}
<div className="relative flex items-center">
Expand All @@ -157,10 +257,15 @@ const Navbar = () => {
</div>

{/* Get Started Button */}
<button className="bg-blue-600 text-white px-4 py-2 rounded-full">Get started now</button>
<button className="bg-blue-600 text-white px-4 py-2 rounded-full">
Get started now
</button>

{/* Theme Toggle */}
<button className="h-10 w-10 outline-none border-none rounded-full bg-gray-200 dark:bg-gray-600 text-gray-900 dark:text-white ml-4" onClick={toggleTheme}>
<button
className="h-10 w-10 outline-none border-none rounded-full bg-gray-200 dark:bg-gray-600 text-gray-900 dark:text-white ml-4"
onClick={toggleTheme}
>
<FontAwesomeIcon icon={isDarkMode ? faSun : faMoon} />
</button>
</nav>
Expand Down
Loading

0 comments on commit fc162d3

Please sign in to comment.