[V0_FILE]typescriptreact:file="app/movies/page.tsx" isEdit="true" isMerged="true" import Link from "next/link" import Image from "next/image" import { ChevronLeft, Star, Clock, Film, Tv2 } from "lucide-react" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { getMovieStats, getWatchedMovies, getWatchedShows, getWatchlist } from "@/lib/tracktv" import { getCurrentTheme } from "@/config/site" export default async function MoviesPage() { // In a real implementation, these would be fetched from the TrackTV API const stats = await getMovieStats() const watchedMovies = await getWatchedMovies() const watchedShows = await getWatchedShows() const watchlist = await getWatchlist() const theme = getCurrentTheme() return (

Back to Home

My Movie & TV Stats

{stats.moviesWatched}

Movies Watched

{stats.showsWatched}

TV Shows

{stats.totalHours}

Hours Watched

{stats.avgRating}

Avg Rating

Favorite Genres

{stats.genres.map((genre, index) => (

{genre.name}

{genre.count} titles

))}

Movies TV Shows Watchlist

{watchedMovies.map((movie) => (

{movie.title}

{movie.rating}/5 • {movie.year}

{movie.overview}

))}

{watchedShows.map((show) => (

{show.title}

{show.rating}/5 • {show.seasons} seasons

{show.overview}

))}

{watchlist.map((item) => (

{item.title}

{item.type} • {item.year}

{item.overview}

))}

) } [V0_FILE]typescriptreact:file="lib/tracktv.ts" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" export async function getInitialMovieData() { // Fetch initial movie data from TrackTV API // This is a placeholder implementation return [ { id: 1, title: "Inception", rating: 4.8, posterUrl: "/placeholder.svg" }, { id: 2, title: "The Dark Knight", rating: 4.9, posterUrl: "/placeholder.svg" }, { id: 3, title: "Interstellar", rating: 4.7, posterUrl: "/placeholder.svg" }, ] } export async function getMoreMovieData(page: number) { // Fetch more movie data from TrackTV API // This is a placeholder implementation return [ { id: 4 + page, title: `Movie ${4 + page}`, rating: 4.5, posterUrl: "/placeholder.svg" }, { id: 5 + page, title: `Movie ${5 + page}`, rating: 4.6, posterUrl: "/placeholder.svg" }, { id: 6 + page, title: `Movie ${6 + page}`, rating: 4.7, posterUrl: "/placeholder.svg" }, ] } export async function getMovieStats() { // Simulate API call await new Promise((resolve) => setTimeout(resolve, 500)) return { moviesWatched: 124, showsWatched: 48, totalHours: 412, avgRating: 4.2, genres: [ { name: "Sci-Fi", count: 32, percentage: 85 }, { name: "Drama", count: 28, percentage: 75 }, { name: "Action", count: 24, percentage: 65 }, { name: "Comedy", count: 18, percentage: 50 }, { name: "Thriller", count: 14, percentage: 40 }, { name: "Horror", count: 8, percentage: 25 }, ], } } export async function getWatchedMovies() { // Simulate API call await new Promise((resolve) => setTimeout(resolve, 500)) return [ { id: 1, title: "Dune: Part Two", year: 2024, rating: 4.5, posterUrl: "/placeholder.svg?height=96&width=64", overview: "Paul Atreides unites with Chani and the Fremen while seeking revenge against the conspirators who destroyed his family.", }, { id: 2, title: "Oppenheimer", year: 2023, rating: 4.8, posterUrl: "/placeholder.svg?height=96&width=64", overview: "The story of American scientist J. Robert Oppenheimer and his role in the development of the atomic bomb.", }, { id: 3, title: "Poor Things", year: 2023, rating: 4.3, posterUrl: "/placeholder.svg?height=96&width=64", overview: "The incredible tale about the fantastical evolution of Bella Baxter, a young woman brought back to life by the brilliant and unorthodox scientist Dr. Godwin Baxter.", }, { id: 4, title: "The Batman", year: 2022, rating: 4.1, posterUrl: "/placeholder.svg?height=96&width=64", overview: "When a sadistic serial killer begins murdering key political figures in Gotham, Batman is forced to investigate the city's hidden corruption.", }, { id: 5, title: "Everything Everywhere All at Once", year: 2022, rating: 4.7, posterUrl: "/placeholder.svg?height=96&width=64", overview: "An aging Chinese immigrant is swept up in an insane adventure, where she alone can save the world by exploring other universes.", }, { id: 6, title: "Parasite", year: 2019, rating: 4.6, posterUrl: "/placeholder.svg?height=96&width=64", overview: "Greed and class discrimination threaten the newly formed symbiotic relationship between the wealthy Park family and the destitute Kim clan.", }, ] } export async function getWatchedShows() { // Simulate API call await new Promise((resolve) => setTimeout(resolve, 500)) return [ { id: 1, title: "The Last of Us", seasons: 1, rating: 4.8, posterUrl: "/placeholder.svg?height=96&width=64", overview: "After a global pandemic destroys civilization, a hardened survivor takes charge of a 14-year-old girl who may be humanity's last hope.", }, { id: 2, title: "Succession", seasons: 4, rating: 4.9, posterUrl: "/placeholder.svg?height=96&width=64", overview: "The Roy family is known for controlling the biggest media and entertainment company in the world. However, their world changes when their father steps down from the company.", }, { id: 3, title: "Severance", seasons: 1, rating: 4.7, posterUrl: "/placeholder.svg?height=96&width=64", overview: "Mark leads a team of office workers whose memories have been surgically divided between their work and personal lives.", }, { id: 4, title: "The Bear", seasons: 2, rating: 4.6, posterUrl: "/placeholder.svg?height=96&width=64", overview: "A young chef from the fine dining world returns to Chicago to run his family's sandwich shop.", }, ] } export async function getWatchlist() { // Simulate API call await new Promise((resolve) => setTimeout(resolve, 500)) return [ { id: 1, title: "Challengers", type: "Movie", year: 2024, posterUrl: "/placeholder.svg?height=96&width=64", overview: "Follows three players who knew each other when they were teenagers as they compete in a tennis tournament to be the world-famous grand slam winner.", }, { id: 2, title: "Shogun", type: "TV Show", year: 2024, posterUrl: "/placeholder.svg?height=96&width=64", overview: "Set in Japan in the year 1600, at the dawn of a century-defining civil war, Lord Yoshii Toranaga is fighting for his life as his enemies on the Council of Regents unite against him.", }, { id: 3, title: "Civil War", type: "Movie", year: 2024, posterUrl: "/placeholder.svg?height=96&width=64", overview: "In a near-future America ravaged by political division, a team of journalists travel across the country during a rapidly escalating civil war.", }, { id: 4, title: "House of the Dragon", type: "TV Show", year: 2022, posterUrl: "/placeholder.svg?height=96&width=64", overview: "The story of the House Targaryen set 200 years before the events of Game of Thrones.", }, ] } export async function getLatestViews() { // Simulate API call await new Promise((resolve) => setTimeout(resolve, 500)) return [ { title: "Dune: Part Two", rating: 4.5, posterUrl: "/placeholder.svg?height=56&width=40", watchedDate: "2 days ago", }, { title: "The Last of Us", rating: 4.8, posterUrl: "/placeholder.svg?height=56&width=40", watchedDate: "5 days ago", }, { title: "Oppenheimer", rating: 4.7, posterUrl: "/placeholder.svg?height=56&width=40", watchedDate: "1 week ago", }, ] } [V0_FILE]typescriptreact:file="components/ui/tabs.tsx" isMerged="true" "use client" import * as React from "react" import * as TabsPrimitive from "@radix-ui/react-tabs" import { cn } from "@/lib/utils" const Tabs = TabsPrimitive.Root const TabsList = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsList.displayName = TabsPrimitive.List.displayName const TabsTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsTrigger.displayName = TabsPrimitive.Trigger.displayName const TabsContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsContent.displayName = TabsPrimitive.Content.displayName export { Tabs, TabsList, TabsTrigger, TabsContent } [V0_FILE]typescriptreact:file="components/ui/button.tsx" isMerged="true" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return }, ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/avatar.tsx" isMerged="true" "use client" import * as React from "react" import * as AvatarPrimitive from "@radix-ui/react-avatar" import { cn } from "@/lib/utils" const Avatar = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Avatar.displayName = AvatarPrimitive.Root.displayName const AvatarImage = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AvatarImage.displayName = AvatarPrimitive.Image.displayName const AvatarFallback = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName export { Avatar, AvatarImage, AvatarFallback } [V0_FILE]typescriptreact:file="components/ui/input.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" export interface InputProps extends React.InputHTMLAttributes {} const Input = React.forwardRef(({ className, type, ...props }, ref) => { return ( ) }) Input.displayName = "Input" export { Input } [V0_FILE]typescriptreact:file="lib/utils.ts" isMerged="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 240 10% 3.9%; --card: 0 0% 100%; --card-foreground: 240 10% 3.9%; --popover: 0 0% 100%; --popover-foreground: 240 10% 3.9%; --primary: 262 83.3% 57.8%; --primary-foreground: 0 0% 98%; --secondary: 240 4.8% 95.9%; --secondary-foreground: 240 5.9% 10%; --muted: 240 4.8% 95.9%; --muted-foreground: 240 3.8% 46.1%; --accent: 240 4.8% 95.9%; --accent-foreground: 240 5.9% 10%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 240 5.9% 90%; --input: 240 5.9% 90%; --ring: 262 83.3% 57.8%; --radius: 0.5rem; } .dark { --background: 240 10% 3.9%; --foreground: 0 0% 98%; --card: 240 10% 3.9%; --card-foreground: 0 0% 98%; --popover: 240 10% 3.9%; --popover-foreground: 0 0% 98%; --primary: 262 83.3% 57.8%; --primary-foreground: 0 0% 98%; --secondary: 240 3.7% 15.9%; --secondary-foreground: 0 0% 98%; --muted: 240 3.7% 15.9%; --muted-foreground: 240 5% 64.9%; --accent: 240 3.7% 15.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; --ring: 262 83.3% 57.8%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="config/site.ts" isEdit="true" isMerged="true" // Site Configuration // Edit this file to customize your Linkees site export const siteConfig = { // Personal Info name: "Dark Cinephile", bio: "Exploring the shadows of cinema and sound", avatar: "/avatar.png", // Place your avatar image in the public folder // Theme Settings theme: { // Color options: "blood", "midnight", "abyss", "phantom" colorScheme: "blood", }, // Spotify Configuration spotify: { username: "your_spotify_username", clientId: "your_spotify_client_id", clientSecret: "your_spotify_client_secret", }, // Social Media Links social: [ { name: "Twitter", url: "https://twitter.com/yourusername", icon: "Twitter", color: "#1DA1F2", show: true, }, { name: "Instagram", url: "https://instagram.com/yourusername", icon: "Instagram", color: "#E4405F", show: true, }, { name: "TikTok", url: "https://tiktok.com/@yourusername", icon: "Music", color: "#000000", show: true, }, { name: "YouTube", url: "https://youtube.com/@yourusername", icon: "Youtube", color: "#FF0000", show: true, }, { name: "Twitch", url: "https://twitch.tv/yourusername", icon: "Twitch", color: "#9146FF", show: true, }, { name: "GitHub", url: "https://github.com/yourusername", icon: "Github", color: "#6e5494", show: true, }, { name: "LinkedIn", url: "https://linkedin.com/in/yourusername", icon: "Linkedin", color: "#0077B5", show: true, }, { name: "Facebook", url: "https://facebook.com/yourusername", icon: "Facebook", color: "#1877F2", show: true, }, { name: "Email", url: "mailto:your.email@example.com", icon: "Mail", color: "#ffffff", show: true, }, ], // Footer footer: { text: "The darkness within reflects the films I consume and the music I embrace", }, } // Theme presets export const themePresets = { blood: { gradient: "from-red-900 to-black", cardBg: "bg-black/40", accent: "bg-red-900/20 hover:bg-red-900/30 border-red-900/30", text: "text-red-50", mutedText: "text-red-200/60", highlight: "from-red-700 to-red-900", }, midnight: { gradient: "from-indigo-900 to-black", cardBg: "bg-black/40", accent: "bg-indigo-900/20 hover:bg-indigo-900/30 border-indigo-900/30", text: "text-indigo-50", mutedText: "text-indigo-200/60", highlight: "from-indigo-700 to-indigo-900", }, abyss: { gradient: "from-blue-900 to-black", cardBg: "bg-black/40", accent: "bg-blue-900/20 hover:bg-blue-900/30 border-blue-900/30", text: "text-blue-50", mutedText: "text-blue-200/60", highlight: "from-blue-700 to-blue-900", }, phantom: { gradient: "from-purple-900 to-black", cardBg: "bg-black/40", accent: "bg-purple-900/20 hover:bg-purple-900/30 border-purple-900/30", text: "text-purple-50", mutedText: "text-purple-200/60", highlight: "from-purple-700 to-purple-900", }, } // Get current theme based on site config export const getCurrentTheme = () => { return themePresets[siteConfig.theme.colorScheme as keyof typeof themePresets] || themePresets.blood } [V0_FILE]typescript:file="lib/spotify.ts" isEdit="true" isQuickEdit="true" isMerged="true" export async function getInitialMusicData() { // Fetch initial music data from Spotify API // This is a placeholder implementation return [ { id: 1, title: "Song 1", artist: "Artist 1", albumArt: "/placeholder.svg" }, { id: 2, title: "Song 2", artist: "Artist 2", albumArt: "/placeholder.svg" }, { id: 3, title: "Song 3", artist: "Artist 3", albumArt: "/placeholder.svg" }, ] } export async function getMoreMusicData(page: number) { // Fetch more music data from Spotify API // This is a placeholder implementation return [ { id: 4 + page, title: `Song ${4 + page}`, artist: `Artist ${5 + page}`, albumArt: "/placeholder.svg" }, { id: 5 + page, title: `Song ${5 + page}`, artist: `Artist ${6 + page}`, albumArt: "/placeholder.svg" }, { id: 6 + page, title: `Song ${6 + page}`, artist: `Artist ${7 + page}`, albumArt: "/placeholder.svg" }, ] } export async function getRecentTracks() { // Simulate API call await new Promise((resolve) => setTimeout(resolve, 500)) return [ { title: "Midnight City", artist: "M83", albumArt: "/placeholder.svg?height=48&width=48", }, { title: "The Less I Know The Better", artist: "Tame Impala", albumArt: "/placeholder.svg?height=48&width=48", }, { title: "Feel Good Inc.", artist: "Gorillaz", albumArt: "/placeholder.svg?height=48&width=48", }, ] } [V0_FILE]typescriptreact:file="config/personal.ts" isMerged="true" export const personalConfig = { name: "Dark Cinephile", bio: "Exploring the shadows of cinema and sound", avatar: "/avatar.png", // Place your avatar image in the public folder } [V0_FILE]typescriptreact:file="config/theme.ts" isMerged="true" export const themeConfig = { // Color options: "blood", "midnight", "abyss", "phantom" colorScheme: "blood", } // Theme presets export const themePresets = { blood: { gradient: "from-red-900 to-black", cardBg: "bg-black/40", accent: "bg-red-900/20 hover:bg-red-900/30 border-red-900/30", text: "text-red-50", mutedText: "text-red-200/60", highlight: "from-red-700 to-red-900", }, midnight: { gradient: "from-indigo-900 to-black", cardBg: "bg-black/40", accent: "bg-indigo-900/20 hover:bg-indigo-900/30 border-indigo-900/30", text: "text-indigo-50", mutedText: "text-indigo-200/60", highlight: "from-indigo-700 to-indigo-900", }, abyss: { gradient: "from-blue-900 to-black", cardBg: "bg-black/40", accent: "bg-blue-900/20 hover:bg-blue-900/30 border-blue-900/30", text: "text-blue-50", mutedText: "text-blue-200/60", highlight: "from-blue-700 to-blue-900", }, phantom: { gradient: "from-purple-900 to-black", cardBg: "bg-black/40", accent: "bg-purple-900/20 hover:bg-purple-900/30 border-purple-900/30", text: "text-purple-50", mutedText: "text-purple-200/60", highlight: "from-purple-700 to-purple-900", }, } // Get current theme based on site config export const getCurrentTheme = () => { return themePresets[themeConfig.colorScheme as keyof typeof themePresets] || themePresets.blood } [V0_FILE]typescriptreact:file="config/social.ts" isMerged="true" export const socialConfig = [ { name: "Twitter", url: "https://twitter.com/yourusername", icon: "Twitter", color: "#1DA1F2", show: true, }, { name: "Instagram", url: "https://instagram.com/yourusername", icon: "Instagram", color: "#E4405F", show: true, }, { name: "TikTok", url: "https://tiktok.com/@yourusername", icon: "Music", color: "#000000", show: true, }, { name: "YouTube", url: "https://youtube.com/@yourusername", icon: "Youtube", color: "#FF0000", show: true, }, { name: "Twitch", url: "https://twitch.tv/yourusername", icon: "Twitch", color: "#9146FF", show: true, }, { name: "GitHub", url: "https://github.com/yourusername", icon: "Github", color: "#6e5494", show: true, }, { name: "LinkedIn", url: "https://linkedin.com/in/yourusername", icon: "Linkedin", color: "#0077B5", show: true, }, { name: "Facebook", url: "https://facebook.com/yourusername", icon: "Facebook", color: "#1877F2", show: true, }, { name: "Email", url: "mailto:your.email@example.com", icon: "Mail", color: "#ffffff", show: true, }, ] [V0_FILE]typescriptreact:file="config/spotify.ts" isMerged="true" export const spotifyConfig = { username: "your_spotify_username", clientId: "your_spotify_client_id", clientSecret: "your_spotify_client_secret", } [V0_FILE]typescriptreact:file="config/footer.ts" isMerged="true" export const footerConfig = { text: "The darkness within reflects the films I consume and the music I embrace", } [V0_FILE]typescriptreact:file="config/index.ts" isEdit="true" isMerged="true" import { personalConfig } from "./personal" import { themeConfig, themePresets, getCurrentTheme } from "./theme" import { socialConfig } from "./social" import { spotifyConfig } from "./spotify" import { trackTVConfig } from "./tracktv" import { footerConfig } from "./footer" export const siteConfig = { personal: personalConfig, theme: themeConfig, social: socialConfig, spotify: spotifyConfig, trackTV: trackTVConfig, footer: footerConfig, } export { getCurrentTheme, themePresets } [V0_FILE]typescriptreact:file="config/tracktv.ts" isMerged="true" export const trackTVConfig = { username: "your_tracktv_username", apiKey: "your_tracktv_api_key", // Add any other TrackTV-specific settings here } [V0_FILE]typescriptreact:file="components/profile.tsx" isMerged="true" "use client" import Image from "next/image" import { siteConfig } from "@/config" import { motion } from "framer-motion" export default function Profile() { return (

