setContent(e.target.value)}
              placeholder="What's on your mind?"
              className="min-h-[120px] resize-none text-base placeholder:text-muted-foreground/60 border-0 focus-visible:ring-0 p-0 bg-transparent"
            />

{/* Preview Image (optional) */}
            <div className="mt-3 relative rounded-xl overflow-hidden border border-border hidden">
              <Image
                src="/placeholder.svg?height=200&width=400"
                alt="Preview"
                width={400}
                height={200}
                className="w-full h-48 object-cover"
              />
              <Button
                variant="secondary"
                size="icon"
                className="absolute top-2 right-2 rounded-full bg-background/50 hover:bg-background/70 backdrop-blur-sm h-8 w-8"
              >
                <span className="sr-only">Remove</span>
                <span aria-hidden="true">×</span>
              </Button>
            </div>
          </div>
        </div>
      </main>

{/* Bottom Toolbar */}
      <div className="sticky bottom-0 bg-card border-t border-border p-3 flex items-center justify-between">
        <div className="flex gap-1">
          <Button variant="ghost" size="icon" className="rounded-full text-primary">
            <ImageIcon className="h-5 w-5" />
          </Button>
          <Button variant="ghost" size="icon" className="rounded-full text-primary">
            <Smile className="h-5 w-5" />
          </Button>
          <Button variant="ghost" size="icon" className="rounded-full text-primary">
            <MapPin className="h-5 w-5" />
          </Button>
        </div>
        <div className="text-sm text-muted-foreground">
          <span className={content.length > maxLength ? "text-destructive" : "text-primary"}>{content.length}</span>/
          {maxLength}
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/profile/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import Image from "next/image"
import { SiteHeader } from "@/components/site-header"
import { BottomNav } from "@/components/bottom-nav"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { ScrollArea } from "@/components/ui/scroll-area"
import { MessageBubble } from "@/components/message-bubble"
import { CommentDialog } from "@/components/comment-dialog"
import { EditProfileDialog } from "@/components/edit-profile-dialog"

interface ProfileData {
  name: string
  username: string
  bio: string
  gender: "male" | "female" | "nonbinary"
  bannerColor: string
  stats: {
    posts: number
    following: number
    followers: number
  }
}

interface Comment {
  id: string
  content: string
  user: {
    name: string
    username: string
    avatar: string
  }
  time: string
}

interface Post {
  id: string
  content: string
  image?: string
  time: string
  likes: number
  comments: Comment[]
  isLiked: boolean
  // Add repost information
  isRepost?: boolean
  originalUser?: {
    name: string
    username: string
    gender: "male" | "female" | "nonbinary"
  }
  reposts: number
  isReposted: boolean
}

export default function ProfilePage() {
  const [isEditProfileOpen, setIsEditProfileOpen] = useState(false)
  const [profile, setProfile] = useState<ProfileData>({
    name: "Mia",
    username: "cozy_corner",
    bio: "✨ Living the cozy life\n🐰 Pochacco enthusiast\n🌱 Plant parent\n☕️ Tea lover",
    gender: "female" as const,
    bannerColor: "from-pink-500/20 to-purple-500/20",
    stats: {
      posts: 42,
      following: 128,
      followers: 96,
    },
  })

const [activeCommentPost, setActiveCommentPost] = useState<string | null>(null)

const [posts] = useState<Post[]>([
    {
      id: "1",
      content: "Just got this adorable Pochacco plushie! It's so soft and cuddly 💕",
      image: "/placeholder.svg?height=300&width=400",
      time: "2 hours ago",
      likes: 24,
      comments: [
        {
          id: "c1",
          content: "So cute! Where did you get it? 😍",
          user: {
            name: "Lily",
            username: "pochacco_lover",
            avatar:
              "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/abb138b5522c9e9fe84bb000f585f469-removebg-preview-ph7iZIPtDTpkLj0morKnG8P3DN7ibp.png",
          },
          time: "1h ago",
        },
        {
          id: "c2",
          content: "I need one too! 🥺",
          user: {
            name: "Max",
            username: "max_relax",
            avatar:
              "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/0c33ad275328ed5d0de5cfabdec9bc62-removebg-preview-wOBC7YjC0Scg5drWIP1vBltr6ZJUL9.png",
          },
          time: "30m ago",
        },
      ],
      isLiked: false,
      reposts: 2,
      isReposted: false,
    },
    {
      id: "2",
      content: "Afternoon tea with my favorite mug! 🫖✨",
      image: "/placeholder.svg?height=300&width=400",
      time: "1 day ago",
      likes: 18,
      comments: [],
      isLiked: true,
      reposts: 5,
      isReposted: false,
    },
    {
      id: "3",
      content: "Cozy reading corner is finally complete! 📚🌿",
      time: "3 days ago",
      likes: 32,
      comments: [],
      isLiked: false,
      reposts: 10,
      isReposted: true,
    },
  ])

const [userPosts, setUserPosts] = useState<Post[]>([
    {
      id: "1",
      content: "Just got this adorable Pochacco plushie! It's so soft and cuddly 💕",
      image: "/placeholder.svg?height=300&width=400",
      time: "2 hours ago",
      likes: 24,
      comments: [
        {
          id: "c1",
          content: "So cute! Where did you get it? 😍",
          user: {
            name: "Lily",
            username: "pochacco_lover",
            avatar:
              "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/abb138b5522c9e9fe84bb000f585f469-removebg-preview-ph7iZIPtDTpkLj0morKnG8P3DN7ibp.png",
          },
          time: "1h ago",
        },
      ],
      isLiked: false,
      reposts: 2,
      isReposted: false,
    },
    {
      id: "2",
      content: "Afternoon tea with my favorite mug! 🫖✨",
      image: "/placeholder.svg?height=300&width=400",
      time: "1 day ago",
      likes: 18,
      comments: [],
      isLiked: true,
      reposts: 5,
      isReposted: false,
    },
    {
      id: "3",
      content: "Cozy reading corner is finally complete! 📚🌿",
      time: "3 days ago",
      likes: 32,
      comments: [],
      isLiked: false,
      reposts: 10,
      isReposted: true,
    },
  ])

const getAvatarByGender = (gender: string) => {
    switch (gender) {
      case "male":
        return "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/0c33ad275328ed5d0de5cfabdec9bc62-removebg-preview-wOBC7YjC0Scg5drWIP1vBltr6ZJUL9.png"
      case "female":
        return "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/abb138b5522c9e9fe84bb000f585f469-removebg-preview-ph7iZIPtDTpkLj0morKnG8P3DN7ibp.png"
      case "nonbinary":
        return "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-removebg-preview%20%282%29-cPQ2yGMqTtymo4iA0CPvlobwe4KkK8.png"
      default:
        return "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/6fa34140b30a3dede0c3d1d049e58cbe-removebg-preview-hIa8K4vN6I1WjLOGHh6oD7CV819pSv.png"
    }
  }

const handleLike = (postId: string) => {
    setUserPosts((posts) =>
      posts.map((post) =>
        post.id === postId
          ? {
              ...post,
              isLiked: !post.isLiked,
              likes: post.isLiked ? post.likes - 1 : post.likes + 1,
            }
          : post,
      ),
    )
  }

const handleAddComment = (postId: string, content: string) => {
    setUserPosts((posts) =>
      posts.map((post) =>
        post.id === postId
          ? {
              ...post,
              comments: [
                ...post.comments,
                {
                  id: `c${Date.now()}`,
                  content,
                  user: {
                    name: profile.name,
                    username: profile.username,
                    avatar: getAvatarByGender(profile.gender),
                  },
                  time: "Just now",
                },
              ],
            }
          : post,
      ),
    )
  }

const handleRepost = (post: Post) => {
    // First, update the original post's repost count
    setUserPosts((currentPosts) =>
      currentPosts.map((p) =>
        p.id === post.id
          ? {
              ...p,
              reposts: p.isReposted ? p.reposts - 1 : p.reposts + 1,
              isReposted: !p.isReposted,
            }
          : p,
      ),
    )

// If we're un-reposting, remove the repost
    if (post.isReposted) {
      setUserPosts((currentPosts) =>
        currentPosts.filter((p) => !(p.isRepost && p.originalUser?.name === post.originalUser?.name)),
      )
      return
    }

// Add the reposted post to the user's posts
    const repost: Post = {
      ...post,
      id: `repost-${post.id}-${Date.now()}`,
      isRepost: true,
      time: "Just now",
      originalUser: {
        name: post.originalUser?.name || post.originalUser?.name || "Original User",
        username: post.originalUser?.username || post.originalUser?.username || "original_user",
        gender: post.originalUser?.gender || "nonbinary",
      },
      likes: 0,
      comments: [],
      isLiked: false,
      reposts: 0,
      isReposted: false,
    }

setUserPosts((currentPosts) => [repost, ...currentPosts])
  }

return (
    <div className="flex flex-col min-h-screen bg-background">
      <SiteHeader showBack title={profile.name} subtitle={`@${profile.username}`} />

{/* Profile Info */}
      <div className="relative">
        <div className={`h-32 bg-gradient-to-r ${profile.bannerColor}`} />
        <div className="px-4 pb-4">
          <div className="relative -mt-16 mb-4 flex justify-between items-start">
            <div className="w-24 h-24 rounded-full border-4 border-background overflow-hidden bg-background">
              <Image
                src={getAvatarByGender(profile.gender) || "/placeholder.svg"}
                alt={profile.name}
                width={96}
                height={96}
                className="w-full h-full object-contain"
              />
            </div>
            <Button variant="outline" className="mt-4 rounded-full" onClick={() => setIsEditProfileOpen(true)}>
              Edit Profile
            </Button>
          </div>

<div className="space-y-2">
            <div>
              <h2 className="text-xl font-bold">{profile.name}</h2>
              <p className="text-muted-foreground">@{profile.username}</p>
            </div>
            <p className="whitespace-pre-line">{profile.bio}</p>
            <div className="flex gap-4 text-sm">
              <span>
                <strong>{profile.stats.posts}</strong> posts
              </span>
              <span>
                <strong>{profile.stats.following}</strong> following
              </span>
              <span>
                <strong>{profile.stats.followers}</strong> followers
              </span>
            </div>
          </div>
        </div>
      </div>

{/* Posts */}
      <Tabs defaultValue="posts" className="flex-1">
        <TabsList className="w-full grid grid-cols-3 bg-background border-b border-border rounded-none">
          <TabsTrigger
            value="posts"
            className="rounded-none data-[state=active]:bg-background data-[state=active]:border-b-2 data-[state=active]:border-primary"
          >
            Posts
          </TabsTrigger>
          <TabsTrigger
            value="media"
            className="rounded-none data-[state=active]:bg-background data-[state=active]:border-b-2 data-[state=active]:border-primary"
          >
            Media
          </TabsTrigger>
          <TabsTrigger
            value="likes"
            className="rounded-none data-[state=active]:bg-background data-[state=active]:border-b-2 data-[state=active]:border-primary"
          >
            Likes
          </TabsTrigger>
        </TabsList>

<TabsContent value="posts" className="p-0">
          <ScrollArea className="h-[calc(100vh-24rem)]">
            <div className="divide-y divide-border">
              {userPosts.map((post) => (
                <div key={post.id} className="p-4">
                  {post.isRepost && (
                    <div className="flex items-center gap-2 mb-2 pl-16 text-sm text-muted-foreground">
                      <Image
                        src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/5ed326155fc4cfe63ef25b78c389274a-removebg-preview-PVqj7vQqpame95ZMjPzOZ7pNbXATiC.png"
                        alt="Reposted"
                        width={16}
                        height={16}
                        className="w-4 h-4 opacity-70"
                      />
                      <span>Reposted</span>
                    </div>
                  )}
                  <div className="flex gap-4">
                    <div className="relative">
                      <div className="w-12 h-12 flex items-center justify-center">
                        <Image
                          src={
                            post.isRepost
                              ? getAvatarByGender(post.originalUser?.gender || "nonbinary")
                              : getAvatarByGender(profile.gender)
                          }
                          alt={post.isRepost ? post.originalUser?.name || "Original User" : profile.name}
                          width={48}
                          height={48}
                          className="w-12 h-12 object-contain"
                        />
                      </div>
                    </div>
                    <div className="flex-1">
                      <MessageBubble>
                        <div className="flex items-center gap-2 mb-2">
                          <span className="font-medium text-foreground">
                            {post.isRepost ? post.originalUser?.name : profile.name}
                          </span>
                          <span className="text-sm text-muted-foreground">
                            @{post.isRepost ? post.originalUser?.username : profile.username}
                          </span>
                          <span className="text-sm text-muted-foreground">· {post.time}</span>
                        </div>
                        <p className="text-foreground mb-3">{post.content}</p>
                        {post.image && (
                          <div className="rounded-lg overflow-hidden border border-border mb-3">
                            <Image
                              src={post.image || "/placeholder.svg"}
                              alt="Post image"
                              width={400}
                              height={300}
                              className="w-full object-cover"
                            />
                          </div>
                        )}
                        <div className="flex gap-6">
                          <button className="flex items-center gap-1 group" onClick={() => handleLike(post.id)}>
                            <div className="w-5 h-5 flex items-center justify-center">
                              <Image
                                src={
                                  post.isLiked
                                    ? "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/001e4a415b9e04c2a85e6af3191e94ef-removebg-preview-KCaV9bGSsoU0amSEFcwOIXCtulxXUu.png"
                                    : "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/6fa34140b30a3dede0c3d1d049e58cbe-removebg-preview-hIa8K4vN6I1WjLOGHh6oD7CV819pSv.png"
                                }
                                alt="Like"
                                width={20}
                                height={20}
                                className="transition-transform group-hover:scale-110"
                              />
                            </div>
                            <span className={`text-sm ${post.isLiked ? "text-[#ff9eb0]" : "text-muted-foreground"}`}>
                              {post.likes}
                            </span>
                          </button>
                          <button
                            className="flex items-center gap-1 group"
                            onClick={() => setActiveCommentPost(post.id)}
                          >
                            <div className="w-5 h-5 flex items-center justify-center">
                              <Image
                                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/178332fac1e5e1b732868fc5e022ff18-removebg-preview-4hRR0R8JErWvImDv3YRgc3dR4pOTAw.png"
                                alt="Comment"
                                width={20}
                                height={20}
                                className="transition-transform group-hover:scale-110"
                              />
                            </div>
                            <span className="text-sm text-muted-foreground">{post.comments.length}</span>
                          </button>
                          <button className="flex items-center gap-1 group" onClick={() => handleRepost(post)}>
                            <div className="w-5 h-5 flex items-center justify-center">
                              <Image
                                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/5ed326155fc4cfe63ef25b78c389274a-removebg-preview-PVqj7vQqpame95ZMjPzOZ7pNbXATiC.png"
                                alt="Repost"
                                width={20}
                                height={20}
                                className={`transition-transform group-hover:scale-110 ${
                                  post.isReposted
                                    ? "opacity-100 [filter:hue-rotate(85deg)_saturate(1.5)]"
                                    : "opacity-70"
                                }`}
                              />
                            </div>
                            <span className={`text-sm ${post.isReposted ? "text-[#22c55e]" : "text-muted-foreground"}`}>
                              {post.reposts}
                            </span>
                          </button>
                        </div>
                      </MessageBubble>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </ScrollArea>
        </TabsContent>

<TabsContent value="media" className="p-4">
          <div className="grid grid-cols-3 gap-1">
            {userPosts
              .filter((post) => post.image)
              .map((post) => (
                <div key={post.id} className="aspect-square bg-muted rounded-md overflow-hidden">
                  <Image
                    src={post.image || "/placeholder.svg"}
                    alt="Media"
                    width={150}
                    height={150}
                    className="w-full h-full object-cover"
                  />
                </div>
              ))}
          </div>
        </TabsContent>

<TabsContent value="likes" className="flex-1">
          <div className="flex flex-col items-center justify-center h-[calc(100vh-24rem)] p-4 text-center">
            <Image
              src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/545b46b4a5bedb7451bcdfd2378487e8-removebg-preview-MY8XYCWjquC8DHJr5v5QncDMOZLr9t.png"
              alt="Sleepy Pochacco"
              width={100}
              height={100}
              className="mb-4"
            />
            <h3 className="text-lg font-medium mb-2">No likes yet</h3>
            <p className="text-sm text-muted-foreground">Posts you like will show up here</p>
          </div>
        </TabsContent>
      </Tabs>

<BottomNav currentPath="/profile" />
      {activeCommentPost && (
        <CommentDialog
          open={!!activeCommentPost}
          onOpenChange={(open) => !open && setActiveCommentPost(null)}
          postId={activeCommentPost}
          comments={userPosts.find((p) => p.id === activeCommentPost)?.comments || []}
          onAddComment={handleAddComment}
        />
      )}
      <EditProfileDialog
        open={isEditProfileOpen}
        onOpenChange={setIsEditProfileOpen}
        initialProfile={profile}
        onSave={(updatedProfile) => {
          setProfile(updatedProfile)
          setIsEditProfileOpen(false)
        }}
      />
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true"
import type React from "react"
import "@/app/globals.css"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import { ThemeProvider } from "@/components/theme-provider"

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "Pochacco Social",
  description: "A cozy social media app for friends",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={inter.className}>
        <ThemeProvider attribute="class" defaultTheme="light" enableSystem={false} disableTransitionOnChange>
          {children}
        </ThemeProvider>
      </body>
    </html>
  )
}

[V0_FILE]css:file="app/globals.css" isFixed="true" isQuickEdit="true" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 220 10% 30%;

--card: 0 0% 100%;
    --card-foreground: 220 10% 30%;

--popover: 0 0% 100%;
    --popover-foreground: 220 10% 30%;

--primary: 270 60% 65%;
    --primary-foreground: 0 0% 100%;

--secondary: 210 40% 96%;
    --secondary-foreground: 220 10% 30%;

--muted: 210 40% 96%;
    --muted-foreground: 220 10% 50%;

--accent: 210 40% 96%;
    --accent-foreground: 220 10% 30%;

--destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

--border: 220 20% 90%;
    --input: 220 20% 90%;
    --ring: 270 60% 65%;

--radius: 0.75rem;
  }

.dark {
    --background: 220 30% 10%;
    --foreground: 210 20% 98%;

--card: 220 25% 15%;
    --card-foreground: 210 20% 98%;

--popover: 220 25% 15%;
    --popover-foreground: 210 20% 98%;

--primary: 270 60% 75%;
    --primary-foreground: 0 0% 100%;

--secondary: 220 25% 20%;
    --secondary-foreground: 210 20% 98%;

--muted: 220 25% 20%;
    --muted-foreground: 220 15% 65%;

--accent: 220 25% 20%;
    --accent-foreground: 210 20% 98%;

--destructive: 0 84% 60%;
    --destructive-foreground: 210 20% 98%;

--border: 220 25% 20%;
    --input: 220 25% 20%;
    --ring: 270 60% 75%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  * {
    @apply transition-colors duration-100;
  }
  body {
    @apply bg-background text-foreground;
  }
}

@layer components {
  .message-bubble {
    border-radius: 24px 24px 24px 24px;
    position: relative;
    clip-path: path(
      "M 0,24 C 0,10.745166 10.745166,0 24,0 H calc(100% - 24) C calc(100% - 10.745166),0 100%,10.745166 100%,24 V calc(100% - 24) C 100%,calc(100% - 10.745166) calc(100% - 10.745166),100% calc(100% - 24),100% H 24 C 10.745166,100% 0,calc(100% - 10.745166) 0,calc(100% - 24) Z"
    );
  }

.bubble-point {
    clip-path: path("M 0,0 L 16,16 L 16,0 Z");
  }

.date-bubble {
    position: relative;
    background-color: hsl(var(--card));
    border: 2px solid hsl(var(--border));
    border-radius: 999px;
    transform: rotate(-1deg);
  }

.date-bubble::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border: 2px solid hsl(var(--border));
    border-radius: 999px;
    transform: rotate(1deg);
    z-index: -1;
  }
}

@layer utilities {
  .message-texture {
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.1;
  }

.animate-bounce-subtle {
    animation: bounce-subtle 2s infinite;
  }

@keyframes bounce-subtle {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-2px);
    }
  }

