Refactor BlogHeader component by removing unused author logic and simplifying logo display

This commit is contained in:
2025-10-05 15:00:47 +02:00
parent d3b46906c5
commit 02753ba105

View File

@@ -1,46 +1,25 @@
import { Link } from 'react-router-dom';
import { useCurrentUser } from '@/hooks/useCurrentUser';
import { useAuthor } from '@/hooks/useAuthor';
import { LoginArea } from '@/components/auth/LoginArea';
import { Button } from '@/components/ui/button';
import { PenSquare, Menu } from 'lucide-react';
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { ThemeToggle } from '@/components/ThemeToggle';
import { genUserName } from '@/lib/genUserName';
import { useState } from 'react';
export function BlogHeader() {
const { user } = useCurrentUser();
const [isMenuOpen, setIsMenuOpen] = useState(false);
const author = useAuthor(user?.pubkey || '');
const metadata = author.data?.metadata;
const displayName = user
? (metadata?.display_name || metadata?.name || genUserName(user.pubkey))
: 'Nostr Blog';
return (
<header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
<div className="container flex h-16 items-center justify-between px-4 sm:px-6 lg:px-8">
{/* Logo / Brand with Profile */}
{/* Logo / Brand */}
<div className="flex items-center gap-4 sm:gap-6">
<Link to="/" className="flex items-center gap-2 sm:gap-3 hover:opacity-80 transition-opacity">
{user ? (
<>
<Avatar className="h-8 w-8 sm:h-10 sm:w-10">
<AvatarImage src={metadata?.picture} alt={displayName} />
<AvatarFallback>{displayName[0]?.toUpperCase()}</AvatarFallback>
</Avatar>
<span className="font-bold text-lg sm:text-xl truncate max-w-[120px] sm:max-w-none">
{displayName}
</span>
</>
) : (
<span className="font-bold text-lg sm:text-xl">
Nostr Blog
</span>
)}
<span className="font-bold text-lg sm:text-xl">
zelo.news
</span>
</Link>
{/* Desktop Navigation */}