[V0_FILE]plaintext:file=".gitignore" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts [V0_FILE]markdown:file="README.md" # X2Notion *Automatically synced with your [v0.app](https://v0.app) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/moxdev/v0-social-posts) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.app-black?style=for-the-badge)](https://v0.app/chat/projects/Adc9PXl1xH1) ## Overview This repository will stay in sync with your deployed chats on [v0.app](https://v0.app). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.app](https://v0.app). ## Deployment Your project is live at: **[https://vercel.com/moxdev/v0-social-posts](https://vercel.com/moxdev/v0-social-posts)** ## Build your app Continue building your app on: **[https://v0.app/chat/projects/Adc9PXl1xH1](https://v0.app/chat/projects/Adc9PXl1xH1)** ## How It Works 1. Create and modify your project using [v0.app](https://v0.app) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]css:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; @layer utilities { .text-balance { text-wrap: balance; } } @layer base { :root { --background: 0 0% 100%; --foreground: 0 0% 3.9%; --card: 0 0% 100%; --card-foreground: 0 0% 3.9%; --popover: 0 0% 100%; --popover-foreground: 0 0% 3.9%; --primary: 0 0% 9%; --primary-foreground: 0 0% 98%; --secondary: 0 0% 96.1%; --secondary-foreground: 0 0% 9%; --muted: 0 0% 96.1%; --muted-foreground: 0 0% 45.1%; --accent: 0 0% 96.1%; --accent-foreground: 0 0% 9%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 0 0% 89.8%; --input: 0 0% 89.8%; --ring: 0 0% 3.9%; --chart-1: 12 76% 61%; --chart-2: 173 58% 39%; --chart-3: 197 37% 24%; --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; --radius: 0.5rem; --sidebar-background: 0 0% 98%; --sidebar-foreground: 240 5.3% 26.1%; --sidebar-primary: 240 5.9% 10%; --sidebar-primary-foreground: 0 0% 98%; --sidebar-accent: 240 4.8% 95.9%; --sidebar-accent-foreground: 240 5.9% 10%; --sidebar-border: 220 13% 91%; --sidebar-ring: 217.2 91.2% 59.8%; } .dark { --background: 0 0% 3.9%; --foreground: 0 0% 98%; --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; --popover: 0 0% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 0 0% 9%; --secondary: 0 0% 14.9%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 14.9%; --muted-foreground: 0 0% 63.9%; --accent: 0 0% 14.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 0 0% 14.9%; --input: 0 0% 14.9%; --ring: 0 0% 83.1%; --chart-1: 220 70% 50%; --chart-2: 160 60% 45%; --chart-3: 30 80% 55%; --chart-4: 280 65% 60%; --chart-5: 340 75% 55%; --sidebar-background: 240 5.9% 10%; --sidebar-foreground: 240 4.8% 95.9%; --sidebar-primary: 224.3 76.3% 48%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 240 3.7% 15.9%; --sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-border: 240 3.7% 15.9%; --sidebar-ring: 217.2 91.2% 59.8%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/layout.tsx" 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: "X2Notion - Knowledge Base", description: "Aggregate and organize your bookmarked tweets and Reddit posts", generator: 'v0.app' } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/loading.tsx" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/page.tsx" "use client" import { posts as initialPosts } from "@/lib/data" import { DashboardClient } from "@/components/dashboard-client" export default function DashboardPage() { return } [V0_FILE]json:file="components.json" { "$schema": "https://ui.shadcn.com/schema.json", "style": "default", "rsc": true, "tsx": true, "tailwind": { "config": "tailwind.config.ts", "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" } [V0_FILE]typescriptreact:file="components/dashboard-client.tsx" "use client" import type React from "react" import { useState, useMemo, useCallback, useTransition } from "react" import { Sidebar } from "@/components/sidebar" import { PostCard } from "@/components/post-card" import { LoginForm } from "@/components/login-form" import { ProfilePage } from "@/components/profile-page" import { Search, Filter, X } from "lucide-react" import type { Post } from "@/lib/data" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" interface DashboardClientProps { initialPosts: Post[] } export function DashboardClient({ initialPosts }: DashboardClientProps) { const [posts] = useState(initialPosts) const [filter, setFilter] = useState("all") const [searchQuery, setSearchQuery] = useState("") const [isPending, startTransition] = useTransition() const [currentView, setCurrentView] = useState<"dashboard" | "profile">("dashboard") const [user, setUser] = useState<{ id: string name: string email: string avatar: string bio: string joinedDate: string } | null>(null) const handleLogin = useCallback((email: string, password: string) => { startTransition(() => { setUser({ id: "1", name: "John Doe", email: email, avatar: "/placeholder.svg?height=40&width=40", bio: "Knowledge enthusiast and content curator", joinedDate: "2024-01-15T00:00:00Z", }) }) }, []) const handleLogout = useCallback(() => { startTransition(() => { setUser(null) setCurrentView("dashboard") }) }, []) const handleUpdateProfile = useCallback( (updates: any) => { if (user) { startTransition(() => { setUser({ ...user, ...updates }) }) } }, [user], ) const handleShowProfile = useCallback(() => { setCurrentView("profile") }, []) const handleBackToDashboard = useCallback(() => { setCurrentView("dashboard") }, []) const handleSearchChange = useCallback((e: React.ChangeEvent) => { startTransition(() => { setSearchQuery(e.target.value) }) }, []) const filteredPosts = useMemo(() => { return posts .filter((post) => { if (filter === "all") return true return post.source.toLowerCase() === filter }) .filter((post) => { if (!searchQuery) return true const query = searchQuery.toLowerCase() return ( post.content.toLowerCase().includes(query) || post.author.toLowerCase().includes(query) || post.tags.some((tag) => tag.toLowerCase().includes(query)) ) }) }, [posts, filter, searchQuery]) if (!user) { return } if (currentView === "profile") { return } return (

{/* Desktop header */}

