[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Geist, Geist_Mono } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import "./globals.css" const _geist = Geist({ subsets: ["latin"] }) const _geistMono = Geist_Mono({ subsets: ["latin"] }) export const metadata: Metadata = { title: "UzChat - Chat, Stories & Reels", description: "Chat, Stories va Reels — barchasi bitta joyda", generator: "v0.app", icons: { icon: [ { url: "/icon-light-32x32.png", media: "(prefers-color-scheme: light)", }, { url: "/icon-dark-32x32.png", media: "(prefers-color-scheme: dark)", }, { url: "/icon.svg", type: "image/svg+xml", }, ], apple: "/apple-icon.png", }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Updated color palette for UzChat branding */ --background: oklch(0.98 0.01 250); --foreground: oklch(0.15 0.02 250); --card: oklch(1 0 0); --card-foreground: oklch(0.15 0.02 250); --popover: oklch(1 0 0); --popover-foreground: oklch(0.15 0.02 250); --primary: oklch(0.35 0.25 280); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.65 0.22 15); --secondary-foreground: oklch(1 0 0); --muted: oklch(0.92 0.01 250); --muted-foreground: oklch(0.5 0.05 250); --accent: oklch(0.6 0.25 170); --accent-foreground: oklch(1 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(1 0 0); --border: oklch(0.92 0.01 250); --input: oklch(0.96 0.01 250); --ring: oklch(0.35 0.25 280); --chart-1: oklch(0.35 0.25 280); --chart-2: oklch(0.6 0.25 170); --chart-3: oklch(0.65 0.22 15); --chart-4: oklch(0.5 0.15 50); --chart-5: oklch(0.45 0.2 320); --radius: 0.75rem; --sidebar: oklch(1 0 0); --sidebar-foreground: oklch(0.15 0.02 250); --sidebar-primary: oklch(0.35 0.25 280); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.6 0.25 170); --sidebar-accent-foreground: oklch(1 0 0); --sidebar-border: oklch(0.92 0.01 250); --sidebar-ring: oklch(0.35 0.25 280); } .dark { --background: oklch(0.12 0.02 250); --foreground: oklch(0.95 0.02 250); --card: oklch(0.2 0.02 250); --card-foreground: oklch(0.95 0.02 250); --popover: oklch(0.2 0.02 250); --popover-foreground: oklch(0.95 0.02 250); --primary: oklch(0.65 0.2 280); --primary-foreground: oklch(0.12 0.02 250); --secondary: oklch(0.75 0.2 15); --secondary-foreground: oklch(0.12 0.02 250); --muted: oklch(0.35 0.05 250); --muted-foreground: oklch(0.65 0.05 250); --accent: oklch(0.75 0.22 170); --accent-foreground: oklch(0.12 0.02 250); --destructive: oklch(0.596 0.194 26.836); --destructive-foreground: oklch(0.12 0.02 250); --border: oklch(0.3 0.02 250); --input: oklch(0.25 0.02 250); --ring: oklch(0.65 0.2 280); --chart-1: oklch(0.65 0.2 280); --chart-2: oklch(0.75 0.22 170); --chart-3: oklch(0.75 0.2 15); --chart-4: oklch(0.6 0.15 50); --chart-5: oklch(0.65 0.2 320); --sidebar: oklch(0.15 0.02 250); --sidebar-foreground: oklch(0.95 0.02 250); --sidebar-primary: oklch(0.65 0.2 280); --sidebar-primary-foreground: oklch(0.12 0.02 250); --sidebar-accent: oklch(0.75 0.22 170); --sidebar-accent-foreground: oklch(0.12 0.02 250); --sidebar-border: oklch(0.3 0.02 250); --sidebar-ring: oklch(0.65 0.2 280); } @theme inline { --font-sans: "Geist", "Geist Fallback"; --font-mono: "Geist Mono", "Geist Mono Fallback"; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" "use client" import { useState } from "react" import { MainNav } from "@/components/main-nav" import { HomePage } from "@/components/pages/home-page" import { ReelsPage } from "@/components/pages/reels-page" import { ChatPage } from "@/components/pages/chat-page" import { ProfilePage } from "@/components/pages/profile-page" export default function Home() { const [activeTab, setActiveTab] = useState("home") const renderPage = () => { switch (activeTab) { case "home": return case "reels": return case "chat": return case "profile": return default: return } } return (

{/* Main Content Area */}

{renderPage()}

{/* Bottom Navigation */}

) } [V0_FILE]typescriptreact:file="components/main-nav.tsx" isMerged="true" "use client" import { Home, Play, MessageCircle, User } from "lucide-react" import { Button } from "@/components/ui/button" interface MainNavProps { activeTab: string onTabChange: (tab: string) => void } export function MainNav({ activeTab, onTabChange }: MainNavProps) { const navItems = [ { id: "home", icon: Home, label: "Home" }, { id: "reels", icon: Play, label: "Reels" }, { id: "chat", icon: MessageCircle, label: "Chat" }, { id: "profile", icon: User, label: "Profile" }, ] return ( ) } [V0_FILE]typescriptreact:file="components/pages/home-page.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { PostCard } from "@/components/post-card" import { StoriesScroll } from "@/components/stories-scroll" import { CommentModal } from "@/components/comment-modal" interface Post { id: string author: string avatar: string timestamp: string imageUrl: string caption: string likes: number comments: number isLiked: boolean } export function HomePage() { const [posts, setPosts] = useState([ { id: "1", author: "Sarah Johnson", avatar: "/diverse-user-avatars.png", timestamp: "2 hours ago", imageUrl: "/social-media-post-photo.jpg", caption: "Just finished an amazing hike! 🏔️ The view was incredible.", likes: 342, comments: 28, isLiked: false, }, { id: "2", author: "Alex Chen", avatar: "/diverse-user-avatars.png", timestamp: "4 hours ago", imageUrl: "/vibrant-pasta-dish.png", caption: "Trying out this new cafe downtown. Best coffee ever!", likes: 156, comments: 12, isLiked: true, }, { id: "3", author: "Emma Wilson", avatar: "/diverse-user-avatars.png", timestamp: "6 hours ago", imageUrl: "/travel-sunset.png", caption: "Sunset colors never get old. 🌅", likes: 521, comments: 45, isLiked: false, }, ]) const [selectedPost, setSelectedPost] = useState(null) const handleLike = (postId: string) => { setPosts( posts.map((post) => { if (post.id === postId) { return { ...post, isLiked: !post.isLiked, likes: post.isLiked ? post.likes - 1 : post.likes + 1, } } return post }), ) } const handleAddComment = (postId: string, comment: string) => { setPosts( posts.map((post) => { if (post.id === postId) { return { ...post, comments: post.comments + 1, } } return post }), ) setSelectedPost(null) } return (