{siteConfig.personal.name}

{siteConfig.personal.bio}

) } [V0_FILE]typescriptreact:file="components/tabs-section.tsx" isMerged="true" "use client" import { useState } from "react" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import SocialLinks from "./social-links" import MovieSection from "./movie-section" import MusicSection from "./music-section" export default function TabsSection({ initialMovieData, initialMusicData }) { const [activeTab, setActiveTab] = useState("links") return ( Links Movies & TV Music ) } [V0_FILE]typescriptreact:file="components/movie-section.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { motion, AnimatePresence } from "framer-motion" import { useInView } from "react-intersection-observer" import { getMoreMovieData } from "@/lib/tracktv" import MovieCard from "./movie-card" import SearchBar from "./search-bar" export default function MovieSection({ initialData, isActive }) { const [movies, setMovies] = useState(initialData) const [page, setPage] = useState(1) const [ref, inView] = useInView() const [searchTerm, setSearchTerm] = useState("") useEffect(() => { if (inView && isActive) { loadMore() } }, [inView, isActive]) const loadMore = async () => { const newMovies = await getMoreMovieData(page + 1) setMovies([...movies, ...newMovies]) setPage(page + 1) } const filteredMovies = movies.filter((movie) => movie.title.toLowerCase().includes(searchTerm.toLowerCase())) return (