My Knowledge Base

Aggregated posts from X and Reddit.

{/* Search bar */}

{searchQuery && ( )}

{/* Results count - mobile only */}

{isPending ? "Searching..." : `${filteredPosts.length} posts found`}

{/* Posts grid */}

{isPending ? ( // Loading skeleton Array.from({ length: 3 }).map((_, i) => (

)) ) : filteredPosts.length > 0 ? ( filteredPosts.map((post) => ) ) : (

No posts found

Try adjusting your search terms or filters

)}

) } [V0_FILE]typescriptreact:file="components/login-form.tsx" "use client" import { useState } from "react" import type React from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" interface LoginFormProps { onLogin: (email: string, password: string) => void } export function LoginForm({ onLogin }: LoginFormProps) { const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [isLoading, setIsLoading] = useState(false) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) // Simulate loading for better UX await new Promise((resolve) => setTimeout(resolve, 500)) onLogin(email, password) setIsLoading(false) } const handleDemoLogin = async () => { setIsLoading(true) await new Promise((resolve) => setTimeout(resolve, 500)) onLogin("demo@example.com", "demo123") setIsLoading(false) } return (

Welcome back Sign in to your knowledge base

) } [V0_FILE]typescriptreact:file="components/mobile-avatar.tsx" "use client" import { Avatar, AvatarFallback } from "@/components/ui/avatar" import { OptimizedImage } from "./optimized-image" import { cn } from "@/lib/utils" interface MobileAvatarProps { src?: string alt: string fallback: string size?: "sm" | "md" | "lg" className?: string } const sizeClasses = { sm: "h-8 w-8 text-xs", md: "h-10 w-10 text-sm", lg: "h-12 w-12 text-base", } export function MobileAvatar({ src, alt, fallback, size = "md", className }: MobileAvatarProps) { return ( {src ? ( ) : ( {fallback} )} ) } [V0_FILE]typescriptreact:file="components/optimized-image.tsx" "use client" import Image from "next/image" import { useState } from "react" import { cn } from "@/lib/utils" interface OptimizedImageProps { src: string alt: string width?: number height?: number className?: string priority?: boolean sizes?: string } export function OptimizedImage({ src, alt, width = 40, height = 40, className, priority = false, sizes = "(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw", }: OptimizedImageProps) { const [isLoading, setIsLoading] = useState(true) const [hasError, setHasError] = useState(false) if (hasError) { return (

No image

) } return (

setIsLoading(false)} onError={() => setHasError(true)} /> {isLoading &&

}

) } [V0_FILE]typescriptreact:file="components/post-card.tsx" "use client" import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { MobileAvatar } from "./mobile-avatar" import { Twitter, Rss, ExternalLink, Heart, Share, Bookmark } from "lucide-react" import type { Post } from "@/lib/data" import { useState } from "react" import { cn } from "@/lib/utils" interface PostCardProps { post: Post } export function PostCard({ post }: PostCardProps) { const [isLiked, setIsLiked] = useState(false) const [isBookmarked, setIsBookmarked] = useState(false) const [isExpanded, setIsExpanded] = useState(false) const SourceIcon = post.source === "twitter" ? Twitter : Rss const isLongContent = post.content.length > 280 const handleShare = async () => { if (navigator.share) { try { await navigator.share({ title: `Post by ${post.author}`, text: post.content, url: post.url, }) } catch (error) { // Fallback to clipboard navigator.clipboard.writeText(post.url) } } else { navigator.clipboard.writeText(post.url) } } return (

{post.author}

@{post.authorHandle}

{isLongContent && !isExpanded ? ( <>

{post.content.slice(0, 280)}...

) : (

{post.content}

)} {isLongContent && isExpanded && ( )}

{/* Tags */}

{post.tags.slice(0, 4).map((tag) => ( {tag} ))} {post.tags.length > 4 && ( +{post.tags.length - 4} )}

{/* Actions and Date */}

{new Date(post.timestamp).toLocaleDateString(undefined, { month: "short", day: "numeric", year: new Date(post.timestamp).getFullYear() !== new Date().getFullYear() ? "numeric" : undefined, })}

) } [V0_FILE]typescriptreact:file="components/profile-page.tsx" "use client" import { useState } from "react" import { MobileAvatar } from "./mobile-avatar" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Mail, Calendar, Edit2, Save, ArrowLeft, Settings, Share } from "lucide-react" interface ProfilePageProps { user: { id: string name: string email: string avatar: string bio: string joinedDate: string } onUpdateProfile: (updates: Partial) => void onBack: () => void } export function ProfilePage({ user, onUpdateProfile, onBack }: ProfilePageProps) { const [isEditing, setIsEditing] = useState(false) const [formData, setFormData] = useState({ name: user.name, bio: user.bio, }) const handleSave = () => { onUpdateProfile(formData) setIsEditing(false) } const handleCancel = () => { setFormData({ name: user.name, bio: user.bio }) setIsEditing(false) } return (

{/* Header */}

Profile

{!isEditing && ( <> )}

{/* Content */}

{/* Profile Header */}

{/* Avatar */}

n[0]) .join("")} size="lg" className="h-24 w-24" />

{/* User Info */} {!isEditing ? (

{user.name}

{user.bio &&

{user.bio}

}

) : (

Display Name setFormData((prev) => ({ ...prev, name: e.target.value }))} className="touch-manipulation text-base h-12" placeholder="Enter your name" maxLength={50} />

{formData.name.length}/50 characters

Bio

setFormData((prev) => ({ ...prev, bio: e.target.value }))}
                      placeholder="Tell us about yourself..."
                      rows={4}
                      className="touch-manipulation resize-none text-base min-h-[120px]"
                      maxLength={200}
                    />
                    <p className="text-xs text-gray-500 dark:text-gray-400">{formData.bio.length}/200 characters</p>
                  </div>

<div className="flex flex-col gap-3 pt-2">
                    <Button
                      onClick={handleSave}
                      className="w-full touch-manipulation h-12 text-base font-medium"
                      disabled={!formData.name.trim()}
                    >
                      <Save className="h-4 w-4 mr-2" />
                      Save Changes
                    </Button>
                    <Button
                      variant="outline"
                      onClick={handleCancel}
                      className="w-full bg-transparent touch-manipulation h-12 text-base"
                    >
                      Cancel
                    </Button>
                  </div>
                </div>
              )}
            </div>
          </CardContent>
        </Card>

