[V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="tailwind.config.ts" isFixed="true" isQuickEdit="true" isMerged="true" import type { Config } from "tailwindcss" const config: Config = { darkMode: ["class"], content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { colors: { background: "#0b0b0b", foreground: "#eaeaea", "accent-blue": "rgba(64, 179, 255, 0.8)", "accent-orange": "rgba(255, 126, 70, 0.8)", card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", chart: { "1": "hsl(var(--chart-1))", "2": "hsl(var(--chart-2))", "3": "hsl(var(--chart-3))", "4": "hsl(var(--chart-4))", "5": "hsl(var(--chart-5))", }, sidebar: { DEFAULT: "hsl(var(--sidebar-background))", foreground: "hsl(var(--sidebar-foreground))", primary: "hsl(var(--sidebar-primary))", "primary-foreground": "hsl(var(--sidebar-primary-foreground))", accent: "hsl(var(--sidebar-accent))", "accent-foreground": "hsl(var(--sidebar-accent-foreground))", border: "hsl(var(--sidebar-border))", ring: "hsl(var(--sidebar-ring))", }, }, boxShadow: { glow: "0 0 15px rgba(64, 179, 255, 0.3)", "glow-orange": "0 0 15px rgba(255, 126, 70, 0.3)", }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0", }, to: { height: "var(--radix-accordion-content-height)", }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)", }, to: { height: "0", }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [], } export default config [V0_FILE]typescriptreact:file="components/recently-watched-mobile.tsx" isEdit="true" isMerged="true" import { Clock, Download, Star, ChevronRight } from "lucide-react" export default function RecentlyWatchedMobile() { return (

Recently Watched

) } [V0_FILE]typescriptreact:file="components/search-dropdown.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { Film, Tv, Clock, ArrowRight } from "lucide-react" interface SearchDropdownProps { isOpen: boolean searchQuery: string } export default function SearchDropdown({ isOpen, searchQuery }: SearchDropdownProps) { if (!isOpen) return null return (

Movies

Series

More Than Ever (2022)

More Than This

More Results

) } [V0_FILE]typescriptreact:file="components/navbar.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { Search, Mic, User } from "lucide-react" import Link from "next/link" import { useState, useRef, useEffect } from "react" import SearchDropdown from "./search-dropdown" export default function Navbar() { const [activeLink, setActiveLink] = useState("Stream") const [isSearchOpen, setIsSearchOpen] = useState(false) const [searchQuery, setSearchQuery] = useState("") const searchRef = useRef(null) const navLinks = ["Stream", "Movies", "Series", "Live", "My List"] // Close search dropdown when clicking outside useEffect(() => { function handleClickOutside(event: MouseEvent) { if (searchRef.current && !searchRef.current.contains(event.target as Node)) { setIsSearchOpen(false) } } document.addEventListener("mousedown", handleClickOutside) return () => { document.removeEventListener("mousedown", handleClickOutside) } }, []) const handleSearchFocus = () => { setIsSearchOpen(true) } const handleSearchChange = (e: React.ChangeEvent) => { setSearchQuery(e.target.value) setIsSearchOpen(true) } return ( ) } [V0_FILE]plaintext:file="public/images/stranger-things.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/tumblr_2debc5ee444835e1cc706fbc901ab010_f6d965fd_1280.jpg-68QKUqBjGAXH2hcspMuvjjLfd5QjYV.jpeg" isMerged="true" [V0_FILE]typescriptreact:file="components/hero-section.tsx" isEdit="true" isMerged="true" import Image from "next/image" import { Play } from "lucide-react" export default function HeroSection() { return (

{/* Dark gradient overlay */}

{/* Stranger Things image */}

{/* Red glow effect */}

{/* Title content */}

HAWKINS WILL FALL

STRANGER
THINGS

The Final Season. The epic conclusion to the supernatural saga that captivated the world returns for one last adventure.

NEW SEASON 5 Seasons 42 Episodes TV-14