{filteredMovies.map((movie, index) => ( ))}

) } [V0_FILE]typescriptreact:file="components/movie-card.tsx" isMerged="true" "use client" import Image from "next/image" import { motion } from "framer-motion" export default function MovieCard({ movie, index }) { return (

{movie.title}

⭐ {movie.rating}/5

) } [V0_FILE]typescriptreact:file="components/music-section.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { motion, AnimatePresence } from "framer-motion" import { useInView } from "react-intersection-observer" import { getMoreMusicData } from "@/lib/spotify" import TrackCard from "./track-card" export default function MusicSection({ initialData, isActive }) { const [tracks, setTracks] = useState(initialData) const [page, setPage] = useState(1) const [ref, inView] = useInView() useEffect(() => { if (inView && isActive) { loadMore() } }, [inView, isActive]) const loadMore = async () => { const newTracks = await getMoreMusicData(page + 1) setTracks([...tracks, ...newTracks]) setPage(page + 1) } return (

{tracks.map((track, index) => ( ))}

) } [V0_FILE]typescriptreact:file="components/track-card.tsx" isMerged="true" "use client" import Image from "next/image" import { motion } from "framer-motion" export default function TrackCard({ track, index }) { return (

{track.title}

{track.artist}

) } [V0_FILE]typescriptreact:file="components/search-bar.tsx" isMerged="true" "use client" import { useState } from "react" import { Search } from "lucide-react" export default function SearchBar({ onSearch }) { const [searchTerm, setSearchTerm] = useState("") const handleSearch = (e) => { e.preventDefault() onSearch(searchTerm) } return ( ) } [V0_FILE]typescriptreact:file="components/footer.tsx" isMerged="true" import { siteConfig } from "@/config" export default function Footer() { return ( ) } [V0_FILE]typescriptreact:file="components/loading-spinner.tsx" isMerged="true" import { Loader2 } from "lucide-react" export default function LoadingSpinner() { return (

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" "use client" import { useState, useEffect } from "react" import Image from "next/image" import Link from "next/link" import { ExternalLink } from "lucide-react" import { Button } from "@/components/ui/button" import SocialLinks from "@/components/social-links" import SpotifySection from "@/components/spotify-section" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { siteConfig, getCurrentTheme } from "@/config" import { getLatestViews } from "@/lib/tracktv" import { getRecentTracks } from "@/lib/spotify" import { motion, AnimatePresence } from "framer-motion" import ThemeToggle from "@/components/theme-toggle" export default function Home() { const [theme, setTheme] = useState(getCurrentTheme()) const [latestViews, setLatestViews] = useState([]) const [recentTracks, setRecentTracks] = useState([]) useEffect(() => { getLatestViews().then(setLatestViews) getRecentTracks().then(setRecentTracks) }, []) return (

{siteConfig.personal.name} {siteConfig.personal.bio} Links Movies & TV Music

Movie Stats

View All

124

Movies Watched

TV Shows

4.2

Avg Rating

Watchlist

Latest Views

{latestViews.map((item, index) => (

{item.title}

⭐ {item.rating}/5 • {item.watchedDate}

))}

{siteConfig.footer.text}

) } [V0_FILE]typescriptreact:file="components/theme-toggle.tsx" isEdit="true" "use client" import { useState, useEffect } from "react" import { useTheme } from "next-themes" import { Moon, Sun } from "lucide-react" import { Button } from "@/components/ui/button" export default function ThemeToggle({ className }: { className?: string }) { const [mounted, setMounted] = useState(false) const { theme, setTheme } = useTheme() useEffect(() => setMounted(true), []) if (!mounted) { return null } return ( ) } [V0_FILE]typescriptreact:file="components/social-links.tsx" isEdit="true" "use client" import Link from "next/link" import { motion } from "framer-motion" import { Button } from "@/components/ui/button" import { FaGithub, FaTwitter, FaInstagram, FaLinkedin, FaEnvelope, FaYoutube, FaTiktok, FaTwitch, FaFacebookF, } from "react-icons/fa" import { siteConfig } from "@/config" const iconMap = { Github: FaGithub, Twitter: FaTwitter, Instagram: FaInstagram, Linkedin: FaLinkedin, Mail: FaEnvelope, Youtube: FaYoutube, Music: FaTiktok, Twitch: FaTwitch, Facebook: FaFacebookF, } export default function SocialLinks() { return (

{siteConfig.social .filter((social) => social.show) .map((social, index) => { const IconComponent = iconMap[social.icon as keyof typeof iconMap] return ( ) })}

) } [V0_FILE]typescriptreact:file="components/spotify-section.tsx" isEdit="true" "use client" import Image from "next/image" import { motion } from "framer-motion" export default function SpotifySection({ recentTracks }) { return (

Recently Played

{recentTracks.map((track, index) => (

{track.title}

{track.artist}

))}

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { ThemeProvider } from "@/components/theme-provider" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Modern Linkees - Movie Tracker", description: "A beautiful Single Page Web App to display your important social links and movie stats", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" "use client" import { ThemeProvider as NextThemesProvider } from "next-themes" import type { ThemeProviderProps } from "next-themes" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]javascript:file="tailwind.config.js" isEdit="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, }, }, plugins: [require("tailwindcss-animate")], }

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This