mirror of
https://github.com/R0m1k3/podcastic.git
synced 2026-10-11 17:26:20 +02:00
feat: implement Library page with subscription management and synchronization features
This commit is contained in:
Michael committed
1 parent
a670a4fe5d
commit
d8cb830570
5 files changed
+28
-24
No files matched your search
@@ -104,7 +104,7 @@ function ProtectedRoute({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="flex min-h-screen">
|
||||
<Navigation />
|
||||
<main className="flex-1 lg:ml-80 lg:mr-8 pb-40 pt-8 px-4 lg:px-0">
|
||||
<main className="flex-1 min-w-0 w-full lg:ml-80 lg:mr-8 pb-40 pt-8 px-4 sm:px-6 lg:px-0 overflow-x-hidden">
|
||||
<div className="reveal">
|
||||
{children}
|
||||
</div>
|
||||
|
||||
@@ -20,7 +20,7 @@ export default function Header({ title, subtitle, user, onLogout }: HeaderProps)
|
||||
<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 tracking-tight text-balance leading-tight">
|
||||
<h1 className="text-3xl sm:text-4xl lg:text-5xl font-display font-extrabold tracking-tight text-balance leading-tight">
|
||||
{title}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
@@ -60,7 +60,7 @@ export default function Navigation() {
|
||||
</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-[var(--radius-card)] shadow-2xl border border-[var(--border-color)]">
|
||||
<nav className="fixed bottom-6 left-4 right-4 sm:left-6 sm:right-6 lg:hidden z-50 h-20 premium-glass flex items-center justify-around px-2 sm:px-4 rounded-[var(--radius-card)] shadow-2xl border border-[var(--border-color)] max-w-lg mx-auto">
|
||||
{navItems.map((item) => {
|
||||
const MobileIcon = item.icon;
|
||||
const active = isActive(item.path);
|
||||
|
||||
@@ -110,7 +110,7 @@ export default function Library() {
|
||||
/>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-2 gap-4 mb-10">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-10">
|
||||
<div className="premium-card premium-glass p-5 rounded-[var(--radius-card)] flex items-center gap-4">
|
||||
<div className="w-10 h-10 rounded-xl bg-[var(--accent-glow)] flex items-center justify-center text-[var(--accent-primary)] shrink-0">
|
||||
<BookOpen className="w-5 h-5" />
|
||||
|
||||
@@ -155,30 +155,34 @@ export default function Trending() {
|
||||
<main className="">
|
||||
<div className="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-10">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-accent-rose/10 flex items-center justify-center text-accent-rose">
|
||||
<Flame className="w-6 h-6 animate-pulse" />
|
||||
<div className="w-8 h-8 md:w-10 md:h-10 rounded-xl bg-accent-rose/10 flex items-center justify-center text-accent-rose shrink-0">
|
||||
<Flame className="w-5 h-5 md:w-6 md:h-6 animate-pulse" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-2xl font-display font-black">Top Podcasts</h2>
|
||||
<p className="text-[10px] font-bold text-[var(--text-secondary)] uppercase tracking-widest">Mis à jour en temps réel</p>
|
||||
<div className="min-w-0">
|
||||
<h2 className="text-xl md:text-2xl font-display font-black truncate">Top Podcasts</h2>
|
||||
<p className="text-[9px] md:text-[10px] font-bold text-[var(--text-secondary)] uppercase tracking-widest">Mis à jour en temps réel</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Genre Pills */}
|
||||
<div className="flex items-center gap-2 overflow-x-auto pb-2 -mx-4 px-4 sm:mx-0 sm:px-0 no-scrollbar">
|
||||
{GENRES.map(genre => (
|
||||
<button
|
||||
key={genre.id}
|
||||
onClick={() => setSelectedGenre(genre.id)}
|
||||
className={`px-4 py-2 rounded-xl text-[10px] font-black uppercase tracking-widest whitespace-nowrap transition-all border ${
|
||||
selectedGenre === genre.id
|
||||
? 'bg-[var(--accent-primary)] text-white border-[var(--accent-primary)] shadow-glow-indigo'
|
||||
: 'bg-[var(--bg-secondary)] text-[var(--text-secondary)] border-[var(--border-color)] hover:border-[var(--accent-primary)]'
|
||||
}`}
|
||||
>
|
||||
{genre.label}
|
||||
</button>
|
||||
))}
|
||||
<div className="w-full min-w-0 overflow-hidden">
|
||||
<div className="flex items-center gap-2 overflow-x-auto pb-4 no-scrollbar -mx-4 px-4 sm:mx-0 sm:px-0 scroll-smooth">
|
||||
<div className="flex items-center gap-2 flex-nowrap">
|
||||
{GENRES.map(genre => (
|
||||
<button
|
||||
key={genre.id}
|
||||
onClick={() => setSelectedGenre(genre.id)}
|
||||
className={`px-4 py-2 rounded-xl text-[10px] font-black uppercase tracking-widest whitespace-nowrap transition-all border ${
|
||||
selectedGenre === genre.id
|
||||
? 'bg-[var(--accent-primary)] text-white border-[var(--accent-primary)] shadow-glow-indigo'
|
||||
: 'bg-[var(--bg-secondary)] text-[var(--text-secondary)] border-[var(--border-color)] hover:border-[var(--accent-primary)]'
|
||||
}`}
|
||||
>
|
||||
{genre.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -189,7 +193,7 @@ export default function Trending() {
|
||||
</div>
|
||||
) : podcasts.length > 0 ? (
|
||||
<>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 mb-16">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 mb-24">
|
||||
{podcasts.map((podcast, index) => (
|
||||
<div key={`${skip}-${podcast.id}`} className="group premium-card premium-glass rounded-[var(--radius-card)] overflow-hidden flex flex-col hover:bg-[var(--bg-secondary)] transition-all duration-500 border border-[var(--border-color)]">
|
||||
<div className="relative aspect-square overflow-hidden bg-black/5">
|
||||
|
||||
Reference in new issue
Block a user