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 podcastIndexService using iTunes API for search and trending podcasts

Browse Source
This commit is contained in:
Michael committed 2026-04-16 15:03:10 +02:00
1 parent a993e2d658
commit e01b661aa2
7 files changed
+425 -139
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/components/Navigation.tsx
+19 -19
View File
@@ -1,5 +1,5 @@
import { Link, useLocation } from 'react-router-dom';
import { Home, Flame, PlusCircle, BookOpen, Library } from 'lucide-react';
import { Home, Flame, PlusCircle, Library } from 'lucide-react';
export default function Navigation() {
const location = useLocation();
@@ -7,24 +7,24 @@ export default function Navigation() {
const isActive = (path: string) => location.pathname === path;
const navItems = [
{ path: '/dashboard', label: 'Tableau de bord', icon: Home, color: 'text-accent-indigo' },
{ path: '/trending', label: 'Tendances', icon: Flame, color: 'text-accent-rose' },
{ path: '/library', label: 'Bibliothèque', icon: Library, color: 'text-accent-cyan' },
{ path: '/add', label: 'Ajouter', icon: PlusCircle, color: 'text-accent-violet' },
{ path: '/dashboard', label: 'Dashboard', icon: Home },
{ path: '/trending', label: 'Trending', icon: Flame },
{ path: '/library', label: 'Library', icon: Library },
{ path: '/add', label: 'Add Podcast', icon: PlusCircle },
];
return (
<>
{/* Desktop Sidebar */}
<nav className="fixed left-6 top-6 bottom-6 w-72 h-auto premium-glass z-50 p-6 hidden lg:flex flex-col gap-8 rounded-[2.5rem]">
<nav className="fixed left-6 top-6 bottom-6 w-72 h-auto premium-glass z-50 p-6 hidden lg:flex flex-col gap-8 rounded-[2.5rem] border border-[var(--border-color)]">
{/* Logo */}
<Link to="/" className="flex items-center gap-4 group">
<div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-accent-indigo to-accent-rose flex items-center justify-center text-2xl shadow-glow-indigo transition-transform group-hover:scale-110">
<div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-[var(--accent-primary)] to-[var(--accent-secondary)] flex items-center justify-center text-2xl shadow-glow-indigo transition-transform group-hover:scale-110">
🎙️
</div>
<div className="flex flex-col">
<span className="text-xl font-display font-extrabold text-white tracking-tight">PODCASTIC</span>
<span className="text-[10px] text-slate-500 font-bold uppercase tracking-[0.2em]">Premium Audio</span>
<span className="text-xl font-display font-extrabold tracking-tight">PODCASTIC</span>
<span className="text-[10px] text-[var(--text-secondary)] font-bold uppercase tracking-[0.2em]">Premium Audio</span>
</div>
</Link>
@@ -39,28 +39,28 @@ export default function Navigation() {
to={item.path}
className={`group relative flex items-center gap-4 px-5 py-4 rounded-2xl transition-all duration-300 ${
active
? 'bg-white/10 text-white shadow-lg shadow-black/20'
: 'text-slate-400 hover:text-white hover:bg-white/5'
? 'bg-[var(--accent-primary)]/10 text-[var(--accent-primary)] shadow-sm'
: 'text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-secondary)]'
}`}
>
{active && (
<div className="absolute left-0 w-1.5 h-6 rounded-full bg-accent-indigo shadow-[0_0_12px_rgba(99,102,241,0.8)]" />
<div className="absolute left-0 w-1.5 h-6 rounded-full bg-[var(--accent-primary)] shadow-glow-indigo" />
)}
<ActiveIcon className={`w-5 h-5 transition-transform group-hover:scale-110 ${active ? 'text-accent-indigo' : ''}`} />
<span className="text-sm font-semibold tracking-wide">{item.label}</span>
<ActiveIcon className={`w-5 h-5 transition-transform group-hover:scale-110 ${active ? 'text-[var(--accent-primary)]' : ''}`} />
<span className="text-sm font-bold tracking-wide">{item.label}</span>
</Link>
);
})}
</div>
{/* Footer */}
<div className="mt-auto pt-6 border-t border-white/5">
<p className="px-2 text-[10px] text-slate-700 font-bold uppercase tracking-widest">Podcastic © 2026</p>
<div className="mt-auto pt-6 border-t border-[var(--border-color)]">
<p className="px-2 text-[10px] text-[var(--text-secondary)] font-bold uppercase tracking-widest opacity-50">Podcastic Premium v1.0</p>
</div>
</nav>
{/* Mobile Bottom Nav */}
<nav className="fixed bottom-6 left-6 right-6 h-20 premium-glass lg:hidden z-50 flex items-center justify-around px-4 rounded-[2rem] shadow-2xl">
<nav className="fixed bottom-6 left-6 right-6 h-20 premium-glass lg:hidden z-50 flex items-center justify-around px-4 rounded-[2rem] shadow-2xl border border-[var(--border-color)]">
{navItems.map((item) => {
const MobileIcon = item.icon;
const active = isActive(item.path);
@@ -69,11 +69,11 @@ export default function Navigation() {
key={item.path}
to={item.path}
className={`flex flex-col items-center gap-1.5 transition-all duration-300 ${
active ? 'scale-110 text-accent-indigo' : 'text-slate-500'
active ? 'scale-110 text-[var(--accent-primary)]' : 'text-[var(--text-secondary)]'
}`}
>
<MobileIcon className="w-6 h-6" />
{active && <div className="w-1 h-1 rounded-full bg-accent-indigo shadow-[0_0_8px_rgba(99,102,241,1)]" />}
{active && <div className="w-1 h-1 rounded-full bg-[var(--accent-primary)] shadow-glow-indigo" />}
</Link>
);
})}