{/* Play button */}

) } [V0_FILE]typescriptreact:file="components/streaming-platforms-content.tsx" isMerged="true" "use client" import Image from "next/image" import { Play, Star, Info } from "lucide-react" import { useState } from "react" // Types for our content interface ContentItem { id: string title: string synopsis: string type: "movie" | "series" platform: "Netflix" | "Amazon Prime" | "Paramount+" | "HBO" platformLogo: string image: string rating: number year: number genres: string[] // For series seasons?: number episodes?: number // For movies duration?: string } export default function StreamingPlatformsContent() { const [activeTab, setActiveTab] = useState<"trending" | "top-rated">("trending") const [activePlatform, setActivePlatform] = useState("all") // Sample data for trending content across platforms const trendingContent: ContentItem[] = [ { id: "st-1", title: "Stranger Things", synopsis: "The epic conclusion to the supernatural saga that captivated the world returns for one last adventure.", type: "series", platform: "Netflix", platformLogo: "/placeholder.svg?height=30&width=80", image: "/images/stranger-things.png", rating: 4.8, year: 2024, genres: ["Sci-Fi", "Horror", "Drama"], seasons: 5, episodes: 42, }, { id: "fallout-1", title: "Fallout", synopsis: "Based on the popular video game series, Fallout is set in a post-apocalyptic world devastated by nuclear war.", type: "series", platform: "Amazon Prime", platformLogo: "/placeholder.svg?height=30&width=80", image: "/placeholder.svg?height=400&width=300", rating: 4.7, year: 2024, genres: ["Sci-Fi", "Adventure", "Drama"], seasons: 1, episodes: 8, }, { id: "house-dragon-1", title: "House of the Dragon", synopsis: "Set 200 years before Game of Thrones, this series chronicles the beginning of the end of House Targaryen.", type: "series", platform: "HBO", platformLogo: "/placeholder.svg?height=30&width=80", image: "/placeholder.svg?height=400&width=300", rating: 4.5, year: 2024, genres: ["Fantasy", "Drama", "Action"], seasons: 2, episodes: 18, }, { id: "halo-1", title: "Halo", synopsis: "Based on the iconic Xbox franchise, Halo follows an epic 26th-century conflict between humanity and the alien threat known as the Covenant.", type: "series", platform: "Paramount+", platformLogo: "/placeholder.svg?height=30&width=80", image: "/placeholder.svg?height=400&width=300", rating: 4.2, year: 2024, genres: ["Sci-Fi", "Action", "Adventure"], seasons: 2, episodes: 16, }, { id: "dune-1", title: "Dune: Part Two", synopsis: "Paul Atreides unites with the Fremen to seek revenge against the conspirators who destroyed his family.", type: "movie", platform: "HBO", platformLogo: "/placeholder.svg?height=30&width=80", image: "/placeholder.svg?height=400&width=300", rating: 4.7, year: 2024, genres: ["Sci-Fi", "Adventure", "Drama"], duration: "2h 46m", }, { id: "boys-1", title: "The Boys", synopsis: "A group of vigilantes set out to take down corrupt superheroes who abuse their superpowers.", type: "series", platform: "Amazon Prime", platformLogo: "/placeholder.svg?height=30&width=80", image: "/placeholder.svg?height=400&width=300", rating: 4.6, year: 2024, genres: ["Action", "Comedy", "Crime"], seasons: 4, episodes: 32, }, ] // Sample data for top-rated content across platforms const topRatedContent: ContentItem[] = [ { id: "succession-1", title: "Succession", synopsis: "The Roy family is known for controlling the biggest media and entertainment company in the world.", type: "series", platform: "HBO", platformLogo: "/placeholder.svg?height=30&width=80", image: "/placeholder.svg?height=400&width=300", rating: 4.9, year: 2023, genres: ["Drama", "Comedy"], seasons: 4, episodes: 39, }, { id: "breaking-bad-1", title: "Breaking Bad", synopsis: "A high school chemistry teacher diagnosed with cancer turns to manufacturing and selling methamphetamine to secure his family's future.", type: "series", platform: "Netflix", platformLogo: "/placeholder.svg?height=30&width=80", image: "/placeholder.svg?height=400&width=300", rating: 4.9, year: 2013, genres: ["Crime", "Drama", "Thriller"], seasons: 5, episodes: 62, }, { id: "reacher-1", title: "Reacher", synopsis: "Jack Reacher, a veteran military police investigator, has recently entered civilian life when he is falsely accused of murder.", type: "series", platform: "Amazon Prime", platformLogo: "/placeholder.svg?height=30&width=80", image: "/placeholder.svg?height=400&width=300", rating: 4.7, year: 2023, genres: ["Action", "Crime", "Drama"], seasons: 2, episodes: 16, }, { id: "yellowstone-1", title: "Yellowstone", synopsis: "A ranching family in Montana faces off against others encroaching on their land.", type: "series", platform: "Paramount+", platformLogo: "/placeholder.svg?height=30&width=80", image: "/placeholder.svg?height=400&width=300", rating: 4.8, year: 2023, genres: ["Drama", "Western"], seasons: 5, episodes: 47, }, { id: "oppenheimer-1", title: "Oppenheimer", synopsis: "The story of American scientist J. Robert Oppenheimer and his role in the development of the atomic bomb.", type: "movie", platform: "HBO", platformLogo: "/placeholder.svg?height=30&width=80", image: "/placeholder.svg?height=400&width=300", rating: 4.8, year: 2023, genres: ["Biography", "Drama", "History"], duration: "3h 0m", }, { id: "mandalorian-1", title: "The Mandalorian", synopsis: "The travels of a lone bounty hunter in the outer reaches of the galaxy, far from the authority of the New Republic.", type: "series", platform: "Disney+", platformLogo: "/placeholder.svg?height=30&width=80", image: "/placeholder.svg?height=400&width=300", rating: 4.8, year: 2023, genres: ["Action", "Adventure", "Fantasy"], seasons: 3, episodes: 24, }, ] // Filter content based on active platform const filteredTrending = activePlatform === "all" ? trendingContent : trendingContent.filter((item) => item.platform.toLowerCase() === activePlatform.toLowerCase()) const filteredTopRated = activePlatform === "all" ? topRatedContent : topRatedContent.filter((item) => item.platform.toLowerCase() === activePlatform.toLowerCase()) // Display content based on active tab const displayContent = activeTab === "trending" ? filteredTrending : filteredTopRated return (

Streaming Platforms

{/* Platform filters */}

{/* Tabs for Trending vs Top Rated */}

{/* Content Grid */}

