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

feat: implement podcast discovery and management controllers and services

Browse Source
This commit is contained in:
Michael committed 2026-04-16 14:57:49 +02:00
1 parent 7923f4cf09
commit a993e2d658
11 files changed
+318 -183
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/components/Header.tsx
+47 -33
View File
@@ -1,5 +1,6 @@
import { Link } from 'react-router-dom';
import { LogOut, User as UserIcon } from 'lucide-react';
import { LogOut, User as UserIcon, Sun, Moon } from 'lucide-react';
import { useTheme } from '../context/ThemeContext';
interface HeaderProps {
title: string;
@@ -9,50 +10,63 @@ interface HeaderProps {
}
export default function Header({ title, subtitle, user, onLogout }: HeaderProps) {
const { theme, toggleTheme } = useTheme();
return (
<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">
<div className="inline-block px-3 py-1 rounded-full bg-[var(--accent-glow)] border border-[var(--border-color)] text-[10px] font-bold text-[var(--accent-primary)] uppercase tracking-widest mb-3">
{subtitle || "Exploration Audio"}
</div>
<h1 className="text-4xl lg:text-5xl font-display font-extrabold text-white tracking-tight text-balance leading-tight">
<h1 className="text-4xl lg:text-5xl font-display font-extrabold 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>
)}
{/* User Profile + Theme Toggle */}
<div className="flex items-center gap-4 sm:gap-6">
{/* Theme Toggle */}
<button
onClick={toggleTheme}
className="p-3 rounded-2xl bg-[var(--bg-secondary)] border border-[var(--border-color)] text-[var(--text-secondary)] hover:text-[var(--accent-primary)] hover:border-[var(--accent-primary)] transition-all shadow-lg group-theme-toggle"
title="Changer de thème"
>
{theme === 'dark' ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
</button>
{user && (
<div className="flex items-center gap-4 sm:gap-6">
<div className="hidden sm:flex flex-col items-end">
<span className="text-sm font-bold tracking-wide">{user.username}</span>
<span className="text-[10px] font-medium text-[var(--text-secondary)] uppercase tracking-widest">Premium Member</span>
</div>
<div className="relative group/profile">
<div className="w-12 h-12 rounded-2xl p-[1px] bg-gradient-to-tr from-[var(--accent-primary)]/50 to-[var(--accent-secondary)]/50 group-hover/profile:from-[var(--accent-primary)] group-hover/profile:to-[var(--accent-secondary)] transition-all">
<div className="w-full h-full rounded-2xl bg-[var(--bg-primary)] 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-[var(--accent-primary)]">{user.username.charAt(0).toUpperCase()}</span>
)}
</div>
</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>
)}
{/* Profile Popup (Minimal) */}
{onLogout && (
<button
onClick={onLogout}
className="absolute top-full right-0 mt-4 opacity-0 scale-90 translate-y-2 group-hover/profile:opacity-100 group-hover/profile:scale-100 group-hover/profile:translate-y-0 transition-all duration-300 premium-glass px-4 py-2 flex items-center gap-2 hover:bg-[var(--accent-primary)]/10"
>
<LogOut className="w-4 h-4 text-accent-rose" />
<span className="text-xs font-bold whitespace-nowrap">Logout</span>
</button>
)}
</div>
</div>
)}
</div>
</div>
</header>
);