Michael/podcastic
1
0 Fork 0
mirror of https://github.com/R0m1k3/podcastic.git synced 2026-10-23 15:08:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: initialize frontend entry point with HTML boilerplate and custom fonts

Browse Source
This commit is contained in:
Michael committed 2026-04-16 14:09:14 +02:00
1 parent f441251bb1
commit 6e9da01488
14 files changed
+872 -907
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/components/Header.tsx
+42 -42
View File
@@ -1,4 +1,5 @@
import { Link } from 'react-router-dom';
import { LogOut, User as UserIcon } from 'lucide-react';
interface HeaderProps {
title: string;
@@ -9,50 +10,49 @@ interface HeaderProps {
export default function Header({ title, subtitle, user, onLogout }: HeaderProps) {
return (
<header className="sticky top-0 z-50 bg-white/80 backdrop-blur-xl border-b border-light-200">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
<div className="flex items-center justify-between">
{/* Logo & Title */}
<div className="flex-1">
<Link to="/" className="flex items-center gap-3">
<div className="w-10 h-10 rounded-xl bg-gradient-primary flex items-center justify-center text-white font-bold">
🎙️
</div>
<div>
<h1 className="text-2xl font-bold text-light-900">{title}</h1>
{subtitle && <p className="text-sm text-light-500">{subtitle}</p>}
</div>
</Link>
<header className="mb-12">
<div className="flex items-center justify-between">
{/* Title Section */}
<div className="flex-1">
<div className="inline-block px-3 py-1 rounded-full bg-accent-indigo/10 border border-accent-indigo/20 text-[10px] font-bold text-accent-indigo uppercase tracking-widest mb-3">
{subtitle || "Exploration Audio"}
</div>
{/* User Menu */}
{user && (
<div className="flex items-center gap-4">
<div className="flex items-center gap-2">
{user.avatar ? (
<img
src={user.avatar}
alt={user.username}
className="w-10 h-10 rounded-full"
/>
) : (
<div className="w-10 h-10 rounded-full bg-light-300 flex items-center justify-center text-sm font-semibold text-light-700">
{user.username.charAt(0).toUpperCase()}
</div>
)}
<span className="text-sm font-medium text-light-900">{user.username}</span>
</div>
{onLogout && (
<button
onClick={onLogout}
className="px-4 py-2 text-sm text-light-600 hover:text-light-900 transition-colors"
>
Déconnexion
</button>
)}
</div>
)}
<h1 className="text-4xl lg:text-5xl font-display font-extrabold text-white tracking-tight text-balance leading-tight">
{title}
</h1>
</div>
{/* User Profile */}
{user && (
<div className="flex items-center gap-6">
<div className="hidden sm:flex flex-col items-end">
<span className="text-sm font-bold text-white tracking-wide">{user.username}</span>
<span className="text-[10px] font-medium text-slate-500 uppercase tracking-widest">Premium Member</span>
</div>
<div className="relative group">
<div className="w-12 h-12 rounded-2xl p-[1px] bg-gradient-to-tr from-accent-indigo/50 to-accent-rose/50 group-hover:from-accent-indigo group-hover:to-accent-rose transition-all">
<div className="w-full h-full rounded-2xl bg-obsidian-800 flex items-center justify-center overflow-hidden">
{user.avatar ? (
<img src={user.avatar} alt={user.username} className="w-full h-full object-cover" />
) : (
<span className="text-lg font-bold text-accent-indigo">{user.username.charAt(0).toUpperCase()}</span>
)}
</div>
</div>
{/* Profile Popup (Minimal) */}
{onLogout && (
<button
onClick={onLogout}
className="absolute top-full right-0 mt-4 opacity-0 scale-90 translate-y-2 group-hover:opacity-100 group-hover:scale-100 group-hover:translate-y-0 transition-all duration-300 premium-glass px-4 py-2 flex items-center gap-2 hover:bg-white/10"
>
<LogOut className="w-4 h-4 text-accent-rose" />
<span className="text-xs font-bold text-white whitespace-nowrap">Logout</span>
</button>
)}
</div>
</div>
)}
</div>
</header>
);