{displayContent.map((item) => (

{/* Platform badge */}

{item.platform}

{/* Rating */}

{item.rating}

{/* Gradient overlay */}

{/* Content info at bottom */}

{item.title}

{item.genres.slice(0, 3).map((genre, index) => ( {genre} ))}

{item.year} {item.type === "series" ? ( {item.seasons} {item.seasons === 1 ? "Season" : "Seasons"} ) : ( {item.duration} )}

{/* Action buttons */}

{/* Hover overlay with synopsis */}

{item.title}

{item.synopsis}

{item.genres.map((genre, index) => ( {genre} ))}

{item.type === "series" && (

Seasons: {item.seasons} • Episodes: {item.episodes}

)}

))}

) } [V0_FILE]plaintext:file="public/images/dune-part-two.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/111994_Dune_Part_Two_Final_B_gmj6-rw.jpg-YIHlibz7xC6IiRS4ul0I8yfd44lnxO.jpeg" isMerged="true" [V0_FILE]plaintext:file="public/images/adolescence.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/MV5BNGY1YjBiNzMtYWZhNC00OWViLWE0MzItNjc4YzczOGNiM2I0XkEyXkFqcGc%40._V1_.jpg-0woB1WHVJ5tB1ieWvp8ZdsyHp4T8RK.jpeg" isMerged="true" [V0_FILE]plaintext:file="public/images/bladerunner-2049.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/bladerunner.jpg-XJJhmackQFKMem74GqMaGANQ7atprz.jpeg" isMerged="true" [V0_FILE]plaintext:file="public/images/oppenheimer.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/openheimer.jpg-oftCRoGivpZV6LCevGLcxSzivw0Y18.jpeg" isMerged="true" [V0_FILE]plaintext:file="public/images/lost-in-space.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/lost%20in%20space.jpg-7xfBvHsTeCu4pLvwufzKweNXix0t7Y.jpeg" isMerged="true" [V0_FILE]plaintext:file="public/images/1899.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/1899%20tv%20show.jpg-DvvNVjUvkz6OCSSViEkKeMXCDGlaSE.jpeg" isMerged="true" [V0_FILE]plaintext:file="public/images/alien-romulus.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/alien%20movie.jpg-S67VMf809DYQIHgwhxwfXgsD4gSVNJ.jpeg" isMerged="true" [V0_FILE]plaintext:file="public/images/archer.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/archer%20movie.jpg-K1rB89sP3U0KGa8kHSpXBdr1BrvMq6.jpeg" isMerged="true" [V0_FILE]plaintext:file="public/images/caught.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/caught%20tv%20show.jpg-zjyltquGj49A59kjzHB8aeGxzCUJpp.jpeg" isMerged="true" [V0_FILE]plaintext:file="public/images/black-forest-witch.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/black%20forest%20witch%20tv%20show.jpg-NDSVwcLxJBaJfRb0pHpjSQxGfkuYaP.jpeg" isMerged="true" [V0_FILE]typescriptreact:file="components/trending-content.tsx" isEdit="true" isMerged="true" "use client" import Image from "next/image" import { Play, Star, Info } from "lucide-react" import { useState } from "react" // Types for our content interface ContentItem { id: string title: string synopsis: string type: "movie" | "series" image: string rating: number year: number genres: string[] // For series seasons?: number episodes?: number // For movies duration?: string // Optional cast cast?: string[] // Optional coming soon flag comingSoon?: boolean } export default function TrendingContent() { const [activeTab, setActiveTab] = useState<"movies" | "tvshows">("movies") // Sample data for trending movies const trendingMovies: ContentItem[] = [ { id: "alien-romulus-1", title: "Alien: Romulus", synopsis: "A group of young space colonizers come face to face with the most terrifying life form in the universe while scavenging the deep ends of a derelict space station.", type: "movie", image: "/images/alien-romulus.png", rating: 4.6, year: 2024, genres: ["Horror", "Sci-Fi", "Thriller"], duration: "1h 59m", cast: ["Cailee Spaeny", "David Jonsson", "Archie Renaux"], comingSoon: true, }, { id: "archer-1", title: "Archer", synopsis: "In a post-apocalyptic world, a skilled archer must navigate dangerous terrain and hostile survivors to find safety in a rumored sanctuary.", type: "movie", image: "/images/archer.png", rating: 4.3, year: 2024, genres: ["Action", "Adventure", "Thriller"], duration: "1h 52m", cast: ["Mario Orlando", "Sara Stone Lewitt", "Craig Overtime"], comingSoon: true, }, { id: "black-forest-witch-1", title: "Black Forest Witch", synopsis: "When a group of hikers venture into the legendary Black Forest, they encounter an ancient evil that has been haunting the woods for centuries.", type: "movie", image: "/images/black-forest-witch.png", rating: 4.4, year: 2024, genres: ["Horror", "Mystery", "Thriller"], duration: "1h 47m", comingSoon: true, }, { id: "bladerunner-1", title: "Blade Runner 2049", synopsis: "A young blade runner's discovery of a long-buried secret leads him to track down former blade runner Rick Deckard, who's been missing for thirty years.", type: "movie", image: "/images/bladerunner-2049.png", rating: 4.7, year: 2017, genres: ["Sci-Fi", "Drama", "Mystery"], duration: "2h 44m", cast: ["Ryan Gosling", "Harrison Ford", "Ana de Armas"], }, { id: "oppenheimer-1", title: "Oppenheimer", synopsis: "The story of American scientist J. Robert Oppenheimer and his role in the development of the atomic bomb.", type: "movie", image: "/images/oppenheimer.png", rating: 4.8, year: 2023, genres: ["Biography", "Drama", "History"], duration: "3h 0m", cast: ["Cillian Murphy", "Emily Blunt", "Matt Damon", "Robert Downey Jr."], }, ] // Sample data for trending TV shows const trendingTVShows: ContentItem[] = [ { id: "1899-1", title: "1899", synopsis: "Immigrants on a steamship traveling from London to New York get caught up in a mysterious riddle after finding a second vessel adrift on the open sea.", type: "series", image: "/images/1899.png", rating: 4.7, year: 2023, genres: ["Mystery", "Horror", "Sci-Fi"], seasons: 1, episodes: 8, cast: ["Emily Beecham", "Aneurin Barnard", "Andreas Pietschmann"], }, { id: "caught-1", title: "Caught", synopsis: "Based on the novel by Harlan Coben, a woman's perfect life is shattered when dark secrets from her past resurface, threatening everything she holds dear.", type: "series", image: "/images/caught.png", rating: 4.5, year: 2024, genres: ["Drama", "Mystery", "Thriller"], seasons: 1, episodes: 8, }, { id: "lost-in-space-1", title: "Lost in Space", synopsis: "The epic conclusion to the Robinson family's intergalactic adventures as they fight against all odds to survive and escape danger.", type: "series", image: "/images/lost-in-space.png", rating: 4.5, year: 2021, genres: ["Sci-Fi", "Adventure", "Drama"], seasons: 3, episodes: 28, }, { id: "adolescence-1", title: "Adolescence", synopsis: "A child accused. Everyone left to answer. This limited series explores the aftermath of a shocking accusation that rocks a small community.", type: "series", image: "/images/adolescence.png", rating: 4.6, year: 2024, genres: ["Drama", "Crime", "Mystery"], seasons: 1, episodes: 6, cast: ["Stephen Graham", "Ashley Walters", "Erin Doherty", "Owen Cooper"], }, { id: "st-1", title: "Stranger Things", synopsis: "The epic conclusion to the supernatural saga that captivated the world returns for one last adventure.", type: "series", image: "/images/stranger-things.png", rating: 4.8, year: 2024, genres: ["Sci-Fi", "Horror", "Drama"], seasons: 5, episodes: 42, }, ] // Display content based on active tab const displayContent = activeTab === "movies" ? trendingMovies : trendingTVShows return (

