-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
b1a9cdd
commit 817f799
Showing
35 changed files
with
2,489 additions
and
297 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,65 @@ | ||
import { X } from "lucide-react"; | ||
|
||
import { | ||
Sidebar, | ||
SidebarContent, | ||
SidebarFooter, | ||
SidebarGroup, | ||
SidebarGroupContent, | ||
SidebarHeader, | ||
SidebarMenu, | ||
useSidebar, | ||
} from "./../ui/Sidebar"; | ||
import { Link } from "react-router-dom"; | ||
import MenuItems from "./MenuItems"; | ||
import { JellyFishIcon } from "@/assets/icons/nav/JellyFishIcon"; | ||
import AuthenticationAction from "./AuthenticationActions"; | ||
|
||
const AppSidebar = () => { | ||
const { toggleSidebar } = useSidebar(); | ||
|
||
return ( | ||
<Sidebar side="left" variant="sidebar"> | ||
<SidebarContent className="p-3"> | ||
<SidebarHeader> | ||
<div className="flex gap-2 items-center justify-between"> | ||
<div className="flex gap-2 items-center"> | ||
<Link to="/"> | ||
<JellyFishIcon /> | ||
</Link> | ||
|
||
<div className="inline gradient-text font-bankGothic font-bold text-2xl"> | ||
JellyFish | ||
</div> | ||
</div> | ||
|
||
<button | ||
className="flex flex-col space-y-1.5 text-gray-500 hover:text-gray-800 transition-all duration-150" | ||
onClick={toggleSidebar} | ||
> | ||
<X size={24} /> | ||
</button> | ||
</div> | ||
</SidebarHeader> | ||
|
||
<SidebarGroup> | ||
<SidebarGroupContent> | ||
<SidebarMenu> | ||
<div className="space-y-4"> | ||
<MenuItems /> | ||
</div> | ||
</SidebarMenu> | ||
</SidebarGroupContent> | ||
</SidebarGroup> | ||
</SidebarContent> | ||
|
||
<SidebarFooter className="p-3"> | ||
<div className="flex-grow"> | ||
<AuthenticationAction /> | ||
</div> | ||
</SidebarFooter> | ||
</Sidebar> | ||
); | ||
}; | ||
|
||
export default AppSidebar; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
import { NostrIconWhite } from "@/assets/icons/NostrIconWhite"; | ||
import { Button } from "../ui/Button"; | ||
import { useState } from "react"; | ||
|
||
const AuthenticationButton = () => { | ||
const [user, setUser] = useState<any>(null); | ||
|
||
const handleLogout = () => { | ||
// Add your logout logic here | ||
setUser(null); | ||
}; | ||
|
||
if (user) { | ||
return ( | ||
<Button | ||
onClick={handleLogout} | ||
className="w-full text-gray-800 dark:text-white" | ||
> | ||
Logout | ||
</Button> | ||
); | ||
} | ||
|
||
return ( | ||
<Button variant="outline" className="w-full h-12 rounded-full"> | ||
<NostrIconWhite /> Log In | ||
</Button> | ||
); | ||
}; | ||
|
||
export default AuthenticationButton; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
import { HandIcon } from "@/assets/icons/nav/HandIcon"; | ||
import { LightingIcon } from "@/assets/icons/nav/LightingIcon"; | ||
import { NostrIconPink } from "@/assets/icons/nav/NostrIconPink"; | ||
import { Link } from "react-router-dom"; | ||
|
||
const MenuItems = () => { | ||
return ( | ||
<> | ||
<Link to="/availability" className="flex items-center gap-2"> | ||
<div className="flex-shrink-0"> | ||
<HandIcon /> | ||
</div> | ||
<div className="text-lg font-medium gradient-text font-roboto-mono"> | ||
NIP-05 Service | ||
</div> | ||
</Link> | ||
<Link | ||
to="lightning:[email protected]" | ||
className="flex items-center gap-2" | ||
> | ||
<div className="flex-shrink-0"> | ||
<LightingIcon /> | ||
</div> | ||
<div className="text-[#EAB308] font-roboto-mono font-medium text-lg"> | ||
Zap Us | ||
</div> | ||
</Link> | ||
<Link | ||
to="nostr:npub1hu47u55pzjw8cdg0t5f2uvh4znrcvnl3pqz3st6p0pfcctzzzqrsplc46u" | ||
className="flex items-center gap-2" | ||
> | ||
<div className="flex-shrink-0"> | ||
<NostrIconPink /> | ||
</div> | ||
<div className="bg-gradient-to-r from-[#F869B6] to-[#D34CD9] bg-clip-text text-transparent font-roboto-mono font-medium text-lg"> | ||
Nostr | ||
</div> | ||
</Link> | ||
</> | ||
); | ||
}; | ||
|
||
export default MenuItems; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,111 +1,44 @@ | ||
// src/components/Navbar.js | ||
import { useState } from "react"; | ||
import { Link } from "react-router-dom"; | ||
import { Button } from "../ui/Button"; | ||
import { JellyFishIcon } from "@/assets/icons/nav/JellyFishIcon"; | ||
import { HandIcon } from "@/assets/icons/nav/HandIcon"; | ||
import { LightingIcon } from "@/assets/icons/nav/LightingIcon"; | ||
import { NostrIconPink } from "@/assets/icons/nav/NostrIconPink"; | ||
import { NostrIconWhite } from "@/assets/icons/NostrIconWhite"; | ||
// import { useAuth } from '../context/AuthContext'; // Assuming you have an AuthContext | ||
|
||
const Links = () => { | ||
return ( | ||
<> | ||
<Link to="/availability" className="flex gap-2 items-center"> | ||
<div> | ||
<HandIcon /> | ||
</div> | ||
<div className="gradient-text font-roboto-mono font-medium text-lg"> | ||
NIP-05 Service | ||
</div> | ||
</Link> | ||
<Link | ||
to="lightning:[email protected]" | ||
className="flex gap-2 items-center" | ||
> | ||
<div> | ||
<LightingIcon /> | ||
</div> | ||
<div className="text-[#EAB308] font-roboto-mono font-medium text-lg"> | ||
Zap Us | ||
</div> | ||
</Link> | ||
<Link | ||
to="nostr:npub1hu47u55pzjw8cdg0t5f2uvh4znrcvnl3pqz3st6p0pfcctzzzqrsplc46u" | ||
className="flex gap-2 items-center" | ||
> | ||
<div> | ||
<NostrIconPink /> | ||
</div> | ||
<div className="bg-gradient-to-r from-[#F869B6] to-[#D34CD9] bg-clip-text text-transparent font-roboto-mono font-medium text-lg"> | ||
Nostr | ||
</div> | ||
</Link> | ||
</> | ||
); | ||
}; | ||
import { useSidebar } from "../ui/Sidebar"; | ||
import MenuItems from "./MenuItems"; | ||
import AuthenticationAction from "./AuthenticationActions"; | ||
import { AlignJustify } from "lucide-react"; | ||
|
||
const Navbar = () => { | ||
// const { user, logout } = useAuth(); | ||
const [isOpen, setIsOpen] = useState(false); | ||
|
||
const toggleMenu = () => { | ||
setIsOpen(!isOpen); | ||
}; | ||
const { toggleSidebar } = useSidebar(); | ||
|
||
return ( | ||
<nav className=""> | ||
<div className="p-8 md:px-12"> | ||
<div className="flex justify-between"> | ||
<Link to="/" className="flex md:w-2/12 gap-2 items-center"> | ||
<div> | ||
<div className="p-6 md:p-8 lg:px-12"> | ||
<div className="flex justify-between items-center"> | ||
<div className="flex flex-shrink-0 w-fit gap-2 items-center"> | ||
<Link to="/"> | ||
<JellyFishIcon /> | ||
</div> | ||
<div className="hidden md:inline gradient-text font-bankGothic font-bold text-2xl"> | ||
</Link> | ||
|
||
<div className="hidden lg:inline gradient-text font-bankGothic font-bold text-2xl"> | ||
JellyFish | ||
</div> | ||
<div className="md:hidden"> | ||
<Button variant={"link"} onClick={toggleMenu}> | ||
<button className="flex flex-col space-y-1.5"> | ||
<span className="w-6 h-0.5 bg-white"></span> | ||
<span className="w-6 h-0.5 bg-white"></span> | ||
<span className="w-6 h-0.5 bg-white"></span> | ||
</button> | ||
</Button> | ||
</div> | ||
</Link> | ||
</div> | ||
|
||
<button | ||
className="md:hidden text-white" | ||
onClick={toggleSidebar} | ||
> | ||
<AlignJustify /> | ||
</button> | ||
|
||
<div className="hidden md:w-8/12 md:flex justify-center md:space-x-8 md:ml-10"> | ||
<Links /> | ||
<div className="hidden flex-grow md:flex justify-center md:space-x-8 items-center"> | ||
<MenuItems /> | ||
</div> | ||
<div className="md:w-2/12 flex justify-end"> | ||
<Button variant={"outline"} className="h-12"> | ||
<NostrIconWhite /> Log In | ||
</Button> | ||
{/* {user ? ( | ||
<Button | ||
onClick={logout} | ||
className="text-gray-800 dark:text-white" | ||
> | ||
Logout | ||
</Button> | ||
) : ( | ||
<Link | ||
to="/login" | ||
className="text-gray-800 dark:text-white" | ||
> | ||
Login | ||
</Link> | ||
)} */} | ||
|
||
<div className="hidden md:block flex-shrink-0 w-fit"> | ||
<AuthenticationAction /> | ||
</div> | ||
</div> | ||
</div> | ||
{isOpen && ( | ||
<div className="flex flex-col gap-2 justify-center items-center"> | ||
<Links /> | ||
</div> | ||
)} | ||
</nav> | ||
); | ||
}; | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.