.hover-lift {
    @apply transition-transform duration-200;
  }

.hover-lift:hover {
    transform: translateY(-1px);
  }
}

[V0_FILE]typescriptreact:file="tailwind.config.js" isMerged="true"
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  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) - 0.25rem)",
        sm: "calc(var(--radius) - 0.5rem)",
      },
      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")],
}

[V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true"
"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" isMerged="true"
"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"
      className="rounded-full text-gray-400 hover:text-gray-200 hover:bg-[#2a2a2a] dark:text-gray-400 dark:hover:text-white"
      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
    >
      <Sun className="h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
      <Moon className="absolute h-5 w-5 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/message-bubble.tsx" isMerged="true"
"use client"

import type React from "react"
import { motion } from "framer-motion"

interface MessageBubbleProps {
  children: React.ReactNode
}

export function MessageBubble({ children }: MessageBubbleProps) {
  return (
    <motion.div
      className="relative"
      whileHover={{ scale: 1.01 }}
      transition={{ type: "spring", stiffness: 400, damping: 17 }}
    >
      <div className="absolute -left-[22px] top-4 w-4 h-4 transform rotate-45 bg-card border-l-2 border-b-2 border-border bubble-point"></div>
      <motion.div className="bg-card border-2 border-border message-bubble p-4 shadow-sm hover:shadow-md transition-shadow">
        {children}
      </motion.div>
    </motion.div>
  )
}

[V0_FILE]typescriptreact:file="components/site-header.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import type React from "react"
import Link from "next/link"
import Image from "next/image"
import { ArrowLeft } from "lucide-react"
import { Button } from "@/components/ui/button"
import { ThemeToggle } from "@/components/theme-toggle"
import { LogoutButton } from "@/components/logout-button"

interface SiteHeaderProps {
  showBack?: boolean
  title?: string
  subtitle?: string
  rightElement?: React.ReactNode
}

export function SiteHeader({ showBack = false, title, subtitle, rightElement }: SiteHeaderProps) {
  return (
    <header className="sticky top-0 z-50 w-full bg-background border-b border-border">
      <div className="container flex h-14 items-center justify-between">
        <div className="flex items-center gap-3">
          {showBack ? (
            <Link href="/">
              <Button variant="ghost" size="icon" className="rounded-full">
                <ArrowLeft className="h-5 w-5" />
              </Button>
            </Link>
          ) : (
            <Image
              src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/6fa34140b30a3dede0c3d1d049e58cbe-removebg-preview-hIa8K4vN6I1WjLOGHh6oD7CV819pSv.png"
              alt="Logo"
              width={40}
              height={40}
              className="w-10 h-10"
            />
          )}
          {title && (
            <div>
              <h1 className="font-semibold text-lg leading-none">{title}</h1>
              {subtitle && <p className="text-xs text-muted-foreground">{subtitle}</p>}
            </div>
          )}
        </div>
        <div className="flex items-center gap-2">
          {!rightElement ? (
            <>
              <ThemeToggle />
              <LogoutButton />
            </>
          ) : (
            rightElement
          )}
        </div>
      </div>
    </header>
  )
}

[V0_FILE]typescriptreact:file="components/bottom-nav.tsx" isMerged="true"
import Link from "next/link"
import { Home, Bell, Search, User, MessageCircle } from "lucide-react"
import { Button } from "@/components/ui/button"

interface BottomNavProps {
  currentPath: string
}

export function BottomNav({ currentPath }: BottomNavProps) {
  const navItems = [
    { path: "/", icon: Home, label: "Home" },
    { path: "/notifications", icon: Bell, label: "Notifications" },
    { path: "/messages", icon: MessageCircle, label: "Messages" },
    { path: "/explore", icon: Search, label: "Explore" },
    { path: "/profile", icon: User, label: "Profile" },
  ]

return (
    <nav className="sticky bottom-0 bg-card border-t border-border p-3 grid grid-cols-5 gap-1">
      {navItems.map((item) => {
        const Icon = item.icon
        const isActive = currentPath === item.path
        return (
          <Link key={item.path} href={item.path}>
            <Button
              variant="ghost"
              className={`flex flex-col items-center justify-center rounded-lg h-14 w-full gap-1 ${
                isActive ? "text-primary" : "text-muted-foreground hover:text-foreground"
              }`}
            >
              <Icon className="h-5 w-5" />
              <span className="text-xs">{item.label}</span>
            </Button>
          </Link>
        )
      })}
    </nav>
  )
}

[V0_FILE]typescriptreact:file="app/explore/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Image from "next/image"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { SiteHeader } from "@/components/site-header"
import { BottomNav } from "@/components/bottom-nav"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Search, TrendingUp, Sparkles } from "lucide-react"

interface TrendingTopic {
  name: string
  posts: number
  category: string
}

interface SuggestedUser {
  name: string
  username: string
  avatarType: "cat" | "dog"
  bio: string
}