{/* Stories Section */}

{/* Feed Section */}

{posts.map((post) => ( handleLike(post.id)} onCommentClick={() => setSelectedPost(post)} /> ))}

{/* Comment Modal */} {selectedPost && ( setSelectedPost(null)} onComment={(comment) => handleAddComment(selectedPost.id, comment)} /> )}

) } [V0_FILE]typescriptreact:file="components/pages/reels-page.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useEffect, useRef } from "react" import { ReelCard } from "@/components/reel-card" interface Reel { id: string author: string avatar: string videoUrl: string caption: string likes: number comments: number shares: number isLiked: boolean } export function ReelsPage() { const [reels, setReels] = useState([ { id: "1", author: "TechGuy", avatar: "/diverse-user-avatars.png", videoUrl: "/short-video-vertical.jpg", caption: "Quick React tips you should know! #coding", likes: 892, comments: 156, shares: 45, isLiked: false, }, { id: "2", author: "FitnessJen", avatar: "/diverse-user-avatars.png", videoUrl: "/diverse-fitness-workout.png", caption: "Morning routine that changed my life 💪", likes: 1243, comments: 234, shares: 89, isLiked: false, }, { id: "3", author: "CookinWith", avatar: "/diverse-user-avatars.png", videoUrl: "/cooking-recipe.png", caption: "5 minute easy dinner recipe!", likes: 654, comments: 98, shares: 23, isLiked: false, }, { id: "4", author: "TravelBug", avatar: "/diverse-user-avatars.png", videoUrl: "/travel-sunset.png", caption: "Hidden gems in Southeast Asia 🌏", likes: 2341, comments: 445, shares: 234, isLiked: true, }, { id: "5", author: "MusicLovers", avatar: "/diverse-user-avatars.png", videoUrl: "/vibrant-pasta-dish.png", caption: "Best acoustic covers compilation #music", likes: 1567, comments: 289, shares: 123, isLiked: false, }, { id: "6", author: "ArtisticSoul", avatar: "/diverse-user-avatars.png", videoUrl: "/abstract-geometric-shapes.png", caption: "Digital art process speedrun ✨", likes: 945, comments: 178, shares: 67, isLiked: false, }, ]) const [currentIndex, setCurrentIndex] = useState(0) const scrollContainerRef = useRef(null) const [isAutoScroll, setIsAutoScroll] = useState(true) const handleLike = (reelId: string) => { setReels( reels.map((reel) => { if (reel.id === reelId) { return { ...reel, isLiked: !reel.isLiked, likes: reel.isLiked ? reel.likes - 1 : reel.likes + 1, } } return reel }), ) } const handleScroll = (e: React.UIEvent) => { const container = e.currentTarget const scrollPosition = container.scrollTop const containerHeight = container.clientHeight // Calculate which reel is currently in view const newIndex = Math.round(scrollPosition / containerHeight) setCurrentIndex(newIndex) } // Load more reels when reaching the end useEffect(() => { if (currentIndex >= reels.length - 2) { // Add more reels (infinite scroll) const newReels: Reel[] = [ { id: `${reels.length + 1}`, author: "NatureLovers", avatar: "/diverse-user-avatars.png", videoUrl: "/travel-sunset.png", caption: "Wildlife photography in Africa 🦁", likes: 1823, comments: 342, shares: 145, isLiked: false, }, { id: `${reels.length + 2}`, author: "FashionForward", avatar: "/diverse-user-avatars.png", videoUrl: "/vibrant-pasta-dish.png", caption: "Summer outfit haul 👗", likes: 1456, comments: 267, shares: 89, isLiked: false, }, ] setReels([...reels, ...newReels]) } }, [currentIndex, reels]) return (

{reels.map((reel, index) => (

handleLike(reel.id)} isActive={index === currentIndex} />

))}

) } [V0_FILE]typescriptreact:file="components/pages/chat-page.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { ChatListItem } from "@/components/chat-list-item" import { ChatThread } from "@/components/chat-thread" import { Button } from "@/components/ui/button" import { Plus, Search } from "lucide-react" import { Input } from "@/components/ui/input" export function ChatPage() { const [selectedChat, setSelectedChat] = useState(null) const [searchQuery, setSearchQuery] = useState("") const chats = [ { id: "1", name: "Alex Johnson", avatar: "/diverse-user-avatars.png", lastMessage: "That sounds great! When are you free?", timestamp: "2:30 PM", unread: true, isGroup: false, }, { id: "2", name: "Design Team", avatar: "/diverse-group-avatars.png", lastMessage: "You: Thanks for the feedback!", timestamp: "1:45 PM", unread: false, isGroup: true, }, { id: "3", name: "Emma Chen", avatar: "/diverse-user-avatars.png", lastMessage: "See you tomorrow!", timestamp: "11:20 AM", unread: false, isGroup: false, }, { id: "4", name: "Project Updates", avatar: "/diverse-group-avatars.png", lastMessage: "Sarah: All features completed", timestamp: "Yesterday", unread: false, isGroup: true, }, ] if (selectedChat) { return setSelectedChat(null)} /> } const filteredChats = chats.filter( (chat) => chat.name.toLowerCase().includes(searchQuery.toLowerCase()) || chat.lastMessage.toLowerCase().includes(searchQuery.toLowerCase()), ) return (

{/* Header */}

Messages

{/* Search Bar */}

setSearchQuery(e.target.value)} />

{/* Chat List */}