Popular Sitcoms

{comedyRecommendations.map((item) => (

{/* Overlay */}

{/* Rating */}

{item.rating}

{/* Play button on hover */}

{/* Title and info */}

{item.title}

{item.type === "series" ? ( {item.seasons} {item.seasons === 1 ? "Season" : "Seasons"} ) : ( Movie )}

))}

) } [V0_FILE]typescriptreact:file="components/sitcom-episodes.tsx" isMerged="true" import Image from "next/image" import { Play, Calendar, Clock } from "lucide-react" export default function SitcomEpisodes() { const featuredShow = { title: "Friends", image: "/images/friends.png", currentSeason: 3, episodes: [ { id: 1, title: "The One with the Blackout", season: 1, episode: 7, duration: "22m", description: "A citywide power outage leaves the friends in the dark. Rachel meets a handsome Italian neighbor.", thumbnail: "/images/friends.png", }, { id: 2, title: "The One with the Prom Video", season: 2, episode: 14, duration: "22m", description: "Joey gives Chandler a gaudy gold bracelet. The gang watches an old home video from Rachel and Monica's prom night.", thumbnail: "/images/friends.png", }, { id: 3, title: "The One Where No One's Ready", season: 3, episode: 2, duration: "22m", description: "Ross is in a hurry to get everyone dressed for an important museum benefit, but no one is cooperating.", thumbnail: "/images/friends.png", }, { id: 4, title: "The One with the Embryos", season: 4, episode: 12, duration: "22m", description: "Phoebe prepares to be a surrogate for her brother and his wife. Monica and Rachel compete against Joey and Chandler in a high-stakes quiz game.", thumbnail: "/images/friends.png", }, ], } return (

{featuredShow.title}

Season {featuredShow.currentSeason} • Fan Favorites

{featuredShow.episodes.map((episode) => (

{/* Episode thumbnail */}

{/* Play overlay */}

{/* Episode number badge */}

S{episode.season}:E{episode.episode}

{/* Episode details */}

{episode.title}

{episode.duration} Season {episode.season}

{episode.description}

))}

) } [V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; :root { --foreground: 234, 234, 234; --background: 11, 11, 11; --accent-blue: 64, 179, 255; --accent-orange: 255, 126, 70; } body { color: rgb(var(--foreground)); background: rgb(var(--background)); } /* Add custom scrollbar styling to match the dark theme */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #0b0b0b; } ::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #444; } /* Firefox scrollbar styling */ * { scrollbar-width: thin; scrollbar-color: #333 #0b0b0b; } @layer base { * { @apply border-border; } } @layer utilities { .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } .scrollbar-hide::-webkit-scrollbar { display: none; } } [V0_FILE]typescriptreact:file="context/my-list-context.tsx" isMerged="true" "use client" import { createContext, useContext, useState, useEffect, type ReactNode } from "react" // Define the shape of a movie/show item export interface MediaItem { id: number | string title: string type: "movie" | "series" image: string color?: string year?: number rating?: number seasons?: number episodes?: number duration?: string progress?: number description?: string } interface MyListContextType { myList: MediaItem[] addToMyList: (item: MediaItem) => void removeFromMyList: (id: number | string) => void isInMyList: (id: number | string) => boolean } const MyListContext = createContext(undefined) export function MyListProvider({ children }: { children: ReactNode }) { // Initialize with items from localStorage if available const [myList, setMyList] = useState(() => { if (typeof window !== "undefined") { const savedList = localStorage.getItem("myList") return savedList ? JSON.parse(savedList) : [] } return [] }) // Save to localStorage whenever myList changes useEffect(() => { if (typeof window !== "undefined") { localStorage.setItem("myList", JSON.stringify(myList)) } }, [myList]) const addToMyList = (item: MediaItem) => { setMyList((prev) => { // Check if item already exists if (prev.some((listItem) => listItem.id === item.id)) { return prev } return [...prev, item] }) } const removeFromMyList = (id: number | string) => { setMyList((prev) => prev.filter((item) => item.id !== id)) } const isInMyList = (id: number | string) => { return myList.some((item) => item.id === id) } return ( {children} ) } export function useMyList() { const context = useContext(MyListContext) if (context === undefined) { throw new Error("useMyList must be used within a MyListProvider") } return context } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { MyListProvider } from "@/context/my-list-context" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Streaming App", description: "A dark, cinematic streaming app UI", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/movie-modal.tsx" isEdit="true" isMerged="true" "use client" import { useEffect, useRef } from "react" import Image from "next/image" import { Play, X, Star, Clock, ChevronRight, Plus, Check } from "lucide-react" import { useMyList } from "@/context/my-list-context" interface MovieModalProps { isOpen: boolean onClose: () => void movie: any } export default function MovieModal({ isOpen, onClose, movie }: MovieModalProps) { const modalRef = useRef(null) const { addToMyList, removeFromMyList, isInMyList } = useMyList() // Close modal when clicking outside useEffect(() => { function handleClickOutside(event: MouseEvent) { if (modalRef.current && !modalRef.current.contains(event.target as Node)) { onClose() } } if (isOpen) { document.addEventListener("mousedown", handleClickOutside) // Prevent scrolling when modal is open document.body.style.overflow = "hidden" } return () => { document.removeEventListener("mousedown", handleClickOutside) document.body.style.overflow = "auto" } }, [isOpen, onClose]) // Close on escape key useEffect(() => { function handleEscKey(event: KeyboardEvent) { if (event.key === "Escape") { onClose() } } if (isOpen) { document.addEventListener("keydown", handleEscKey) } return () => { document.removeEventListener("keydown", handleEscKey) } }, [isOpen, onClose]) if (!isOpen || !movie) return null const isMovieInList = isInMyList(movie.id) const handleMyListClick = () => { if (isMovieInList) { removeFromMyList(movie.id) } else { addToMyList(movie) } } return (

{/* Backdrop with blur */}

{/* Modal content */}

{/* Header with poster image */}

{/* Gradient overlay */}

{/* Close button */} {/* Play button */}

{/* Content */}

{movie.title}

{movie.rating && (

{movie.rating}

)} {movie.year && {movie.year}} {movie.type === "series" && movie.seasons && ( {movie.seasons} {movie.seasons === 1 ? "Season" : "Seasons"} )} {movie.duration && (

{movie.duration}

)} {movie.type === "series" && movie.episodes && ( {movie.episodes} Episodes )}

{movie.description || "No description available."}

{movie.cast && (

Cast

{movie.cast.join(", ")}

)} {movie.tags && (

{movie.tags.map((tag: string, index: number) => ( {tag} ))}

)}

{movie.type === "series" && (

Episodes

{[1, 2, 3].map((ep) => (

Episode {ep} 22m

{movie.title === "Friends" ? `The One Where ${ep === 1 ? "It All Began" : ep === 2 ? "They Go to the Party" : "Ross Finds Out"}` : movie.title === "Seinfeld" ? `The ${ep === 1 ? "Contest" : ep === 2 ? "Soup Nazi" : "Marine Biologist"}` : `Episode ${ep} description goes here.`}

))}

)}

) } [V0_FILE]typescriptreact:file="components/movie-carousel.tsx" isEdit="true" isMerged="true" "use client" import Image from "next/image" import { Play } from "lucide-react" import { useState } from "react" import MovieModal from "./movie-modal" import { useMyList } from "@/context/my-list-context" interface MovieCarouselProps { hideTitle?: boolean category?: string } export default function MovieCarousel({ hideTitle = false, category = "Trending Now" }: MovieCarouselProps) { const [selectedMovie, setSelectedMovie] = useState(null) const [isModalOpen, setIsModalOpen] = useState(false) const { isInMyList } = useMyList() const openModal = (movie: any) => { setSelectedMovie(movie) setIsModalOpen(true) } const closeModal = () => { setIsModalOpen(false) } // Different content based on category let movies = [] if (category === "Trending Now") { movies = [ { id: 1, title: "Dune: Part Two", type: "movie", image: "/images/dune-part-two.png", color: "from-orange-500/30", year: 2024, duration: "2h 46m", rating: 4.7, description: "Paul Atreides unites with the Fremen to seek revenge against the conspirators who destroyed his family. While facing an impossible choice between the love of his life and the fate of the universe.", cast: ["Timothée Chalamet", "Zendaya", "Rebecca Ferguson", "Josh Brolin", "Austin Butler"], tags: ["Sci-Fi", "Adventure", "Drama"], }, { id: 2, title: "Alien: Romulus", type: "movie", image: "/images/alien-romulus.png", color: "from-red-600/30", year: 2024, duration: "1h 59m", rating: 4.6, description: "A group of young space colonizers come face to face with the most terrifying life form in the universe while scavenging the deep ends of a derelict space station.", cast: ["Cailee Spaeny", "David Jonsson", "Archie Renaux"], tags: ["Horror", "Sci-Fi", "Thriller"], }, { id: 3, title: "Fallout", type: "series", seasons: 1, episodes: 8, image: "/images/fallout.png", color: "from-yellow-500/30", year: 2024, rating: 4.8, description: "In a future post-apocalyptic Los Angeles brought about by nuclear decimation, citizens must live in underground bunkers to protect themselves from radiation, mutants and bandits.", cast: ["Ella Purnell", "Walton Goggins", "Aaron Moten"], tags: ["Sci-Fi", "Adventure", "Post-Apocalyptic"], }, { id: 4, title: "1899", type: "series", seasons: 1, episodes: 8, image: "/images/1899.png", color: "from-blue-500/30", year: 2022, rating: 4.7, description: "Immigrants on a steamship traveling from London to New York get caught up in a mysterious riddle after finding a second vessel adrift on the open sea.", cast: ["Emily Beecham", "Aneurin Barnard", "Andreas Pietschmann"], tags: ["Mystery", "Horror", "Sci-Fi"], }, { id: 5, title: "Oppenheimer", type: "movie", image: "/images/oppenheimer.png", color: "from-amber-600/30", year: 2023, duration: "3h 0m", rating: 4.8, description: "The story of American scientist J. Robert Oppenheimer and his role in the development of the atomic bomb.", cast: ["Cillian Murphy", "Emily Blunt", "Matt Damon", "Robert Downey Jr."], tags: ["Biography", "Drama", "History"], }, ] } else if (category === "Because You Watched Dune") { movies = [ { id: 6, title: "Blade Runner 2049", type: "movie", image: "/images/bladerunner-2049.png", color: "from-orange-500/30", year: 2017, duration: "2h 44m", rating: 4.7, description: "A young blade runner's discovery of a long-buried secret leads him to track down former blade runner Rick Deckard, who's been missing for thirty years.", cast: ["Ryan Gosling", "Harrison Ford", "Ana de Armas"], tags: ["Sci-Fi", "Drama", "Mystery"], }, { id: 2, title: "Alien: Romulus", type: "movie", image: "/images/alien-romulus.png", color: "from-red-600/30", year: 2024, duration: "1h 59m", rating: 4.6, description: "A group of young space colonizers come face to face with the most terrifying life form in the universe while scavenging the deep ends of a derelict space station.", cast: ["Cailee Spaeny", "David Jonsson", "Archie Renaux"], tags: ["Horror", "Sci-Fi", "Thriller"], }, { id: 3, title: "Fallout", type: "series", seasons: 1, episodes: 8, image: "/images/fallout.png", color: "from-yellow-500/30", year: 2024, rating: 4.8, description: "In a future post-apocalyptic Los Angeles brought about by nuclear decimation, citizens must live in underground bunkers to protect themselves from radiation, mutants and bandits.", cast: ["Ella Purnell", "Walton Goggins", "Aaron Moten"], tags: ["Sci-Fi", "Adventure", "Post-Apocalyptic"], }, { id: 7, title: "Lost in Space", type: "series", seasons: 3, episodes: 28, image: "/images/lost-in-space.png", color: "from-blue-500/30", year: 2021, rating: 4.5, description: "The epic conclusion to the Robinson family's intergalactic adventures as they fight against all odds to survive and escape danger.", cast: ["Molly Parker", "Toby Stephens", "Maxwell Jenkins"], tags: ["Sci-Fi", "Adventure", "Drama"], }, { id: 8, title: "Black Forest Witch", type: "movie", image: "/images/black-forest-witch.png", color: "from-teal-500/30", year: 2024, duration: "1h 47m", rating: 4.4, description: "When a group of hikers venture into the legendary Black Forest, they encounter an ancient evil that has been haunting the woods for centuries.", cast: ["Emma Roberts", "Jack Reynor", "Mia Goth"], tags: ["Horror", "Mystery", "Thriller"], }, ] } else if (category === "Sci-Fi") { movies = [ { id: 6, title: "Blade Runner 2049", type: "movie", image: "/images/bladerunner-2049.png", color: "from-orange-500/30", year: 2017, duration: "2h 44m", rating: 4.7, description: "A young blade runner's discovery of a long-buried secret leads him to track down former blade runner Rick Deckard, who's been missing for thirty years.", cast: ["Ryan Gosling", "Harrison Ford", "Ana de Armas"], tags: ["Sci-Fi", "Drama", "Mystery"], }, { id: 2, title: "Alien: Romulus", type: "movie", image: "/images/alien-romulus.png", color: "from-red-600/30", year: 2024, duration: "1h 59m", rating: 4.6, description: "A group of young space colonizers come face to face with the most terrifying life form in the universe while scavenging the deep ends of a derelict space station.", cast: ["Cailee Spaeny", "David Jonsson", "Archie Renaux"], tags: ["Horror", "Sci-Fi", "Thriller"], }, { id: 3, title: "Fallout", type: "series", seasons: 1, episodes: 8, image: "/images/fallout.png", color: "from-yellow-500/30", year: 2024, rating: 4.8, description: "In a future post-apocalyptic Los Angeles brought about by nuclear decimation, citizens must live in underground bunkers to protect themselves from radiation, mutants and bandits.", cast: ["Ella Purnell", "Walton Goggins", "Aaron Moten"], tags: ["Sci-Fi", "Adventure", "Post-Apocalyptic"], }, { id: 7, title: "Lost in Space", type: "series", seasons: 3, episodes: 28, image: "/images/lost-in-space.png", color: "from-blue-500/30", year: 2021, rating: 4.5, description: "The epic conclusion to the Robinson family's intergalactic adventures as they fight against all odds to survive and escape danger.", cast: ["Molly Parker", "Toby Stephens", "Maxwell Jenkins"], tags: ["Sci-Fi", "Adventure", "Drama"], }, { id: 1, title: "Dune: Part Two", type: "movie", image: "/images/dune-part-two.png", color: "from-orange-500/30", year: 2024, duration: "2h 46m", rating: 4.7, description: "Paul Atreides unites with the Fremen to seek revenge against the conspirators who destroyed his family. While facing an impossible choice between the love of his life and the fate of the universe.", cast: ["Timothée Chalamet", "Zendaya", "Rebecca Ferguson", "Josh Brolin", "Austin Butler"], tags: ["Sci-Fi", "Adventure", "Drama"], }, ] } else if (category === "Comedy") { movies = [ { id: 9, title: "Friends", type: "series", seasons: 10, episodes: 236, image: "/images/friends.png", color: "from-blue-500/30", year: 1994, rating: 4.9, description: "Six friends living in New York navigate the pitfalls of work, life and love in the 1990s.", cast: ["Jennifer Aniston", "Courteney Cox", "Lisa Kudrow", "Matt LeBlanc", "Matthew Perry", "David Schwimmer"], tags: ["Sitcom", "Friendship", "Romance"], }, { id: 10, title: "The Big Bang Theory", type: "series", seasons: 12, episodes: 279, image: "/images/big-bang-theory.png", color: "from-red-600/30", year: 2007, rating: 4.7, description: "A group of socially awkward physicists learn about life, love and friendship from their beautiful neighbor.", cast: ["Jim Parsons", "Johnny Galecki", "Kaley Cuoco", "Simon Helberg", "Kunal Nayyar"], tags: ["Sitcom", "Geek Culture", "Science"], }, { id: 11, title: "Seinfeld", type: "series", seasons: 9, episodes: 180, image: "/images/seinfeld.png", color: "from-yellow-500/30", year: 1989, rating: 4.8, description: "The continuing misadventures of neurotic New York City stand-up comedian Jerry Seinfeld and his equally neurotic friends.", cast: ["Jerry Seinfeld", "Julia Louis-Dreyfus", "Michael Richards", "Jason Alexander"], tags: ["Sitcom", "New York", "Stand-up Comedy"], }, { id: 12, title: "Archer", type: "series", seasons: 14, episodes: 149, image: "/images/archer.png", color: "from-yellow-500/30", year: 2009, rating: 4.6, description: "Covert black ops and espionage take a back seat to zany personalities and relationships between secret agents.", cast: ["H. Jon Benjamin", "Judy Greer", "Amber Nash", "Chris Parnell", "Aisha Tyler"], tags: ["Animated", "Spy Comedy", "Adult Humor"], }, { id: 13, title: "Space Buddies", type: "movie", image: "/images/lost-in-space.png", color: "from-blue-500/30", year: 2023, duration: "1h 45m", rating: 4.3, description: "A hilarious space comedy about a mismatched crew trying to find their way home.", cast: ["Chris Pratt", "Tiffany Haddish", "John Cena"], tags: ["Sci-Fi Comedy", "Adventure", "Ensemble Cast"], }, ] } return (

{!hideTitle &&

{category}

}

{movies.map((movie) => (

openModal(movie)} >

{/* Gradient overlay */}

{/* Hover effect */}

{/* Description on hover */} {movie.description && (

{movie.title}

{movie.description}

)} {/* Badge for series */} {movie.type === "series" && (

{movie.seasons} {movie.seasons === 1 ? "Season" : "Seasons"}

)} {/* My List indicator */} {isInMyList(movie.id) && (

My List

)}

{movie.title}

{movie.type === "series" && movie.seasons && movie.episodes && (

{movie.seasons} {movie.seasons === 1 ? "Season" : "Seasons"} • {movie.episodes} Episodes

)}

))}