export default function ExplorePage() {
  const [trendingTopics] = useState<TrendingTopic[]>([
    { name: "Pochacco", posts: 2481, category: "Character" },
    { name: "Tea Time", posts: 1892, category: "Lifestyle" },
    { name: "Cozy Gaming", posts: 1654, category: "Gaming" },
    { name: "Cute Food", posts: 1432, category: "Food" },
    { name: "Plushies", posts: 1287, category: "Hobbies" },
  ])

const [suggestedUsers] = useState<SuggestedUser[]>([
    {
      name: "Luna",
      username: "moon_cat",
      avatarType: "cat",
      bio: "Professional napper 😴 | Tea enthusiast ☕",
    },
    {
      name: "Max",
      username: "pochacco_max",
      avatarType: "dog",
      bio: "Spreading happiness one post at a time 🌟",
    },
    {
      name: "Sakura",
      username: "cherry_blossom",
      avatarType: "cat",
      bio: "Artist 🎨 | Lover of all things kawaii 💕",
    },
  ])

return (
    <div className="flex flex-col min-h-screen bg-background">
      <div className="sticky top-0 z-50">
        <SiteHeader title="Explore" />
      </div>

<Tabs defaultValue="foryou" className="w-full">
          <TabsList className="w-full grid grid-cols-2 bg-background/80 backdrop-blur-sm border-b border-border">
            <TabsTrigger
              value="foryou"
              className="text-muted-foreground data-[state=active]:text-primary data-[state=active]:border-b-2 data-[state=active]:border-primary"
            >
              For You
            </TabsTrigger>
            <TabsTrigger
              value="trending"
              className="text-muted-foreground data-[state=active]:text-primary data-[state=active]:border-b-2 data-[state=active]:border-primary"
            >
              Trending
            </TabsTrigger>
          </TabsList>

<TabsContent value="foryou" className="p-4">
            <h2 className="text-lg font-semibold mb-4">Suggested for you</h2>
            <div className="grid gap-4">
              {suggestedUsers.map((user) => (
                <div key={user.username} className="flex items-start gap-3 p-3 rounded-lg border border-border">
                  <div className="w-12 h-12 flex items-center justify-center">
                    <Image
                      src={
                        user.avatarType === "cat"
                          ? "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/fas-removebg-preview-3vYj9A7kR9zPBx7ue0JxpsoirX08iH.png"
                          : "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Capture-removebg-preview-DZGMW5LSE0GjjTGLknXdS644WVOTZs.png"
                      }
                      alt={user.name}
                      width={48}
                      height={48}
                      className="w-12 h-12 object-contain"
                    />
                  </div>
                  <div className="flex-1">
                    <div className="flex items-center justify-between">
                      <div>
                        <h3 className="font-medium">{user.name}</h3>
                        <p className="text-sm text-muted-foreground">@{user.username}</p>
                      </div>
                      <Button variant="outline" size="sm" className="rounded-full">
                        Follow
                      </Button>
                    </div>
                    <p className="text-sm mt-2">{user.bio}</p>
                  </div>
                </div>
              ))}
            </div>
          </TabsContent>

<TabsContent value="trending" className="p-4">
            <h2 className="text-lg font-semibold mb-4">Trending now</h2>
            <div className="grid gap-4">
              {trendingTopics.map((topic, index) => (
                <div key={topic.name} className="flex items-center justify-between p-3 rounded-lg border border-border">
                  <div className="flex items-center gap-3">
                    <div className="w-8 h-8 flex items-center justify-center rounded-full bg-primary/10">
                      {index === 0 ? (
                        <Sparkles className="h-4 w-4 text-primary" />
                      ) : (
                        <TrendingUp className="h-4 w-4 text-primary" />
                      )}
                    </div>
                    <div>
                      <h3 className="font-medium">{topic.name}</h3>
                      <p className="text-sm text-muted-foreground">
                        {topic.posts.toLocaleString()} posts • {topic.category}
                      </p>
                    </div>
                  </div>
                  <Button variant="ghost" size="icon" className="rounded-full">
                    <Image
                      src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/6fa34140b30a3dede0c3d1d049e58cbe-removebg-preview-hIa8K4vN6I1WjLOGHh6oD7CV819pSv.png"
                      alt="View topic"
                      width={20}
                      height={20}
                      className="opacity-70 hover:opacity-100 transition-opacity"
                    />
                  </Button>
                </div>
              ))}
            </div>
          </TabsContent>
        </Tabs>
      </main>

<BottomNav currentPath="/explore" />
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/(auth)/sign-in/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Eye, EyeOff } from "lucide-react"
import { motion, AnimatePresence } from "framer-motion"

export default function SignInPage() {
  const [isSignUp, setIsSignUp] = useState(false)
  const [showPassword, setShowPassword] = useState(false)
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState("")
  const router = useRouter()

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsLoading(true)
    setError("")

// Simulate loading
    await new Promise((resolve) => setTimeout(resolve, 1000))

// For demo purposes, just redirect to home
    router.push("/")
  }

return (
    <div className="min-h-screen bg-background flex flex-col items-center justify-center p-4">
      <div className="w-full max-w-sm">
        {/* Logo and Welcome Message */}
        <div className="text-center mb-8">
          <motion.div
            className="flex justify-center mb-4 relative"
            initial={{ y: -20, opacity: 0 }}
            animate={{ y: 0, opacity: 1 }}
            transition={{ duration: 0.5 }}
          >
            <div className="relative w-32 h-32">
              <Image
                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/6fa34140b30a3dede0c3d1d049e58cbe-removebg-preview-hIa8K4vN6I1WjLOGHh6oD7CV819pSv.png"
                alt="Pochacco"
                width={128}
                height={128}
                className="w-32 h-32 object-contain"
              />
              {isLoading && (
                <motion.div
                  className="absolute inset-0"
                  animate={{
                    rotate: 360,
                    y: [0, -10, 0],
                  }}
                  transition={{
                    rotate: { duration: 2, repeat: Number.POSITIVE_INFINITY, ease: "linear" },
                    y: { duration: 1, repeat: Number.POSITIVE_INFINITY, ease: "easeInOut" },
                  }}
                >
                  <Image
                    src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/6fa34140b30a3dede0c3d1d049e58cbe-removebg-preview-hIa8K4vN6I1WjLOGHh6oD7CV819pSv.png"
                    alt="Loading"
                    width={128}
                    height={128}
                    className="w-32 h-32 object-contain opacity-50"
                  />
                </motion.div>
              )}
            </div>
          </motion.div>
          <motion.div
            initial={{ y: 20, opacity: 0 }}
            animate={{ y: 0, opacity: 1 }}
            transition={{ duration: 0.5, delay: 0.2 }}
          >
            <h1 className="text-2xl font-bold mb-2">Welcome to Pochacco Social!</h1>
            <p className="text-muted-foreground">
              {isSignUp ? "Create an account to get started!" : "Sign in to continue your journey!"}
            </p>
          </motion.div>
        </div>

{/* Auth Form */}
        <motion.div
          initial={{ y: 20, opacity: 0 }}
          animate={{ y: 0, opacity: 1 }}
          transition={{ duration: 0.5, delay: 0.4 }}
          className="bg-card border border-border rounded-xl p-6"
        >
          <form onSubmit={handleSubmit} className="space-y-4">
            <AnimatePresence>
              {error && (
                <motion.div
                  initial={{ height: 0, opacity: 0 }}
                  animate={{ height: "auto", opacity: 1 }}
                  exit={{ height: 0, opacity: 0 }}
                  className="bg-destructive/10 text-destructive text-sm p-3 rounded-lg flex items-center gap-2"
                >
                  <Image
                    src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/545b46b4a5bedb7451bcdfd2378487e8-removebg-preview-MY8XYCWjquC8DHJr5v5QncDMOZLr9t.png"
                    alt="Error"
                    width={24}
                    height={24}
                    className="w-6 h-6"
                  />
                  <p>{error}</p>
                </motion.div>
              )}
            </AnimatePresence>

<AnimatePresence mode="wait">
              {isSignUp && (
                <motion.div
                  initial={{ height: 0, opacity: 0 }}
                  animate={{ height: "auto", opacity: 1 }}
                  exit={{ height: 0, opacity: 0 }}
                  className="space-y-2"
                >
                  <Label htmlFor="username">Username</Label>
                  <div className="relative">
                    <span className="absolute left-3 top-2.5 text-muted-foreground">@</span>
                    <Input id="username" placeholder="pochacco_lover" className="pl-8" required />
                  </div>
                </motion.div>
              )}
            </AnimatePresence>

<div className="space-y-2">
              <Label htmlFor="email">Email</Label>
              <Input id="email" type="email" placeholder="pochacco@email.com" required />
            </div>

<div className="space-y-2">
              <Label htmlFor="password">Password</Label>
              <div className="relative">
                <Input id="password" type={showPassword ? "text" : "password"} placeholder="••••••••" required />
                <Button
                  type="button"
                  variant="ghost"
                  size="icon"
                  className="absolute right-0 top-0 h-full px-3 hover:bg-transparent"
                  onClick={() => setShowPassword(!showPassword)}
                >
                  {showPassword ? (
                    <EyeOff className="h-4 w-4 text-muted-foreground" />
                  ) : (
                    <Eye className="h-4 w-4 text-muted-foreground" />
                  )}
                </Button>
              </div>
            </div>

<Button type="submit" className="w-full" disabled={isLoading}>
              {isLoading ? (
                <div className="flex items-center gap-2">
                  <div className="w-4 h-4">
                    <Image
                      src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/6fa34140b30a3dede0c3d1d049e58cbe-removebg-preview-hIa8K4vN6I1WjLOGHh6oD7CV819pSv.png"
                      alt="Loading"
                      width={16}
                      height={16}
                      className="w-4 h-4 animate-spin"
                    />
                  </div>
                  <span>{isSignUp ? "Creating Account..." : "Signing In..."}</span>
                </div>
              ) : (
                <span>{isSignUp ? "Create Account" : "Sign In"}</span>
              )}
            </Button>
          </form>

<div className="mt-6 text-center">
            <p className="text-sm text-muted-foreground">
              {isSignUp ? "Already have an account?" : "Don't have an account?"}
            </p>
            <Button variant="link" className="text-primary p-0 h-auto" onClick={() => setIsSignUp(!isSignUp)}>
              {isSignUp ? "Sign In" : "Create Account"}
            </Button>
          </div>
        </motion.div>

{/* Decorative Elements */}
        <motion.div
          initial={{ y: 20, opacity: 0 }}
          animate={{ y: 0, opacity: 1 }}
          transition={{ duration: 0.5, delay: 0.6 }}
          className="mt-8 flex justify-center gap-4"
        >
          <Image
            src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/85db78219a8744b6afc5298dba8411f1-removebg-preview-9X7paiPURrWgT4OzbybyCbkPYj6M3q.png"
            alt="Decoration"
            width={32}
            height={32}
            className="w-8 h-8 opacity-50"
          />
          <Image
            src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/8bbdf89c321084b89c6c92d87280512a-removebg-preview-nwqDcq7zXlBaFsHPN6fI8H1AfYeWXP.png"
            alt="Decoration"
            width={32}
            height={32}
            className="w-8 h-8 opacity-50"
          />
          <Image
            src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/57cb50e15c18d176fcc2aeee57e46503-removebg-preview-tqQZxXMfNx2j6dhUclOB8sfciuY0pQ.png"
            alt="Decoration"
            width={32}
            height={32}
            className="w-8 h-8 opacity-50"
          />
        </motion.div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="middleware.ts" isMerged="true"
import { NextResponse } from "next/server"
import type { NextRequest } from "next/server"

export function middleware(request: NextRequest) {
  // For demo purposes, we'll allow access to sign-in and static assets
  const publicPaths = ["/sign-in"]
  const isPublicPath = publicPaths.some((path) => request.nextUrl.pathname.startsWith(path))

// For demo purposes, we'll consider the user authenticated if they're not on a public path
  const isAuthenticated = !isPublicPath

// If the user is not authenticated and trying to access a protected route,
  // redirect them to the sign-in page
  if (!isAuthenticated && !isPublicPath) {
    return NextResponse.redirect(new URL("/sign-in", request.url))
  }

// If the user is authenticated and trying to access the sign-in page,
  // redirect them to the home page
  if (isAuthenticated && isPublicPath) {
    return NextResponse.redirect(new URL("/", request.url))
  }

return NextResponse.next()
}

export const config = {
  matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"],
}

[V0_FILE]typescript:file="lib/utils.ts" isMerged="true"
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

[V0_FILE]typescriptreact:file="components/logout-button.tsx" isMerged="true"
"use client"

import { useRouter } from "next/navigation"
import Image from "next/image"
import { LogOut } from "lucide-react"
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"

export function LogoutButton() {
  const router = useRouter()

const handleLogout = () => {
    // In a real app, you would also clear the auth state/cookies here
    router.push("/sign-in")
  }

return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="ghost" size="icon" className="rounded-full">
          <LogOut className="h-5 w-5" />
          <span className="sr-only">Logout</span>
        </Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-md">
        <div className="flex flex-col items-center text-center">
          <div className="relative w-24 h-24 mb-2">
            <Image
              src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/545b46b4a5bedb7451bcdfd2378487e8-removebg-preview-MY8XYCWjquC8DHJr5v5QncDMOZLr9t.png"
              alt="Sad Pochacco"
              width={96}
              height={96}
              className="w-24 h-24 object-contain"
            />
          </div>
          <DialogHeader>
            <DialogTitle className="text-xl">Aww, leaving so soon?</DialogTitle>
            <DialogDescription className="text-center pt-2">
              Pochacco will miss you! Are you sure you want to log out?
            </DialogDescription>
          </DialogHeader>
        </div>
        <DialogFooter className="flex flex-row justify-center gap-2 sm:justify-center mt-2">
          <DialogTrigger asChild>
            <Button variant="outline" className="rounded-full">
              Stay with Pochacco
            </Button>
          </DialogTrigger>
          <Button onClick={handleLogout} className="rounded-full">
            <LogOut className="h-4 w-4 mr-2" />
            Log out
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}

[V0_FILE]typescriptreact:file="components/ui/dialog.tsx" isMerged="true"
"use client"

import { DialogClose } from "@/components/ui/dialog"

import * as React from "react"
import * as DialogPrimitive from "@radix-ui/react-dialog"
import { X } from "lucide-react"
import { cn } from "@/lib/utils"

const Dialog = DialogPrimitive.Root

const DialogTrigger = DialogPrimitive.Trigger

const DialogPortal = DialogPrimitive.Portal

const DialogOverlay = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Overlay
    ref={ref}
    className={cn(
      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
      className,
    )}
    {...props}
  />
))
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName

const DialogContent = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <DialogPortal>
    <DialogOverlay />
    <DialogPrimitive.Content
      ref={ref}
      className={cn(
        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
        className,
      )}
      {...props}
    >
      {children}
      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
        <X className="h-4 w-4" />
        <span className="sr-only">Close</span>
      </DialogPrimitive.Close>
    </DialogPrimitive.Content>
  </DialogPortal>
))
DialogContent.displayName = DialogPrimitive.Content.displayName

const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
  <div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
)
DialogHeader.displayName = "DialogHeader"