{/* Stats */}
        <Card className="mb-6">
          <CardContent className="p-6">
            <h3 className="text-lg font-semibold mb-4">Statistics</h3>
            <div className="grid grid-cols-3 gap-4">
              <div className="text-center">
                <p className="text-2xl font-bold text-gray-900 dark:text-gray-50">42</p>
                <p className="text-sm text-gray-500 dark:text-gray-400">Posts Saved</p>
              </div>
              <div className="text-center">
                <p className="text-2xl font-bold text-gray-900 dark:text-gray-50">12</p>
                <p className="text-sm text-gray-500 dark:text-gray-400">Tags Used</p>
              </div>
              <div className="text-center">
                <p className="text-2xl font-bold text-gray-900 dark:text-gray-50">7</p>
                <p className="text-sm text-gray-500 dark:text-gray-400">Days Active</p>
              </div>
            </div>
          </CardContent>
        </Card>

{/* Account Info */}
        <Card>
          <CardContent className="p-6">
            <h3 className="text-lg font-semibold mb-4">Account Information</h3>
            <div className="space-y-4">
              <div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-800/50 rounded-lg">
                <Mail className="h-5 w-5 text-gray-500 dark:text-gray-400" />
                <div>
                  <p className="text-sm text-gray-500 dark:text-gray-400">Email</p>
                  <p className="font-medium">{user.email}</p>
                </div>
              </div>
              <div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-800/50 rounded-lg">
                <Calendar className="h-5 w-5 text-gray-500 dark:text-gray-400" />
                <div>
                  <p className="text-sm text-gray-500 dark:text-gray-400">Member Since</p>
                  <p className="font-medium">
                    {new Date(user.joinedDate).toLocaleDateString("en-US", {
                      year: "numeric",
                      month: "long",
                      day: "numeric",
                    })}
                  </p>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/sidebar.tsx"
"use client"

import { useState, useEffect } from "react"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Book, Twitter, Rss, Menu, X } from "lucide-react"
import { ThemeToggle } from "./theme-toggle"
import { UserMenu } from "./user-menu"

interface SidebarProps {
  currentFilter: string
  setFilter: (filter: string) => void
  user: {
    id: string
    name: string
    email: string
    avatar: string
    bio: string
    joinedDate: string
  }
  onLogout: () => void
  onShowProfile: () => void
}

export function Sidebar({ currentFilter, setFilter, user, onLogout, onShowProfile }: SidebarProps) {
  const [isOpen, setIsOpen] = useState(false)
  const [isMobile, setIsMobile] = useState(false)

useEffect(() => {
    const checkMobile = () => {
      setIsMobile(window.innerWidth < 1024)
    }

checkMobile()
    window.addEventListener("resize", checkMobile)
    return () => window.removeEventListener("resize", checkMobile)
  }, [])

// Close sidebar when clicking outside on mobile
  useEffect(() => {
    if (isOpen && isMobile) {
      document.body.style.overflow = "hidden"
    } else {
      document.body.style.overflow = "unset"
    }

return () => {
      document.body.style.overflow = "unset"
    }
  }, [isOpen, isMobile])

const navItems = [
    { name: "All Posts", icon: Book, filter: "all" },
    { name: "Twitter", icon: Twitter, filter: "twitter" },
    { name: "Reddit", icon: Rss, filter: "reddit" },
  ]

const handleFilterClick = (filter: string) => {
    setFilter(filter)
    if (isOpen && isMobile) {
      setIsOpen(false)
    }
  }

const SidebarContent = () => (
    <div className="flex flex-col h-full">
      {/* Desktop header */}
      <div className="p-4 border-b border-gray-200 dark:border-gray-800 hidden lg:flex lg:justify-between lg:items-center">
        <h2 className="text-lg font-semibold tracking-tight">Knowledge</h2>
        <div className="flex items-center gap-2">
          <ThemeToggle />
          <UserMenu user={user} onLogout={onLogout} onShowProfile={onShowProfile} />
        </div>
      </div>

{/* Mobile header */}
      <div className="flex justify-between items-center p-4 border-b border-gray-200 dark:border-gray-800 lg:hidden">
        <h2 className="text-lg font-semibold tracking-tight">Knowledge</h2>
        <Button variant="ghost" size="icon" onClick={() => setIsOpen(false)} className="h-8 w-8 touch-manipulation">
          <X className="h-5 w-5" />
          <span className="sr-only">Close menu</span>
        </Button>
      </div>

{/* Navigation */}
      <nav className="flex-1 px-2 py-4 space-y-1 overflow-y-auto">
        {navItems.map((item) => (
          <Button
            key={item.name}
            variant={currentFilter === item.filter ? "secondary" : "ghost"}
            className="w-full justify-start h-10 touch-manipulation text-left"
            onClick={() => handleFilterClick(item.filter)}
          >
            <item.icon className="mr-3 h-4 w-4 flex-shrink-0" />
            <span className="truncate">{item.name}</span>
          </Button>
        ))}
      </nav>

{/* Mobile user section */}
      <div className="p-4 border-t border-gray-200 dark:border-gray-800 lg:hidden">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3 flex-1 min-w-0">
            <UserMenu user={user} onLogout={onLogout} onShowProfile={onShowProfile} />
            <div className="flex-1 min-w-0">
              <p className="font-medium text-sm truncate">{user.name}</p>
              <p className="text-xs text-muted-foreground truncate">{user.email}</p>
            </div>
          </div>
          <ThemeToggle />
        </div>
      </div>
    </div>
  )

return (
    <>
      {/* Mobile header */}
      <header className="fixed top-0 left-0 right-0 h-14 bg-white/95 dark:bg-gray-950/95 backdrop-blur-sm border-b border-gray-200 dark:border-gray-800 z-30 lg:hidden">
        <div className="flex items-center justify-between px-4 h-full">
          <div className="flex items-center gap-3">
            <Button variant="ghost" size="icon" onClick={() => setIsOpen(true)} className="h-8 w-8 touch-manipulation">
              <Menu className="h-5 w-5" />
              <span className="sr-only">Open menu</span>
            </Button>
            <h1 className="text-lg font-semibold tracking-tight">Knowledge</h1>
          </div>
          <div className="flex items-center gap-2">
            <ThemeToggle />
            <UserMenu user={user} onLogout={onLogout} onShowProfile={onShowProfile} />
          </div>
        </div>
      </header>

{/* Desktop sidebar */}
      <aside className="hidden lg:fixed lg:inset-y-0 lg:left-0 lg:z-20 lg:w-64 lg:bg-white lg:dark:bg-gray-900 lg:border-r lg:border-gray-200 lg:dark:border-gray-800 lg:block">
        <SidebarContent />
      </aside>

{/* Mobile sidebar */}
      <aside
        className={cn(
          "fixed inset-y-0 left-0 z-40 w-64 bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 transform transition-transform duration-300 ease-in-out lg:hidden",
          isOpen ? "translate-x-0" : "-translate-x-full",
        )}
      >
        <SidebarContent />
      </aside>

{/* Mobile overlay */}
      {isOpen && (
        <div
          className="fixed inset-0 bg-black/50 z-30 lg:hidden touch-manipulation"
          onClick={() => setIsOpen(false)}
          style={{ touchAction: "none" }}
        />
      )}
    </>
  )
}
[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 <NextThemesProvider {...props}>{children}</NextThemesProvider>
}
[V0_FILE]typescriptreact:file="components/theme-toggle.tsx"
"use client"
import { Moon, Sun } from "lucide-react"
import { useTheme } from "next-themes"
import { Button } from "@/components/ui/button"