{filteredChats.length > 0 ? ( filteredChats.map((chat) => (

setSelectedChat(chat.id)} className="cursor-pointer transition-colors hover:bg-accent/5" >

)) ) : (

No conversations found

)}

) } [V0_FILE]typescriptreact:file="components/post-card.tsx" isEdit="true" isMerged="true" "use client" import { Heart, MessageCircle, Share2 } from "lucide-react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" interface Post { id: string author: string avatar: string timestamp: string imageUrl: string caption: string likes: number comments: number isLiked: boolean } interface PostCardProps { post: Post onLike: () => void onCommentClick: () => void } export function PostCard({ post, onLike, onCommentClick }: PostCardProps) { return ( {/* Post Header */}

{post.author}

{post.timestamp}

{/* Post Image */}

{/* Post Actions */}

{/* Action Buttons */}

{/* Caption */}

{post.author} {post.caption}

{/* View Comments Link */} {post.comments > 0 && ( )}

) } [V0_FILE]typescriptreact:file="components/stories-scroll.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { Plus } from "lucide-react" import { StoryViewer } from "@/components/story-viewer" interface Story { id: string name: string avatar: string storyImage: string viewers: number viewedBy?: boolean } export function StoriesScroll() { const [selectedStory, setSelectedStory] = useState(null) const [stories, setStories] = useState([ { id: "0", name: "Your Story", avatar: "/abstract-geometric-shapes.png", storyImage: "/travel-sunset.png", viewers: 0, }, { id: "1", name: "Sarah", avatar: "/abstract-geometric-shapes.png", storyImage: "/diverse-fitness-workout.png", viewers: 245, viewedBy: false, }, { id: "2", name: "Mike", avatar: "/abstract-geometric-shapes.png", storyImage: "/vibrant-pasta-dish.png", viewers: 128, viewedBy: true, }, { id: "3", name: "Jessica", avatar: "/abstract-geometric-shapes.png", storyImage: "/cooking-recipe.png", viewers: 312, viewedBy: false, }, { id: "4", name: "David", avatar: "/abstract-geometric-shapes.png", storyImage: "/social-media-post-photo.jpg", viewers: 89, viewedBy: true, }, ]) const handleViewStory = (storyId: string) => { if (storyId !== "0") { setSelectedStory(stories.find((s) => s.id === storyId) || null) } } const handleStoryViewed = (storyId: string) => { setStories( stories.map((story) => { if (story.id === storyId) { return { ...story, viewedBy: true } } return story }), ) } return ( <>

{stories.map((story) => ( ))}

{/* Story Viewer Modal */} {selectedStory && ( setSelectedStory(null)} onViewed={() => handleStoryViewed(selectedStory.id)} /> )} ) } [V0_FILE]typescriptreact:file="components/reel-card.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { Heart, MessageCircle, Share2, MoreVertical } from "lucide-react" import { Button } from "@/components/ui/button" interface Reel { id: string author: string avatar: string videoUrl: string caption: string likes: number comments: number shares: number isLiked: boolean } interface ReelCardProps { reel: Reel onLike: () => void isActive: boolean } export function ReelCard({ reel, onLike, isActive }: ReelCardProps) { const [showComments, setShowComments] = useState(false) const [comment, setComment] = useState("") const [comments, setComments] = useState([ { id: "1", author: "User123", content: "This is amazing!", timestamp: "2h ago", }, { id: "2", author: "Sarah_J", content: "Love this! 🔥", timestamp: "1h ago", }, ]) const handleAddComment = () => { if (comment.trim()) { setComments([ ...comments, { id: String(comments.length + 1), author: "You", content: comment, timestamp: "now", }, ]) setComment("") } } return (

{/* Video/Image Area */}

{/* Gradient Overlay */}

{/* Header - Author Info */}

{reel.author}

Following

{/* Options Menu */} {/* Right Action Bar */}

{/* Like Button */}

{/* Comment Button */}

{/* Share Button */}

{/* Caption at Bottom */}

{reel.caption}

