[V0_FILE]typescriptreact:file="components/user-nav.tsx" isMerged="true" "use client" import { useState } from "react" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Settings, LogOut, User, ImageIcon } from "lucide-react" export function UserNav() { const [open, setOpen] = useState(false) const [profileOpen, setProfileOpen] = useState(false) return ( <>

GamerRex

gamer.rex@example.com

Settings Log out ) } [V0_FILE]typescriptreact:file="components/sidebar.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" import { Home, Users, Settings, PlusCircle, Gamepad2 } from "lucide-react" export function Sidebar() { return (

NeonConnect

Home

Friends

Settings

Add Server (Coming Soon)

) } [V0_FILE]typescriptreact:file="components/chat-area.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Smile, Paperclip, Gift, Send, Phone, Video, Info } from "lucide-react" type Message = { id: string sender: "user" | "friend" content: string timestamp: string } export function ChatArea() { const [messages, setMessages] = useState([ { id: "1", sender: "friend", content: "Hey! Are you up for some gaming tonight?", timestamp: "Today at 2:30 PM" }, { id: "2", sender: "user", content: "What do you want to play?", timestamp: "Today at 2:32 PM" }, { id: "3", sender: "friend", content: "I was thinking we could try that new co-op game that just came out. The graphics look amazing!", timestamp: "Today at 2:33 PM", }, { id: "4", sender: "user", content: "Sounds good to me! What time works for you?", timestamp: "Today at 2:35 PM" }, { id: "5", sender: "friend", content: "How about 8 PM? I'll send you an invite.", timestamp: "Today at 2:36 PM" }, ]) const [newMessage, setNewMessage] = useState("") const handleSendMessage = (e: React.FormEvent) => { e.preventDefault() if (!newMessage.trim()) return const message: Message = { id: Date.now().toString(), sender: "user", content: newMessage, timestamp: "Just now", } setMessages([...messages, message]) setNewMessage("") } return (

CyberNinja

Online - Playing Cyberpunk 2077

{messages.map((message) => (

{message.sender === "friend" && ( CN )}

{message.content}

{message.timestamp}

))}

) } [V0_FILE]typescriptreact:file="tailwind.config.ts" isMerged="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, 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)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --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: 263.4 70% 50.4%; --primary-foreground: 210 40% 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: 240 4.9% 83.9%; --radius: 0.5rem; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } /* Custom scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #1e1e1e; } ::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #444; } /* Neon glow effects */ .neon-glow { box-shadow: 0 0 10px rgba(138, 43, 226, 0.5), 0 0 20px rgba(138, 43, 226, 0.3); } .neon-text { text-shadow: 0 0 5px rgba(138, 43, 226, 0.7), 0 0 10px rgba(138, 43, 226, 0.5); } [V0_FILE]typescriptreact:file="components/friend-profile.tsx" "use client" import { useState } from "react" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" import { Dialog, DialogContent } from "@/components/ui/dialog" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Badge } from "@/components/ui/badge" import { Separator } from "@/components/ui/separator" import { MessageSquare, UserPlus, UserMinus, Gift, Bell, BellOff, GamepadIcon, Clock, Star, Activity, } from "lucide-react" export type FriendData = { id: string name: string avatar: string status: "online" | "idle" | "dnd" | "offline" customStatus?: string game?: string banner?: string joinDate: string mutualFriends: number bio?: string favoriteGames?: string[] recentActivities?: { type: "achievement" | "game" | "friend" | "status" content: string time: string }[] } interface FriendProfileProps { friend: FriendData | null open: boolean onOpenChange: (open: boolean) => void } export function FriendProfile({ friend, open, onOpenChange }: FriendProfileProps) { const [isFriend, setIsFriend] = useState(true) const [isNotified, setIsNotified] = useState(true) if (!friend) return null const statusColors = { online: "bg-green-500", idle: "bg-yellow-500", dnd: "bg-red-500", offline: "bg-zinc-500", } const statusText = { online: "Online", idle: "Idle", dnd: "Do Not Disturb", offline: "Offline", } return (

CyberNinja

{friend.name}

Bio

Member Since

Note

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This