export function ThemeToggle() {
  const { theme, setTheme } = useTheme()

return (
    <Button
      variant="ghost"
      size="icon"
      onClick={() => setTheme(theme === "light" ? "dark" : "light")}
      className="h-9 w-9"
    >
      <Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
      <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
      <span className="sr-only">Toggle theme</span>
    </Button>
  )
}
[V0_FILE]typescriptreact:file="components/ui/avatar.tsx"
"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<typeof AvatarPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Root
    ref={ref}
    className={cn(
      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
      className
    )}
    {...props}
  />
))
Avatar.displayName = AvatarPrimitive.Root.displayName

const AvatarImage = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Image>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Image
    ref={ref}
    className={cn("aspect-square h-full w-full", className)}
    {...props}
  />
))
AvatarImage.displayName = AvatarPrimitive.Image.displayName

const AvatarFallback = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Fallback>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Fallback
    ref={ref}
    className={cn(
      "flex h-full w-full items-center justify-center rounded-full bg-muted",
      className
    )}
    {...props}
  />
))
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName

export { Avatar, AvatarImage, AvatarFallback }
[V0_FILE]typescriptreact:file="components/ui/badge.tsx"
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

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

const badgeVariants = cva(
  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
  {
    variants: {
      variant: {
        default:
          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
        secondary:
          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
        destructive:
          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
        outline: "text-foreground",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)

export interface BadgeProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof badgeVariants> {}

function Badge({ className, variant, ...props }: BadgeProps) {
  return (
    <div className={cn(badgeVariants({ variant }), className)} {...props} />
  )
}

export { Badge, badgeVariants }
[V0_FILE]typescriptreact:file="components/ui/button.tsx"
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 gap-2 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 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
  {
    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<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : "button"
    return (
      <Comp
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      />
    )
  }
)
Button.displayName = "Button"

export { Button, buttonVariants }
[V0_FILE]typescriptreact:file="components/ui/card.tsx"
import * as React from "react"

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

const Card = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "rounded-lg border bg-card text-card-foreground shadow-sm",
      className
    )}
    {...props}
  />
))
Card.displayName = "Card"

const CardHeader = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("flex flex-col space-y-1.5 p-6", className)}
    {...props}
  />
))
CardHeader.displayName = "CardHeader"

const CardTitle = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "text-2xl font-semibold leading-none tracking-tight",
      className
    )}
    {...props}
  />
))
CardTitle.displayName = "CardTitle"

const CardDescription = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("text-sm text-muted-foreground", className)}
    {...props}
  />
))
CardDescription.displayName = "CardDescription"

const CardContent = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
))
CardContent.displayName = "CardContent"

const CardFooter = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("flex items-center p-6 pt-0", className)}
    {...props}
  />
))
CardFooter.displayName = "CardFooter"

export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
[V0_FILE]typescriptreact:file="components/ui/dropdown-menu.tsx"
"use client"

import * as React from "react"
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
import { Check, ChevronRight, Circle } from "lucide-react"

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

const DropdownMenu = DropdownMenuPrimitive.Root

const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger

const DropdownMenuGroup = DropdownMenuPrimitive.Group

const DropdownMenuPortal = DropdownMenuPrimitive.Portal

const DropdownMenuSub = DropdownMenuPrimitive.Sub

const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup

const DropdownMenuSubTrigger = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
    inset?: boolean
  }
>(({ className, inset, children, ...props }, ref) => (
  <DropdownMenuPrimitive.SubTrigger
    ref={ref}
    className={cn(
      "flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
      inset && "pl-8",
      className
    )}
    {...props}
  >
    {children}
    <ChevronRight className="ml-auto" />
  </DropdownMenuPrimitive.SubTrigger>
))
DropdownMenuSubTrigger.displayName =
  DropdownMenuPrimitive.SubTrigger.displayName