const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
  <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
)
DialogFooter.displayName = "DialogFooter"

const DialogTitle = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Title
    ref={ref}
    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
    {...props}
  />
))
DialogTitle.displayName = DialogPrimitive.Title.displayName

const DialogDescription = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Description>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
))
DialogDescription.displayName = DialogPrimitive.Description.displayName

export {
  Dialog,
  DialogPortal,
  DialogOverlay,
  DialogClose,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogDescription,
}

[V0_FILE]typescriptreact:file="components/comment-dialog.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { ScrollArea } from "@/components/ui/scroll-area"
import { MessageBubble } from "@/components/message-bubble"
import { ImageIcon, Smile, Send } from "lucide-react"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"

interface Comment {
  id: string
  content: string
  user: {
    name: string
    username: string
    avatar: string
  }
  time: string
}

interface CommentDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  postId: string
  comments: Comment[]
  onAddComment: (postId: string, comment: string) => void
}

export function CommentDialog({ open, onOpenChange, postId, comments, onAddComment }: CommentDialogProps) {
  const [newComment, setNewComment] = useState("")

const handleSubmit = () => {
    if (newComment.trim()) {
      onAddComment(postId, newComment)
      setNewComment("")
    }
  }

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <div className="flex items-center gap-2">
            <Image
              src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/178332fac1e5e1b732868fc5e022ff18-removebg-preview-4hRR0R8JErWvImDv3YRgc3dR4pOTAw.png"
              alt="Comments"
              width={24}
              height={24}
              className="w-6 h-6"
            />
            <DialogTitle>Comments</DialogTitle>
          </div>
        </DialogHeader>

{/* Comments List */}
        <ScrollArea className="h-[300px] pr-4 -mr-4">
          <div className="space-y-4">
            {comments.map((comment) => (
              <div key={comment.id} className="flex gap-3">
                <div className="w-8 h-8 flex-shrink-0">
                  <Image
                    src={comment.user.avatar || "/placeholder.svg"}
                    alt={comment.user.name}
                    width={32}
                    height={32}
                    className="w-8 h-8 object-contain"
                  />
                </div>
                <div className="flex-1">
                  <MessageBubble>
                    <div className="flex items-center gap-2 mb-1">
                      <span className="font-medium text-sm">{comment.user.name}</span>
                      <span className="text-xs text-muted-foreground">@{comment.user.username}</span>
                      <span className="text-xs text-muted-foreground">· {comment.time}</span>
                    </div>
                    <p className="text-sm">{comment.content}</p>
                  </MessageBubble>
                </div>
              </div>
            ))}
          </div>
        </ScrollArea>

{/* Comment Input */}
        <div className="border-t border-border pt-4 mt-4">
          <div className="flex gap-3">
            <div className="w-8 h-8 flex-shrink-0">
              <Image
                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/abb138b5522c9e9fe84bb000f585f469-removebg-preview-ph7iZIPtDTpkLj0morKnG8P3DN7ibp.png"
                alt="Your avatar"
                width={32}
                height={32}
                className="w-8 h-8 object-contain"
              />
            </div>
            <div className="flex-1">
              <MessageBubble>
                <Textarea
                  value={newComment}
                  onChange={(e) => setNewComment(e.target.value)}
                  placeholder="Add a comment..."
                  className="min-h-[60px] resize-none border-0 focus-visible:ring-0 p-0 placeholder:text-muted-foreground/60"
                />
                <div className="flex items-center justify-between mt-3 gap-2">
                  <div className="flex gap-1">
                    <Button variant="ghost" size="icon" className="rounded-full text-primary">
                      <ImageIcon className="h-5 w-5" />
                    </Button>
                    <Button variant="ghost" size="icon" className="rounded-full text-primary">
                      <Smile className="h-5 w-5" />
                    </Button>
                  </div>
                  <Button className="rounded-full" onClick={handleSubmit} disabled={!newComment.trim()}>
                    <Send className="h-4 w-4 mr-2" />
                    Send
                  </Button>
                </div>
              </MessageBubble>
            </div>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
}

[V0_FILE]typescriptreact:file="components/compose-dialog.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Image from "next/image"
import { ImageIcon, Smile, MapPin } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { MessageBubble } from "@/components/message-bubble"

interface ComposeDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  onPost: (content: string) => void
}

export function ComposeDialog({ open, onOpenChange, onPost }: ComposeDialogProps) {
  const [content, setContent] = useState("")
  const maxLength = 280

const handlePost = () => {
    if (content.trim()) {
      onPost(content)
      setContent("")
      onOpenChange(false)
    }
  }

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>Create Post</DialogTitle>
        </DialogHeader>
        <div className="grid gap-4 py-4">
          <div className="flex gap-4">
            <div className="relative">
              <div className="w-12 h-12 flex items-center justify-center">
                <Image
                  src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/abb138b5522c9e9fe84bb000f585f469-removebg-preview-ph7iZIPtDTpkLj0morKnG8P3DN7ibp.png"
                  alt="Your Avatar"
                  width={48}
                  height={48}
                  className="w-12 h-12 object-contain"
                />
              </div>
            </div>
            <div className="flex-1">
              <MessageBubble>
                <Textarea
                  value={content}
                  onChange={(e) => setContent(e.target.value)}
                  placeholder="What's on your mind?"
                  className="min-h-[120px] resize-none border-0 focus-visible:ring-0 p-0 placeholder:text-muted-foreground/60"
                />
                <div className="flex items-center justify-between mt-3 gap-2">
                  <div className="flex gap-1">
                    <Button variant="ghost" size="icon" className="rounded-full text-primary">
                      <ImageIcon className="h-5 w-5" />
                    </Button>
                    <Button variant="ghost" size="icon" className="rounded-full text-primary">
                      <Smile className="h-5 w-5" />
                    </Button>
                    <Button variant="ghost" size="icon" className="rounded-full text-primary">
                      <MapPin className="h-5 w-5" />
                    </Button>
                  </div>
                  <div className="flex items-center gap-2">
                    <span
                      className={`text-sm ${content.length > maxLength ? "text-destructive" : "text-muted-foreground"}`}
                    >
                      {content.length}/{maxLength}
                    </span>
                    <Button
                      onClick={handlePost}
                      disabled={!content.trim() || content.length > maxLength}
                      className="rounded-full"
                    >
                      Post
                    </Button>
                  </div>
                </div>
              </MessageBubble>
            </div>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
}

[V0_FILE]typescriptreact:file="components/post.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import Image from "next/image"
import { ImageIcon, Smile, Send } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { MessageBubble } from "@/components/message-bubble"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { ScrollArea } from "@/components/ui/scroll-area"
import { motion, AnimatePresence } from "framer-motion"

interface Comment {
  id: string
  content: string
  user: {
    name: string
    username: string
    avatar: string
  }
  time: string
}

interface PostProps {
  id: string
  username: string
  name: string
  time: string
  content: string
  initialLikes: number
  initialComments: Comment[] | number
  avatarType: "cat" | "dog"
  onRepost?: () => void
  isReposted?: boolean
  reposts?: number
  isRepost?: boolean
  originalUser?: {
    name: string
    username: string
    gender: "male" | "female" | "nonbinary"
  }
}

export function Post({
  id,
  username,
  name,
  time,
  content,
  initialLikes,
  initialComments,
  avatarType,
  onRepost,
  isReposted = false,
  reposts: initialReposts = 0,
  isRepost = false,
  originalUser,
}: PostProps) {
  const [likes, setLikes] = useState(initialLikes)
  const [comments, setComments] = useState<Comment[]>(() => {
    if (typeof initialComments === "number") {
      return []
    }
    return initialComments
  })
  const [isLiked, setIsLiked] = useState(false)
  const [showAllComments, setShowAllComments] = useState(false)
  const [showComments, setShowComments] = useState(false) // New state for showing/hiding comments
  const [newComment, setNewComment] = useState("")
  const [isCommentBoxExpanded, setIsCommentBoxExpanded] = useState(false)
  const [reposts, setReposts] = useState(initialReposts)
  const [hasReposted, setHasReposted] = useState(isReposted)

const handleLike = () => {
    if (isLiked) {
      setLikes(likes - 1)
    } else {
      setLikes(likes + 1)
    }
    setIsLiked(!isLiked)
  }

const handleCommentClick = () => {
    setShowComments(!showComments)
    if (!showComments) {
      setIsCommentBoxExpanded(true)
    }
  }

const handleAddComment = () => {
    if (newComment.trim()) {
      const comment: Comment = {
        id: `c${Date.now()}`,
        content: newComment,
        user: {
          name: "You",
          username: "your_username",
          avatar:
            "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/abb138b5522c9e9fe84bb000f585f469-removebg-preview-ph7iZIPtDTpkLj0morKnG8P3DN7ibp.png",
        },
        time: "Just now",
      }
      setComments([...comments, comment])
      setNewComment("")
    }
  }

const handleRepost = () => {
    if (hasReposted) {
      setReposts(reposts - 1)
    } else {
      setReposts(reposts + 1)
    }
    setHasReposted(!hasReposted)
    onRepost?.()
  }

const recentComments = comments.slice(-2)
  const hasMoreComments = comments.length > 2

return (
    <div className="p-4 relative group">
      {isRepost && (
        <div className="flex items-center gap-2 mb-2 pl-16 text-sm text-muted-foreground">
          <Image
            src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/5ed326155fc4cfe63ef25b78c389274a-removebg-preview-PVqj7vQqpame95ZMjPzOZ7pNbXATiC.png"
            alt="Reposted"
            width={16}
            height={16}
            className="w-4 h-4 opacity-70"
          />
          <span>Reposted</span>
        </div>
      )}
      <div className="flex gap-4">
        <div className="relative">
          <motion.div
            className="w-12 h-12 flex items-center justify-center"
            whileHover={{ scale: 1.05 }}
            transition={{ type: "spring", stiffness: 400, damping: 17 }}
          >
            <Image
              src={
                avatarType === "cat"
                  ? "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/fas-removebg-preview-3vYj9A7kR9zPBx7ue0JxpsoirX08iH.png"
                  : "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Capture-removebg-preview-DZGMW5LSE0GjjTGLknXdS644WVOTZs.png"
              }
              alt="Avatar"
              width={48}
              height={48}
              className="w-12 h-12 object-contain"
            />
          </motion.div>
        </div>
        <div className="flex-1">
          <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3 }}>
            <MessageBubble>
              <div className="flex items-center gap-2 mb-2">
                <motion.span
                  className="font-medium text-foreground hover:text-primary cursor-pointer"
                  whileHover={{ scale: 1.02 }}
                >
                  {name}
                </motion.span>
                <span className="text-sm text-muted-foreground">@{username}</span>
                <span className="text-sm text-muted-foreground">· {time}</span>
              </div>
              <p className="text-foreground mb-3">{content}</p>
              <div className="flex gap-6">
                <motion.button
                  className="flex items-center gap-1 group/button"
                  onClick={handleLike}
                  whileHover={{ scale: 1.05 }}
                  whileTap={{ scale: 0.95 }}
                >
                  <motion.div
                    className="w-5 h-5 flex items-center justify-center"
                    animate={isLiked ? { scale: [1, 1.2, 1] } : {}}
                    transition={{ duration: 0.3 }}
                  >
                    <Image
                      src={
                        isLiked
                          ? "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/001e4a415b9e04c2a85e6af3191e94ef-removebg-preview-KCaV9bGSsoU0amSEFcwOIXCtulxXUu.png"
                          : "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/6fa34140b30a3dede0c3d1d049e58cbe-removebg-preview-hIa8K4vN6I1WjLOGHh6oD7CV819pSv.png"
                      }
                      alt="Like"
                      width={20}
                      height={20}
                      className="transition-transform group-hover/button:scale-110"
                    />
                  </motion.div>
                  <motion.span
                    className={`text-sm ${isLiked ? "text-[#ff9eb0]" : "text-muted-foreground"}`}
                    animate={{ scale: isLiked ? [1, 1.2, 1] : 1 }}
                  >
                    {likes}
                  </motion.span>
                </motion.button>
                <motion.button
                  className="flex items-center gap-1 group/button"
                  onClick={handleCommentClick}
                  whileHover={{ scale: 1.05 }}
                  whileTap={{ scale: 0.95 }}
                >
                  <div className="w-5 h-5 flex items-center justify-center">
                    <Image
                      src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/178332fac1e5e1b732868fc5e022ff18-removebg-preview-4hRR0R8JErWvImDv3YRgc3dR4pOTAw.png"
                      alt="Comment"
                      width={20}
                      height={20}
                      className="transition-transform group-hover/button:scale-110"
                    />
                  </div>
                  <span className="text-sm text-muted-foreground">{comments.length}</span>
                </motion.button>
                <motion.button
                  className="flex items-center gap-1 group/button"
                  onClick={handleRepost}
                  whileHover={{ scale: 1.05 }}
                  whileTap={{ scale: 0.95 }}
                >
                  <motion.div
                    className="w-5 h-5 flex items-center justify-center"
                    animate={hasReposted ? { rotate: [0, 360] } : {}}
                    transition={{ duration: 0.5 }}
                  >
                    <Image
                      src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/5ed326155fc4cfe63ef25b78c389274a-removebg-preview-PVqj7vQqpame95ZMjPzOZ7pNbXATiC.png"
                      alt="Repost"
                      width={20}
                      height={20}
                      className={`transition-transform group-hover/button:scale-110 ${
                        hasReposted ? "opacity-100" : "opacity-70"
                      }`}
                      style={{
                        filter: hasReposted ? "hue-rotate(85deg) saturate(1.5)" : "none",
                      }}
                    />
                  </motion.div>
                  <span className={`text-sm ${hasReposted ? "text-[#22c55e]" : "text-muted-foreground"}`}>
                    {reposts}
                  </span>
                </motion.button>
              </div>
            </MessageBubble>
          </motion.div>

