[V0_FILE]css:file="app/globals.css" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); /* Pet dating app theme - warm coral primary with playful feel */ :root { --background: oklch(0.98 0.01 60); --foreground: oklch(0.25 0.02 30); --card: oklch(1 0 0); --card-foreground: oklch(0.25 0.02 30); --popover: oklch(1 0 0); --popover-foreground: oklch(0.25 0.02 30); --primary: oklch(0.65 0.18 25); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.95 0.02 60); --secondary-foreground: oklch(0.35 0.02 30); --muted: oklch(0.93 0.01 60); --muted-foreground: oklch(0.5 0.02 30); --accent: oklch(0.75 0.12 85); --accent-foreground: oklch(0.25 0.02 30); --destructive: oklch(0.55 0.22 25); --destructive-foreground: oklch(1 0 0); --border: oklch(0.88 0.02 60); --input: oklch(0.92 0.01 60); --ring: oklch(0.65 0.18 25); --chart-1: oklch(0.65 0.18 25); --chart-2: oklch(0.75 0.12 85); --chart-3: oklch(0.6 0.15 160); --chart-4: oklch(0.7 0.14 280); --chart-5: oklch(0.8 0.1 45); --radius: 0.75rem; --sidebar: oklch(0.98 0.01 60); --sidebar-foreground: oklch(0.25 0.02 30); --sidebar-primary: oklch(0.65 0.18 25); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.93 0.02 60); --sidebar-accent-foreground: oklch(0.35 0.02 30); --sidebar-border: oklch(0.88 0.02 60); --sidebar-ring: oklch(0.65 0.18 25); } .dark { --background: oklch(0.18 0.02 30); --foreground: oklch(0.95 0.01 60); --card: oklch(0.22 0.02 30); --card-foreground: oklch(0.95 0.01 60); --popover: oklch(0.22 0.02 30); --popover-foreground: oklch(0.95 0.01 60); --primary: oklch(0.7 0.16 25); --primary-foreground: oklch(0.15 0.02 30); --secondary: oklch(0.28 0.02 30); --secondary-foreground: oklch(0.9 0.01 60); --muted: oklch(0.28 0.02 30); --muted-foreground: oklch(0.65 0.02 60); --accent: oklch(0.55 0.1 85); --accent-foreground: oklch(0.95 0.01 60); --destructive: oklch(0.45 0.18 25); --destructive-foreground: oklch(0.95 0.01 60); --border: oklch(0.32 0.02 30); --input: oklch(0.28 0.02 30); --ring: oklch(0.7 0.16 25); --chart-1: oklch(0.7 0.16 25); --chart-2: oklch(0.65 0.1 85); --chart-3: oklch(0.55 0.12 160); --chart-4: oklch(0.6 0.12 280); --chart-5: oklch(0.7 0.08 45); --sidebar: oklch(0.22 0.02 30); --sidebar-foreground: oklch(0.95 0.01 60); --sidebar-primary: oklch(0.7 0.16 25); --sidebar-primary-foreground: oklch(0.15 0.02 30); --sidebar-accent: oklch(0.28 0.02 30); --sidebar-accent-foreground: oklch(0.9 0.01 60); --sidebar-border: oklch(0.32 0.02 30); --sidebar-ring: oklch(0.7 0.16 25); } @theme inline { --font-sans: "Nunito", "Nunito Fallback", system-ui, sans-serif; --font-mono: "Geist Mono", "Geist Mono Fallback"; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata, Viewport } from "next" import { Nunito } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import "./globals.css" const nunito = Nunito({ subsets: ["latin"], weight: ["400", "500", "600", "700", "800"] }) export const metadata: Metadata = { title: "PawMate - Find Love for Your Pet", description: "The ultimate dating app for pets. Help your furry friend find their perfect playmate, friend, or soulmate!", generator: "v0.app", icons: { icon: [ { url: "/icon-light-32x32.png", media: "(prefers-color-scheme: light)", }, { url: "/icon-dark-32x32.png", media: "(prefers-color-scheme: dark)", }, { url: "/icon.svg", type: "image/svg+xml", }, ], apple: "/apple-icon.png", }, } export const viewport: Viewport = { themeColor: "#e07850", width: "device-width", initialScale: 1, maximumScale: 1, userScalable: false, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="lib/dummy-data.ts" isMerged="true" export interface Pet { id: string name: string species: "dog" | "cat" | "bird" | "rabbit" | "hamster" | "other" breed: string age: number ageUnit: "months" | "years" gender: "male" | "female" bio: string personality: string[] lookingFor: "playmate" | "friend" | "romance" | "any" images: string[] ownerId: string location: string distance?: number isVaccinated: boolean isNeutered: boolean } export interface Owner { id: string name: string email: string avatar: string pets: string[] location: string joinedAt: string } export interface Match { id: string petId: string matchedPetId: string matchedAt: string lastMessage?: string unreadCount: number } export interface Message { id: string matchId: string senderId: string content: string sentAt: string isRead: boolean } export interface Like { id: string fromPetId: string toPetId: string likedAt: string isSuperLike: boolean } // Current logged-in owner export const currentOwner: Owner = { id: "owner-1", name: "Alex Johnson", email: "alex@example.com", avatar: "/person-smiling-friendly.jpg", pets: ["pet-1"], location: "San Francisco, CA", joinedAt: "2024-06-15", } // Current user's pet export const currentPet: Pet = { id: "pet-1", name: "Buddy", species: "dog", breed: "Golden Retriever", age: 3, ageUnit: "years", gender: "male", bio: "Hey there! I'm Buddy, a friendly Golden Retriever who loves long walks in the park, playing fetch, and making new friends. My tail never stops wagging!", personality: ["Friendly", "Playful", "Energetic", "Loyal"], lookingFor: "any", images: ["/golden-retriever-dog-happy-outdoors.jpg", "/golden-retriever-playing-fetch-park.jpg", "/golden-retriever-portrait-cute.jpg"], ownerId: "owner-1", location: "San Francisco, CA", isVaccinated: true, isNeutered: true, } // Pets to browse/swipe export const browsePets: Pet[] = [ { id: "pet-2", name: "Luna", species: "dog", breed: "Siberian Husky", age: 2, ageUnit: "years", gender: "female", bio: "Adventure seeker with striking blue eyes! I love hiking, snow, and howling at the moon. Looking for a partner to explore the world with.", personality: ["Adventurous", "Independent", "Vocal", "Athletic"], lookingFor: "romance", images: ["/siberian-husky-blue-eyes-beautiful.jpg", "/husky-dog-hiking-mountain-trail.jpg", "/husky-playing-in-snow-winter.jpg"], ownerId: "owner-2", location: "Oakland, CA", distance: 5, isVaccinated: true, isNeutered: true, }, { id: "pet-3", name: "Mochi", species: "cat", breed: "Scottish Fold", age: 1, ageUnit: "years", gender: "female", bio: "Professional napper and window watcher. I enjoy cozy spots, gentle pets, and judging everyone from my perch. Selective about my friends.", personality: ["Calm", "Curious", "Independent", "Affectionate"], lookingFor: "friend", images: ["/scottish-fold-cat-cute-folded-ears.jpg", "/cat-sitting-window-sunlight-cozy.jpg", "/scottish-fold-cat-playing-toy.jpg"], ownerId: "owner-3", location: "San Francisco, CA", distance: 2, isVaccinated: true, isNeutered: true, }, { id: "pet-4", name: "Max", species: "dog", breed: "French Bulldog", age: 4, ageUnit: "years", gender: "male", bio: "Compact but full of love! I snore, I drool, and I'll steal your heart. Perfect lap dog who thinks he's a Great Dane.", personality: ["Goofy", "Loving", "Lazy", "Social"], lookingFor: "playmate", images: ["/french-bulldog-cute-smiling.jpg", "/frenchie-dog-lying-couch-relaxed.jpg", "/french-bulldog-playing-toy-happy.jpg"], ownerId: "owner-4", location: "Berkeley, CA", distance: 8, isVaccinated: true, isNeutered: false, }, { id: "pet-5", name: "Cleo", species: "cat", breed: "Bengal", age: 3, ageUnit: "years", gender: "female", bio: "Wild at heart with exotic looks to match! I love climbing, playing fetch (yes, cats can do that!), and being the center of attention.", personality: ["Energetic", "Intelligent", "Vocal", "Playful"], lookingFor: "romance", images: ["/bengal-cat-spotted-beautiful-exotic.jpg", "/bengal-cat-climbing-cat-tree-athletic.jpg", "/placeholder.svg?height=600&width=400"], ownerId: "owner-5", location: "Palo Alto, CA", distance: 15, isVaccinated: true, isNeutered: true, }, { id: "pet-6", name: "Charlie", species: "dog", breed: "Corgi", age: 2, ageUnit: "years", gender: "male", bio: "Short legs, big personality! I'm a fluffy loaf of joy who loves herding things, getting belly rubs, and being told I'm adorable.", personality: ["Happy", "Smart", "Stubborn", "Affectionate"], lookingFor: "any", images: [ "/placeholder.svg?height=600&width=400", "/placeholder.svg?height=600&width=400", "/placeholder.svg?height=600&width=400", ], ownerId: "owner-6", location: "San Jose, CA", distance: 20, isVaccinated: true, isNeutered: true, }, { id: "pet-7", name: "Pepper", species: "rabbit", breed: "Holland Lop", age: 8, ageUnit: "months", gender: "female", bio: "Hoppy to meet you! I'm a soft, floppy-eared bunny who loves fresh veggies, binkying around, and gentle cuddles.", personality: ["Gentle", "Curious", "Shy", "Sweet"], lookingFor: "friend", images: [ "/placeholder.svg?height=600&width=400", "/placeholder.svg?height=600&width=400", "/placeholder.svg?height=600&width=400", ], ownerId: "owner-7", location: "Mountain View, CA", distance: 12, isVaccinated: true, isNeutered: true, }, { id: "pet-8", name: "Kiwi", species: "bird", breed: "Cockatiel", age: 1, ageUnit: "years", gender: "male", bio: "Tweet tweet! I'm a chatty boy who can whistle tunes and loves head scratches. Looking for a feathered friend to sing with!", personality: ["Cheerful", "Musical", "Social", "Curious"], lookingFor: "playmate", images: [ "/placeholder.svg?height=600&width=400", "/placeholder.svg?height=600&width=400", "/placeholder.svg?height=600&width=400", ], ownerId: "owner-8", location: "Fremont, CA", distance: 18, isVaccinated: true, isNeutered: false, }, ] // Matches export const matches: Match[] = [ { id: "match-1", petId: "pet-1", matchedPetId: "pet-3", matchedAt: "2025-01-10T14:30:00Z", lastMessage: "Would love to set up a playdate! 🐾", unreadCount: 2, }, { id: "match-2", petId: "pet-1", matchedPetId: "pet-6", matchedAt: "2025-01-08T10:15:00Z", lastMessage: "Charlie is so excited to meet Buddy!", unreadCount: 0, }, ] // Messages export const messages: Message[] = [ { id: "msg-1", matchId: "match-1", senderId: "owner-3", content: "Hi! Mochi saw Buddy's profile and was intrigued!", sentAt: "2025-01-10T14:30:00Z", isRead: true, }, { id: "msg-2", matchId: "match-1", senderId: "owner-1", content: "That's so sweet! Buddy loves making new friends 😊", sentAt: "2025-01-10T15:00:00Z", isRead: true, }, { id: "msg-3", matchId: "match-1", senderId: "owner-3", content: "Would love to set up a playdate! 🐾", sentAt: "2025-01-12T09:00:00Z", isRead: false, }, { id: "msg-4", matchId: "match-2", senderId: "owner-6", content: "OMG Buddy is so handsome! Charlie wants to be friends!", sentAt: "2025-01-08T10:15:00Z", isRead: true, }, { id: "msg-5", matchId: "match-2", senderId: "owner-1", content: "Aww thank you! Charlie looks like such a fluffball!", sentAt: "2025-01-08T11:00:00Z", isRead: true, }, { id: "msg-6", matchId: "match-2", senderId: "owner-6", content: "Charlie is so excited to meet Buddy!", sentAt: "2025-01-08T12:30:00Z", isRead: true, }, ] // Likes received export const likesReceived: Like[] = [ { id: "like-1", fromPetId: "pet-4", toPetId: "pet-1", likedAt: "2025-01-13T08:00:00Z", isSuperLike: true, }, { id: "like-2", fromPetId: "pet-5", toPetId: "pet-1", likedAt: "2025-01-12T16:00:00Z", isSuperLike: false, }, ] // Helper to get pet by ID export function getPetById(id: string): Pet | undefined { if (id === currentPet.id) return currentPet return browsePets.find((pet) => pet.id === id) } // Helper to get owner by ID export function getOwnerById(id: string): Owner | undefined { const owners: Owner[] = [ currentOwner, { id: "owner-2", name: "Sarah Chen", email: "sarah@example.com", avatar: "/placeholder.svg?height=100&width=100", pets: ["pet-2"], location: "Oakland, CA", joinedAt: "2024-08-20", }, { id: "owner-3", name: "Mike Wilson", email: "mike@example.com", avatar: "/placeholder.svg?height=100&width=100", pets: ["pet-3"], location: "San Francisco, CA", joinedAt: "2024-09-10", }, { id: "owner-4", name: "Emma Davis", email: "emma@example.com", avatar: "/placeholder.svg?height=100&width=100", pets: ["pet-4"], location: "Berkeley, CA", joinedAt: "2024-07-05", }, { id: "owner-5", name: "James Park", email: "james@example.com", avatar: "/placeholder.svg?height=100&width=100", pets: ["pet-5"], location: "Palo Alto, CA", joinedAt: "2024-10-01", }, { id: "owner-6", name: "Lisa Brown", email: "lisa@example.com", avatar: "/placeholder.svg?height=100&width=100", pets: ["pet-6"], location: "San Jose, CA", joinedAt: "2024-11-15", }, { id: "owner-7", name: "David Kim", email: "david@example.com", avatar: "/placeholder.svg?height=100&width=100", pets: ["pet-7"], location: "Mountain View, CA", joinedAt: "2024-12-01", }, { id: "owner-8", name: "Amy Taylor", email: "amy@example.com", avatar: "/placeholder.svg?height=100&width=100", pets: ["pet-8"], location: "Fremont, CA", joinedAt: "2025-01-02", }, ] return owners.find((owner) => owner.id === id) } // Species icons/labels export const speciesInfo = { dog: { label: "Dog", emoji: "🐕" }, cat: { label: "Cat", emoji: "🐈" }, bird: { label: "Bird", emoji: "🐦" }, rabbit: { label: "Rabbit", emoji: "🐇" }, hamster: { label: "Hamster", emoji: "🐹" }, other: { label: "Other", emoji: "🐾" }, } // Looking for labels export const lookingForLabels = { playmate: "Playmate", friend: "Friend", romance: "Romance", any: "Open to anything", } [V0_FILE]typescriptreact:file="components/bottom-nav.tsx" isMerged="true" "use client" import Link from "next/link" import { usePathname } from "next/navigation" import { Heart, MessageCircle, Search, User, Sparkles } from "lucide-react" import { cn } from "@/lib/utils" const navItems = [ { href: "/", icon: Search, label: "Discover" }, { href: "/likes", icon: Sparkles, label: "Likes" }, { href: "/matches", icon: Heart, label: "Matches" }, { href: "/messages", icon: MessageCircle, label: "Messages" }, { href: "/profile", icon: User, label: "Profile" }, ] export function BottomNav() { const pathname = usePathname() return ( ) } [V0_FILE]typescriptreact:file="components/app-header.tsx" isMerged="true" "use client" import type React from "react" import { Dog } from "lucide-react" interface AppHeaderProps { title?: string showLogo?: boolean rightElement?: React.ReactNode } export function AppHeader({ title, showLogo = true, rightElement }: AppHeaderProps) { return (

{showLogo ? (

PawMate

) : (

{title}

)} {rightElement &&

{rightElement}

}

) } [V0_FILE]jpg:file="public/person-smiling-friendly.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/person-smiling-friendly-Ao44JbuGbjjvVUKnHUuIOQpK3a1A0f.jpg" isMerged="true" [V0_FILE]jpg:file="public/golden-retriever-dog-happy-outdoors.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/golden-retriever-dog-happy-outdoors-dtReUqpyRy4KJARBNUJgxNP7yJc2VR.jpg" isMerged="true" [V0_FILE]jpg:file="public/golden-retriever-playing-fetch-park.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/golden-retriever-playing-fetch-park-UbBo9x50hWmWMZ3RrLkIlBmW5hjg7B.jpg" isMerged="true" [V0_FILE]jpg:file="public/golden-retriever-portrait-cute.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/golden-retriever-portrait-cute-3ZBdVYDx7xu6yCjiLGM17dJhGmrEEO.jpg" isMerged="true" [V0_FILE]jpg:file="public/siberian-husky-blue-eyes-beautiful.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/siberian-husky-blue-eyes-beautiful-Bi8rLhtIO25tbMH3O4Bo5ixKtfZi2i.jpg" isMerged="true" [V0_FILE]jpg:file="public/husky-dog-hiking-mountain-trail.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/husky-dog-hiking-mountain-trail-khHwGPs4jQh2Sst1dyqIhSkifxu57I.jpg" isMerged="true" [V0_FILE]jpg:file="public/husky-playing-in-snow-winter.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/husky-playing-in-snow-winter-FXc9uhJTxRi4prGFH4ayNBU9RKVNJ4.jpg" isMerged="true" [V0_FILE]jpg:file="public/scottish-fold-cat-cute-folded-ears.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/scottish-fold-cat-cute-folded-ears-Gc9ikd2KYK1sgv64A8l6x91XhpMsY6.jpg" isMerged="true" [V0_FILE]jpg:file="public/cat-sitting-window-sunlight-cozy.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/cat-sitting-window-sunlight-cozy-mTxhy5ijuBNgFyReSEGESD131CtRZL.jpg" isMerged="true" [V0_FILE]jpg:file="public/scottish-fold-cat-playing-toy.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/scottish-fold-cat-playing-toy-mfboaOhlj65xxzBBImfX0FbSUzQUPm.jpg" isMerged="true" [V0_FILE]jpg:file="public/french-bulldog-cute-smiling.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/french-bulldog-cute-smiling-lGhJXymS06zpKRC56D5aBmms7XYbEz.jpg" isMerged="true" [V0_FILE]jpg:file="public/frenchie-dog-lying-couch-relaxed.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/frenchie-dog-lying-couch-relaxed-SJhNoIpj177BXXtayuqt7X7WLLjNpq.jpg" isMerged="true" [V0_FILE]jpg:file="public/french-bulldog-playing-toy-happy.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/french-bulldog-playing-toy-happy-AWTjmSJ9V3c0DIIKKyphn6itTB4m1a.jpg" isMerged="true" [V0_FILE]jpg:file="public/bengal-cat-spotted-beautiful-exotic.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/bengal-cat-spotted-beautiful-exotic-s2tTmR8lHXQ73Vx2gh5utxhrC3MUL5.jpg" isMerged="true" [V0_FILE]jpg:file="public/bengal-cat-climbing-cat-tree-athletic.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/bengal-cat-climbing-cat-tree-athletic-2prEiSwTCNYFUMWHS7KpDKWmNzFeBq.jpg" isMerged="true" [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76", "framer-motion": "12.26.2" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/likes/page.tsx" isMerged="true" "use client" import { useState } from "react" import Image from "next/image" import { Star, MapPin, X, Check } from "lucide-react" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Card } from "@/components/ui/card" import { BottomNav } from "@/components/bottom-nav" import { AppHeader } from "@/components/app-header" import { likesReceived, getPetById, speciesInfo } from "@/lib/dummy-data" export default function LikesPage() { const [likes, setLikes] = useState(likesReceived) const handleLikeBack = (likeId: string) => { setLikes((prev) => prev.filter((l) => l.id !== likeId)) } const handlePass = (likeId: string) => { setLikes((prev) => prev.filter((l) => l.id !== likeId)) } return (

Likes You

{likes.length} new

{likes.length === 0 ? (

💕

No new likes yet

Keep swiping to get more matches!

) : (

{likes.map((like) => { const pet = getPetById(like.fromPetId) if (!pet) return null return (

{like.isSuperLike && (

)}

{speciesInfo[pet.species].emoji}

{pet.name}, {pet.age}

{pet.breed}

{pet.distance} mi

) })}

)}

) } [V0_FILE]typescriptreact:file="app/matches/page.tsx" isMerged="true" "use client" import Image from "next/image" import Link from "next/link" import { MessageCircle, Heart, Clock } from "lucide-react" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Card } from "@/components/ui/card" import { BottomNav } from "@/components/bottom-nav" import { AppHeader } from "@/components/app-header" import { matches, getPetById, speciesInfo } from "@/lib/dummy-data" function formatDate(dateString: string) { const date = new Date(dateString) const now = new Date() const diffDays = Math.floor((now.getTime() - date.getTime()) / (1000 * 60 * 60 * 24)) if (diffDays === 0) return "Today" if (diffDays === 1) return "Yesterday" if (diffDays < 7) return `${diffDays} days ago` return date.toLocaleDateString("en-US", { month: "short", day: "numeric" }) } export default function MatchesPage() { const newMatches = matches.filter((m) => !m.lastMessage) const activeConversations = matches.filter((m) => m.lastMessage) return (

Matches

{matches.length === 0 ? (

💝

No matches yet

Keep swiping to find your pet's perfect match!

) : ( <> {newMatches.length > 0 && (

New Matches

{newMatches.map((match) => { const pet = getPetById(match.matchedPetId) if (!pet) return null return (

{speciesInfo[pet.species].emoji}

{pet.name}

) })}

)} {activeConversations.length > 0 && (

Messages

{activeConversations.map((match) => { const pet = getPetById(match.matchedPetId) if (!pet) return null return (

{pet.name}

{speciesInfo[pet.species].emoji} {match.unreadCount > 0 && ( {match.unreadCount} )}

{match.lastMessage}

{formatDate(match.matchedAt)}

) })}

)} )}

) } [V0_FILE]typescriptreact:file="app/messages/[matchId]/page.tsx" isMerged="true" "use client" import { useState, useRef, useEffect, use } from "react" import Image from "next/image" import Link from "next/link" import { ArrowLeft, Send, Info, Phone, Video } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { cn } from "@/lib/utils" import { matches, messages as dummyMessages, getPetById, getOwnerById, currentOwner } from "@/lib/dummy-data" function formatTime(dateString: string) { return new Date(dateString).toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit", }) } export default function ChatPage({ params }: { params: Promise<{ matchId: string }> }) { const { matchId } = use(params) const [newMessage, setNewMessage] = useState("") const [chatMessages, setChatMessages] = useState(dummyMessages.filter((m) => m.matchId === matchId)) const messagesEndRef = useRef(null) const match = matches.find((m) => m.id === matchId) const pet = match ? getPetById(match.matchedPetId) : null const owner = pet ? getOwnerById(pet.ownerId) : null useEffect(() => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }) }, [chatMessages]) const handleSend = () => { if (!newMessage.trim()) return const newMsg = { id: `msg-${Date.now()}`, matchId, senderId: currentOwner.id, content: newMessage.trim(), sentAt: new Date().toISOString(), isRead: false, } setChatMessages((prev) => [...prev, newMsg]) setNewMessage("") } if (!match || !pet || !owner) { return (

Conversation not found

) } return (

{/* Header */}

{pet.name}

Owner: {owner.name}

{/* Messages */}

{/* Match indicator */}

You matched with {pet.name}!

{chatMessages.map((msg) => { const isCurrentUser = msg.senderId === currentOwner.id return (

{msg.content}

{formatTime(msg.sentAt)}

) })}

{/* Input */}

setNewMessage(e.target.value)} onKeyDown={(e) => e.key === "Enter" && handleSend()} className="flex-1" />

) } [V0_FILE]typescriptreact:file="app/profile/page.tsx" isMerged="true" "use client" import { useState } from "react" import Image from "next/image" import Link from "next/link" import { Edit3, Settings, MapPin, Calendar, Shield, Heart, Plus, ChevronRight } from "lucide-react" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Card } from "@/components/ui/card" import { BottomNav } from "@/components/bottom-nav" import { AppHeader } from "@/components/app-header" import { currentPet, currentOwner, speciesInfo, lookingForLabels } from "@/lib/dummy-data" export default function ProfilePage() { const [imageIndex, setImageIndex] = useState(0) return (

{/* Pet Profile Section */}

{/* Image dots */}

{currentPet.images.map((_, idx) => (

{/* Edit button */}

{currentPet.name}

{speciesInfo[currentPet.species].emoji} {currentPet.age} {currentPet.ageUnit}

{lookingForLabels[currentPet.lookingFor]}

{currentPet.breed}

{currentPet.location}

{currentPet.bio}

{currentPet.personality.map((trait) => ( {trait} ))}

{currentPet.isVaccinated && ( Vaccinated )} {currentPet.isNeutered && ( Neutered )}

{/* Add Another Pet */} {/* Owner Section */}

Pet Parent

{currentOwner.name}

{currentOwner.email}

Member since{" "} {new Date(currentOwner.joinedAt).toLocaleDateString("en-US", { month: "long", year: "numeric" })}

{/* Settings Link */}

Settings

) } [V0_FILE]typescriptreact:file="app/profile/edit/page.tsx" isMerged="true" "use client" import { useState } from "react" import Image from "next/image" import Link from "next/link" import { ArrowLeft, X, Camera } 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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Badge } from "@/components/ui/badge" import { Card } from "@/components/ui/card" import { Switch } from "@/components/ui/switch" import { currentPet } from "@/lib/dummy-data" const personalityOptions = [ "Friendly", "Playful", "Energetic", "Calm", "Loyal", "Independent", "Curious", "Gentle", "Adventurous", "Lazy", "Smart", "Goofy", "Affectionate", "Shy", "Social", ] export default function EditProfilePage() { const [formData, setFormData] = useState({ name: currentPet.name, species: currentPet.species, breed: currentPet.breed, age: currentPet.age.toString(), ageUnit: currentPet.ageUnit, gender: currentPet.gender, bio: currentPet.bio, personality: currentPet.personality, lookingFor: currentPet.lookingFor, isVaccinated: currentPet.isVaccinated, isNeutered: currentPet.isNeutered, images: currentPet.images, }) const togglePersonality = (trait: string) => { setFormData((prev) => ({ ...prev, personality: prev.personality.includes(trait) ? prev.personality.filter((t) => t !== trait) : prev.personality.length < 5 ? [...prev.personality, trait] : prev.personality, })) } const removeImage = (index: number) => { setFormData((prev) => ({ ...prev, images: prev.images.filter((_, i) => i !== index), })) } return (

{/* Header */}

Edit Profile

{/* Photos */} Photos

{formData.images.map((image, index) => (

{index === 0 && Main}

))} {formData.images.length < 6 && ( )}

{/* Basic Info */}

Name setFormData((prev) => ({ ...prev, name: e.target.value }))} className="mt-1.5" />

Species

Breed setFormData((prev) => ({ ...prev, breed: e.target.value }))} className="mt-1.5" />

Age setFormData((prev) => ({ ...prev, age: e.target.value }))} className="mt-1.5" />

Unit

Gender

{/* Bio */} Bio

setFormData((prev) => ({ ...prev, bio: e.target.value }))}
              className="mt-1.5 min-h-[100px]"
              placeholder="Tell us about your pet..."
            />
            <p className="mt-1 text-xs text-muted-foreground">{formData.bio.length}/500</p>
          </Card>