const DropdownMenuSubContent = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
>(({ className, ...props }, ref) => (
  <DropdownMenuPrimitive.SubContent
    ref={ref}
    className={cn(
      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
      className
    )}
    {...props}
  />
))
DropdownMenuSubContent.displayName =
  DropdownMenuPrimitive.SubContent.displayName

const DropdownMenuContent = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
>(({ className, sideOffset = 4, ...props }, ref) => (
  <DropdownMenuPrimitive.Portal>
    <DropdownMenuPrimitive.Content
      ref={ref}
      sideOffset={sideOffset}
      className={cn(
        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
        className
      )}
      {...props}
    />
  </DropdownMenuPrimitive.Portal>
))
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName

const DropdownMenuItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <DropdownMenuPrimitive.Item
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
      inset && "pl-8",
      className
    )}
    {...props}
  />
))
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName

const DropdownMenuCheckboxItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
>(({ className, children, checked, ...props }, ref) => (
  <DropdownMenuPrimitive.CheckboxItem
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className
    )}
    checked={checked}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <DropdownMenuPrimitive.ItemIndicator>
        <Check className="h-4 w-4" />
      </DropdownMenuPrimitive.ItemIndicator>
    </span>
    {children}
  </DropdownMenuPrimitive.CheckboxItem>
))
DropdownMenuCheckboxItem.displayName =
  DropdownMenuPrimitive.CheckboxItem.displayName

const DropdownMenuRadioItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
>(({ className, children, ...props }, ref) => (
  <DropdownMenuPrimitive.RadioItem
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className
    )}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <DropdownMenuPrimitive.ItemIndicator>
        <Circle className="h-2 w-2 fill-current" />
      </DropdownMenuPrimitive.ItemIndicator>
    </span>
    {children}
  </DropdownMenuPrimitive.RadioItem>
))
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName

const DropdownMenuLabel = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <DropdownMenuPrimitive.Label
    ref={ref}
    className={cn(
      "px-2 py-1.5 text-sm font-semibold",
      inset && "pl-8",
      className
    )}
    {...props}
  />
))
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName

const DropdownMenuSeparator = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <DropdownMenuPrimitive.Separator
    ref={ref}
    className={cn("-mx-1 my-1 h-px bg-muted", className)}
    {...props}
  />
))
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName

const DropdownMenuShortcut = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLSpanElement>) => {
  return (
    <span
      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
      {...props}
    />
  )
}
DropdownMenuShortcut.displayName = "DropdownMenuShortcut"

export {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuCheckboxItem,
  DropdownMenuRadioItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuGroup,
  DropdownMenuPortal,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuRadioGroup,
}
[V0_FILE]typescriptreact:file="components/ui/input.tsx"
import * as React from "react"

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

const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
  ({ className, type, ...props }, ref) => {
    return (
      <input
        type={type}
        className={cn(
          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
          className
        )}
        ref={ref}
        {...props}
      />
    )
  }
)
Input.displayName = "Input"

export { Input }
[V0_FILE]typescriptreact:file="components/ui/label.tsx"
"use client"

import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { cva, type VariantProps } from "class-variance-authority"

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

const labelVariants = cva(
  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
)

const Label = React.forwardRef<
  React.ElementRef<typeof LabelPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
    VariantProps<typeof labelVariants>
>(({ className, ...props }, ref) => (
  <LabelPrimitive.Root
    ref={ref}
    className={cn(labelVariants(), className)}
    {...props}
  />
))
Label.displayName = LabelPrimitive.Root.displayName

export { Label }
[V0_FILE]typescriptreact:file="components/ui/textarea.tsx"
import * as React from "react"

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

const Textarea = React.forwardRef<
  HTMLTextAreaElement,
  React.ComponentProps<"textarea">
>(({ className, ...props }, ref) => {
  return (
    <textarea
      className={cn(
        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
        className
      )}
      ref={ref}
      {...props}
    />
  )
})
Textarea.displayName = "Textarea"

export { Textarea }
[V0_FILE]typescriptreact:file="components/user-menu.tsx"
"use client"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { User, LogOut, Settings } from "lucide-react"

interface UserMenuProps {
  user: {
    id: string
    name: string
    email: string
    avatar: string
    bio: string
    joinedDate: string
  }
  onLogout: () => void
  onShowProfile: () => void
}

export function UserMenu({ user, onLogout, onShowProfile }: UserMenuProps) {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="ghost" className="relative h-9 w-9 rounded-full touch-manipulation">
          <Avatar className="h-9 w-9">
            <AvatarImage src={user.avatar || "/placeholder.svg"} alt={user.name} />
            <AvatarFallback>
              {user.name
                .split(" ")
                .map((n) => n[0])
                .join("")}
            </AvatarFallback>
          </Avatar>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-56" align="end" forceMount>
        <div className="flex items-center justify-start gap-2 p-2">
          <div className="flex flex-col space-y-1 leading-none">
            <p className="font-medium">{user.name}</p>
            <p className="w-[200px] truncate text-sm text-muted-foreground">{user.email}</p>
          </div>
        </div>
        <DropdownMenuSeparator />
        <DropdownMenuItem onClick={onShowProfile} className="touch-manipulation">
          <User className="mr-2 h-4 w-4" />
          Profile
        </DropdownMenuItem>
        <DropdownMenuItem className="touch-manipulation">
          <Settings className="mr-2 h-4 w-4" />
          Settings
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem onClick={onLogout} className="touch-manipulation">
          <LogOut className="mr-2 h-4 w-4" />
          Log out
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}
[V0_FILE]typescriptreact:file="components/user-profile.tsx"
"use client"
import { useState, useEffect, useRef } from "react"
import type React from "react"