{/* Inline Comments Section */}
          <AnimatePresence>
            {showComments && (
              <motion.div
                className="mt-2 pl-2 space-y-2"
                initial={{ opacity: 0, height: 0 }}
                animate={{ opacity: 1, height: "auto" }}
                exit={{ opacity: 0, height: 0 }}
                transition={{ duration: 0.3, ease: "easeInOut" }}
              >
                {recentComments.map((comment, index) => (
                  <motion.div
                    key={comment.id}
                    className="flex gap-2"
                    initial={{ opacity: 0, x: -20 }}
                    animate={{ opacity: 1, x: 0 }}
                    transition={{ delay: index * 0.1 }}
                  >
                    <div className="w-8 h-8 flex-shrink-0">
                      <Image
                        src={comment.user.avatar || "/placeholder.svg"}
                        alt={comment.user.name}
                        width={32}
                        height={32}
                        className="w-8 h-8 object-contain"
                      />
                    </div>
                    <div className="flex-1">
                      <MessageBubble>
                        <div className="flex items-center gap-2 mb-1">
                          <span className="font-medium text-sm">{comment.user.name}</span>
                          <span className="text-xs text-muted-foreground">@{comment.user.username}</span>
                          <span className="text-xs text-muted-foreground">· {comment.time}</span>
                        </div>
                        <p className="text-sm">{comment.content}</p>
                      </MessageBubble>
                    </div>
                  </motion.div>
                ))}

{hasMoreComments && (
                  <motion.button
                    className="text-sm text-primary hover:text-primary/80 transition-colors pl-10 group/more flex items-center gap-1"
                    onClick={() => setShowAllComments(true)}
                    initial={{ opacity: 0 }}
                    animate={{ opacity: 1 }}
                    transition={{ delay: 0.2 }}
                  >
                    <span>View all {comments.length} comments</span>
                    <motion.span
                      animate={{ x: [0, 4, 0] }}
                      transition={{ repeat: Number.POSITIVE_INFINITY, duration: 1.5 }}
                    >
                      →
                    </motion.span>
                  </motion.button>
                )}

{/* Inline Comment Box */}
                <AnimatePresence>
                  {isCommentBoxExpanded && (
                    <motion.div
                      className="flex gap-2 pl-2"
                      initial={{ opacity: 0, y: 20 }}
                      animate={{ opacity: 1, y: 0 }}
                      exit={{ opacity: 0, y: 20 }}
                    >
                      <div className="w-8 h-8 flex-shrink-0">
                        <Image
                          src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/abb138b5522c9e9fe84bb000f585f469-removebg-preview-ph7iZIPtDTpkLj0morKnG8P3DN7ibp.png"
                          alt="Your avatar"
                          width={32}
                          height={32}
                          className="w-8 h-8 object-contain"
                        />
                      </div>
                      <div className="flex-1">
                        <MessageBubble>
                          <Textarea
                            value={newComment}
                            onChange={(e) => setNewComment(e.target.value)}
                            placeholder="Add a comment..."
                            className="min-h-[60px] resize-none border-0 focus-visible:ring-0 p-0 placeholder:text-muted-foreground/60 text-sm"
                          />
                          <motion.div
                            className="flex items-center justify-between mt-3 gap-2"
                            initial={{ opacity: 0 }}
                            animate={{ opacity: 1 }}
                            transition={{ delay: 0.2 }}
                          >
                            <div className="flex gap-1">
                              <Button variant="ghost" size="icon" className="rounded-full text-primary">
                                <ImageIcon className="h-5 w-5" />
                              </Button>
                              <Button variant="ghost" size="icon" className="rounded-full text-primary">
                                <Smile className="h-5 w-5" />
                              </Button>
                            </div>
                            <Button className="rounded-full" onClick={handleAddComment} disabled={!newComment.trim()}>
                              <Send className="h-4 w-4 mr-2" />
                              Send
                            </Button>
                          </motion.div>
                        </MessageBubble>
                      </div>
                    </motion.div>
                  )}
                </AnimatePresence>
              </motion.div>
            )}
          </AnimatePresence>
        </div>
      </div>

{/* Full Comments Dialog */}
      <Dialog open={showAllComments} onOpenChange={setShowAllComments}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <div className="flex items-center gap-2">
              <Image
                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/178332fac1e5e1b732868fc5e022ff18-removebg-preview-4hRR0R8JErWvImDv3YRgc3dR4pOTAw.png"
                alt="Comments"
                width={24}
                height={24}
                className="w-6 h-6"
              />
              <DialogTitle>All Comments</DialogTitle>
            </div>
          </DialogHeader>
          <ScrollArea className="h-[400px] pr-4 -mr-4">
            <div className="space-y-4">
              {comments.map((comment, index) => (
                <motion.div
                  key={comment.id}
                  className="flex gap-3"
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: index * 0.1 }}
                >
                  <div className="w-8 h-8 flex-shrink-0">
                    <Image
                      src={comment.user.avatar || "/placeholder.svg"}
                      alt={comment.user.name}
                      width={32}
                      height={32}
                      className="w-8 h-8 object-contain"
                    />
                  </div>
                  <div className="flex-1">
                    <MessageBubble>
                      <div className="flex items-center gap-2 mb-1">
                        <span className="font-medium text-sm">{comment.user.name}</span>
                        <span className="text-xs text-muted-foreground">@{comment.user.username}</span>
                        <span className="text-xs text-muted-foreground">· {comment.time}</span>
                      </div>
                      <p className="text-sm">{comment.content}</p>
                    </MessageBubble>
                  </div>
                </motion.div>
              ))}
            </div>
          </ScrollArea>
        </DialogContent>
      </Dialog>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/edit-profile-dialog.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Image from "next/image"
import { motion } from "framer-motion"
import { Check } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"

interface EditProfileDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  initialProfile: {
    name: string
    username: string
    bio: string
    gender: "male" | "female" | "nonbinary"
    bannerColor: string
  }
  onSave: (profile: {
    name: string
    username: string
    bio: string
    gender: "male" | "female" | "nonbinary"
    bannerColor: string
  }) => void
}

const BANNER_COLORS = [
  "from-pink-500/20 to-purple-500/20",
  "from-blue-500/20 to-cyan-500/20",
  "from-green-500/20 to-emerald-500/20",
  "from-orange-500/20 to-yellow-500/20",
  "from-purple-500/20 to-indigo-500/20",
]

export function EditProfileDialog({ open, onOpenChange, initialProfile, onSave }: EditProfileDialogProps) {
  const [profile, setProfile] = useState(initialProfile)
  const [isLoading, setIsLoading] = useState(false)

const handleSave = async () => {
    setIsLoading(true)
    // Simulate API call
    await new Promise((resolve) => setTimeout(resolve, 1000))
    onSave(profile)
    setIsLoading(false)
    onOpenChange(false)
  }

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>Edit Profile</DialogTitle>
          <DialogDescription>Customize your profile to make it more you! ✨</DialogDescription>
        </DialogHeader>

<div className="grid gap-6 py-4">
          {/* Banner Preview */}
          <div className="relative -mt-2 -mx-6 h-28">
            <div className={`w-full h-full bg-gradient-to-r ${profile.bannerColor}`} />
            <div className="absolute left-6 bottom-0 translate-y-1/2">
              <motion.div
                className="relative w-20 h-20 rounded-full border-4 border-background overflow-hidden"
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
              >
                <Image
                  src={getAvatarByGender(profile.gender) || "/placeholder.svg"}
                  alt="Avatar"
                  width={80}
                  height={80}
                  className="w-full h-full object-cover"
                />
              </motion.div>
            </div>
          </div>

{/* Banner Color Selection */}
          <div className="space-y-2 pt-4">
            <Label>Banner Style</Label>
            <div className="flex flex-wrap gap-2">
              {BANNER_COLORS.map((color) => (
                <button
                  key={color}
                  className={`w-12 h-8 rounded-md relative overflow-hidden transition-transform hover:scale-105 
                    ${profile.bannerColor === color ? "ring-2 ring-primary ring-offset-2" : "hover:ring-1 hover:ring-muted-foreground"}`}
                  onClick={() => setProfile({ ...profile, bannerColor: color })}
                >
                  <div className={`w-full h-full bg-gradient-to-r ${color}`} />
                  {profile.bannerColor === color && (
                    <motion.div
                      initial={{ scale: 0 }}
                      animate={{ scale: 1 }}
                      className="absolute inset-0 flex items-center justify-center bg-primary/20"
                    >
                      <Check className="w-4 h-4 text-primary" />
                    </motion.div>
                  )}
                </button>
              ))}
            </div>
          </div>

{/* Avatar Selection */}
          <div className="space-y-2">
            <Label>Choose Your Style</Label>
            <RadioGroup
              value={profile.gender}
              onValueChange={(value: "male" | "female" | "nonbinary") => setProfile({ ...profile, gender: value })}
              className="grid grid-cols-3 gap-4"
            >
              {[
                { value: "male", label: "Boy" },
                { value: "female", label: "Girl" },
                { value: "nonbinary", label: "Non-binary" },
              ].map((option) => (
                <div key={option.value}>
                  <RadioGroupItem value={option.value} id={option.value} className="peer sr-only" />
                  <Label
                    htmlFor={option.value}
                    className="flex flex-col items-center justify-center gap-2 rounded-lg border-2 border-muted p-2 hover:bg-accent peer-data-[state=checked]:border-primary cursor-pointer"
                  >
                    <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} className="w-16 h-16">
                      <Image
                        src={getAvatarByGender(option.value) || "/placeholder.svg"}
                        alt={option.label}
                        width={64}
                        height={64}
                        className="w-full h-full object-contain"
                      />
                    </motion.div>
                    <span className="text-sm">{option.label}</span>
                  </Label>
                </div>
              ))}
            </RadioGroup>
          </div>

{/* Profile Information */}
          <div className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="name">Display Name</Label>
              <Input
                id="name"
                value={profile.name}
                onChange={(e) => setProfile({ ...profile, name: e.target.value })}
                placeholder="Your display name"
                maxLength={50}
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="username">Username</Label>
              <div className="relative">
                <span className="absolute left-3 top-2.5 text-muted-foreground">@</span>
                <Input
                  id="username"
                  value={profile.username}
                  onChange={(e) => setProfile({ ...profile, username: e.target.value })}
                  className="pl-8"
                  placeholder="username"
                  maxLength={30}
                />
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="bio">Bio</Label>
              <Textarea
                id="bio"
                value={profile.bio}
                onChange={(e) => setProfile({ ...profile, bio: e.target.value })}
                placeholder="Tell us about yourself..."
                className="resize-none"
                rows={4}
                maxLength={160}
              />
              <p className="text-xs text-muted-foreground text-right">{profile.bio.length}/160</p>
            </div>
          </div>

<div className="flex justify-end gap-2">
            <Button variant="outline" onClick={() => onOpenChange(false)} className="rounded-full">
              Cancel
            </Button>
            <Button onClick={handleSave} disabled={isLoading} className="rounded-full">
              {isLoading ? (
                <div className="flex items-center gap-2">
                  <div className="w-4 h-4">
                    <Image
                      src={getAvatarByGender(profile.gender) || "/placeholder.svg"}
                      alt="Loading"
                      width={16}
                      height={16}
                      className="w-4 h-4 animate-spin"
                    />
                  </div>
                  <span>Saving...</span>
                </div>
              ) : (
                "Save Changes"
              )}
            </Button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
}

[V0_FILE]typescriptreact:file="components/ui/radio-group.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
import { Circle } from "lucide-react"

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

const RadioGroup = React.forwardRef<
  React.ElementRef<typeof RadioGroupPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
>(({ className, ...props }, ref) => {
  return <RadioGroupPrimitive.Root className={cn("grid gap-2", className)} {...props} ref={ref} />
})
RadioGroup.displayName = RadioGroupPrimitive.Root.displayName

const RadioGroupItem = React.forwardRef<
  React.ElementRef<typeof RadioGroupPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
>(({ className, ...props }, ref) => {
  return (
    <RadioGroupPrimitive.Item
      ref={ref}
      className={cn(
        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
        className,
      )}
      {...props}
    >
      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
        <Circle className="h-2.5 w-2.5 fill-current text-current" />
      </RadioGroupPrimitive.Indicator>
    </RadioGroupPrimitive.Item>
  )
})
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName

export { RadioGroup, RadioGroupItem }

[V0_FILE]typescriptreact:file="app/notifications/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import Image from "next/image"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { MessageBubble } from "@/components/message-bubble"
import { SiteHeader } from "@/components/site-header"
import { BottomNav } from "@/components/bottom-nav"
import { motion, AnimatePresence } from "framer-motion"

interface NotificationProps {
  type: "like" | "comment" | "follow"
  username: string
  content?: string
  time: string
  avatarType: "cat" | "dog"
}