{/* Personality */}
          <Card className="p-4">
            <Label className="mb-3 block">Personality (up to 5)</Label>
            <div className="flex flex-wrap gap-2">
              {personalityOptions.map((trait) => (
                <Badge
                  key={trait}
                  variant={formData.personality.includes(trait) ? "default" : "outline"}
                  className="cursor-pointer"
                  onClick={() => togglePersonality(trait)}
                >
                  {trait}
                </Badge>
              ))}
            </div>
          </Card>

{/* Looking For */}
          <Card className="p-4">
            <Label htmlFor="lookingFor">Looking For</Label>
            <Select
              value={formData.lookingFor}
              onValueChange={(value) =>
                setFormData((prev) => ({ ...prev, lookingFor: value as typeof currentPet.lookingFor }))
              }
            >
              <SelectTrigger className="mt-1.5">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="playmate">Playmate</SelectItem>
                <SelectItem value="friend">Friend</SelectItem>
                <SelectItem value="romance">Romance</SelectItem>
                <SelectItem value="any">Open to anything</SelectItem>
              </SelectContent>
            </Select>
          </Card>

{/* Health Info */}
          <Card className="space-y-4 p-4">
            <h3 className="font-semibold">Health Information</h3>
            <div className="flex items-center justify-between">
              <Label htmlFor="vaccinated" className="cursor-pointer">
                Vaccinated
              </Label>
              <Switch
                id="vaccinated"
                checked={formData.isVaccinated}
                onCheckedChange={(checked) => setFormData((prev) => ({ ...prev, isVaccinated: checked }))}
              />
            </div>
            <div className="flex items-center justify-between">
              <Label htmlFor="neutered" className="cursor-pointer">
                Spayed/Neutered
              </Label>
              <Switch
                id="neutered"
                checked={formData.isNeutered}
                onCheckedChange={(checked) => setFormData((prev) => ({ ...prev, isNeutered: checked }))}
              />
            </div>
          </Card>
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/settings/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Image from "next/image"
import Link from "next/link"
import {
  ArrowLeft,
  Bell,
  MapPin,
  Shield,
  CreditCard,
  HelpCircle,
  FileText,
  LogOut,
  ChevronRight,
  Moon,
  Sliders,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"
import { Slider } from "@/components/ui/slider"
import { currentOwner } from "@/lib/dummy-data"

export default function SettingsPage() {
  const [notifications, setNotifications] = useState(true)
  const [darkMode, setDarkMode] = useState(false)
  const [distance, setDistance] = useState([25])

return (
    <div className="flex min-h-screen flex-col bg-background">
      {/* Header */}
      <header className="sticky top-0 z-50 border-b border-border bg-card/95 backdrop-blur-sm">
        <div className="flex items-center gap-3 px-4 py-3">
          <Button variant="ghost" size="icon" className="h-9 w-9" asChild>
            <Link href="/profile">
              <ArrowLeft className="h-5 w-5" />
            </Link>
          </Button>
          <h1 className="text-lg font-semibold">Settings</h1>
        </div>
      </header>

<main className="flex-1 px-4 py-4 pb-8">
        <div className="mx-auto max-w-lg space-y-4">
          {/* Account */}
          <Card className="overflow-hidden">
            <Link href="/settings/account" className="flex items-center gap-3 p-4">
              <div className="relative h-12 w-12 overflow-hidden rounded-full">
                <Image
                  src={currentOwner.avatar || "/placeholder.svg?height=48&width=48&query=person"}
                  alt={currentOwner.name}
                  fill
                  className="object-cover"
                />
              </div>
              <div className="flex-1">
                <h3 className="font-semibold text-foreground">{currentOwner.name}</h3>
                <p className="text-sm text-muted-foreground">{currentOwner.email}</p>
              </div>
              <ChevronRight className="h-5 w-5 text-muted-foreground" />
            </Link>
          </Card>

{/* Discovery Settings */}
          <Card className="p-4">
            <h2 className="mb-4 flex items-center gap-2 font-semibold text-foreground">
              <Sliders className="h-5 w-5 text-primary" />
              Discovery Settings
            </h2>

<div className="space-y-4">
              <div>
                <div className="mb-2 flex items-center justify-between">
                  <Label>Maximum Distance</Label>
                  <span className="text-sm font-medium text-foreground">{distance[0]} mi</span>
                </div>
                <Slider value={distance} onValueChange={setDistance} max={100} min={1} step={1} className="py-2" />
              </div>

<Link href="/settings/species" className="flex items-center justify-between py-2">
                <span className="text-sm">Species Preferences</span>
                <ChevronRight className="h-4 w-4 text-muted-foreground" />
              </Link>

<Link href="/settings/location" className="flex items-center justify-between py-2">
                <div className="flex items-center gap-2">
                  <MapPin className="h-4 w-4 text-muted-foreground" />
                  <span className="text-sm">Location</span>
                </div>
                <div className="flex items-center gap-2">
                  <span className="text-sm text-muted-foreground">{currentOwner.location}</span>
                  <ChevronRight className="h-4 w-4 text-muted-foreground" />
                </div>
              </Link>
            </div>
          </Card>

{/* Preferences */}
          <Card className="divide-y divide-border">
            <div className="flex items-center justify-between p-4">
              <div className="flex items-center gap-3">
                <Bell className="h-5 w-5 text-muted-foreground" />
                <Label htmlFor="notifications" className="cursor-pointer">
                  Push Notifications
                </Label>
              </div>
              <Switch id="notifications" checked={notifications} onCheckedChange={setNotifications} />
            </div>

{/* Account & Security */}
          <Card className="divide-y divide-border">
            <Link href="/settings/security" className="flex items-center gap-3 p-4">
              <Shield className="h-5 w-5 text-muted-foreground" />
              <span className="flex-1">Privacy & Security</span>
              <ChevronRight className="h-5 w-5 text-muted-foreground" />
            </Link>

<Link href="/settings/subscription" className="flex items-center gap-3 p-4">
              <CreditCard className="h-5 w-5 text-muted-foreground" />
              <span className="flex-1">Subscription</span>
              <ChevronRight className="h-5 w-5 text-muted-foreground" />
            </Link>
          </Card>

{/* Support */}
          <Card className="divide-y divide-border">
            <Link href="/help" className="flex items-center gap-3 p-4">
              <HelpCircle className="h-5 w-5 text-muted-foreground" />
              <span className="flex-1">Help & Support</span>
              <ChevronRight className="h-5 w-5 text-muted-foreground" />
            </Link>

<Link href="/terms" className="flex items-center gap-3 p-4">
              <FileText className="h-5 w-5 text-muted-foreground" />
              <span className="flex-1">Terms & Privacy</span>
              <ChevronRight className="h-5 w-5 text-muted-foreground" />
            </Link>
          </Card>

{/* Logout */}
          <Card className="p-4">
            <button className="flex w-full items-center gap-3 text-destructive">
              <LogOut className="h-5 w-5" />
              <span className="font-medium">Log Out</span>
            </button>
          </Card>

{/* Version */}
          <p className="text-center text-xs text-muted-foreground">PawMate v1.0.0</p>
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/pet/[petId]/page.tsx" isMerged="true"
"use client"

import { useState, use } from "react"
import Image from "next/image"
import Link from "next/link"
import { ArrowLeft, Heart, X, Star, MapPin, Shield, ChevronLeft, ChevronRight } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Card } from "@/components/ui/card"
import { getPetById, getOwnerById, speciesInfo, lookingForLabels } from "@/lib/dummy-data"

export default function PetDetailPage({ params }: { params: Promise<{ petId: string }> }) {
  const { petId } = use(params)
  const [imageIndex, setImageIndex] = useState(0)

const pet = getPetById(petId)
  const owner = pet ? getOwnerById(pet.ownerId) : null

if (!pet || !owner) {
    return (
      <div className="flex min-h-screen items-center justify-center bg-background">
        <p className="text-muted-foreground">Pet not found</p>
      </div>
    )
  }

const nextImage = () => {
    setImageIndex((prev) => (prev + 1) % pet.images.length)
  }

const prevImage = () => {
    setImageIndex((prev) => (prev - 1 + pet.images.length) % pet.images.length)
  }

return (
    <div className="flex min-h-screen flex-col bg-background">
      {/* Image Section */}
      <div className="relative aspect-[3/4] w-full max-h-[60vh]">
        <Image
          src={pet.images[imageIndex] || "/placeholder.svg?height=600&width=400&query=cute pet"}
          alt={pet.name}
          fill
          className="object-cover"
        />

{/* Top controls */}
        <div className="absolute inset-x-0 top-0 flex items-center justify-between p-4">
          <Button variant="ghost" size="icon" className="h-10 w-10 rounded-full bg-card/80 backdrop-blur-sm" asChild>
            <Link href="/">
              <ArrowLeft className="h-5 w-5" />
            </Link>
          </Button>
        </div>

{/* Image pagination */}
        <div className="absolute inset-x-0 top-2 flex justify-center gap-1 px-4">
          {pet.images.map((_, idx) => (
            <div
              key={idx}
              className={`h-1 flex-1 rounded-full transition-colors ${
                idx === imageIndex ? "bg-primary-foreground" : "bg-primary-foreground/40"
              }`}
            />
          ))}
        </div>

{/* Image nav buttons */}
        <button
          onClick={prevImage}
          className="absolute left-3 top-1/2 -translate-y-1/2 rounded-full bg-card/80 p-2 backdrop-blur-sm"
        >
          <ChevronLeft className="h-5 w-5 text-foreground" />
        </button>
        <button
          onClick={nextImage}
          className="absolute right-3 top-1/2 -translate-y-1/2 rounded-full bg-card/80 p-2 backdrop-blur-sm"
        >
          <ChevronRight className="h-5 w-5 text-foreground" />
        </button>
      </div>

{/* Content */}
      <main className="flex-1 px-4 py-4 pb-28">
        <div className="mx-auto max-w-lg">
          <div className="flex items-center justify-between">
            <div>
              <div className="flex items-center gap-2">
                <h1 className="text-2xl font-bold text-foreground">{pet.name}</h1>
                <span className="text-xl">{speciesInfo[pet.species].emoji}</span>
              </div>
              <p className="text-muted-foreground">
                {pet.breed} · {pet.age} {pet.ageUnit} · {pet.gender === "male" ? "Male" : "Female"}
              </p>
            </div>
            <Badge variant="secondary" className="text-sm">
              {lookingForLabels[pet.lookingFor]}
            </Badge>
          </div>

{pet.distance && (
            <div className="mt-2 flex items-center gap-1 text-sm text-muted-foreground">
              <MapPin className="h-4 w-4" />
              <span>{pet.distance} miles away</span>
            </div>
          )}

<Card className="mt-4 p-4">
            <h2 className="mb-2 font-semibold text-foreground">About {pet.name}</h2>
            <p className="text-sm text-muted-foreground">{pet.bio}</p>
          </Card>

<Card className="mt-4 p-4">
            <h2 className="mb-3 font-semibold text-foreground">Personality</h2>
            <div className="flex flex-wrap gap-2">
              {pet.personality.map((trait) => (
                <Badge key={trait} variant="outline">
                  {trait}
                </Badge>
              ))}
            </div>
          </Card>

<Card className="mt-4 p-4">
            <h2 className="mb-3 font-semibold text-foreground">Health & Safety</h2>
            <div className="flex gap-4">
              <span
                className={`flex items-center gap-1.5 text-sm ${pet.isVaccinated ? "text-green-600" : "text-muted-foreground"}`}
              >
                <Shield className="h-4 w-4" />
                {pet.isVaccinated ? "Vaccinated" : "Not vaccinated"}
              </span>
              <span
                className={`flex items-center gap-1.5 text-sm ${pet.isNeutered ? "text-blue-600" : "text-muted-foreground"}`}
              >
                <Heart className="h-4 w-4" />
                {pet.isNeutered ? "Neutered" : "Not neutered"}
              </span>
            </div>
          </Card>

<Card className="mt-4 p-4">
            <h2 className="mb-3 font-semibold text-foreground">Pet Parent</h2>
            <div className="flex items-center gap-3">
              <div className="relative h-12 w-12 overflow-hidden rounded-full">
                <Image
                  src={owner.avatar || "/placeholder.svg?height=48&width=48&query=person"}
                  alt={owner.name}
                  fill
                  className="object-cover"
                />
              </div>
              <div>
                <p className="font-medium text-foreground">{owner.name}</p>
                <p className="text-sm text-muted-foreground">{owner.location}</p>
              </div>
            </div>
          </Card>
        </div>
      </main>

{/* Action buttons */}
      <div className="fixed inset-x-0 bottom-0 border-t border-border bg-card/95 backdrop-blur-sm">
        <div className="mx-auto flex max-w-lg items-center justify-center gap-4 px-4 py-4">
          <Button
            size="lg"
            variant="outline"
            className="h-14 w-14 rounded-full border-2 border-destructive bg-transparent p-0 hover:bg-destructive/10"
          >
            <X className="h-7 w-7 text-destructive" />
            <span className="sr-only">Pass</span>
          </Button>

<Button
            size="lg"
            variant="outline"
            className="h-14 w-14 rounded-full border-2 border-accent bg-transparent p-0 hover:bg-accent/20"
          >
            <Star className="h-7 w-7 text-accent-foreground" />
            <span className="sr-only">Super Like</span>
          </Button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useState, useCallback } from "react"
import { motion, AnimatePresence, type PanInfo, useMotionValue, useTransform } from "framer-motion"
import { Heart, X, Star, MapPin, ChevronLeft, ChevronRight } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { BottomNav } from "@/components/bottom-nav"
import { AppHeader } from "@/components/app-header"
import { browsePets, speciesInfo, lookingForLabels, type Pet } from "@/lib/dummy-data"
import { cn } from "@/lib/utils"

export default function DiscoverPage() {
  const [pets, setPets] = useState<Pet[]>(browsePets)
  const [currentIndex, setCurrentIndex] = useState(0)
  const [direction, setDirection] = useState<"left" | "right" | "up" | null>(null)
  const [imageIndex, setImageIndex] = useState(0)
  const [reaction, setReaction] = useState<"like" | "nope" | "super" | null>(null)

const x = useMotionValue(0)
  const y = useMotionValue(0)
  const likeOpacity = useTransform(x, [0, 100], [0, 1])
  const nopeOpacity = useTransform(x, [-100, 0], [1, 0])
  const superOpacity = useTransform(y, [-100, 0], [1, 0])
  const rotate = useTransform(x, [-200, 200], [-25, 25])

const currentPet = pets[currentIndex]

const handleSwipe = useCallback(
    (swipeDirection: "left" | "right" | "up") => {
      const reactionType = swipeDirection === "right" ? "like" : swipeDirection === "left" ? "nope" : "super"
      setReaction(reactionType)
      setDirection(swipeDirection)

setTimeout(() => {
        setCurrentIndex((prev) => prev + 1)
        setDirection(null)
        setImageIndex(0)
        setReaction(null)
        x.set(0)
        y.set(0)
      }, 400)
    },
    [x, y],
  )

const handleDragEnd = useCallback(
    (_: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => {
      const threshold = 100
      if (info.offset.x > threshold) {
        handleSwipe("right")
      } else if (info.offset.x < -threshold) {
        handleSwipe("left")
      } else if (info.offset.y < -threshold) {
        handleSwipe("up")
      }
    },
    [handleSwipe],
  )

const nextImage = () => {
    if (currentPet) {
      setImageIndex((prev) => (prev + 1) % currentPet.images.length)
    }
  }

const prevImage = () => {
    if (currentPet) {
      setImageIndex((prev) => (prev - 1 + currentPet.images.length) % currentPet.images.length)
    }
  }

if (!currentPet) {
    return (
      <div className="flex min-h-screen flex-col bg-background">
        <AppHeader />
        <main className="flex flex-1 flex-col items-center justify-center px-4 pb-24">
          <div className="text-center">
            <div className="mb-4 text-6xl">🐾</div>
            <h2 className="mb-2 text-xl font-semibold text-foreground">{"No more pets nearby"}</h2>
            <p className="text-muted-foreground">{"Check back later for new furry friends!"}</p>
            <Button
              className="mt-6"
              onClick={() => {
                setPets(browsePets)
                setCurrentIndex(0)
              }}
            >
              Start Over
            </Button>
          </div>
        </main>
        <BottomNav />
      </div>
    )
  }

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

<AnimatePresence>
        {reaction && (
          <motion.div
            initial={{ opacity: 0, scale: 0.5 }}
            animate={{ opacity: 1, scale: 1 }}
            exit={{ opacity: 0, scale: 0.5 }}
            className="pointer-events-none fixed inset-0 z-50 flex items-center justify-center"
          >
            <motion.div
              initial={{ scale: 0 }}
              animate={{ scale: [0, 1.2, 1] }}
              transition={{ duration: 0.3 }}
              className={cn(
                "flex h-32 w-32 items-center justify-center rounded-full",
                reaction === "like" && "bg-green-500",
                reaction === "nope" && "bg-destructive",
                reaction === "super" && "bg-accent",
              )}
            >
              {reaction === "like" && <Heart className="h-16 w-16 text-white" fill="white" />}
              {reaction === "nope" && <X className="h-16 w-16 text-white" strokeWidth={3} />}
              {reaction === "super" && <Star className="h-16 w-16 text-white" fill="white" />}
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>

<motion.div
                  style={{ opacity: nopeOpacity }}
                  className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center"
                >
                  <div className="rotate-[20deg] rounded-lg border-4 border-destructive px-4 py-2">
                    <span className="text-4xl font-black tracking-wider text-destructive">NOPE</span>
                  </div>
                </motion.div>

<motion.div
                  style={{ opacity: superOpacity }}
                  className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center"
                >
                  <div className="rounded-lg border-4 border-accent px-4 py-2">
                    <span className="text-3xl font-black tracking-wider text-accent">SUPER LIKE</span>
                  </div>
                </motion.div>

<div className="absolute inset-x-0 top-2 flex justify-center gap-1 px-2">
                    {currentPet.images.map((_, idx) => (
                      <div
                        key={idx}
                        className={cn(
                          "h-1 flex-1 rounded-full transition-colors",
                          idx === imageIndex ? "bg-primary-foreground" : "bg-primary-foreground/40",
                        )}
                      />
                    ))}
                  </div>

<button
                    onClick={(e) => {
                      e.stopPropagation()
                      prevImage()
                    }}
                    className="absolute left-2 top-1/2 -translate-y-1/2 rounded-full bg-card/80 p-1 backdrop-blur-sm"
                  >
                    <ChevronLeft className="h-5 w-5 text-foreground" />
                  </button>
                  <button
                    onClick={(e) => {
                      e.stopPropagation()
                      nextImage()
                    }}
                    className="absolute right-2 top-1/2 -translate-y-1/2 rounded-full bg-card/80 p-1 backdrop-blur-sm"
                  >
                    <ChevronRight className="h-5 w-5 text-foreground" />
                  </button>

<Badge className="absolute left-3 top-3 bg-card/90 text-foreground backdrop-blur-sm">
                    {speciesInfo[currentPet.species].emoji} {speciesInfo[currentPet.species].label}
                  </Badge>
                </div>

<div className="flex h-[30%] flex-col justify-between p-4">
                  <div>
                    <div className="flex items-center justify-between">
                      <h2 className="text-2xl font-bold text-foreground">
                        {currentPet.name}, {currentPet.age}
                        {currentPet.ageUnit === "months" ? "mo" : ""}
                      </h2>
                      <Badge variant="secondary">{lookingForLabels[currentPet.lookingFor]}</Badge>
                    </div>
                    <p className="text-sm text-muted-foreground">{currentPet.breed}</p>
                    <div className="mt-1 flex items-center gap-1 text-sm text-muted-foreground">
                      <MapPin className="h-3 w-3" />
                      <span>{currentPet.distance} miles away</span>
                    </div>
                  </div>

<div className="flex flex-wrap gap-1">
                    {currentPet.personality.slice(0, 3).map((trait) => (
                      <Badge key={trait} variant="outline" className="text-xs">
                        {trait}
                      </Badge>
                    ))}
                  </div>
                </div>
              </div>
            </motion.div>
          </AnimatePresence>
        </div>

<div className="mt-4 flex items-center justify-center gap-4">
          <motion.div whileTap={{ scale: 0.9 }}>
            <Button
              size="lg"
              variant="outline"
              className="h-14 w-14 rounded-full border-2 border-destructive p-0 hover:bg-destructive/10 bg-transparent"
              onClick={() => handleSwipe("left")}
            >
              <X className="h-7 w-7 text-destructive" />
              <span className="sr-only">Pass</span>
            </Button>
          </motion.div>

<motion.div whileTap={{ scale: 0.9 }}>
            <Button
              size="lg"
              className="h-16 w-16 rounded-full bg-primary p-0 hover:bg-primary/90"
              onClick={() => handleSwipe("right")}
            >
              <Heart className="h-8 w-8 text-primary-foreground" />
              <span className="sr-only">Like</span>
            </Button>
          </motion.div>

<motion.div whileTap={{ scale: 0.9 }}>
            <Button
              size="lg"
              variant="outline"
              className="h-14 w-14 rounded-full border-2 border-accent p-0 hover:bg-accent/20 bg-transparent"
              onClick={() => handleSwipe("up")}
            >
              <Star className="h-7 w-7 text-accent-foreground" />
              <span className="sr-only">Super Like</span>
            </Button>
          </motion.div>
        </div>
      </main>

About

Tags

Share

About

Tags

Share

More from jeffmpan

More Templates Like This

About

Tags

Share

About

Tags

Share

More from jeffmpan

More Templates Like This