import { MobileAvatar } from "./mobile-avatar"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Mail, Calendar, Edit2, Save, X } from "lucide-react"
import { cn } from "@/lib/utils"

interface UserProfileProps {
  user: {
    id: string
    name: string
    email: string
    avatar: string
    bio: string
    joinedDate: string
  }
  onUpdateProfile: (updates: Partial<UserProfileProps["user"]>) => void
  onClose: () => void
}

export function UserProfile({ user, onUpdateProfile, onClose }: UserProfileProps) {
  const [isEditing, setIsEditing] = useState(false)
  const [isVisible, setIsVisible] = useState(false)
  const [formData, setFormData] = useState({
    name: user.name,
    bio: user.bio,
  })
  const modalRef = useRef<HTMLDivElement>(null)

// Animate in the modal
  useEffect(() => {
    const timer = setTimeout(() => setIsVisible(true), 100)
    return () => clearTimeout(timer)
  }, [])

// Prevent body scroll and handle viewport
  useEffect(() => {
    const originalStyle = window.getComputedStyle(document.body).overflow
    document.body.style.overflow = "hidden"

// Prevent iOS Safari bounce scroll
    const preventBounce = (e: TouchEvent) => {
      if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
        e.preventDefault()
      }
    }

document.addEventListener("touchmove", preventBounce, { passive: false })

return () => {
      document.body.style.overflow = originalStyle
      document.removeEventListener("touchmove", preventBounce)
    }
  }, [])

const handleClose = () => {
    setIsVisible(false)
    setTimeout(onClose, 200) // Reduced timeout for faster response
  }

const handleSave = () => {
    onUpdateProfile(formData)
    setIsEditing(false)
  }

const handleCancel = () => {
    setFormData({ name: user.name, bio: user.bio })
    setIsEditing(false)
  }

const handleBackdropClick = (e: React.MouseEvent) => {
    if (e.target === e.currentTarget) {
      handleClose()
    }
  }

