import { useState } from 'react'; import { Search, Menu, Mic, Video, Bell, User, Home, Compass, Library, History, Clock, ThumbsUp, Film, Gamepad2, Music, Newspaper, Trophy, Lightbulb, Bookmark, TrendingUp } from 'lucide-react'; interface Video { id: string; title: string; channel: string; views: string; timestamp: string; duration: string; thumbnail: string; avatar: string; } const mockVideos: Video[] = [ { id: '1', title: 'Building a Modern React App with TypeScript - Complete Guide 2026', channel: 'TechMaster Pro', views: '1.2M views', timestamp: '2 days ago', duration: '15:42', thumbnail: 'https://images.unsplash.com/photo-1633356122544-f134324a6cee?w=800&q=80', avatar: 'https://i.pravatar.cc/200?img=1' }, { id: '2', title: 'The Future of AI: What to Expect in 2026 and Beyond', channel: 'Future Insights', views: '856K views', timestamp: '1 week ago', duration: '22:18', thumbnail: 'https://images.unsplash.com/photo-1677442136019-21780ecad995?w=800&q=80', avatar: 'https://i.pravatar.cc/200?img=2' }, { id: '3', title: 'Amazing Nature Photography Tips That Will Blow Your Mind', channel: 'Nature Lens', views: '2.1M views', timestamp: '3 days ago', duration: '12:35', thumbnail: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&q=80', avatar: 'https://i.pravatar.cc/200?img=3' }, { id: '4', title: 'Cooking the Perfect Pasta - Italian Chef Secrets Revealed', channel: 'Culinary Masters', views: '743K views', timestamp: '5 days ago', duration: '18:27', thumbnail: 'https://images.unsplash.com/photo-1551183053-bf91a1d81141?w=800&q=80', avatar: 'https://i.pravatar.cc/200?img=4' }, { id: '5', title: 'Ultimate Workout Routine for Maximum Results in 2026', channel: 'FitLife Pro', views: '1.8M views', timestamp: '1 day ago', duration: '25:14', thumbnail: 'https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=800&q=80', avatar: 'https://i.pravatar.cc/200?img=5' }, { id: '6', title: 'Travel Photography: Capturing the Perfect Shot Every Time', channel: 'Wanderlust Visuals', views: '923K views', timestamp: '4 days ago', duration: '16:48', thumbnail: 'https://images.unsplash.com/photo-1488646953014-85cb44e25828?w=800&q=80', avatar: 'https://i.pravatar.cc/200?img=6' } ]; const sidebarItems = [ { icon: Home, label: 'Home', active: true }, { icon: TrendingUp, label: 'Trending' }, { icon: Film, label: 'Subscriptions' }, { icon: Library, label: 'Library' }, { icon: History, label: 'History' }, { icon: Clock, label: 'Watch later' }, { icon: ThumbsUp, label: 'Liked videos' } ]; const exploreItems = [ { icon: Compass, label: 'Explore' }, { icon: Gamepad2, label: 'Gaming' }, { icon: Music, label: 'Music' }, { icon: Newspaper, label: 'News' }, { icon: Trophy, label: 'Sports' }, { icon: Lightbulb, label: 'Learning' }, { icon: Bookmark, label: 'Fashion & beauty' } ]; export default function YouTubeClone() { const [sidebarOpen, setSidebarOpen] = useState(true); const [searchQuery, setSearchQuery] = useState(''); const VideoCard = ({ video }: { video: Video }) => (

{video.duration}

{video.title}

{video.channel}

{video.views} • {video.timestamp}

); return (

{/* Header */}

{/* Left */}

YouTube

{/* Center - Search */}

setSearchQuery(e.target.value)} placeholder="Search" className="w-full px-4 py-2 border border-border rounded-l-full bg-background focus:outline-none focus:ring-2 focus:ring-primary/50" />

{/* Right */}

{/* Sidebar */} {/* Main Content */}

{/* Categories */}

{['All', 'React', 'JavaScript', 'AI', 'Machine Learning', 'Web Development', 'Music', 'Gaming', 'Live', 'Travel', 'Cooking', 'Fitness'].map((category) => ( ))}

{/* Video Grid */}

{mockVideos.map((video) => ( ))}

); }

YouTube UI Clone