{/* Comments Sidebar */} {showComments && (

{/* Header */}

Comments

{/* Comments List */}

{comments.map((c) => (

{c.author}

{c.content}

{c.timestamp}

))}

{/* Comment Input */}

setComment(e.target.value)} onKeyPress={(e) => { if (e.key === "Enter") { handleAddComment() } }} className="flex-1 px-4 py-2 rounded-full bg-white/10 text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-white/30 text-sm" />

)}

) } [V0_FILE]typescriptreact:file="components/chat-list-item.tsx" isEdit="true" isMerged="true" "use client" import { Card } from "@/components/ui/card" interface ChatListItemProps { name: string avatar: string lastMessage: string timestamp: string unread?: boolean isGroup?: boolean } export function ChatListItem({ name, avatar, lastMessage, timestamp, unread = false, isGroup = false, }: ChatListItemProps) { return (

{name}

{timestamp}

{lastMessage}

{unread &&

}

) } [V0_FILE]png:file="public/diverse-user-avatars.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/diverse-user-avatars-jNaliJbW5b5ccprrlYjj99XE0SOY9L.png" isMerged="true" [V0_FILE]jpg:file="public/social-media-post-photo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/social-media-post-photo-maIkLm80ZHVgbyIdtxTGJwns6ZFDmz.jpg" isMerged="true" [V0_FILE]png:file="public/vibrant-pasta-dish.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/vibrant-pasta-dish-rmFMxlXhVdgdLtDuqx7wQrvkJRqoHy.png" isMerged="true" [V0_FILE]png:file="public/travel-sunset.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/travel-sunset-OyIM3p4U2z9BbIeb8vSBLjnpanKwxY.png" isMerged="true" [V0_FILE]jpg:file="public/short-video-vertical.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/short-video-vertical-9MriliwXTsSV1KHi3AHpFEpXmma4MD.jpg" isMerged="true" [V0_FILE]png:file="public/diverse-fitness-workout.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/diverse-fitness-workout-h1MXfmhrZHpytAPrRhyPvK6DLnxs72.png" isMerged="true" [V0_FILE]png:file="public/cooking-recipe.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/cooking-recipe-vInXn1A9C6Wg2OygHaCUeEKAZXF0a9.png" isMerged="true" [V0_FILE]png:file="public/diverse-group-avatars.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/diverse-group-avatars-62u6ugMPqGo2R31lemD2Wg6PBfguoF.png" isMerged="true" [V0_FILE]png:file="public/user-profile-illustration.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/user-profile-illustration-1eLd6G4HoLxHP7GObwTjMrJzq3mJye.png" isMerged="true" [V0_FILE]png:file="public/social-media-post.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/social-media-post-3j56Zdazyl10GmB9fqVL8O9kHWOCS2.png" isMerged="true" [V0_FILE]png:file="public/abstract-geometric-shapes.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/abstract-geometric-shapes-kZodpXGM31YV1OwpENLkB4vSYvBL4Y.png" isMerged="true" [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/chat-thread.tsx" isMerged="true" "use client" import type React from "react" import { useState, useRef, useEffect } from "react" import { Button } from "@/components/ui/button" import { ArrowLeft, Paperclip, Smile, Send } from "lucide-react" import { Message } from "@/components/message" interface ChatThreadProps { chatId: string onBack: () => void } interface ChatMessage { id: string sender: "user" | "other" content: string timestamp: string avatar?: string senderName?: string } export function ChatThread({ chatId, onBack }: ChatThreadProps) { const [messages, setMessages] = useState([ { id: "1", sender: "other", content: "Hey! How are you doing?", timestamp: "10:30 AM", avatar: "/diverse-user-avatars.png", senderName: "Alex Johnson", }, { id: "2", sender: "user", content: "I'm doing great! Just finished the project", timestamp: "10:32 AM", }, { id: "3", sender: "other", content: "That's awesome! Can't wait to see it", timestamp: "10:33 AM", avatar: "/diverse-user-avatars.png", senderName: "Alex Johnson", }, { id: "4", sender: "user", content: "Should be ready by tomorrow!", timestamp: "10:35 AM", }, { id: "5", sender: "other", content: "That sounds great! When are you free?", timestamp: "2:30 PM", avatar: "/diverse-user-avatars.png", senderName: "Alex Johnson", }, ]) const [newMessage, setNewMessage] = useState("") const messagesEndRef = useRef(null) const scrollToBottom = () => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }) } useEffect(() => { scrollToBottom() }, [messages]) const handleSendMessage = () => { if (newMessage.trim()) { const message: ChatMessage = { id: String(messages.length + 1), sender: "user", content: newMessage, timestamp: new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", }), } setMessages([...messages, message]) setNewMessage("") } } const handleKeyPress = (e: React.KeyboardEvent) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault() handleSendMessage() } } return (

{/* Header */}

Alex Johnson

Active now

{/* Messages Area */}

{messages.map((message) => ( ))}

{/* Input Area */}

setNewMessage(e.target.value)}
              onKeyPress={handleKeyPress}
              placeholder="Type a message..."
              className="w-full px-4 py-2 rounded-lg border border-border bg-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary resize-none max-h-24"
              rows={1}
            />
          </div>

<Button size="icon" onClick={handleSendMessage} disabled={!newMessage.trim()} className="flex-shrink-0">
            <Send className="w-5 h-5" />
          </Button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/message.tsx" isMerged="true"
"use client"

interface MessageProps {
  message: {
    id: string
    sender: "user" | "other"
    content: string
    timestamp: string
    avatar?: string
    senderName?: string
  }
}

