[V0_FILE]typescriptreact:file="page.tsx" "use client" import { useEffect, useState } from "react" import { motion } from "framer-motion" import { Twitter, Music, User, Mail, Link } from "lucide-react" import { Button } from "@/components/ui/button" export default function Page() { const [mounted, setMounted] = useState(false) useEffect(() => { setMounted(true) }, []) if (!mounted) return null return (

{/* Header */}

LIFELESS REALM

{/* Main content */}

{/* Left sidebar */}

About Me

Interests

Digital Art
Cyberpunk Culture
AI and Technology

{/* Main content area */}

Welcome to My Digital Realm

Step into a world where the boundaries between reality and the digital realm blur. Here, we explore the endless possibilities of our interconnected existence.

Latest Update

Diving deep into the cybernetic abyss. What secrets will we uncover in the depths of the digital ocean?

{/* Footer */}

) } [V0_FILE]typescriptreact:file="layout.tsx" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Lifeless Realm - MySpace Profile", description: "Exploring the depths of digital existence", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/music-player.tsx" isQuickEdit="true" "use client" import { useState, useRef, useEffect } from "react" import { Play, Pause, Volume2, VolumeX, SkipBack, SkipForward } from "lucide-react" import { Button } from "@/components/ui/button" import { Slider } from "@/components/ui/slider" interface Song { title: string artist: string src: string } export function MusicPlayer() { const [isPlaying, setIsPlaying] = useState(false) const [volume, setVolume] = useState(0.5) const [isMuted, setIsMuted] = useState(false) const [currentSong, setCurrentSong] = useState(0) const [error, setError] = useState(null) const [autoplayFailed, setAutoplayFailed] = useState(false) const audioRef = useRef(null) const songs: Song[] = [ { title: "Retro Lofi Hip Hop Beats", artist: "Lofi Girl", src: "/audio/retro-lofi.mp3" }, { title: "12 A.M Study Session", artist: "Lofi Girl", src: "/audio/study-session.mp3" }, { title: "Take Your Time Relax", artist: "Lofi Girl", src: "/audio/take-your-time.mp3" }, { title: "Donkey Kong Country OST", artist: "David Wise", src: "/audio/donkey-kong.mp3" }, ] useEffect(() => { if (audioRef.current) { audioRef.current.volume = volume audioRef.current.muted = isMuted } }, [volume, isMuted]) useEffect(() => { if (audioRef.current) { audioRef.current.src = songs[currentSong].src if (isPlaying) { audioRef.current.play().catch(handlePlayError) } } }, [currentSong, isPlaying]) // Added isPlaying to dependencies useEffect(() => { const attemptAutoplay = async () => { if (audioRef.current) { try { await audioRef.current.play() setIsPlaying(true) } catch (error) { console.error("Autoplay failed:", error) setAutoplayFailed(true) } } } attemptAutoplay() }, []) const togglePlay = () => { if (audioRef.current) { if (isPlaying) { audioRef.current.pause() } else { audioRef.current.play().catch(handlePlayError) } setIsPlaying(!isPlaying) } } const handlePlayError = (error: any) => { console.error("Error playing audio:", error) setError("Unable to play audio. Please check your audio files.") setIsPlaying(false) } const toggleMute = () => { setIsMuted(!isMuted) } const handleVolumeChange = (value: number[]) => { const newVolume = value[0] setVolume(newVolume) } const nextSong = () => { setCurrentSong((prev) => (prev + 1) % songs.length) } const prevSong = () => { setCurrentSong((prev) => (prev - 1 + songs.length) % songs.length) } return null } [V0_FILE]typescriptreact:file="components/youtube-player.tsx" isQuickEdit="true" "use client" import { useState, useRef, useEffect, useCallback } from "react" import { Play, Pause, SkipForward, SkipBack } from "lucide-react" import { Button } from "@/components/ui/button" // import { Slider } from "@/components/ui/slider" // Removed interface Stream { id: string title: string artist: string } declare global { interface Window { YT: any onYouTubeIframeAPIReady: () => void } } export function YouTubePlayer() { const [isPlaying, setIsPlaying] = useState(false) // const [volume, setVolume] = useState(50) // Removed // const [isMuted, setIsMuted] = useState(false) // Removed const [error, setError] = useState(null) const [currentStreamIndex, setCurrentStreamIndex] = useState(0) const [isPlayerReady, setIsPlayerReady] = useState(false) const [isChangingStream, setIsChangingStream] = useState(false) const playerRef = useRef(null) const containerRef = useRef(null) const streams: Stream[] = [ { id: "jfKfPfyJRdk", title: "Lofi Hip Hop Radio", artist: "beats to relax/study to", }, { id: "UedTcufyrHc", title: "ChillSynth FM", artist: "synthwave radio for retro dreaming", }, { id: "6Jsnem7i848", title: "24/7 Beats Instrumental Hip-Hop", artist: "Jazzhop, Lo-Fi, Chillhop, Boom Bap", }, ] const loadYouTubeAPI = useCallback(() => { return new Promise((resolve, reject) => { if (window.YT) { resolve() return } const tag = document.createElement("script") tag.src = "https://www.youtube.com/iframe_api" const firstScriptTag = document.getElementsByTagName("script")[0] firstScriptTag.parentNode?.insertBefore(tag, firstScriptTag) window.onYouTubeIframeAPIReady = () => { resolve() } tag.onerror = (err) => { reject(err) } }) }, []) const initializePlayer = useCallback(async () => { try { await loadYouTubeAPI() if (playerRef.current) { playerRef.current.destroy() } playerRef.current = new window.YT.Player("youtube-player", { height: "0", width: "0", videoId: streams[currentStreamIndex].id, playerVars: { autoplay: 0, controls: 0, disablekb: 1, fs: 0, rel: 0, }, events: { onReady: () => { setIsPlayerReady(true) setIsChangingStream(false) // Set initial volume // Removed }, onStateChange: (event: any) => { if (event.data === window.YT.PlayerState.PLAYING) { setIsPlaying(true) } else if (event.data === window.YT.PlayerState.PAUSED) { setIsPlaying(false) } }, onError: () => { setError("Error loading video") setIsPlaying(false) setIsChangingStream(false) }, }, }) } catch (err) { setError("Failed to initialize player") console.error("YouTube player initialization error:", err) setIsChangingStream(false) } }, [currentStreamIndex, loadYouTubeAPI]) useEffect(() => { initializePlayer() return () => { if (playerRef.current) { playerRef.current.destroy() } } }, [initializePlayer]) // const setPlayerVolume = useCallback((newVolume: number) => { // Removed // if (playerRef.current && playerRef.current.setVolume) { // try { // playerRef.current.setVolume(newVolume) // setVolume(newVolume) // } catch (err) { // console.error("Volume adjustment error:", err) // setError("Error adjusting volume. Please try again.") // } // } else { // console.warn("Player not ready for volume adjustment") // } // }, []) // Removed // useEffect(() => { // Removed // if (isPlayerReady && !isChangingStream) { // setPlayerVolume(volume) // } // }, [isPlayerReady, isChangingStream, volume, setPlayerVolume]) // Removed // const handleVolumeChange = useCallback( // Removed // (value: number[]) => { // if (!isPlayerReady || !playerRef.current || isChangingStream) return // const newVolume = value[0] // setPlayerVolume(newVolume) // // setIsMuted(newVolume === 0) // Removed // }, // [isPlayerReady, isChangingStream, setPlayerVolume], // ) // Removed // const toggleMute = useCallback(() => { // Removed // if (!isPlayerReady || !playerRef.current || isChangingStream) return // try { // if (isMuted) { // playerRef.current.unMute() // setPlayerVolume(volume > 0 ? volume : 50) // } else { // playerRef.current.mute() // setPlayerVolume(0) // } // setIsMuted(!isMuted) // } catch (err) { // console.error("Mute toggle error:", err) // setError("Error toggling mute. Please try again.") // } // }, [isPlayerReady, isChangingStream, isMuted, volume, setPlayerVolume]) // Removed const togglePlay = useCallback(() => { if (!isPlayerReady || !playerRef.current || isChangingStream) return try { if (isPlaying) { playerRef.current.pauseVideo() } else { playerRef.current.playVideo() } setIsPlaying(!isPlaying) } catch (err) { setError("Error controlling playback") console.error("Playback error:", err) } }, [isPlayerReady, isChangingStream, isPlaying]) const changeStream = useCallback( async (direction: "next" | "prev") => { if (isChangingStream) return setIsChangingStream(true) setError(null) try { if (playerRef.current && isPlaying) { await playerRef.current.stopVideo() } const newIndex = direction === "next" ? (currentStreamIndex + 1) % streams.length : (currentStreamIndex - 1 + streams.length) % streams.length setCurrentStreamIndex(newIndex) setIsPlaying(false) initializePlayer() } catch (err) { setError("Error changing stream") console.error("Stream change error:", err) setIsChangingStream(false) } }, [isChangingStream, isPlaying, currentStreamIndex, initializePlayer], ) return (

{streams[currentStreamIndex].title}

{streams[currentStreamIndex].artist}

{error &&

{error}

}

) } [V0_FILE]typescriptreact:file="app/actions/fetch-tweets.ts" "use server" interface Tweet { id: string text: string created_at: string } export async function getLatestTweet(): Promise { // This is a placeholder that would need to be implemented with proper Twitter API credentials // You would need to add TWITTER_API_KEY to your environment variables try { // Return placeholder data for now return { id: "1", text: "Diving deep into the cybernetic abyss. What secrets will we uncover in the depths of the digital ocean?", created_at: new Date().toISOString(), } } catch (error) { console.error("Error fetching tweet:", error) return null } } [V0_FILE]typescriptreact:file="components/following-modal.tsx" "use client" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" interface FollowingModalProps { open: boolean onOpenChange: (open: boolean) => void } export function FollowingModal({ open, onOpenChange }: FollowingModalProps) { return ( ) } [V0_FILE]typescriptreact:file="components/tweet-card.tsx" isFixed="true" isQuickEdit="true" "use client" import { useEffect, useState } from "react" import { getLatestTweet } from "@/app/actions/fetch-tweets" import { Twitter, Github } from "lucide-react" import { Button } from "@/components/ui/button" import Image from "next/image" interface AppPreview { title: string description: string imageUrl: string link: string } export function TweetCard() { const [tweet, setTweet] = useState<{ text: string; created_at: string } | null>(null) const [loading, setLoading] = useState(true) const appPreviews: AppPreview[] = [ { title: "Metal on Solana", description: "Explore the world of Metal on Solana blockchain", imageUrl: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/metalpreview-cLSbb838lSsAgtLNuWZdwdqXKlqUp3.png", link: "https://metalonsolana.vercel.app/", }, { title: "Not So Fast", description: "Experience the thrill of 'Not So Fast'", imageUrl: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/notsofastpreview-LIQPP4xPkx0nMvRhSm2jnHA562el95.png", link: "https://www.notsofast.fun/", }, ] useEffect(() => { async function fetchTweet() { try { const latestTweet = await getLatestTweet() setTweet(latestTweet) } catch (error) { console.error("Error:", error) } finally { setLoading(false) } } fetchTweet() }, []) if (loading) { return (

) } return (

Latest Front-end Designs

{appPreviews.map((app, index) => (

{app.title}

))}

) } [V0_FILE]typescriptreact:file="components/hire-form-modal.tsx" isQuickEdit="true" "use client" import { useState } from "react" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Label } from "@/components/ui/label" import Image from "next/image" interface HireFormData { username: string platform: "x" | "telegram" projectType: string } const projectTypes = [ { name: "Personal Landing Page", price: "$250/year", description: "Includes hosting, .fun domain (no web3)" }, { name: "Memecoin Site", price: "$400/year", description: "Includes hosting and .fun domain (no web3)" }, { name: "Stickers, Logos, Banners", price: "Starting at $5", description: "Custom designs" }, { name: "Custom Brand TG Verify / Spam Bot", price: "Contact for pricing", description: "Group mod bots for TG, anti-spam and verify bot", }, ] export function HireFormModal({ open, onOpenChange }: { open: boolean; onOpenChange: (open: boolean) => void }) { const [formData, setFormData] = useState({ username: "", platform: "x", projectType: "", }) const [isSubmitting, setIsSubmitting] = useState(false) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsSubmitting(true) try { await fetch("/api/hire-requests", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ ...formData, submittedAt: new Date().toISOString(), }), }) onOpenChange(false) // You could show a success toast here } catch (error) { console.error("Error submitting form:", error) // You could show an error toast here } finally { setIsSubmitting(false) } } return (

About

Tags

Share

About

Tags

Share

More from lifelessrealm

More Templates Like This

About

Tags

Share

About

Tags

Share

More from lifelessrealm

More Templates Like This