[V0_FILE]typescriptreact:file="app/page.tsx" import PodcastExplorer from "@/components/podcast-explorer" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/podcast-explorer.tsx" "use client" import { useState, useEffect } from "react" import { Play, Pause, SkipBack, SkipForward, Volume2, VolumeX, Compass, Star, Clock, Radio, Sparkles, Search, } from "lucide-react" import { Button } from "@/components/ui/button" import { Slider } from "@/components/ui/slider" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { ScrollArea } from "@/components/ui/scroll-area" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" // Sample podcast data const podcasts = [ { id: 1, title: "The Cosmic Unknown", host: "Dr. Elena Bright", cover: "/placeholder.svg?height=400&width=400", category: "Science & Mystery", duration: "42:18", description: "Exploring the mysteries of deep space and quantum realities", isNew: true, rating: 4.8, }, { id: 2, title: "Whispers of the Past", host: "Marcus Veil", cover: "/placeholder.svg?height=400&width=400", category: "History & Legends", duration: "38:05", description: "Uncovering forgotten histories and mysterious archaeological findings", isNew: false, rating: 4.6, }, { id: 3, title: "Cryptic Frequencies", host: "Samantha Echo", cover: "/placeholder.svg?height=400&width=400", category: "Technology & Mystery", duration: "51:22", description: "Investigating unexplained signals and technological anomalies", isNew: true, rating: 4.9, }, { id: 4, title: "Shadows of the Mind", host: "Dr. James Noir", cover: "/placeholder.svg?height=400&width=400", category: "Psychology & Paranormal", duration: "45:37", description: "Exploring the thin line between psychological phenomena and the unexplained", isNew: false, rating: 4.7, }, { id: 5, title: "Oceanic Enigmas", host: "Marina Deeps", cover: "/placeholder.svg?height=400&width=400", category: "Nature & Mystery", duration: "39:14", description: "Diving into the unexplored depths of our oceans and their mysterious inhabitants", isNew: true, rating: 4.5, }, ] export default function PodcastExplorer() { const [isPlaying, setIsPlaying] = useState(false) const [isMuted, setIsMuted] = useState(false) const [currentPodcast, setCurrentPodcast] = useState(podcasts[0]) const [progress, setProgress] = useState(0) const [revealedPodcasts, setRevealedPodcasts] = useState([1]) // Simulate progress when playing useEffect(() => { let interval: NodeJS.Timeout if (isPlaying) { interval = setInterval(() => { setProgress((prev) => { const newProgress = prev + 0.5 return newProgress > 100 ? 0 : newProgress }) }, 1000) } return () => clearInterval(interval) }, [isPlaying]) // Function to reveal a podcast with animation const revealPodcast = (id: number) => { if (!revealedPodcasts.includes(id)) { setRevealedPodcasts((prev) => [...prev, id]) } // Set as current podcast const podcast = podcasts.find((p) => p.id === id) if (podcast) { setCurrentPodcast(podcast) setIsPlaying(true) setProgress(0) } } // Format time from progress percentage const formatTime = (percentage: number) => { const duration = currentPodcast.duration.split(":") const totalSeconds = Number.parseInt(duration[0]) * 60 + Number.parseInt(duration[1]) const currentSeconds = Math.floor(totalSeconds * (percentage / 100)) const minutes = Math.floor(currentSeconds / 60) const seconds = currentSeconds % 60 return `${minutes}:${seconds.toString().padStart(2, "0")}` } return (

{/* Player Section */}

{isPlaying ? ( ) : ( )}

{currentPodcast.title}

{currentPodcast.host}

{currentPodcast.category} {currentPodcast.rating} {currentPodcast.isNew && ( New Discovery )}

{currentPodcast.description}

{/* Waveform visualization */}

{Array.from({ length: 50 }).map((_, i) => { const height = Math.random() * 100 const isActive = (i / 50) * 100 <= progress return (

) })}

{/* Player controls */}

{formatTime(progress)} setProgress(value[0])} className="flex-1" /> {currentPodcast.duration}

setIsMuted(false)} />

{/* Episode notes */}

Episode Insights

In this episode of {currentPodcast.title}, {currentPodcast.host} takes us on a journey through uncharted territories of knowledge. Each revelation builds upon the last, creating a tapestry of interconnected mysteries waiting to be unraveled.