{/* Movie Modal */}

) } [V0_FILE]typescriptreact:file="components/comedy-showcase.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import Image from "next/image" import { Play, Star, ThumbsUp } from "lucide-react" import { useState } from "react" import MovieModal from "./movie-modal" import { useMyList } from "@/context/my-list-context" export default function ComedyShowcase() { const [selectedMovie, setSelectedMovie] = useState(null) const [isModalOpen, setIsModalOpen] = useState(false) const openModal = (comedy: any) => { setSelectedMovie(comedy) setIsModalOpen(true) } const closeModal = () => { setIsModalOpen(false) } const { isInMyList } = useMyList() const featuredComedies = [ { id: 1, title: "Friends", type: "series", image: "/images/friends.png", rating: 4.9, year: 1994, seasons: 10, episodes: 236, description: "Six friends living in New York navigate the pitfalls of work, life and love in the 1990s. One of the most beloved sitcoms of all time.", cast: ["Jennifer Aniston", "Courteney Cox", "Lisa Kudrow", "Matt LeBlanc", "Matthew Perry", "David Schwimmer"], tags: ["Sitcom", "Friendship", "Romance"], }, { id: 2, title: "The Big Bang Theory", type: "series", image: "/images/big-bang-theory.png", rating: 4.7, year: 2007, seasons: 12, episodes: 279, description: "A group of socially awkward physicists learn about life, love and friendship from their beautiful neighbor. A hilarious look at nerd culture.", cast: ["Jim Parsons", "Johnny Galecki", "Kaley Cuoco", "Simon Helberg", "Kunal Nayyar"], tags: ["Sitcom", "Geek Culture", "Science"], }, { id: 3, title: "Seinfeld", type: "series", image: "/images/seinfeld.png", rating: 4.8, year: 1989, seasons: 9, episodes: 180, description: "The continuing misadventures of neurotic New York City stand-up comedian Jerry Seinfeld and his equally neurotic friends. The show about nothing that changed everything.", cast: ["Jerry Seinfeld", "Julia Louis-Dreyfus", "Michael Richards", "Jason Alexander"], tags: ["Sitcom", "New York", "Stand-up Comedy"], }, { id: 4, title: "Archer", type: "series", image: "/images/archer.png", rating: 4.6, year: 2009, seasons: 14, episodes: 149, description: "Covert black ops and espionage take a back seat to zany personalities and relationships between secret agents. An animated comedy for adults.", cast: ["H. Jon Benjamin", "Judy Greer", "Amber Nash", "Chris Parnell", "Aisha Tyler"], tags: ["Animated", "Spy Comedy", "Adult Humor"], }, ] return (

