wisplite/raster
1
0
Fork 0
mirror of https://github.com/wisplite/raster.git synced 2026-05-01 06:32:44 -05:00
Code Issues Packages Projects Releases Wiki Activity

fixed gitignore and much better account popover

Browse Source
This commit is contained in:
wisplite
2025-11-19 20:41:39 -06:00
parent 9a40260e45
commit 70e08b5b44
3 changed files with 35 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+1
View File
@@ -0,0 +1 @@
backend/raster.db
backend/.gitignore
-1
View File
@@ -1 +0,0 @@
raster.db
frontend/src/components/NavBar.jsx
+34 -16
View File
@@ -1,5 +1,5 @@
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import { ChevronDown, LogIn, LogOut, UserIcon } from 'lucide-react' import { ChevronDown, LogIn, LogOut, UserIcon, Settings } from 'lucide-react'
import * as Popover from '@radix-ui/react-popover' import * as Popover from '@radix-ui/react-popover'
import { useState } from 'react'; import { useState } from 'react';
import { useAccount } from '../contexts/useAccount'; import { useAccount } from '../contexts/useAccount';
@@ -24,21 +24,39 @@ export default function NavBar({ path }) {
<UserIcon className="w-6 h-6 text-white cursor-pointer" /> <UserIcon className="w-6 h-6 text-white cursor-pointer" />
<ChevronDown className={`w-4 h-4 text-white ${open ? 'rotate-180' : ''}`} /> <ChevronDown className={`w-4 h-4 text-white ${open ? 'rotate-180' : ''}`} />
</Popover.Trigger> </Popover.Trigger>
<Popover.Content align="end" sideOffset={8}> <Popover.Content align="end" sideOffset={8} className="w-56 z-50">
<div className="flex flex-col items-center justify-start gap-2 bg-[#141414] border px-4 py-2 border-[#2B2B2B] rounded-md p-2 "> <div className="flex flex-col bg-[#141414] border border-[#2B2B2B] rounded-lg shadow-xl overflow-hidden">
<p className="text-white red-hat-text">Logged in as: {user?.Username || 'Guest'}</p> <div className="px-4 py-3 border-b border-[#2B2B2B] bg-[#1A1A1A]">
<hr className="w-full border-[#2B2B2B]" /> <p className="text-xs text-gray-400 mb-0.5 font-medium red-hat-mono">Signed in as</p>
{user ? ( <p className="text-sm text-white font-bold truncate red-hat-text">{user?.Username || 'Guest'}</p>
<div className="flex flex-row items-center justify-start gap-2"> </div>
<p className="text-white cursor-pointer red-hat-text" onClick={logout}>Log Out</p>
<LogOut className="w-4 h-4 text-white cursor-pointer" onClick={logout} /> <div className="p-1.5 flex flex-col gap-0.5">
</div> {user ? (
) : ( <>
<div className="flex flex-row items-center justify-start gap-2"> <button className="flex items-center gap-3 px-3 py-2 w-full text-left text-sm text-gray-300 hover:text-white hover:bg-[#2B2B2B] rounded-md transition-all group cursor-pointer">
<Link to="/login" className="text-white red-hat-text">Log In</Link> <Settings className="w-4 h-4 text-gray-400 group-hover:text-white transition-colors" />
<LogIn className="w-4 h-4 text-white cursor-pointer" /> <span className="font-medium red-hat-text">Settings</span>
</div> </button>
)}
<button
onClick={logout}
className="flex items-center gap-3 px-3 py-2 w-full text-left text-sm text-gray-300 hover:text-white hover:bg-[#2B2B2B] rounded-md transition-all group cursor-pointer"
>
<LogOut className="w-4 h-4 text-gray-400 group-hover:text-white transition-colors" />
<span className="font-medium red-hat-text">Log Out</span>
</button>
</>
) : (
<Link
to="/login"
className="flex items-center gap-3 px-3 py-2 w-full text-left text-sm text-gray-300 hover:text-white hover:bg-[#2B2B2B] rounded-md transition-all group cursor-pointer"
>
<LogIn className="w-4 h-4 text-gray-400 group-hover:text-white transition-colors" />
<span className="font-medium red-hat-text">Log In</span>
</Link>
)}
</div>
</div> </div>
</Popover.Content> </Popover.Content>
</Popover.Root> </Popover.Root>