The exploration begins with seemingly disconnected phenomena, but as you progress through the episode, hidden patterns emerge that challenge conventional understanding. Listen carefully for the subtle clues that might lead to your next discovery.

Hidden Timestamps

{[ { time: "12:18", label: "First revelation" }, { time: "23:45", label: "Unexpected connection" }, { time: "31:07", label: "Key insight" }, { time: "38:22", label: "Mystery deepens" }, ].map((mark, i) => (

{mark.label}

))}

{/* Discovery Section */}

Discover Collection

Mysteries Awaiting

{podcasts.map((podcast) => { const isRevealed = revealedPodcasts.includes(podcast.id) const isCurrent = currentPodcast.id === podcast.id return (

revealPodcast(podcast.id)} > {!isRevealed && (

)}

{!isRevealed && (

)}

{isRevealed ? podcast.title : "Unknown Transmission"}

{isRevealed ? podcast.host : "Awaiting discovery..."}

{podcast.duration} {podcast.isNew && ( New )}

{!isRevealed && (

Click to reveal this mystery

)}

) })}

Exploration Tips

1
Listen for subtle audio cues that may reveal hidden content
2
Connections between episodes form a larger narrative
3
Some mysteries only reveal themselves after multiple listens

Your Discoveries

{revealedPodcasts.length > 1 ? ( podcasts .filter((p) => revealedPodcasts.includes(p.id)) .map((podcast) => (

revealPodcast(podcast.id)} >

{podcast.title}

{podcast.host}

{podcast.duration}

Last played 2h ago

)) ) : (

Begin Your Journey

Discover new podcasts to add them to your collection of revelations

)}

) } [V0_FILE]css:file="app/globals.css" isFixed="true" isQuickEdit="true" @tailwind base; @tailwind components; @tailwind utilities; body { @apply bg-slate-950 text-slate-50; } @layer utilities { .text-balance { text-wrap: balance; } } @layer base { :root { --background: 0 0% 100%; --foreground: 0 0% 3.9%; --card: 0 0% 100%; --card-foreground: 0 0% 3.9%; --popover: 0 0% 100%; --popover-foreground: 0 0% 3.9%; --primary: 0 0% 9%; --primary-foreground: 0 0% 98%; --secondary: 0 0% 96.1%; --secondary-foreground: 0 0% 9%; --muted: 0 0% 96.1%; --muted-foreground: 0 0% 45.1%; --accent: 0 0% 96.1%; --accent-foreground: 0 0% 9%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 0 0% 89.8%; --input: 0 0% 89.8%; --ring: 0 0% 3.9%; --chart-1: 12 76% 61%; --chart-2: 173 58% 39%; --chart-3: 197 37% 24%; --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; --radius: 0.5rem; --sidebar-background: 0 0% 98%; --sidebar-foreground: 240 5.3% 26.1%; --sidebar-primary: 240 5.9% 10%; --sidebar-primary-foreground: 0 0% 98%; --sidebar-accent: 240 4.8% 95.9%; --sidebar-accent-foreground: 240 5.9% 10%; --sidebar-border: 220 13% 91%; --sidebar-ring: 217.2 91.2% 59.8%; } .dark { --background: 0 0% 3.9%; --foreground: 0 0% 98%; --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; --popover: 0 0% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 0 0% 9%; --secondary: 0 0% 14.9%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 14.9%; --muted-foreground: 0 0% 63.9%; --accent: 0 0% 14.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 0 0% 14.9%; --input: 0 0% 14.9%; --ring: 0 0% 83.1%; --chart-1: 220 70% 50%; --chart-2: 160 60% 45%; --chart-3: 30 80% 55%; --chart-4: 280 65% 60%; --chart-5: 340 75% 55%; --sidebar-background: 240 5.9% 10%; --sidebar-foreground: 240 4.8% 95.9%; --sidebar-primary: 224.3 76.3% 48%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 240 3.7% 15.9%; --sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-border: 240 3.7% 15.9%; --sidebar-ring: 217.2 91.2% 59.8%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } }

About

Tags

Share

More from scalableb2b

More Templates Like This

About

Tags

Share

About

Tags

Share

More from scalableb2b

More Templates Like This