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

Jump to bottom

Notification is working #186

Merged
merged 10 commits into from
Oct 28, 2024
Merged

Notification is working #186

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
9c6bc95
c
Aditya90456 Oct 21, 2024
5be506f
Notification is working
Aditya90456 Oct 22, 2024
e4c17dc
Merge branch 'main' into main
Aditya90456 Oct 22, 2024
5d9099f
fix
Aditya90456 Oct 26, 2024
3020743
Merge branch 'main' of https://github.com/Aditya90456/DesignDeck
Aditya90456 Oct 26, 2024
a9c2c6f
Merge branch 'main' into main
Aditya90456 Oct 26, 2024
3e65f23
Merge branch 'main' into main
Aditya90456 Oct 27, 2024
937f4d8
Fix issue
Aditya90456 Oct 27, 2024
b15ce62
Merge branch 'main' of https://github.com/Aditya90456/DesignDeck
Aditya90456 Oct 27, 2024
f13e689
fixed
Aditya90456 Oct 27, 2024
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
33 changes: 29 additions & 4 deletions app/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
"use client";
import React, { useEffect, useState } from "react";
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';


import {
Navbar,
Link,
Expand Down Expand Up @@ -27,6 +31,11 @@ export default function App() {
const [isMenuOpen, setIsMenuOpen] = useState(false);
const [isLoggedIn, setIsLoggedIn] = useState(false);

const y=()=>toast("Text addition notify me ")

const p=()=>toast("Live Collaboration notify me ")

const a=()=>toast("Real-Time updates notify me ")
const icons = {
chevron: (
<ChevronDown
Expand Down Expand Up @@ -59,7 +68,8 @@ export default function App() {

useEffect(() => {
setDarkMode(currentTheme === "dark");
}, [currentTheme]);
}, [currentTheme]);


return (
<>
Expand Down Expand Up @@ -198,7 +208,7 @@ export default function App() {
<p className="font-medium text-justify text-black ">
Live Collaboration
</p>
<Button
<Button onClick={p}
className="text-tiny text-white bg-black/60"
variant="flat"
color="default"
Expand All @@ -208,6 +218,7 @@ export default function App() {
Notify me
</Button>
</CardFooter>
<ToastContainer/>
</Card>
</div>
<div className={` bg-none shadow-2xl rounded-lg text-center`}>
Expand All @@ -223,7 +234,7 @@ export default function App() {
<p className=" font-light text-white text-justify">
Real-Time Updates
</p>
<Button
<Button onClick={a}
className="text-tiny text-white bg-black/20"
variant="flat"
color="default"
Expand All @@ -233,6 +244,7 @@ export default function App() {
<a href="/workspace">Notify me</a>
</Button>
</CardFooter>
<ToastContainer/>
</Card>
</div>

Expand All @@ -253,7 +265,10 @@ export default function App() {
<p className="text-white text-md font-sans">
Text Addition
</p>
<Button
{/* <p className="text-black text-tiny">Add text to designs and adjust font size, weight, and style.</p> */}

<Button onClick={y}

color="default"
className=" text-tiny font-sans text-white bg-black/60"
variant="flat"
Expand All @@ -263,6 +278,16 @@ export default function App() {
Notify Me
</Button>
</CardFooter>

<ToastContainer/>
{/* <CardFooter className="absolute bg-white/30 bottom-0 border-t-1 border-zinc-100/50 z-10 justify-between">
<div>
<p className="text-black">Text Addition</p>
</div>
<Button radius="full" color="default" className=" shadow-lg text-tiny text-white bg-black/60">
Notify Me
</Button>
</CardFooter> */
</Card>
</div>
</div>
Expand Down
193 changes: 191 additions & 2 deletions app/front-navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,10 +54,198 @@ const menuItems = [
{ name: "Help & Feedback", href: "/help" },
{ name: "Log Out", href: "/logout" },
];



export default function NavbarComponent({ isLoggedIn, setIsMenuOpen, isMenuOpen }: NavbarComponentProps) {
const { theme } = useTheme();
const [isMobile, setIsMobile] = useState(false);

useEffect(() => {
const handleResize = () => setIsMobile(window.innerWidth < 768);
handleResize();
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
} )};

return (
<Navbar isBordered className="bg-background">
<NavbarContent justify="start">
<NavbarBrand className="mr-4">
<p className="font-bold text-inherit">DesignDesk</p>
</NavbarBrand>
</NavbarContent>

{!isMobile && (
<NavbarContent justify="center" className="hidden sm:flex gap-4">
<NavbarItem>
<Link href="/">Home</Link>
</NavbarItem>
<Dropdown>
<NavbarItem>
<DropdownTrigger>
<Button
disableRipple
className="p-0 bg-transparent data-[hover=true]:bg-transparent"
endContent={icons.chevron}
radius="sm"
variant="light"
>
Features
</Button>
</DropdownTrigger>
</NavbarItem>
<DropdownMenu
aria-label="Features"
className="w-[340px]"
itemClasses={{
base: "gap-4",
}}
>
<DropdownItem key="autoscaling" startContent={icons.hammer}>
DesignDesk Jam
</DropdownItem>
<DropdownItem key="usage_metrics" startContent={icons.dev}>
Dev Mode
</DropdownItem>
<DropdownItem key="production_ready" startContent={icons.slide}>
DesignDesk Slides
</DropdownItem>
<DropdownItem key="99_uptime" startContent={icons.download}>
Download
</DropdownItem>
</DropdownMenu>
</Dropdown>
<NavbarItem>
<Link href="/contact">Contact</Link>
</NavbarItem>
<NavbarItem>
<Link href="/faq">FAQ</Link>
</NavbarItem>
</NavbarContent>
)}

<NavbarContent justify="end">
{!isLoggedIn && !isMobile && (
<>
<NavbarItem>
<Button as={Link} color="primary" href="/login" variant="flat">
Login
</Button>
</NavbarItem>
<NavbarItem>
<Button as={Link} color="primary" href="/signup" variant="solid">
Sign Up
</Button>
</NavbarItem>
</>
)}
<NavbarItem>
<ThemeSwitcher />
</NavbarItem>
{isMobile && (
<NavbarItem>
<Button
isIconOnly
variant="light"
onClick={() => setIsMenuOpen(!isMenuOpen)}
>
{isMenuOpen ? <X size={24} /> : <Menu size={24} />}
</Button>
</NavbarItem>
)}
</NavbarContent>

{isMobile && isMenuOpen && (
<div className="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm">
<div className="fixed inset-y-0 right-0 w-full max-w-sm bg-white dark:bg-gray-800 p-6 shadow-xl transition-transform duration-300 ease-in-out transform translate-x-0">
<div className="flex justify-between items-center mb-6">
<h2 className="text-2xl font-bold text-gray-900 dark:text-white">Menu</h2>
<Button
isIconOnly
variant="light"
onClick={() => setIsMenuOpen(false)}
className="text-gray-900 dark:text-white"
>
<X size={24} />
</Button>
</div>
<div className="flex flex-col space-y-4">
{menuItems.map((item) => (
<Link
key={item.name}
href={item.href}
className="text-gray-900 dark:text-white hover:text-primary dark:hover:text-primary-400 transition-colors text-lg py-2"
onClick={() => setIsMenuOpen(false)}
>
{item.name}
</Link>
))}
{!isLoggedIn && (
<div className="pt-4 space-y-4">
<Button as={Link} color="primary" href="/login" variant="flat" fullWidth size="lg">
Login
</Button>
<Button as={Link} color="primary" href="/signup" variant="solid" fullWidth size="lg">
Sign Up
</Button>
</div>
)}
</div>
</div>

const NavbarComponent: React.FC<NavbarComponentProps> = ({ isLoggedIn, setIsMenuOpen, isMenuOpen }) => {

const NavbarComponent: React.FC<NavbarComponentProps> = ({ isLoggedIn, setIsMenuOpen, isMenuOpen }) =>{

const { systemTheme, theme } = useTheme();
const currentTheme = theme === "dark" ? systemTheme : theme;
const [darkMode, setDarkMode] = useState(false);
const [isMobile, setIsMobile] = useState(false);

useEffect(() => {
setDarkMode(currentTheme === 'dark');

const { systemTheme, theme } = useTheme();
const handleResize = () => {
setIsMobile(window.innerWidth < 768);
};

handleResize();
window.addEventListener('resize', handleResize);

return () => {
window.removeEventListener('resize', handleResize);
};

}, [currentTheme]);


return (
<div className={`fixed top-0 left-0 right-0 z-50 ${darkMode ? "text-white" : "text-black"}`}>
<Navbar isBordered isMenuOpen={isMenuOpen} onMenuOpenChange={setIsMenuOpen} className="bg-neutral-900 text-white">
<NavbarContent justify="start">
{!isMobile && (
<NavbarBrand className="flex basis-0 flex-row flex-grow flex-nowrap justify-start bg-transparent" style={{ marginLeft: '-50px' }}>
<Image className="transition duration-300 ease-in-out"
src={Logo.src}
alt="DesignDeck Logo"
width={276}
height={64}
style={{ marginLeft: '0', marginRight: '10px', background: 'none' }} />
{/* Increased height and removed background */}
</NavbarBrand>
)}
</NavbarContent>
<Navbar/>
<NavbarBrand className="flex basis-0 flex-row flex-grow flex-nowrap justify-start bg-transparent" style={{ marginLeft: '-50px' }}>
<Image
className="transition duration-300 ease-in-out"
src={Logo.src}
alt="DesignDeck Logo"
width={276} // Set the width prop
height={64} // Set the height prop
style={{ marginLeft: '0', marginRight: '10px', background: 'none' }}
/>
const { systemTheme, theme } = useTheme();
const currentTheme = theme === "dark" ? systemTheme : theme;
const [darkMode, setDarkMode] = useState(false);
const [isMobile, setIsMobile] = useState(false);
Expand Down Expand Up @@ -90,6 +278,7 @@ const NavbarComponent: React.FC<NavbarComponentProps> = ({ isLoggedIn, setIsMenu
height={64} // Set the height prop
style={{ marginLeft: '0', marginRight: '10px', background: 'none' }}
/>

</NavbarBrand>

<NavbarContent justify="center" className="space-x-4"> {/* Adjusted spacing here */}
Expand Down
Loading