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
+31 -13
View File
@@ -1,5 +1,5 @@
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 { useState } from 'react';
import { useAccount } from '../contexts/useAccount';
@@ -24,22 +24,40 @@ export default function NavBar({ path }) {
<UserIcon className="w-6 h-6 text-white cursor-pointer" />
<ChevronDown className={`w-4 h-4 text-white ${open ? 'rotate-180' : ''}`} />
</Popover.Trigger>
<Popover.Content align="end" sideOffset={8}>
<div className="flex flex-col items-center justify-start gap-2 bg-[#141414] border px-4 py-2 border-[#2B2B2B] rounded-md p-2 ">
<p className="text-white red-hat-text">Logged in as: {user?.Username || 'Guest'}</p>
<hr className="w-full border-[#2B2B2B]" />
<Popover.Content align="end" sideOffset={8} className="w-56 z-50">
<div className="flex flex-col bg-[#141414] border border-[#2B2B2B] rounded-lg shadow-xl overflow-hidden">
<div className="px-4 py-3 border-b border-[#2B2B2B] bg-[#1A1A1A]">
<p className="text-xs text-gray-400 mb-0.5 font-medium red-hat-mono">Signed in as</p>
<p className="text-sm text-white font-bold truncate red-hat-text">{user?.Username || 'Guest'}</p>
</div>
<div className="p-1.5 flex flex-col gap-0.5">
{user ? (
<div className="flex flex-row items-center justify-start gap-2">
<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>
<>
<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">
<Settings className="w-4 h-4 text-gray-400 group-hover:text-white transition-colors" />
<span className="font-medium red-hat-text">Settings</span>
</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>
</>
) : (
<div className="flex flex-row items-center justify-start gap-2">
<Link to="/login" className="text-white red-hat-text">Log In</Link>
<LogIn className="w-4 h-4 text-white cursor-pointer" />
</div>
<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>
</Popover.Content>
</Popover.Root>
</div>