return (
    <div
      className={cn(
        "fixed inset-0 z-50 transition-all duration-200 ease-out",
        "flex items-end sm:items-center justify-center",
        isVisible ? "bg-black/60" : "bg-black/0",
      )}
      onClick={handleBackdropClick}
      style={{
        // Ensure modal is always visible on mobile
        paddingBottom: "env(safe-area-inset-bottom, 0px)",
        paddingTop: "env(safe-area-inset-top, 0px)",
      }}
    >
      {/* Modal Container */}
      <div
        ref={modalRef}
        className={cn(
          "w-full sm:max-w-md transition-all duration-200 ease-out",
          "flex flex-col",
          // Mobile: Bottom sheet that doesn't go above viewport
          "max-h-[90vh] sm:max-h-[85vh]",
          isVisible
            ? "translate-y-0 sm:scale-100 opacity-100"
            : "translate-y-full sm:scale-95 sm:translate-y-0 opacity-0",
        )}
        onClick={(e) => e.stopPropagation()}
      >
        <Card className="flex flex-col rounded-t-2xl sm:rounded-lg rounded-b-none sm:rounded-b-lg border-0 sm:border shadow-2xl sm:shadow-xl overflow-hidden bg-white dark:bg-gray-900 h-full">
          {/* Mobile drag indicator */}
          <div className="flex justify-center pt-2 pb-1 sm:hidden bg-white dark:bg-gray-900">
            <div className="w-10 h-1 bg-gray-300 dark:bg-gray-600 rounded-full cursor-pointer" onClick={handleClose} />
          </div>

{/* Header - Fixed */}
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-3 px-4 sm:px-6 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 flex-shrink-0">
            <div className="flex items-center gap-3">
              <CardTitle className="text-lg sm:text-xl font-semibold">Profile</CardTitle>
              {!isEditing && (
                <Button
                  variant="ghost"
                  size="icon"
                  onClick={() => setIsEditing(true)}
                  className="h-9 w-9 touch-manipulation hover:bg-gray-100 dark:hover:bg-gray-800"
                >
                  <Edit2 className="h-4 w-4" />
                  <span className="sr-only">Edit profile</span>
                </Button>
              )}
            </div>
            <Button
              variant="ghost"
              size="icon"
              onClick={handleClose}
              className="h-9 w-9 touch-manipulation hover:bg-gray-100 dark:hover:bg-gray-800"
            >
              <X className="h-4 w-4" />
              <span className="sr-only">Close</span>
            </Button>
          </CardHeader>

{/* Content - Scrollable */}
          <CardContent className="flex-1 overflow-y-auto p-4 sm:p-6 bg-white dark:bg-gray-900">
            <div className="space-y-6 pb-4">
              {/* Avatar Section */}
              <div className="flex flex-col items-center space-y-4">
                <div className="relative">
                  <MobileAvatar
                    src={user.avatar}
                    alt={user.name}
                    fallback={user.name
                      .split(" ")
                      .map((n) => n[0])
                      .join("")}
                    size="lg"
                    className="h-20 w-20 sm:h-24 sm:w-24"
                  />
                  {/* Camera icon for future avatar upload */}
                  <div className="absolute -bottom-1 -right-1 h-6 w-6 bg-blue-500 rounded-full flex items-center justify-center border-2 border-white dark:border-gray-900">
                    <Edit2 className="h-3 w-3 text-white" />
                  </div>
                </div>

{isEditing ? (
                  /* Edit Mode */
                  <div className="w-full space-y-4">
                    <div className="space-y-2">
                      <Label htmlFor="name" className="text-sm font-medium">
                        Display Name
                      </Label>
                      <Input
                        id="name"
                        value={formData.name}
                        onChange={(e) => setFormData((prev) => ({ ...prev, name: e.target.value }))}
                        className="touch-manipulation text-base h-12 border-2 focus:border-blue-500"
                        placeholder="Enter your name"
                        maxLength={50}
                      />
                      <p className="text-xs text-gray-500 dark:text-gray-400">{formData.name.length}/50 characters</p>
                    </div>

<div className="space-y-2">
                      <Label htmlFor="bio" className="text-sm font-medium">
                        Bio
                      </Label>
                      <Textarea
                        id="bio"
                        value={formData.bio}
                        onChange={(e) => setFormData((prev) => ({ ...prev, bio: e.target.value }))}
                        placeholder="Tell us about yourself..."
                        rows={4}
                        className="touch-manipulation resize-none text-base min-h-[120px] border-2 focus:border-blue-500"
                        maxLength={200}
                      />
                      <p className="text-xs text-gray-500 dark:text-gray-400">{formData.bio.length}/200 characters</p>
                    </div>

{/* Action Buttons - Fixed at bottom of edit mode */}
                    <div className="flex flex-col gap-3 pt-4 sticky bottom-0 bg-white dark:bg-gray-900">
                      <Button
                        onClick={handleSave}
                        className="w-full touch-manipulation h-12 text-base font-medium"
                        disabled={!formData.name.trim()}
                      >
                        <Save className="h-4 w-4 mr-2" />
                        Save Changes
                      </Button>
                      <Button
                        variant="outline"
                        onClick={handleCancel}
                        className="w-full bg-transparent touch-manipulation h-12 text-base"
                      >
                        Cancel
                      </Button>
                    </div>
                  </div>
                ) : (
                  /* View Mode */
                  <div className="w-full space-y-6 text-center">
                    {/* User Info */}
                    <div className="space-y-3">
                      <h3 className="font-semibold text-xl text-gray-900 dark:text-gray-50">{user.name}</h3>
                      {user.bio && (
                        <p className="text-base text-gray-600 dark:text-gray-400 leading-relaxed px-2">{user.bio}</p>
                      )}
                    </div>

{/* User Details */}
                    <div className="space-y-3">
                      <div className="flex items-center justify-center gap-3 text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-800/50 rounded-xl p-4">
                        <Mail className="h-5 w-5 flex-shrink-0" />
                        <span className="text-base truncate font-medium">{user.email}</span>
                      </div>

<div className="flex items-center justify-center gap-3 text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-800/50 rounded-xl p-4">
                        <Calendar className="h-5 w-5 flex-shrink-0" />
                        <span className="text-base font-medium">
                          Joined{" "}
                          {new Date(user.joinedDate).toLocaleDateString("en-US", {
                            year: "numeric",
                            month: "long",
                            day: "numeric",
                          })}
                        </span>
                      </div>
                    </div>

{/* Stats Section */}
                    <div className="grid grid-cols-3 gap-4 pt-4 border-t border-gray-200 dark:border-gray-800">
                      <div className="text-center py-2">
                        <p className="text-2xl font-bold text-gray-900 dark:text-gray-50">42</p>
                        <p className="text-sm text-gray-500 dark:text-gray-400">Posts</p>
                      </div>
                      <div className="text-center py-2">
                        <p className="text-2xl font-bold text-gray-900 dark:text-gray-50">12</p>
                        <p className="text-sm text-gray-500 dark:text-gray-400">Tags</p>
                      </div>
                      <div className="text-center py-2">
                        <p className="text-2xl font-bold text-gray-900 dark:text-gray-50">7</p>
                        <p className="text-sm text-gray-500 dark:text-gray-400">Days</p>
                      </div>
                    </div>
                  </div>
                )}
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="lib/data.ts"
export interface Post {
  id: string
  source: "twitter" | "reddit"
  author: string
  authorHandle: string
  authorAvatar: string
  content: string
  timestamp: string
  tags: string[]
  url: string
}

export const posts: Post[] = [
  {
    id: "t1",
    source: "twitter",
    author: "Naval",
    authorHandle: "naval",
    authorAvatar: "/placeholder.svg?height=40&width=40",
    content:
      "The ability to be alone is a superpower. It’s the ability to think for yourself, to be creative, and to not be influenced by the crowd.",
    timestamp: "2024-07-28T10:00:00Z",
    tags: ["philosophy", "mindset", "self-improvement"],
    url: "https://x.com/naval/status/123456789",
  },
  {
    id: "r1",
    source: "reddit",
    author: "QuantumLeaper",
    authorHandle: "u/QuantumLeaper",
    authorAvatar: "/placeholder.svg?height=40&width=40",
    content:
      "A fascinating discussion on r/futurology about the implications of brain-computer interfaces. The consensus is that while the potential is huge, the ethical considerations are complex and need careful navigation. Key points include data privacy, cognitive enhancement disparity, and the definition of self.",
    timestamp: "2024-07-27T15:30:00Z",
    tags: ["technology", "ethics", "future", "BCI"],
    url: "https://www.reddit.com/r/futurology/comments/12345",
  },
  {
    id: "t2",
    source: "twitter",
    author: "Shadcn",
    authorHandle: "shadcn",
    authorAvatar: "/placeholder.svg?height=40&width=40",
    content:
      "Just released a new set of components for shadcn/ui. Re-usable components built using Radix UI and Tailwind CSS. This time focusing on data visualization. Check them out!",
    timestamp: "2024-07-26T18:45:00Z",
    tags: ["react", "development", "ui", "tailwindcss"],
    url: "https://x.com/shadcn/status/987654321",
  },
  {
    id: "t3",
    source: "twitter",
    author: "Sarah Drasner",
    authorHandle: "sarah_edo",
    authorAvatar: "/placeholder.svg?height=40&width=40",
    content:
      "Animation on the web doesn't have to be complicated. A little bit of motion can go a long way in improving user experience. Think about state changes, loading indicators, and providing feedback to user interactions.",
    timestamp: "2024-07-25T09:12:00Z",
    tags: ["webdev", "animation", "ux", "css"],
    url: "https://x.com/sarah_edo/status/543216789",
  },
  {
    id: "r2",
    source: "reddit",
    author: "HistoryBuff",
    authorHandle: "u/HistoryBuff",
    authorAvatar: "/placeholder.svg?height=40&width=40",
    content:
      "Deep dive into the economic factors leading to the fall of the Roman Empire. It wasn't just one thing, but a combination of over-expansion, currency debasement, and political instability. A great thread on r/AskHistorians with detailed sources.",
    timestamp: "2024-07-24T22:05:00Z",
    tags: ["history", "economics", "rome"],
    url: "https://www.reddit.com/r/AskHistorians/comments/67890",
  },
  {
    id: "t4",
    source: "twitter",
    author: "Vercel",
    authorHandle: "vercel",
    authorAvatar: "/placeholder.svg?height=40&width=40",
    content:
      "Next.js 15 is here! With React 19, Partial Prerendering, and more. We are continuing to push the boundaries of what's possible on the web. Upgrade your projects today!",
    timestamp: "2024-07-23T14:00:00Z",
    tags: ["nextjs", "react", "webdev", "performance"],
    url: "https://x.com/vercel/status/1122334455",
  },
]
[V0_FILE]typescript:file="lib/utils.ts"
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
[V0_FILE]javascript:file="next.config.mjs"
/** @type {import('next').NextConfig} */
const nextConfig = {
  eslint: {
    ignoreDuringBuilds: true,
  },
  typescript: {
    ignoreBuildErrors: true,
  },
  images: {
    unoptimized: true,
  },
}

export default nextConfig
[V0_FILE]json:file="package.json"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "build": "next build",
    "dev": "next dev",
    "lint": "next lint",
    "start": "next start"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.9.1",
    "@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",
    "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",
    "geist": "^1.3.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "15.2.4",
    "next-themes": "latest",
    "react": "^19",
    "react-day-picker": "9.8.0",
    "react-dom": "^19",
    "react-hook-form": "^7.54.1",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.0",
    "sonner": "^1.7.1",
    "tailwind-merge": "^2.5.5",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.6",
    "zod": "^3.24.1"
  },
  "devDependencies": {
    "@types/node": "^22",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "postcss": "^8.5",
    "tailwindcss": "^3.4.17",
    "typescript": "^5"
  }
}
[V0_FILE]javascript:file="postcss.config.mjs"
/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    tailwindcss: {},
  },
};