export function Message({ message }: MessageProps) {
  const isUser = message.sender === "user"

return (
    <div className={`flex gap-3 ${isUser ? "justify-end" : "justify-start"}`}>
      {!isUser && message.avatar && (
        <img
          src={message.avatar || "/placeholder.svg"}
          alt={message.senderName}
          className="w-8 h-8 rounded-full object-cover flex-shrink-0"
        />
      )}

<div className={`max-w-xs lg:max-w-md xl:max-w-lg ${isUser ? "items-end" : "items-start"} flex flex-col`}>
        {!isUser && message.senderName && (
          <p className="text-xs font-semibold text-muted-foreground mb-1">{message.senderName}</p>
        )}
        <div
          className={`rounded-2xl px-4 py-2 break-words ${
            isUser ? "bg-primary text-primary-foreground rounded-br-none" : "bg-muted text-foreground rounded-bl-none"
          }`}
        >
          <p className="text-sm">{message.content}</p>
        </div>
        <p className="text-xs text-muted-foreground mt-1">{message.timestamp}</p>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/input.tsx" isMerged="true"
import * as React from 'react'

import { cn } from '@/lib/utils'

function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
  return (
    <input
      type={type}
      data-slot="input"
      className={cn(
        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
        className,
      )}
      {...props}
    />
  )
}

export { Input }
[V0_FILE]typescriptreact:file="components/comment-modal.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { X, Heart, Send } from "lucide-react"

interface Post {
  id: string
  author: string
  avatar: string
  timestamp: string
  imageUrl: string
  caption: string
  likes: number
  comments: number
  isLiked: boolean
}

interface CommentModalProps {
  post: Post
  onClose: () => void
  onComment: (comment: string) => void
}

interface Comment {
  id: string
  author: string
  avatar: string
  content: string
  timestamp: string
  likes: number
  isLiked: boolean
}

export function CommentModal({ post, onClose, onComment }: CommentModalProps) {
  const [comments, setComments] = useState<Comment[]>([
    {
      id: "1",
      author: "John Doe",
      avatar: "/diverse-user-avatars.png",
      content: "This looks amazing! Where is this place?",
      timestamp: "2 hours ago",
      likes: 15,
      isLiked: false,
    },
    {
      id: "2",
      author: "Jane Smith",
      avatar: "/diverse-user-avatars.png",
      content: "I need to go here! Thanks for sharing",
      timestamp: "1 hour ago",
      likes: 8,
      isLiked: false,
    },
    {
      id: "3",
      author: "Mike Johnson",
      avatar: "/diverse-user-avatars.png",
      content: "Perfect spot for photos!",
      timestamp: "30 mins ago",
      likes: 5,
      isLiked: true,
    },
  ])

const [newComment, setNewComment] = useState("")

const handleAddComment = () => {
    if (newComment.trim()) {
      const comment: Comment = {
        id: String(comments.length + 1),
        author: "You",
        avatar: "/user-profile-illustration.png",
        content: newComment,
        timestamp: "just now",
        likes: 0,
        isLiked: false,
      }
      setComments([...comments, comment])
      onComment(newComment)
      setNewComment("")
    }
  }

const toggleCommentLike = (commentId: string) => {
    setComments(
      comments.map((comment) => {
        if (comment.id === commentId) {
          return {
            ...comment,
            isLiked: !comment.isLiked,
            likes: comment.isLiked ? comment.likes - 1 : comment.likes + 1,
          }
        }
        return comment
      }),
    )
  }

return (
    <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
      <Card className="w-full max-w-2xl h-[80vh] flex flex-col max-h-[80vh]">
        {/* Header */}
        <div className="flex justify-between items-center p-4 border-b border-border">
          <h2 className="text-lg font-bold">Comments</h2>
          <Button variant="ghost" size="icon" onClick={onClose}>
            <X className="w-6 h-6" />
          </Button>
        </div>

{/* Post Preview */}
        <div className="p-4 border-b border-border flex gap-3 bg-muted/50">
          <img
            src={post.avatar || "/placeholder.svg"}
            alt={post.author}
            className="w-10 h-10 rounded-full object-cover flex-shrink-0"
          />
          <div className="flex-1">
            <p className="text-sm font-semibold">{post.author}</p>
            <p className="text-sm text-foreground line-clamp-2">{post.caption}</p>
          </div>
        </div>

{/* Comments List */}
        <div className="flex-1 overflow-y-auto p-4 space-y-4">
          {comments.map((comment) => (
            <div key={comment.id} className="flex gap-3">
              <img
                src={comment.avatar || "/placeholder.svg"}
                alt={comment.author}
                className="w-8 h-8 rounded-full object-cover flex-shrink-0"
              />
              <div className="flex-1">
                <div className="flex items-center gap-2 mb-1">
                  <p className="text-sm font-semibold">{comment.author}</p>
                  <p className="text-xs text-muted-foreground">{comment.timestamp}</p>
                </div>
                <p className="text-sm text-foreground mb-2">{comment.content}</p>
                <div className="flex items-center gap-4 text-xs text-muted-foreground">
                  <button
                    onClick={() => toggleCommentLike(comment.id)}
                    className="flex items-center gap-1 hover:text-secondary transition-colors"
                  >
                    <Heart className={`w-3 h-3 ${comment.isLiked ? "fill-secondary text-secondary" : ""}`} />
                    {comment.likes > 0 && <span>{comment.likes}</span>}
                  </button>
                  <button className="hover:text-accent">Reply</button>
                </div>
              </div>
            </div>
          ))}
        </div>

{/* Comment Input */}
        <div className="p-4 border-t border-border flex gap-2">
          <input
            type="text"
            placeholder="Add a comment..."
            value={newComment}
            onChange={(e) => setNewComment(e.target.value)}
            onKeyPress={(e) => {
              if (e.key === "Enter") {
                handleAddComment()
              }
            }}
            className="flex-1 px-4 py-2 rounded-full border border-border bg-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
          />
          <Button size="sm" onClick={handleAddComment} disabled={!newComment.trim()} className="rounded-full px-4">
            <Send className="w-4 h-4" />
          </Button>
        </div>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/user-profile-card.tsx" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { MessageCircle, UserPlus } from "lucide-react"

interface UserProfileCardProps {
  username: string
  avatar: string
  bio: string
  followers: number
  following: number
  isFollowing?: boolean
  onFollow?: () => void
  onMessage?: () => void
}

export function UserProfileCard({
  username,
  avatar,
  bio,
  followers,
  following,
  isFollowing = false,
  onFollow,
  onMessage,
}: UserProfileCardProps) {
  return (
    <Card className="p-6 text-center">
      <img
        src={avatar || "/placeholder.svg"}
        alt={username}
        className="w-20 h-20 rounded-full mx-auto mb-4 object-cover"
      />
      <h3 className="text-lg font-bold mb-1">@{username}</h3>
      <p className="text-sm text-muted-foreground mb-4">{bio}</p>

<div className="flex gap-4 justify-center mb-4 text-center">
        <div>
          <div className="text-lg font-bold text-primary">{followers}</div>
          <div className="text-xs text-muted-foreground">Followers</div>
        </div>
        <div className="w-px bg-border" />
        <div>
          <div className="text-lg font-bold text-primary">{following}</div>
          <div className="text-xs text-muted-foreground">Following</div>
        </div>
      </div>

<div className="flex gap-2 justify-center">
        <Button variant={isFollowing ? "outline" : "default"} onClick={onFollow} className="gap-2">
          <UserPlus className="w-4 h-4" />
          {isFollowing ? "Following" : "Follow"}
        </Button>
        <Button variant="outline" onClick={onMessage} className="gap-2 bg-transparent">
          <MessageCircle className="w-4 h-4" />
          Message
        </Button>
      </div>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/story-viewer.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { X, ChevronRight, ChevronLeft, Eye } from "lucide-react"
import { Button } from "@/components/ui/button"

interface Story {
  id: string
  name: string
  avatar: string
  storyImage: string
  viewers: number
  viewedBy?: boolean
}

interface StoryViewerProps {
  story: Story
  onClose: () => void
  onViewed: () => void
}

export function StoryViewer({ story, onClose, onViewed }: StoryViewerProps) {
  const [progress, setProgress] = useState(0)
  const [showViewers, setShowViewers] = useState(false)

const storyDuration = 5000 // 5 seconds per story

useEffect(() => {
    onViewed()
  }, [onViewed])

useEffect(() => {
    const interval = setInterval(() => {
      setProgress((prev) => {
        if (prev >= 100) {
          onClose()
          return 100
        }
        return prev + 100 / (storyDuration / 100)
      })
    }, 100)

return () => clearInterval(interval)
  }, [onClose, storyDuration])

const viewers = [
    { id: "1", name: "John Doe", avatar: "/diverse-user-avatars.png" },
    { id: "2", name: "Jane Smith", avatar: "/diverse-user-avatars.png" },
    { id: "3", name: "Alex Chen", avatar: "/diverse-user-avatars.png" },
    { id: "4", name: "Emma Wilson", avatar: "/diverse-user-avatars.png" },
  ]

return (
    <div className="fixed inset-0 bg-black z-50 flex items-center justify-center">
      {/* Progress Bar */}
      <div className="absolute top-0 left-0 right-0 h-1 bg-white/20 z-10">
        <div className="h-full bg-white transition-all duration-100" style={{ width: `${progress}%` }} />
      </div>

{/* Header */}
      <div className="absolute top-4 left-4 right-4 z-10 flex items-center justify-between">
        <div className="flex items-center gap-3">
          <img
            src={story.avatar || "/placeholder.svg"}
            alt={story.name}
            className="w-10 h-10 rounded-full object-cover border-2 border-white"
          />
          <div className="text-white">
            <div className="font-semibold text-sm">{story.name}</div>
            <div className="text-xs text-white/70">2 hours ago</div>
          </div>
        </div>

{/* Story Image */}
      <div className="relative w-full h-full max-w-md max-h-screen">
        <img src={story.storyImage || "/placeholder.svg"} alt="Story" className="w-full h-full object-cover" />

{/* Overlay Gradient */}
        <div className="absolute inset-0 bg-gradient-to-b from-black/20 via-transparent to-black/40" />
      </div>

{/* View Count & Viewers */}
      <div className="absolute bottom-6 left-4 right-4 z-10">
        <button
          onClick={() => setShowViewers(!showViewers)}
          className="flex items-center gap-2 text-white text-sm mb-3 hover:opacity-80 transition-opacity"
        >
          <Eye className="w-5 h-5" />
          <span>{story.viewers} views</span>
        </button>

{/* Viewers List */}
        {showViewers && (
          <div className="bg-black/80 backdrop-blur-md rounded-lg p-4 space-y-3 max-h-48 overflow-y-auto">
            <h3 className="text-white font-semibold text-sm mb-3">Viewed by</h3>
            {viewers.map((viewer) => (
              <div key={viewer.id} className="flex items-center gap-3">
                <img
                  src={viewer.avatar || "/placeholder.svg"}
                  alt={viewer.name}
                  className="w-8 h-8 rounded-full object-cover"
                />
                <div className="text-white text-sm">{viewer.name}</div>
              </div>
            ))}
          </div>
        )}
      </div>

{/* Navigation Buttons */}
      <Button
        variant="ghost"
        size="icon"
        className="absolute left-4 top-1/2 -translate-y-1/2 text-white hover:bg-white/20 rounded-full"
      >
        <ChevronLeft className="w-6 h-6" />
      </Button>

{/* Reply/Reaction Area */}
      <div className="absolute bottom-6 left-4 right-4 z-10 flex gap-2 mt-4">
        <input
          type="text"
          placeholder="Reply to story..."
          className="flex-1 px-4 py-2 rounded-full bg-white/20 text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-white/50 backdrop-blur-md"
        />
        <Button size="sm" className="rounded-full">
          Send
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/pages/profile-page.tsx" isEdit="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Settings, Share2 } from "lucide-react"
import { SettingsModal } from "@/components/settings-modal"

export function ProfilePage() {
  const [showSettings, setShowSettings] = useState(false)
  const [isFollowing, setIsFollowing] = useState(false)

return (
    <main className="max-w-2xl mx-auto p-4 md:p-6">
      {/* Profile Header */}
      <div className="text-center mb-8">
        <div className="mb-4 flex justify-center">
          <img
            src="/user-profile-illustration.png"
            alt="Profile"
            className="w-32 h-32 rounded-full border-4 border-primary object-cover"
          />
        </div>
        <h1 className="text-3xl font-bold mb-2">Your Name</h1>
        <p className="text-muted-foreground mb-4">@yourusername</p>
        <p className="text-foreground mb-6 max-w-md mx-auto">
          Photography enthusiast | Coffee lover | Always exploring new places
        </p>

<div className="flex gap-2 justify-center mb-6">
          <Button variant={isFollowing ? "outline" : "default"} onClick={() => setIsFollowing(!isFollowing)}>
            {isFollowing ? "Following" : "Follow"}
          </Button>
          <Button variant="outline" size="icon">
            <Share2 className="w-4 h-4" />
          </Button>
        </div>

{/* Stats */}
        <div className="grid grid-cols-3 gap-4 mb-8">
          <Card className="p-4">
            <div className="text-2xl font-bold text-primary">856</div>
            <div className="text-sm text-muted-foreground">Posts</div>
          </Card>
          <Card className="p-4">
            <div className="text-2xl font-bold text-primary">12.5K</div>
            <div className="text-sm text-muted-foreground">Followers</div>
          </Card>
          <Card className="p-4">
            <div className="text-2xl font-bold text-primary">342</div>
            <div className="text-sm text-muted-foreground">Following</div>
          </Card>
        </div>
      </div>

{/* Profile Actions */}
      <div className="space-y-2 mb-8">
        <Button className="w-full bg-transparent" variant="outline">
          Edit Profile
        </Button>
        <Button className="w-full flex gap-2 bg-transparent" variant="outline" onClick={() => setShowSettings(true)}>
          <Settings className="w-4 h-4" />
          <span>Settings</span>
        </Button>
      </div>

{/* Posts Grid */}
      <div className="mb-4">
        <h2 className="text-xl font-bold mb-4">Posts</h2>
        <div className="grid grid-cols-3 gap-2">
          {[1, 2, 3, 4, 5, 6].map((i) => (
            <div
              key={i}
              className="aspect-square bg-muted rounded-lg overflow-hidden cursor-pointer hover:opacity-80 transition-opacity"
            >
              <img
                src={`/social-media-post.png?height=200&width=200&query=post ${i}`}
                alt={`Post ${i}`}
                className="w-full h-full object-cover"
              />
            </div>
          ))}
        </div>
      </div>

{/* Settings Modal */}
      {showSettings && <SettingsModal onClose={() => setShowSettings(false)} />}
    </main>
  )
}
[V0_FILE]typescriptreact:file="components/settings-modal.tsx"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { X, Lock, Bell, Eye, LogOut, Trash2, ChevronRight } from "lucide-react"

interface SettingsModalProps {
  onClose: () => void
}

export function SettingsModal({ onClose }: SettingsModalProps) {
  const [activeTab, setActiveTab] = useState("account")
  const [notifications, setNotifications] = useState({
    likes: true,
    comments: true,
    messages: true,
    followers: true,
  })

const [privacy, setPrivacy] = useState({
    privateAccount: false,
    allowMessages: true,
    showActivity: true,
  })

return (
    <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
      <Card className="w-full max-w-2xl max-h-[80vh] flex flex-col">
        {/* Header */}
        <div className="flex justify-between items-center p-6 border-b border-border">
          <h2 className="text-2xl font-bold">Settings</h2>
          <Button variant="ghost" size="icon" onClick={onClose}>
            <X className="w-6 h-6" />
          </Button>
        </div>

{/* Tabs */}
        <div className="flex border-b border-border overflow-x-auto">
          <button
            onClick={() => setActiveTab("account")}
            className={`flex-1 px-4 py-3 font-semibold text-center border-b-2 transition-colors ${
              activeTab === "account"
                ? "border-primary text-primary"
                : "border-transparent text-muted-foreground hover:text-foreground"
            }`}
          >
            Account
          </button>
          <button
            onClick={() => setActiveTab("notifications")}
            className={`flex-1 px-4 py-3 font-semibold text-center border-b-2 transition-colors ${
              activeTab === "notifications"
                ? "border-primary text-primary"
                : "border-transparent text-muted-foreground hover:text-foreground"
            }`}
          >
            Notifications
          </button>
          <button
            onClick={() => setActiveTab("privacy")}
            className={`flex-1 px-4 py-3 font-semibold text-center border-b-2 transition-colors ${
              activeTab === "privacy"
                ? "border-primary text-primary"
                : "border-transparent text-muted-foreground hover:text-foreground"
            }`}
          >
            Privacy
          </button>
        </div>

{/* Content */}
        <div className="flex-1 overflow-y-auto p-6 space-y-4">
          {/* Account Tab */}
          {activeTab === "account" && (
            <div className="space-y-4">
              <div className="p-4 border border-border rounded-lg hover:bg-accent/5 transition-colors cursor-pointer">
                <div className="flex items-center justify-between mb-2">
                  <h3 className="font-semibold">Change Password</h3>
                  <Lock className="w-5 h-5 text-muted-foreground" />
                </div>
                <p className="text-sm text-muted-foreground">Update your password regularly for security</p>
              </div>

<div className="p-4 border border-border rounded-lg hover:bg-accent/5 transition-colors cursor-pointer">
                <div className="flex items-center justify-between mb-2">
                  <h3 className="font-semibold">Two-Factor Authentication</h3>
                  <ChevronRight className="w-5 h-5 text-muted-foreground" />
                </div>
                <p className="text-sm text-muted-foreground">Add an extra layer of security to your account</p>
              </div>

<div className="p-4 border border-border rounded-lg hover:bg-accent/5 transition-colors cursor-pointer">
                <div className="flex items-center justify-between mb-2">
                  <h3 className="font-semibold">Blocked Users</h3>
                  <ChevronRight className="w-5 h-5 text-muted-foreground" />
                </div>
                <p className="text-sm text-muted-foreground">Manage users you have blocked</p>
              </div>

<div className="pt-4 mt-4 border-t border-border space-y-3">
                <Button className="w-full bg-transparent" variant="outline" className="gap-2 justify-start">
                  <LogOut className="w-4 h-4" />
                  Log Out
                </Button>
                <Button className="w-full" variant="destructive" className="gap-2 justify-start">
                  <Trash2 className="w-4 h-4" />
                  Delete Account
                </Button>
              </div>
            </div>
          )}

{/* Notifications Tab */}
          {activeTab === "notifications" && (
            <div className="space-y-4">
              <div className="flex items-center justify-between p-4 border border-border rounded-lg">
                <div className="flex items-center gap-3">
                  <Bell className="w-5 h-5 text-primary" />
                  <div>
                    <h3 className="font-semibold">Likes</h3>
                    <p className="text-sm text-muted-foreground">Get notified when someone likes your post</p>
                  </div>
                </div>
                <input
                  type="checkbox"
                  checked={notifications.likes}
                  onChange={(e) => setNotifications({ ...notifications, likes: e.target.checked })}
                  className="w-5 h-5 cursor-pointer"
                />
              </div>

<div className="flex items-center justify-between p-4 border border-border rounded-lg">
                <div className="flex items-center gap-3">
                  <Bell className="w-5 h-5 text-primary" />
                  <div>
                    <h3 className="font-semibold">Comments</h3>
                    <p className="text-sm text-muted-foreground">Get notified when someone comments on your post</p>
                  </div>
                </div>
                <input
                  type="checkbox"
                  checked={notifications.comments}
                  onChange={(e) => setNotifications({ ...notifications, comments: e.target.checked })}
                  className="w-5 h-5 cursor-pointer"
                />
              </div>

<div className="flex items-center justify-between p-4 border border-border rounded-lg">
                <div className="flex items-center gap-3">
                  <Bell className="w-5 h-5 text-primary" />
                  <div>
                    <h3 className="font-semibold">Messages</h3>
                    <p className="text-sm text-muted-foreground">Get notified when you receive a message</p>
                  </div>
                </div>
                <input
                  type="checkbox"
                  checked={notifications.messages}
                  onChange={(e) => setNotifications({ ...notifications, messages: e.target.checked })}
                  className="w-5 h-5 cursor-pointer"
                />
              </div>

<div className="flex items-center justify-between p-4 border border-border rounded-lg">
                <div className="flex items-center gap-3">
                  <Bell className="w-5 h-5 text-primary" />
                  <div>
                    <h3 className="font-semibold">New Followers</h3>
                    <p className="text-sm text-muted-foreground">Get notified when someone follows you</p>
                  </div>
                </div>
                <input
                  type="checkbox"
                  checked={notifications.followers}
                  onChange={(e) => setNotifications({ ...notifications, followers: e.target.checked })}
                  className="w-5 h-5 cursor-pointer"
                />
              </div>
            </div>
          )}

{/* Privacy Tab */}
          {activeTab === "privacy" && (
            <div className="space-y-4">
              <div className="flex items-center justify-between p-4 border border-border rounded-lg">
                <div className="flex items-center gap-3">
                  <Eye className="w-5 h-5 text-primary" />
                  <div>
                    <h3 className="font-semibold">Private Account</h3>
                    <p className="text-sm text-muted-foreground">Only approved followers can see your posts</p>
                  </div>
                </div>
                <input
                  type="checkbox"
                  checked={privacy.privateAccount}
                  onChange={(e) => setPrivacy({ ...privacy, privateAccount: e.target.checked })}
                  className="w-5 h-5 cursor-pointer"
                />
              </div>

<div className="flex items-center justify-between p-4 border border-border rounded-lg">
                <div className="flex items-center gap-3">
                  <Lock className="w-5 h-5 text-primary" />
                  <div>
                    <h3 className="font-semibold">Allow Direct Messages</h3>
                    <p className="text-sm text-muted-foreground">Let anyone send you direct messages</p>
                  </div>
                </div>
                <input
                  type="checkbox"
                  checked={privacy.allowMessages}
                  onChange={(e) => setPrivacy({ ...privacy, allowMessages: e.target.checked })}
                  className="w-5 h-5 cursor-pointer"
                />
              </div>

<div className="flex items-center justify-between p-4 border border-border rounded-lg">
                <div className="flex items-center gap-3">
                  <Eye className="w-5 h-5 text-primary" />
                  <div>
                    <h3 className="font-semibold">Show Activity Status</h3>
                    <p className="text-sm text-muted-foreground">Let others see when you were last active</p>
                  </div>
                </div>
                <input
                  type="checkbox"
                  checked={privacy.showActivity}
                  onChange={(e) => setPrivacy({ ...privacy, showActivity: e.target.checked })}
                  className="w-5 h-5 cursor-pointer"
                />
              </div>
            </div>
          )}
        </div>

{/* Footer */}
        <div className="p-6 border-t border-border flex justify-end gap-2">
          <Button variant="outline" onClick={onClose}>
            Cancel
          </Button>
          <Button onClick={onClose}>Save Changes</Button>
        </div>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/notifications-center.tsx"
"use client"

import { Bell, Heart, MessageCircle, UserPlus, Share2 } from "lucide-react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"

interface Notification {
  id: string
  type: "like" | "comment" | "follow" | "share" | "message"
  user: string
  avatar: string
  action: string
  timestamp: string
  isRead: boolean
}

export function NotificationsCenter() {
  const notifications: Notification[] = [
    {
      id: "1",
      type: "like",
      user: "Sarah Johnson",
      avatar: "/diverse-user-avatars.png",
      action: "liked your post",
      timestamp: "5 minutes ago",
      isRead: false,
    },
    {
      id: "2",
      type: "comment",
      user: "Alex Chen",
      avatar: "/diverse-user-avatars.png",
      action: "commented on your post: Great work!",
      timestamp: "2 hours ago",
      isRead: false,
    },
    {
      id: "3",
      type: "follow",
      user: "Emma Wilson",
      avatar: "/diverse-user-avatars.png",
      action: "started following you",
      timestamp: "1 day ago",
      isRead: true,
    },
    {
      id: "4",
      type: "share",
      user: "John Doe",
      avatar: "/diverse-user-avatars.png",
      action: "shared your post",
      timestamp: "2 days ago",
      isRead: true,
    },
    {
      id: "5",
      type: "message",
      user: "Design Team",
      avatar: "/diverse-group-avatars.png",
      action: "sent you a message",
      timestamp: "3 days ago",
      isRead: true,
    },
  ]

const getIcon = (type: Notification["type"]) => {
    switch (type) {
      case "like":
        return <Heart className="w-5 h-5 text-secondary" />
      case "comment":
        return <MessageCircle className="w-5 h-5 text-accent" />
      case "follow":
        return <UserPlus className="w-5 h-5 text-primary" />
      case "share":
        return <Share2 className="w-5 h-5 text-accent" />
      case "message":
        return <MessageCircle className="w-5 h-5 text-primary" />
      default:
        return <Bell className="w-5 h-5" />
    }
  }

return (
    <main className="max-w-2xl mx-auto p-4 md:p-6">
      {/* Header */}
      <div className="mb-6 flex justify-between items-center">
        <h1 className="text-2xl font-bold">Notifications</h1>
        <Button variant="ghost" size="sm">
          Mark all as read
        </Button>
      </div>

{/* Notifications List */}
      <div className="space-y-2">
        {notifications.map((notification) => (
          <Card
            key={notification.id}
            className={`p-4 cursor-pointer transition-colors hover:bg-accent/5 ${
              !notification.isRead ? "bg-primary/5 border-l-4 border-primary" : ""
            }`}
          >
            <div className="flex gap-4">
              {/* Avatar */}
              <img
                src={notification.avatar || "/placeholder.svg"}
                alt={notification.user}
                className="w-12 h-12 rounded-full object-cover flex-shrink-0"
              />

{/* Content */}
              <div className="flex-1 min-w-0">
                <div className="flex items-start justify-between gap-3">
                  <div>
                    <p className="text-sm">
                      <span className="font-semibold">{notification.user}</span>{" "}
                      <span className="text-foreground">{notification.action}</span>
                    </p>
                    <p className="text-xs text-muted-foreground mt-1">{notification.timestamp}</p>
                  </div>
                  {getIcon(notification.type)}
                </div>
              </div>

{/* Unread Indicator */}
              {!notification.isRead && <div className="w-2 h-2 rounded-full bg-secondary flex-shrink-0 self-center" />}
            </div>
          </Card>
        ))}
      </div>

{/* Empty State */}
      {notifications.length === 0 && (
        <div className="text-center py-12">
          <Bell className="w-12 h-12 mx-auto text-muted-foreground mb-4" />
          <p className="text-muted-foreground">No notifications yet</p>
        </div>
      )}
    </main>
  )
}</article></body></html>