function NotificationGroup({ title, icon }: { title: string; icon: string }) {
  return (
    <motion.div
      initial={{ opacity: 0, y: -10 }}
      animate={{ opacity: 1, y: 0 }}
      className="sticky top-0 z-10 px-4 py-2 bg-background"
    >
      <motion.div
        className="flex items-center gap-2 date-bubble inline-block px-4 py-1.5"
        whileHover={{ scale: 1.02 }}
        whileTap={{ scale: 0.98 }}
      >
        <Image src={icon || "/placeholder.svg"} alt={title} width={24} height={24} className="w-6 h-6" />
        <span className="text-sm font-medium text-foreground">{title}</span>
      </motion.div>
    </motion.div>
  )
}

function Notification({ type, username, content, time, avatarType }: NotificationProps) {
  const getNotificationImage = (type: string) => {
    switch (type) {
      case "like":
        return "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/8bbdf89c321084b89c6c92d87280512a-removebg-preview-nwqDcq7zXlBaFsHPN6fI8H1AfYeWXP.png"
      case "comment":
        return "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/85db78219a8744b6afc5298dba8411f1-removebg-preview-9X7paiPURrWgT4OzbybyCbkPYj6M3q.png"
      case "follow":
        return "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/57cb50e15c18d176fcc2aeee57e46503-removebg-preview-tqQZxXMfNx2j6dhUclOB8sfciuY0pQ.png"
      default:
        return "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/6fa34140b30a3dede0c3d1d049e58cbe-removebg-preview-hIa8K4vN6I1WjLOGHh6oD7CV819pSv.png"
    }
  }

return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -20 }}
      whileHover={{ scale: 1.01 }}
      className="p-4 relative"
    >
      <div className="flex gap-4">
        <div className="relative">
          <motion.div
            className="w-12 h-12 flex items-center justify-center"
            whileHover={{ scale: 1.05 }}
            transition={{ type: "spring", stiffness: 400, damping: 17 }}
          >
            <Image
              src={
                avatarType === "cat"
                  ? "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/fas-removebg-preview-3vYj9A7kR9zPBx7ue0JxpsoirX08iH.png"
                  : "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Capture-removebg-preview-DZGMW5LSE0GjjTGLknXdS644WVOTZs.png"
              }
              alt="Avatar"
              width={48}
              height={48}
              className="w-12 h-12 object-contain"
            />
          </motion.div>
        </div>
        <div className="flex-1">
          <MessageBubble>
            <div className="flex items-center gap-2 mb-2">
              <motion.span
                className="font-medium text-foreground hover:text-primary cursor-pointer"
                whileHover={{ scale: 1.02 }}
              >
                {username}
              </motion.span>
              <span className="text-sm text-muted-foreground">· {time}</span>
            </div>
            <div className="flex items-start gap-3">
              <motion.div whileHover={{ scale: 1.1, rotate: [0, -5, 5, -5, 0] }} transition={{ duration: 0.5 }}>
                <Image
                  src={getNotificationImage(type) || "/placeholder.svg"}
                  alt={type}
                  width={40}
                  height={40}
                  className="w-10 h-10 object-contain"
                />
              </motion.div>
              <p className="text-foreground pt-1">
                {type === "like" && "liked your post"}
                {type === "comment" && `commented: ${content}`}
                {type === "follow" && "started following you"}
              </p>
            </div>
          </MessageBubble>
        </div>
      </div>
    </motion.div>
  )
}

export default function NotificationsPage() {
  const [notifications] = useState<NotificationProps[]>([
    { type: "like", username: "Lily", time: "2h ago", avatarType: "dog" },
    { type: "comment", username: "Mia", content: "That looks so yummy! 🍪", time: "4h ago", avatarType: "cat" },
    { type: "follow", username: "Sophie", time: "1d ago", avatarType: "dog" },
    { type: "like", username: "Max", time: "2d ago", avatarType: "cat" },
  ])

// Add state to track when a notification is being interacted with
  const [activeNotification, setActiveNotification] = useState<string | null>(null)

return (
    <div className="flex flex-col min-h-screen bg-background">
      <div className="sticky top-0 z-50">
        <SiteHeader showBack title="Notifications" />
      </div>

<main className="flex-1">
        <Tabs defaultValue="all" className="w-full">
          <TabsList className="w-full grid grid-cols-3 bg-background border-b border-border">
            <TabsTrigger
              value="all"
              className="text-muted-foreground data-[state=active]:text-primary data-[state=active]:border-b-2 data-[state=active]:border-primary"
            >
              All
            </TabsTrigger>
            <TabsTrigger
              value="mentions"
              className="text-muted-foreground data-[state=active]:text-primary data-[state=active]:border-b-2 data-[state=active]:border-primary"
            >
              Mentions
            </TabsTrigger>
            <TabsTrigger
              value="likes"
              className="text-muted-foreground data-[state=active]:text-primary data-[state=active]:border-b-2 data-[state=active]:border-primary"
            >
              Likes
            </TabsTrigger>
          </TabsList>

<AnimatePresence mode="wait">
            <TabsContent value="all" className="p-0 mt-0" asChild>
              <motion.div
                initial={{ opacity: 0, y: 10 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: -10 }}
                transition={{ duration: 0.3 }}
              >
                <ScrollArea className="h-[calc(100vh-8rem)]">
                  {notifications.length > 0 ? (
                    <motion.div
                      initial={{ opacity: 0 }}
                      animate={{ opacity: 1 }}
                      exit={{ opacity: 0 }}
                      className="divide-y divide-border/50"
                    >
                      <NotificationGroup
                        title="Recent"
                        icon="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/6fa34140b30a3dede0c3d1d049e58cbe-removebg-preview-hIa8K4vN6I1WjLOGHh6oD7CV819pSv.png"
                      />
                      <AnimatePresence>
                        {notifications.map((notification, index) => {
                          const notificationId = `${notification.type}-${notification.username}-${notification.time}`
                          const isActive = activeNotification === notificationId

return (
                            <motion.div
                              key={notificationId}
                              initial={{ opacity: 0, y: 20 }}
                              animate={{
                                opacity: 1,
                                y: 0,
                                scale: isActive ? 1.02 : 1,
                                backgroundColor: isActive ? "var(--muted)" : "transparent",
                              }}
                              exit={{ opacity: 0, y: -20 }}
                              transition={{
                                delay: index * 0.1,
                                duration: 0.3,
                                type: "spring",
                                stiffness: 500,
                                damping: 30,
                              }}
                              onHoverStart={() => setActiveNotification(notificationId)}
                              onHoverEnd={() => setActiveNotification(null)}
                              className="rounded-lg mx-2 my-1"
                            >
                              <EnhancedNotification {...notification} isActive={isActive} />
                            </motion.div>
                          )
                        })}
                      </AnimatePresence>
                    </motion.div>
                  ) : (
                    <EnhancedEmptyState
                      image="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/b16627dccea3244a1ac9b10517a00149-removebg-preview-LteJWFBKOf4YL6c70Q5GfwDkI3Xqhj.png"
                      title="All caught up!"
                      description="Check back later for new notifications"
                    />
                  )}
                </ScrollArea>
              </motion.div>
            </TabsContent>

<TabsContent value="likes" className="p-0 mt-0" asChild>
              <motion.div
                initial={{ opacity: 0, y: 10 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: -10 }}
                transition={{ duration: 0.3 }}
              >
                <ScrollArea className="h-[calc(100vh-8rem)]">
                  <motion.div
                    initial={{ opacity: 0 }}
                    animate={{ opacity: 1 }}
                    exit={{ opacity: 0 }}
                    className="divide-y divide-border/50"
                  >
                    <NotificationGroup
                      title="Likes"
                      icon="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/8bbdf89c321084b89c6c92d87280512a-removebg-preview-nwqDcq7zXlBaFsHPN6fI8H1AfYeWXP.png"
                    />
                    <AnimatePresence>
                      {notifications
                        .filter((n) => n.type === "like")
                        .map((notification, index) => {
                          const notificationId = `${notification.type}-${notification.username}-${notification.time}`
                          const isActive = activeNotification === notificationId

return (
                            <motion.div
                              key={notificationId}
                              initial={{ opacity: 0, y: 20 }}
                              animate={{
                                opacity: 1,
                                y: 0,
                                scale: isActive ? 1.02 : 1,
                                backgroundColor: isActive ? "var(--muted)" : "transparent",
                              }}
                              exit={{ opacity: 0, y: -20 }}
                              transition={{
                                delay: index * 0.1,
                                duration: 0.3,
                                type: "spring",
                                stiffness: 500,
                                damping: 30,
                              }}
                              onHoverStart={() => setActiveNotification(notificationId)}
                              onHoverEnd={() => setActiveNotification(null)}
                              className="rounded-lg mx-2 my-1"
                            >
                              <EnhancedNotification {...notification} isActive={isActive} />
                            </motion.div>
                          )
                        })}
                    </AnimatePresence>
                  </motion.div>
                </ScrollArea>
              </motion.div>
            </TabsContent>
          </AnimatePresence>
        </Tabs>
      </main>

<BottomNav currentPath="/notifications" />
    </div>
  )
}

interface EnhancedNotificationProps extends NotificationProps {
  isActive: boolean
}

function EnhancedNotification({ type, username, content, time, avatarType, isActive }: EnhancedNotificationProps) {
  const getNotificationImage = (type: string) => {
    switch (type) {
      case "like":
        return "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/8bbdf89c321084b89c6c92d87280512a-removebg-preview-nwqDcq7zXlBaFsHPN6fI8H1AfYeWXP.png"
      case "comment":
        return "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/85db78219a8744b6afc5298dba8411f1-removebg-preview-9X7paiPURrWgT4OzbybyCbkPYj6M3q.png"
      case "follow":
        return "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/57cb50e15c18d176fcc2aeee57e46503-removebg-preview-tqQZxXMfNx2j6dhUclOB8sfciuY0pQ.png"
      default:
        return "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/6fa34140b30a3dede0c3d1d049e58cbe-removebg-preview-hIa8K4vN6I1WjLOGHh6oD7CV819pSv.png"
    }
  }

return (
    <div className="p-4 relative">
      <div className="flex gap-4">
        <div className="relative">
          <motion.div
            className="w-12 h-12 flex items-center justify-center"
            whileHover={{ scale: 1.1 }}
            transition={{ type: "spring", stiffness: 400, damping: 17 }}
          >
            <Image
              src={
                avatarType === "cat"
                  ? "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/fas-removebg-preview-3vYj9A7kR9zPBx7ue0JxpsoirX08iH.png"
                  : "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Capture-removebg-preview-DZGMW5LSE0GjjTGLknXdS644WVOTZs.png"
              }
              alt="Avatar"
              width={48}
              height={48}
              className="w-12 h-12 object-contain"
            />
          </motion.div>
        </div>
        <div className="flex-1">
          <MessageBubble>
            <div className="flex items-center gap-2 mb-2">
              <motion.span
                className="font-medium text-foreground hover:text-primary cursor-pointer"
                whileHover={{ scale: 1.05 }}
              >
                {username}
              </motion.span>
              <span className="text-sm text-muted-foreground">· {time}</span>
            </div>
            <div className="flex items-start gap-3">
              <motion.div
                whileHover={{ scale: 1.2 }}
                animate={
                  isActive
                    ? {
                        rotate:
                          type === "like"
                            ? [0, -5, 5, -5, 0]
                            : type === "comment"
                              ? [0, 5, -5, 5, 0]
                              : [0, 10, -10, 10, 0],
                        scale: [1, 1.2, 1.1, 1.2, 1.1],
                      }
                    : {}
                }
                transition={{
                  duration: 0.5,
                  repeat: isActive ? 1 : 0,
                  repeatType: "reverse",
                }}
              >
                <Image
                  src={getNotificationImage(type) || "/placeholder.svg"}
                  alt={type}
                  width={40}
                  height={40}
                  className="w-10 h-10 object-contain"
                />
              </motion.div>
              <motion.p
                className="text-foreground pt-1"
                animate={isActive ? { scale: [1, 1.02, 1] } : {}}
                transition={{ duration: 0.3 }}
              >
                {type === "like" && (
                  <span className="flex items-center gap-1">
                    liked your post
                    <motion.span
                      animate={
                        isActive
                          ? {
                              scale: [1, 1.3, 1],
                              color: ["#ff9eb0", "#ff6b8b", "#ff9eb0"],
                            }
                          : {}
                      }
                      transition={{ duration: 0.5 }}
                    >
                      ❤️
                    </motion.span>
                  </span>
                )}
                {type === "comment" && (
                  <span className="flex items-center gap-1">
                    commented:
                    <motion.span
                      animate={
                        isActive
                          ? {
                              y: [0, -3, 0],
                              scale: [1, 1.1, 1],
                            }
                          : {}
                      }
                      transition={{ duration: 0.5 }}
                    >
                      {content}
                    </motion.span>
                  </span>
                )}
                {type === "follow" && (
                  <span className="flex items-center gap-1">
                    started following you
                    <motion.span
                      animate={
                        isActive
                          ? {
                              rotate: [0, 10, -10, 10, 0],
                              scale: [1, 1.2, 1],
                            }
                          : {}
                      }
                      transition={{ duration: 0.5 }}
                    >
                      👋
                    </motion.span>
                  </span>
                )}
              </motion.p>
            </div>
          </MessageBubble>
        </div>
      </div>
    </div>
  )
}