export default config;
[V0_FILE]css:file="styles/globals.css"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]typescript:file="tailwind.config.ts"
import type { Config } from "tailwindcss";

// all in fixtures is set to tailwind v3 as interims solutions

const config: Config = {
    darkMode: ["class"],
    content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "*.{js,ts,jsx,tsx,mdx}"
  ],
  theme: {
  	extend: {
  		colors: {
  			background: 'hsl(var(--background))',
  			foreground: 'hsl(var(--foreground))',
  			card: {
  				DEFAULT: 'hsl(var(--card))',
  				foreground: 'hsl(var(--card-foreground))'
  			},
  			popover: {
  				DEFAULT: 'hsl(var(--popover))',
  				foreground: 'hsl(var(--popover-foreground))'
  			},
  			primary: {
  				DEFAULT: 'hsl(var(--primary))',
  				foreground: 'hsl(var(--primary-foreground))'
  			},
  			secondary: {
  				DEFAULT: 'hsl(var(--secondary))',
  				foreground: 'hsl(var(--secondary-foreground))'
  			},
  			muted: {
  				DEFAULT: 'hsl(var(--muted))',
  				foreground: 'hsl(var(--muted-foreground))'
  			},
  			accent: {
  				DEFAULT: 'hsl(var(--accent))',
  				foreground: 'hsl(var(--accent-foreground))'
  			},
  			destructive: {
  				DEFAULT: 'hsl(var(--destructive))',
  				foreground: 'hsl(var(--destructive-foreground))'
  			},
  			border: 'hsl(var(--border))',
  			input: 'hsl(var(--input))',
  			ring: 'hsl(var(--ring))',
  			chart: {
  				'1': 'hsl(var(--chart-1))',
  				'2': 'hsl(var(--chart-2))',
  				'3': 'hsl(var(--chart-3))',
  				'4': 'hsl(var(--chart-4))',
  				'5': 'hsl(var(--chart-5))'
  			},
  			sidebar: {
  				DEFAULT: 'hsl(var(--sidebar-background))',
  				foreground: 'hsl(var(--sidebar-foreground))',
  				primary: 'hsl(var(--sidebar-primary))',
  				'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
  				accent: 'hsl(var(--sidebar-accent))',
  				'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
  				border: 'hsl(var(--sidebar-border))',
  				ring: 'hsl(var(--sidebar-ring))'
  			}
  		},
  		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")],
};
export default config;
[V0_FILE]json:file="tsconfig.json"
{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "target": "ES6",
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}
[V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_1Nbf6OZsvgFFZOnlC1S5JKSF3eCp/1uv3SMJqY6_jxcFCTgTEak/public/placeholder-logo.png"
[V0_FILE]xml:file="public/placeholder-logo.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_1Nbf6OZsvgFFZOnlC1S5JKSF3eCp/XB_XF8ESrwbAjotfOd5Wmb/public/placeholder-logo.svg"
[V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_1Nbf6OZsvgFFZOnlC1S5JKSF3eCp/ONejAluG3EJATcwwA61bXn/public/placeholder-user.jpg"
[V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_1Nbf6OZsvgFFZOnlC1S5JKSF3eCp/BlrBc_c6JuPtjsBHFMcNJn/public/placeholder.jpg"
[V0_FILE]xml:file="public/placeholder.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_1Nbf6OZsvgFFZOnlC1S5JKSF3eCp/J0QvC3Vjlpi92ZtRdLC4Mx/public/placeholder.svg"</article></body></html>

About

Tags

Share

About

Tags

Share

More from moxabdullah

More Templates Like This

About

Tags

Share

About

Tags

Share

More from moxabdullah

More Templates Like This