Classic Comedies

{featuredComedies.map((comedy) => (

openModal(comedy)} >

{/* Poster */}

{/* My List indicator */} {isInMyList(comedy.id) && (

My List

)}

{/* Content */}

{comedy.title}

{comedy.rating}

{comedy.year} {comedy.type === "series" && ( {comedy.seasons} {comedy.seasons === 1 ? "Season" : "Seasons"} )}

{comedy.tags.map((tag, index) => ( {tag} ))}

{comedy.description}

))}

{/* Movie Modal */}

) } [V0_FILE]typescriptreact:file="components/genre-tabs.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import MovieCarousel from "./movie-carousel" import ComedyShowcase from "./comedy-showcase" import ComedyRecommendations from "./comedy-recommendations" import SitcomEpisodes from "./sitcom-episodes" import MyList from "./my-list" export default function GenreTabs() { const [activeTab, setActiveTab] = useState("Trending Now") const tabs = ["Trending Now", "Because You Watched Dune", "Sci-Fi", "Comedy"] return (

{tabs.map((tab) => (

setActiveTab(tab)} > {tab}

))}

{activeTab === "Comedy" ? ( <> ) : ( )}

{/* My List component on the right side */}

) } [V0_FILE]typescriptreact:file="components/my-list.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Star, ChevronRight, Play, X } from "lucide-react" import Image from "next/image" import { useMyList } from "@/context/my-list-context" import { useState } from "react" import MovieModal from "./movie-modal" export default function MyList() { const { myList } = useMyList() const [selectedMovie, setSelectedMovie] = useState(null) const [isModalOpen, setIsModalOpen] = useState(false) const openModal = (movie: any) => { setSelectedMovie(movie) setIsModalOpen(true) } const closeModal = () => { setIsModalOpen(false) } return (

