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

feat: implement authentication routing, episode details slide-over, and success notification modal

Browse Source
This commit is contained in:
Michael committed 2026-04-16 15:15:28 +02:00
1 parent 90ee8df9df
commit 3bb2dfc009
4 files changed
+34 -30
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/components/EpisodeDetails.tsx
+1 -1
View File
@@ -109,7 +109,7 @@ export default function EpisodeDetails({ episode, isOpen, onClose, onPlay }: Epi
<div className="space-y-6">
<h3 className="text-xl font-display font-black">À propos de cet épisode</h3>
<div
className="prose prose-invert max-w-none text-[var(--text-secondary)] leading-relaxed text-lg"
className="prose dark:prose-invert max-w-none text-[var(--text-secondary)] leading-relaxed text-lg"
dangerouslySetInnerHTML={{ __html: episode.description }}
/>
</div>
frontend/src/components/SuccessModal.tsx
+14 -14
View File
@@ -24,43 +24,43 @@ export default function SuccessModal({
<div className="fixed inset-0 z-[110] flex items-center justify-center p-4">
{/* Backdrop */}
<div
className="absolute inset-0 bg-obsidian/60 backdrop-blur-md animate-fade-in"
className="absolute inset-0 bg-black/60 backdrop-blur-md animate-fade-in"
onClick={onClose}
/>
{/* Modal Content */}
<div className="relative premium-glass rounded-[3.5rem] w-full max-w-sm overflow-hidden animate-slide-up shadow-[0_0_50px_rgba(0,0,0,0.5)] border-white/10">
<div className="relative premium-glass rounded-[3.5rem] w-full max-w-sm overflow-hidden animate-slide-up shadow-2xl border-[var(--border-color)]">
{/* Decorative Aura */}
<div className="absolute -top-24 -right-24 w-48 h-48 bg-accent-indigo/20 blur-[60px] rounded-full" />
<div className="absolute -top-24 -right-24 w-48 h-48 bg-[var(--accent-glow)] blur-[60px] rounded-full" />
<div className="p-10 flex flex-col items-center text-center relative z-10">
{/* Header Actions */}
<button onClick={onClose} className="absolute top-0 right-0 p-6 text-slate-500 hover:text-white transition-colors">
<button onClick={onClose} className="absolute top-0 right-0 p-6 text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors">
<X className="w-5 h-5" />
</button>
{/* Icon */}
<div className="w-20 h-20 bg-accent-cyan/10 rounded-3xl flex items-center justify-center mb-8 shadow-glow-cyan border border-accent-cyan/20">
<Sparkles className="w-8 h-8 text-accent-cyan animate-pulse" />
<div className="w-20 h-20 bg-[var(--accent-glow)] rounded-3xl flex items-center justify-center mb-8 shadow-glow-indigo border border-[var(--border-color)]">
<Sparkles className="w-8 h-8 text-[var(--accent-primary)] animate-pulse" />
</div>
<h3 className="text-2xl font-display font-black text-white mb-2 leading-tight">
<h3 className="text-2xl font-display font-black mb-2 leading-tight">
{message}
</h3>
<p className="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-8">Nouveau membre de votre univers</p>
<p className="text-[10px] font-bold text-[var(--text-secondary)] uppercase tracking-widest mb-8">Nouveau membre de votre univers</p>
<div className="w-full bg-white/[0.03] rounded-[2rem] p-5 mb-10 flex items-center gap-5 border border-white/5">
<div className="w-20 h-20 rounded-2xl overflow-hidden shadow-2xl border border-white/10 shrink-0">
<div className="w-full bg-[var(--bg-secondary)] rounded-[2rem] p-5 mb-10 flex items-center gap-5 border border-[var(--border-color)]">
<div className="w-20 h-20 rounded-2xl overflow-hidden shadow-2xl border border-[var(--border-color)] shrink-0">
{podcastImage ? (
<img src={podcastImage} alt={podcastTitle} className="w-full h-full object-cover" />
) : (
<div className="w-full h-full bg-gradient-to-br from-accent-indigo to-accent-rose flex items-center justify-center text-2xl">🎙️</div>
<div className="w-full h-full bg-gradient-to-br from-[var(--accent-primary)] to-[var(--accent-secondary)] flex items-center justify-center text-2xl">🎙️</div>
)}
</div>
<div className="text-left flex-1 min-w-0">
<p className="text-lg font-bold text-white truncate mb-1">{podcastTitle}</p>
<p className="text-lg font-bold truncate mb-1">{podcastTitle}</p>
{podcastAuthor && (
<p className="text-xs font-bold text-accent-indigo truncate uppercase tracking-widest">{podcastAuthor}</p>
<p className="text-xs font-bold text-[var(--accent-primary)] truncate uppercase tracking-widest">{podcastAuthor}</p>
)}
</div>
</div>
@@ -78,7 +78,7 @@ export default function SuccessModal({
<button
onClick={onClose}
className="w-full py-4 rounded-2xl bg-white/5 text-slate-400 text-xs font-black uppercase tracking-widest hover:bg-white/10 hover:text-white transition-all"
className="w-full py-4 rounded-2xl bg-[var(--bg-secondary)] text-[var(--text-secondary)] text-xs font-black uppercase tracking-widest hover:bg-[var(--accent-primary)]/10 hover:text-[var(--text-primary)] transition-all border border-[var(--border-color)]"
>
Continuer
</button>