function EnhancedEmptyState({ image, title, description }: { image: string; title: string; description: string }) {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.9 }}
      animate={{ opacity: 1, scale: 1 }}
      exit={{ opacity: 0, scale: 0.9 }}
      className="flex flex-col items-center justify-center h-[calc(100vh-12rem)] p-4 text-center"
    >
      <motion.div
        initial={{ y: 0 }}
        animate={{
          y: [0, -15, 0],
          rotate: [0, -3, 3, -3, 0],
        }}
        transition={{
          y: { duration: 2, repeat: Number.POSITIVE_INFINITY, repeatType: "reverse", ease: "easeInOut" },
          rotate: { duration: 4, repeat: Number.POSITIVE_INFINITY, repeatType: "reverse", ease: "easeInOut" },
        }}
      >
        <Image src={image || "/placeholder.svg"} alt={title} width={120} height={120} className="mb-4" />
      </motion.div>
      <motion.h3
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.2 }}
        className="text-lg font-medium mb-2"
      >
        {title}
      </motion.h3>
      <motion.p
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.3 }}
        className="text-sm text-muted-foreground"
      >
        {description}
      </motion.p>
      <motion.div
        initial={{ opacity: 0, scale: 0 }}
        animate={{ opacity: 1, scale: 1 }}
        transition={{ delay: 0.5, type: "spring" }}
        whileHover={{ scale: 1.1 }}
        className="mt-6"
      >
        <div className="flex items-center justify-center w-12 h-12 rounded-full bg-primary/10 text-primary">
          <motion.div
            animate={{
              scale: [1, 1.2, 1],
              rotate: [0, 10, 0, -10, 0],
            }}
            transition={{
              duration: 3,
              repeat: Number.POSITIVE_INFINITY,
              repeatType: "reverse",
            }}
          >
            {title.includes("caught up") ? "✓" : "🔔"}
          </motion.div>
        </div>
      </motion.div>
    </motion.div>
  )
}

function EmptyState({ image, title, description }: { image: string; title: string; description: string }) {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.9 }}
      animate={{ opacity: 1, scale: 1 }}
      exit={{ opacity: 0, scale: 0.9 }}
      className="flex flex-col items-center justify-center h-[calc(100vh-12rem)] p-4 text-center"
    >
      <motion.div
        initial={{ y: 10 }}
        animate={{ y: [10, -10] }}
        transition={{ duration: 2, repeat: Number.POSITIVE_INFINITY, repeatType: "reverse" }}
      >
        <Image src={image || "/placeholder.svg"} alt={title} width={120} height={120} className="mb-4" />
      </motion.div>
      <motion.h3
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.2 }}
        className="text-lg font-medium mb-2"
      >
        {title}
      </motion.h3>
      <motion.p
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.3 }}
        className="text-sm text-muted-foreground"
      >
        {description}
      </motion.p>
    </motion.div>
  )
}

[V0_FILE]typescriptreact:file="app/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { PlusCircle, ImageIcon, Smile } from "lucide-react"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { MessageBubble } from "@/components/message-bubble"
import { SiteHeader } from "@/components/site-header"
import { BottomNav } from "@/components/bottom-nav"
import { Textarea } from "@/components/ui/textarea"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Post } from "@/components/post"
import { ComposeDialog } from "@/components/compose-dialog"
import { motion } from "framer-motion"
import { useRouter } from "next/navigation"
import { CountdownHeader } from "@/components/countdown-header"

interface Comment {
  id: string
  content: string
  user: {
    name: string
    username: string
    avatar: string
  }
  time: string
}

interface CommentDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  postId: string
  comments: Comment[]
  onAddComment: (postId: string, content: string) => void
}

function CommentDialog({ open, onOpenChange, postId, comments, onAddComment }: CommentDialogProps) {
  const [commentContent, setCommentContent] = useState("")

const handleCommentSubmit = () => {
    if (commentContent.trim() !== "") {
      onAddComment(postId, commentContent)
      setCommentContent("")
      onOpenChange(false)
    }
  }

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>Comments</DialogTitle>
          <DialogDescription>View and add comments to this post.</DialogDescription>
        </DialogHeader>
        <div className="grid gap-4 py-4">
          <div className="relative">
            <ScrollArea className="h-[300px] pr-2">
              {comments.map((comment) => (
                <div key={comment.id} className="mb-4">
                  <div className="flex items-start gap-2">
                    <Image
                      src={comment.user.avatar || "/placeholder.svg"}
                      alt={comment.user.name}
                      width={32}
                      height={32}
                      className="rounded-full"
                    />
                    <div>
                      <div className="text-sm font-medium leading-none">{comment.user.name}</div>
                      <p className="text-sm text-muted-foreground">{comment.content}</p>
                      <div className="text-xs text-muted-foreground">{comment.time}</div>
                    </div>
                  </div>
                </div>
              ))}
            </ScrollArea>
          </div>
          <div className="grid gap-2">
            <Label htmlFor="comment">Add a comment</Label>
            <Input
              id="comment"
              value={commentContent}
              onChange={(e) => setCommentContent(e.target.value)}
              placeholder="Type your comment here"
            />
          </div>
        </div>
        <DialogFooter>
          <Button type="button" onClick={handleCommentSubmit}>
            Post Comment
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}

// ... existing interfaces

export default function HomePage() {
  const router = useRouter()
  // ... existing state
  const [isComposeOpen, setIsComposeOpen] = useState(false)
  const [posts, setPosts] = useState([
    {
      id: "1",
      username: "pochacco_lover",
      name: "Lily",
      time: "2h",
      content: "Just finished baking some cookies! Who wants to come over? 🍪✨",
      likes: 12,
      comments: [
        {
          id: "c1",
          content: "Those cookies look amazing! 😋",
          user: {
            name: "Sophie",
            username: "tea_time",
            avatar:
              "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/abb138b5522c9e9fe84bb000f585f469-removebg-preview-ph7iZIPtDTpkLj0morKnG8P3DN7ibp.png",
          },
          time: "1h ago",
        },
        {
          id: "c2",
          content: "Save some for me! 🍪",
          user: {
            name: "Max",
            username: "max_relax",
            avatar:
              "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/0c33ad275328ed5d0de5cfabdec9bc62-removebg-preview-wOBC7YjC0Scg5drWIP1vBltr6ZJUL9.png",
          },
          time: "30m ago",
        },
      ],
      avatarType: "dog" as const,
      reposts: 3,
      isReposted: false,
    },
    {
      id: "2",
      username: "cozy_corner",
      name: "Mia",
      time: "4h",
      content: "Movie night with friends! We're watching our favorite Studio Ghibli films 🎬 What's your favorite?",
      likes: 8,
      comments: [],
      avatarType: "cat" as const,
      reposts: 1,
      isReposted: false,
    },
    {
      id: "3",
      username: "tea_time",
      name: "Sophie",
      time: "6h",
      content: "Found the cutest Pochacco mug at the store today! Perfect for my morning tea 🍵",
      likes: 15,
      comments: [],
      avatarType: "dog" as const,
      reposts: 5,
      isReposted: false,
    },
  ])

const sampleComments = [
    {
      id: "c1",
      content: "Those cookies look amazing! 😋",
      user: {
        name: "Sophie",
        username: "tea_time",
        avatar:
          "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/abb138b5522c9e9fe84bb000f585f469-removebg-preview-ph7iZIPtDTpkLj0morKnG8P3DN7ibp.png",
      },
      time: "1h ago",
    },
    {
      id: "c2",
      content: "Save some for me! 🍪",
      user: {
        name: "Max",
        username: "max_relax",
        avatar:
          "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/0c33ad275328ed5d0de5cfabdec9bc62-removebg-preview-wOBC7YjC0Scg5drWIP1vBltr6ZJUL9.png",
      },
      time: "30m ago",
    },
  ]

const emptyComments: Comment[] = []

const handlePost = (content: string) => {
    const newPost = {
      id: `post-${Date.now()}`,
      username: "your_username",
      name: "You",
      time: "Just now",
      content,
      likes: 0,
      comments: [],
      avatarType: "dog" as const,
      reposts: 0,
      isReposted: false,
    }
    setPosts([newPost, ...posts])
  }

return (
    <div className="flex flex-col min-h-screen bg-background">
      <CountdownHeader />
      <SiteHeader />

{/* Main Content */}
      <main className="flex-1">
        <Tabs defaultValue="for-you" className="w-full">
          <TabsList className="w-full grid grid-cols-2 bg-background border-b border-border">
            <TabsTrigger
              value="for-you"
              className="text-muted-foreground data-[state=active]:text-primary data-[state=active]:border-b-2 data-[state=active]:border-primary"
            >
              For You
            </TabsTrigger>
            <TabsTrigger
              value="following"
              className="text-muted-foreground data-[state=active]:text-primary data-[state=active]:border-b-2 data-[state=active]:border-primary"
            >
              Following
            </TabsTrigger>
          </TabsList>
          <TabsContent value="for-you" className="p-0 mt-0">
            <ScrollArea className="h-[calc(100vh-8rem)]">
              {/* Compose Box */}
              <div className="p-3 border-b border-border">
                <div className="flex gap-4">
                  <div className="relative">
                    <div className="w-12 h-12 flex items-center justify-center">
                      <Image
                        src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/abb138b5522c9e9fe84bb000f585f469-removebg-preview-ph7iZIPtDTpkLj0morKnG8P3DN7ibp.png"
                        alt="Your Avatar"
                        width={48}
                        height={48}
                        className="w-12 h-12 object-contain"
                      />
                    </div>
                  </div>
                  <div className="flex-1">
                    <MessageBubble>
                      <Textarea
                        placeholder="What's on your mind?"
                        className="min-h-[60px] max-h-[120px] resize-none border-0 focus-visible:ring-0 p-0 placeholder:text-muted-foreground/60 text-sm"
                      />
                      <div className="flex items-center justify-between mt-3 gap-2">
                        <div className="flex gap-1">
                          <Button variant="ghost" size="icon" className="rounded-full text-primary">
                            <ImageIcon className="h-5 w-5" />
                          </Button>
                          <Button variant="ghost" size="icon" className="rounded-full text-primary">
                            <Smile className="h-5 w-5" />
                          </Button>
                        </div>
                        <Button className="rounded-full px-4">Post</Button>
                      </div>
                    </MessageBubble>
                  </div>
                </div>
              </div>

{/* Date Header */}
              <div className="sticky top-0 z-10 px-4 py-2 bg-background">
                <div className="date-bubble inline-block px-6 py-2 text-sm text-foreground">Today</div>
              </div>
              <div className="divide-y divide-border/50">
                {posts.map((post) => (
                  <Post
                    key={post.id}
                    username={post.username}
                    name={post.name}
                    time={post.time}
                    content={post.content}
                    initialLikes={post.likes}
                    initialComments={post.comments}
                    avatarType={post.avatarType}
                    reposts={post.reposts}
                    onRepost={() => {
                      setPosts(
                        posts.map((p) => {
                          if (p.id === post.id) {
                            return {
                              ...p,
                              reposts: p.reposts + (p.isReposted ? -1 : 1),
                              isReposted: !p.isReposted,
                            }
                          }
                          return p
                        }),
                      )
                    }}
                    isReposted={post.isReposted}
                  />
                ))}
              </div>
            </ScrollArea>
          </TabsContent>
          <TabsContent value="following" className="p-0 mt-0">
            <div className="flex flex-col items-center justify-center h-[calc(100vh-8rem)] p-4 text-center">
              <motion.div
                initial={{ y: 10 }}
                animate={{ y: [10, -10] }}
                transition={{ duration: 2, repeat: Number.POSITIVE_INFINITY, repeatType: "reverse" }}
              >
                <Image
                  src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/545b46b4a5bedb7451bcdfd2378487e8-removebg-preview-MY8XYCWjquC8DHJr5v5QncDMOZLr9t.png"
                  alt="Sleepy Pochacco"
                  width={100}
                  height={100}
                  className="mb-4"
                />
              </motion.div>
              <motion.h3
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.2 }}
                className="text-lg font-medium text-foreground mb-2"
              >
                Nothing to see yet
              </motion.h3>
              <motion.p
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.3 }}
                className="text-sm text-muted-foreground mb-4"
              >
                Follow friends to see their posts here!
              </motion.p>
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.4 }}
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
              >
                <Button
                  className="bg-primary hover:bg-primary/90 text-primary-foreground"
                  onClick={() => router.push("/explore")}
                >
                  Find Friends
                </Button>
              </motion.div>
            </div>
          </TabsContent>
        </Tabs>
      </main>

{/* Compose Button */}
      <motion.div className="fixed bottom-20 right-4" whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
        <Button
          onClick={() => setIsComposeOpen(true)}
          className="h-14 w-14 rounded-full bg-primary hover:bg-primary/90 shadow-lg"
        >
          <PlusCircle className="h-6 w-6" />
        </Button>
      </motion.div>

<BottomNav currentPath="/" />
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/countdown-header.tsx" isEdit="true"
"use client"

import { useState, useEffect } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { Button } from "@/components/ui/button"
import Image from "next/image"
import { Dialog, DialogContent } from "@/components/ui/dialog"

interface CountdownHeaderProps {
  initialSeconds?: number
}