My List

{myList.length > 0 ? ( myList.slice(0, 4).map((item) => (

openModal(item)} >

{/* Play overlay on hover */}

{/* Progress bar for series in progress */} {item.progress && (

)}

{item.title}

{item.type === "series" ? "Series" : "Movie"}

)) ) : (

Your list is empty

Add movies and shows to your list

)} {myList.length > 0 && myList.length <= 4 && ( )}

{/* Full My List Modal */} {/* My List Modal */} {isModalOpen && selectedMovie === null && (

{/* Backdrop with blur */}

setIsModalOpen(false)} /> {/* Modal content */}

My List

{myList.length > 0 ? (

{myList.map((item) => (

{ setSelectedMovie(item) setIsModalOpen(true) }} >

{/* Play overlay on hover */}

{/* Progress bar for series in progress */} {item.progress && (

)}

{item.title}

{item.type === "series" ? "Series" : "Movie"}

))}

) : (

Your list is empty

Add movies and shows to your list

)}

) } [V0_FILE]typescriptreact:file="components/continue-watching.tsx" isEdit="true" isQuickEdit="true" "use client" import Image from "next/image" import { Play, ChevronRight, List, X } from "lucide-react" import { useState } from "react" export default function ContinueWatching() { const [showEpisodesList, setShowEpisodesList] = useState(false) return (

Continue Watching

{/* Current Episode - Fallout */}

{/* Yellow glow effect for Fallout */}

S1:E5

{/* Play overlay on hover */}

Fallout S1:E5 - The Vault Dweller

{/* Next Episode - 1899 */}

{/* Blue glow effect for 1899 */}

THE MYSTERY DEEPENS

1899 S1:E4 - The Crossing

{/* Episodes List Modal */} {showEpisodesList && (

1899 - Episodes

{[1, 2, 3, 4, 5, 6, 7, 8].map((ep) => (

{ep}

Episode {ep}

{ep === 4 ? "The Crossing" : ep === 1 ? "The Ship" : ep === 2 ? "The Boy" : ep === 3 ? "The Fog" : ep === 5 ? "The Calling" : ep === 6 ? "The Pyramid" : ep === 7 ? "The Storm" : "The Key"}

{ep === 4 &&

} {ep < 4 && (

)}

))}

)}

{/* Recently Viewed Column */}

Recently Watched

HAWKINS WILL FALL

STRANGER THINGS

Streaming Platforms

{item.title}

{item.title}

Trending Content

{item.title}

{item.title}

Popular Sitcoms

{item.title}

{featuredShow.title}

{episode.title}

{movie.title}

Cast

Episodes

{category}

{movie.title}

{movie.title}

Classic Comedies

{comedy.title}

My List

My List

{item.title}

Continue Watching

THE MYSTERY DEEPENS

1899 - Episodes

Recently Viewed

STRANGER
THINGS

About

Tags

Share

About

Tags

Share

More from dollargill

More Templates Like This

About

Tags

Share

About

Tags

Share

More from dollargill

More Templates Like This