export function CountdownHeader({ initialSeconds = 86400 }: CountdownHeaderProps) {
  const [seconds, setSeconds] = useState(initialSeconds)
  const [isRunning, setIsRunning] = useState(true)
  const [showMessage, setShowMessage] = useState(false)
  const [isVisible, setIsVisible] = useState(true)

useEffect(() => {
    let interval: NodeJS.Timeout

if (isRunning && seconds > 0) {
      interval = setInterval(() => {
        setSeconds((prev) => prev - 1)
      }, 1000)
    } else if (seconds === 0) {
      setShowMessage(true)
    }

return () => clearInterval(interval)
  }, [seconds, isRunning])

const handleSkip = () => {
    setSeconds(0)
    setIsRunning(false)
    setShowMessage(true)
  }

const handleMessageClose = () => {
    setShowMessage(false)
    setIsVisible(false)
    // Set a timeout to show the countdown again after 24 hours
    setTimeout(() => {
      setSeconds(86400)
      setIsRunning(true)
      setIsVisible(true)
    }, 86400000) // 24 hours in milliseconds
  }

const formatTime = (totalSeconds: number) => {
    const hours = Math.floor(totalSeconds / 3600)
    const minutes = Math.floor((totalSeconds % 3600) / 60)
    const seconds = totalSeconds % 60

return `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`
  }

return (
    <>
      <AnimatePresence>
        {isVisible && seconds > 0 && (
          <motion.div
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: "auto", opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            className="bg-primary/10 border-b border-border"
          >
            <div className="container flex items-center justify-between py-2">
              <div className="flex items-center gap-2">
                <Image
                  src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/6fa34140b30a3dede0c3d1d049e58cbe-removebg-preview-hIa8K4vN6I1WjLOGHh6oD7CV819pSv.png"
                  alt="Pochacco"
                  width={24}
                  height={24}
                  className="w-6 h-6 animate-bounce"
                />
                <span className="text-sm">
                  Daily message in{" "}
                  <motion.span
                    key={seconds}
                    initial={{ scale: 1.5, color: "var(--primary)" }}
                    animate={{ scale: 1, color: "var(--foreground)" }}
                    className="font-bold"
                  >
                    {formatTime(seconds)}
                  </motion.span>
                </span>
              </div>
              <div className="flex items-center gap-2">
                <Button variant="ghost" size="sm" className="text-sm rounded-full h-8 px-3" onClick={handleSkip}>
                  Skip
                </Button>
              </div>
            </div>
          </motion.div>
        )}
      </AnimatePresence>

<Dialog open={showMessage} onOpenChange={setShowMessage}>
        <DialogContent className="max-w-[300px] p-0 bg-transparent border-none">
          <motion.div
            className="relative flex flex-col items-center"
            initial={{ scale: 0.8, opacity: 0 }}
            animate={{ scale: 1, opacity: 1 }}
            exit={{ scale: 0.8, opacity: 0 }}
          >
            <Image
              src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Untitled_design-removebg-preview-wb1VX7U84clOCATYLyQOL7L25vywtK.png"
              alt="Message"
              width={300}
              height={300}
              className="w-full h-auto"
            />
            <motion.button
              className="mt-4 bg-[#cee9c6] hover:bg-[#bde0b3] text-[#4a5d44] px-8 py-1.5 rounded-full text-sm font-medium transition-colors"
              onClick={handleMessageClose}
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
            >
              True that! 💕
            </motion.button>
          </motion.div>
        </DialogContent>
      </Dialog>
    </>
  )
}

export default CountdownHeader

[V0_FILE]typescriptreact:file="app/messages/[id]/page.tsx" isEdit="true"
"use client"

import { useState, useEffect } from "react"
import { useParams } from "next/navigation"
import Image from "next/image"
import { SiteHeader } from "@/components/site-header"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { ScrollArea } from "@/components/ui/scroll-area"
import { MessageBubble } from "@/components/message-bubble"
import { ImageIcon, Smile, Send, Info } from "lucide-react"
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet"

interface Message {
  id: string
  content: string
  time: string
  sender: {
    id: string
    name: string
    avatar: string
  }
}

interface GroupMember {
  id: string
  name: string
  username: string
  avatar: string
  status?: string
}

interface Chat {
  id: string
  name: string
  isGroup: boolean
  members?: GroupMember[]
  messages: Message[]
}

export default function ChatPage() {
  const params = useParams()
  const chatId = params.id as string

const [chat, setChat] = useState<Chat | null>(null)

useEffect(() => {
    // Simulating API call to fetch chat data
    const fetchChat = async () => {
      // Replace this with actual API call
      const response = await fetch(`/api/chats/${chatId}`)
      const data = await response.json()
      setChat(data)
    }

fetchChat()
  }, [chatId])

if (!chat) {
    return <div>Loading...</div>
  }

return (
    <div className="flex flex-col min-h-screen bg-background">
      <SiteHeader
        showBack
        title={chat.name}
        subtitle={chat.isGroup ? `${chat.members?.length} members` : ""}
        rightElement={
          chat.isGroup && (
            <Sheet>
              <SheetTrigger asChild>
                <Button variant="ghost" size="icon" className="rounded-full">
                  <Info className="h-5 w-5" />
                </Button>
              </SheetTrigger>
              <SheetContent>
                <SheetHeader>
                  <SheetTitle>Group Info</SheetTitle>
                </SheetHeader>
                <div className="mt-6">
                  <h3 className="text-sm font-medium mb-2">Members</h3>
                  <div className="space-y-4">
                    {chat.members?.map((member) => (
                      <div key={member.id} className="flex items-center gap-3">
                        <div className="w-10 h-10 flex items-center justify-center">
                          <Image
                            src={member.avatar || "/placeholder.svg"}
                            alt={member.name}
                            width={40}
                            height={40}
                            className="w-10 h-10 object-contain"
                          />
                        </div>
                        <div className="flex-1">
                          <p className="font-medium">{member.name}</p>
                          <p className="text-sm text-muted-foreground">@{member.username}</p>
                        </div>
                        <div className="w-2 h-2 rounded-full bg-primary/20">
                          <div
                            className={`w-full h-full rounded-full ${
                              member.status === "online" ? "bg-primary animate-pulse" : ""
                            }`}
                          />
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              </SheetContent>
            </Sheet>
          )
        }
      />

<main className="flex-1">
        <ScrollArea className="h-[calc(100vh-8rem)]">
          <div className="flex flex-col gap-4 p-4">
            {chat.messages.map((message) => (
              <div
                key={message.id}
                className={`flex gap-3 ${message.sender.id === "current_user" ? "flex-row-reverse" : ""}`}
              >
                <div className="w-8 h-8 flex-shrink-0">
                  <Image
                    src={message.sender.avatar || "/placeholder.svg"}
                    alt={message.sender.name}
                    width={32}
                    height={32}
                    className="w-8 h-8 object-contain"
                  />
                </div>
                <div className={`max-w-[75%] ${message.sender.id === "current_user" ? "items-end" : "items-start"}`}>
                  <MessageBubble>
                    {message.sender.id !== "current_user" && (
                      <p className="text-xs font-medium text-primary mb-1">{message.sender.name}</p>
                    )}
                    <p className="text-sm">{message.content}</p>
                    <span className="text-xs text-muted-foreground mt-1 block">{message.time}</span>
                  </MessageBubble>
                </div>
              </div>
            ))}
          </div>
        </ScrollArea>
      </main>

<div className="sticky bottom-0 bg-card border-t border-border p-3">
        <div className="flex items-center gap-2">
          <Button variant="ghost" size="icon" className="rounded-full text-primary">
            <ImageIcon className="h-5 w-5" />
          </Button>
          <Button variant="ghost" size="icon" className="rounded-full text-primary">
            <Smile className="h-5 w-5" />
          </Button>
          <Input placeholder="Message..." className="rounded-full bg-muted" />
          <Button size="icon" className="rounded-full">
            <Send className="h-5 w-5" />
          </Button>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/messages/page.tsx" isEdit="true"
"use client"

import { useState } from "react"
import Image from "next/image"
import { SiteHeader } from "@/components/site-header"
import { BottomNav } from "@/components/bottom-nav"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Search, Edit, Users } from "lucide-react"
import Link from "next/link"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"

interface ChatPreview {
  id: string
  name: string
  username?: string
  avatar?: string
  lastMessage: string
  time: string
  unread?: boolean
  isGroup?: boolean
  members?: {
    name: string
    avatar: string
  }[]
}

export default function MessagesPage() {
  const [chats] = useState<ChatPreview[]>([
    {
      id: "continental",
      name: "Continental",
      lastMessage: "Max: Anyone up for bubble tea? 🧋",
      time: "5m",
      unread: true,
      isGroup: true,
      members: [
        {
          name: "Lily",
          avatar:
            "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/abb138b5522c9e9fe84bb000f585f469-removebg-preview-ph7iZIPtDTpkLj0morKnG8P3DN7ibp.png",
        },
        {
          name: "Max",
          avatar:
            "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/0c33ad275328ed5d0de5cfabdec9bc62-removebg-preview-wOBC7YjC0Scg5drWIP1vBltr6ZJUL9.png",
        },
        {
          name: "Sam",
          avatar:
            "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-removebg-preview%20%282%29-cPQ2yGMqTtymo4iA0CPvlobwe4KkK8.png",
        },
      ],
    },
    {
      id: "1",
      name: "Lily",
      username: "pochacco_lover",
      avatar:
        "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/abb138b5522c9e9fe84bb000f585f469-removebg-preview-ph7iZIPtDTpkLj0morKnG8P3DN7ibp.png",
      lastMessage: "The cookies turned out great! 🍪✨",
      time: "2m",
      unread: true,
    },
    {
      id: "2",
      name: "Max",
      username: "max_relax",
      avatar:
        "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/0c33ad275328ed5d0de5cfabdec9bc62-removebg-preview-wOBC7YjC0Scg5drWIP1vBltr6ZJUL9.png",
      lastMessage: "Did you see the new Pochacco plushie collection?",
      time: "1h",
    },
  ])

const [isNewChatOpen, setIsNewChatOpen] = useState(false)

return (
    <div className="flex flex-col min-h-screen bg-background">
      <SiteHeader
        title="Messages"
        rightElement={
          <div className="flex gap-2">
            <Dialog open={isNewChatOpen} onOpenChange={setIsNewChatOpen}>
              <DialogTrigger asChild>
                <Button variant="ghost" size="icon" className="rounded-full">
                  <Edit className="h-5 w-5" />
                </Button>
              </DialogTrigger>
              <DialogContent>
                <DialogHeader>
                  <DialogTitle>New Chat</DialogTitle>
                </DialogHeader>
                <div className="space-y-4 mt-4">
                  <Input placeholder="Search for a friend..." />
                  <Button className="w-full">Start Chat</Button>
                </div>
              </DialogContent>
            </Dialog>
            <Button variant="ghost" size="icon" className="rounded-full">
              <Users className="h-5 w-5" />
            </Button>
          </div>
        }
      />

<main className="flex-1">
        {chats.length > 0 ? (
          <ScrollArea className="h-[calc(100vh-12rem)]">
            <div className="divide-y divide-border">
              {chats.map((chat) => (
                <Link key={chat.id} href={`/messages/${chat.id}`}>
                  <div className="flex items-center gap-3 p-4 hover:bg-muted/50 transition-colors">
                    <div className="relative">
                      {chat.isGroup ? (
                        <div className="w-12 h-12 relative">
                          <div className="absolute top-0 left-0 w-8 h-8">
                            <Image
                              src={chat.members?.[0].avatar || "/placeholder.svg"}
                              alt={chat.members?.[0].name}
                              width={32}
                              height={32}
                              className="w-8 h-8 object-contain"
                            />
                          </div>
                          <div className="absolute bottom-0 right-0 w-8 h-8">
                            <Image
                              src={chat.members?.[1].avatar || "/placeholder.svg"}
                              alt={chat.members?.[1].name}
                              width={32}
                              height={32}
                              className="w-8 h-8 object-contain"
                            />
                          </div>
                        </div>
                      ) : (
                        <div className="w-12 h-12 flex items-center justify-center">
                          <Image
                            src={chat.avatar || "/placeholder.svg"}
                            alt={chat.name}
                            width={48}
                            height={48}
                            className="w-12 h-12 object-contain"
                          />
                        </div>
                      )}
                      {chat.unread && (
                        <div className="absolute -top-1 -right-1 w-3 h-3 bg-primary rounded-full border-2 border-background" />
                      )}
                    </div>
                    <div className="flex-1 min-w-0">
                      <div className="flex items-baseline justify-between gap-2">
                        <p className="font-medium truncate">
                          {chat.name}
                          {chat.isGroup && (
                            <span className="text-xs text-muted-foreground ml-1">· {chat.members?.length} members</span>
                          )}
                        </p>
                        <span className="text-xs text-muted-foreground whitespace-nowrap">{chat.time}</span>
                      </div>
                      <p className="text-sm text-muted-foreground truncate">{chat.lastMessage}</p>
                    </div>
                  </div>
                </Link>
              ))}
            </div>
          </ScrollArea>
        ) : (
          <div className="flex flex-col items-center justify-center h-[calc(100vh-12rem)] p-4 text-center">
            <Image
              src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/545b46b4a5bedb7451bcdfd2378487e8-removebg-preview-MY8XYCWjquC8DHJr5v5QncDMOZLr9t.png"
              alt="Sleepy Pochacco"
              width={100}
              height={100}
              className="mb-4"
            />
            <h3 className="text-lg font-medium mb-2">No messages yet</h3>
            <p className="text-sm text-muted-foreground mb-4">Start a conversation with your friends!</p>
            <div className="flex gap-2">
              <Button className="rounded-full" onClick={() => setIsNewChatOpen(true)}>
                <Edit className="h-4 w-4 mr-2" />
                New Message
              </Button>
              <Button variant="outline" className="rounded-full">
                <Users className="h-4 w-4 mr-2" />
                New Group
              </Button>
            </div>
          </div>
        )}
      </main>

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This