[V0_FILE]typescriptreact:file="components/memory-gallery.tsx" isQuickEdit="true" isMerged="true" isEdit="true" "use client" import { useState } from "react" import Image from "next/image" import { Dialog, DialogContent } from "@/components/ui/dialog" import { cn } from "@/lib/utils" const images = [ { src: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG-20200528-WA0018.jpg-SWQzQw48E40ova2HKPq2YAyWpapKRC.jpeg", alt: "Eugene in a patterned cloth", caption: "Eugene rocking his 'casual Friday' look", }, { src: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20190130_072116069_BURST000_COVER.jpg-MOVus0zcvk4sRYYkZkXXl3OPpZaJln.jpeg", alt: "Eugene snuggled in a blanket", caption: "Blanket burrito mode: activated", }, { src: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20171124_183307.jpg-9idTFZdmT1RhdAWiZOUA96nulLKSXn.jpeg", alt: "Eugene in a red sweater", caption: "Eugene judging your life choices", }, { src: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20240208_080951359.jpg-rxtignb7bQWSqIF7PEzJJGSh8uVfkX.jpeg", alt: "Eugene with family", caption: "Eugene tolerating human affection", }, { src: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20171124_153921.jpg-9428rpHXjTuns0izutSriqMzuQ4PdL.jpeg", alt: "Eugene by the door", caption: "Eugene's 'I'm not a model, but I could be' pose", }, { src: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20230922_161129711.jpg-u1fMWWLFtK3DxxbQri5lnd7AD2zwPV.jpeg", alt: "Eugene cuddling", caption: "Eugene allowing the human to take a selfie", }, { src: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20220428_130952948.jpg-cY5PrYRmQiVtJVdReh2eNhYxvEt8Cv.jpeg", alt: "Eugene in the kitchen", caption: "Eugene supervising meal prep: 'You're doing it wrong'", }, { src: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG-20191201-WA0006.jpg-lK9NixED84HdcejDWMQM5m9LxWaJ8W.jpeg", alt: "Close-up of Eugene's face", caption: "The eyes that see into your soul (and judge accordingly)", }, { src: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20231113_110833295.jpg-69thc8f8zG4sYdHj8s2jkDvHexMzaK.jpeg", alt: "Eugene in a festive red sweater", caption: "Holiday Eugene: Festive but still judging your decorations", }, ] export default function MemoryGallery() { const [selectedImage, setSelectedImage] = useState(null) return ( <>

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

setSelectedImage(index)} > {image.alt}

{image.caption}

))}

) } [V0_FILE]typescriptreact:file="components/video-player.tsx" isMerged="true" isEdit="true" "use client" import { useState, useRef } from "react" import { Play, Pause, Volume2, VolumeX } from "lucide-react" import { Button } from "@/components/ui/button" import { Slider } from "@/components/ui/slider" export default function VideoPlayer() { const [isPlaying, setIsPlaying] = useState(false) const [isMuted, setIsMuted] = useState(false) const [progress, setProgress] = useState(0) const videoRef = useRef(null) const togglePlay = () => { if (videoRef.current) { if (isPlaying) { videoRef.current.pause() } else { videoRef.current.play() } setIsPlaying(!isPlaying) } } const toggleMute = () => { if (videoRef.current) { videoRef.current.muted = !isMuted setIsMuted(!isMuted) } } const handleTimeUpdate = () => { if (videoRef.current) { const progress = (videoRef.current.currentTime / videoRef.current.duration) * 100 setProgress(progress) } } const handleProgressChange = (value: number[]) => { if (videoRef.current) { const newTime = (value[0] / 100) * videoRef.current.duration videoRef.current.currentTime = newTime setProgress(value[0]) } } return (

{!isPlaying && (

)}

Eugene showing off his intimidation tactics

) } [V0_FILE]typescriptreact:file="components/timeline.tsx" isMerged="true" isEdit="true" import { CalendarDays } from "lucide-react" const timelineEvents = [ { year: "2011", title: "The Arrival", description: "Eugene made his grand entrance into the family. At just a few ounces, he already had the attitude of a Doberman.", }, { year: "2012", title: "Road Trip Warrior", description: "Eugene discovered his love for car rides, as long as he got the window seat. His travel pillow was non-negotiable.", }, { year: "2014", title: "The Great Escape", description: "Eugene executed a perfect prison break by figuring out how to open the back gate. He was found sunbathing in the yard, completely unbothered.", }, { year: "2016", title: "Fashion Revolution", description: "Eugene's sweater collection began to rival most human wardrobes. He refused to go outside without proper attire.", }, { year: "2019", title: "Security Chief", description: "Eugene was unanimously elected Head of Neighborhood Security. His resume included barking at leaves, squirrels, and the occasional cloud.", }, { year: "2022", title: "Blanket Connoisseur", description: "Eugene perfected the art of the blanket burrito, requiring at least three blankets at all times for optimal comfort.", }, ] export default function Timeline() { return (

{/* Vertical line */}

{/* Timeline events */}

{timelineEvents.map((event, index) => (

{event.year}

{event.title}

{event.description}

{index + 1}

))}

) } [V0_FILE]typescriptreact:file="components/memory-card.tsx" isMerged="true" isEdit="true" import type { ReactNode } from "react" interface MemoryCardProps { title: string description: string icon: ReactNode } export default function MemoryCard({ title, description, icon }: MemoryCardProps) { return (

{icon}

{title}

{description}

) } [V0_FILE]typescriptreact:file="lib/utils.ts" isMerged="true" isEdit="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/ui/dialog.tsx" isMerged="true" isEdit="true" "use client" 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 DialogClose = DialogPrimitive.Close const DialogOverlay = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogOverlay.displayName = DialogPrimitive.Overlay.displayName const DialogContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} Close )) DialogContent.displayName = DialogPrimitive.Content.displayName const DialogHeader = ({ className, ...props }: React.HTMLAttributes) => (

) DialogHeader.displayName = "DialogHeader" const DialogFooter = ({ className, ...props }: React.HTMLAttributes) => (

) DialogFooter.displayName = "DialogFooter" const DialogTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogTitle.displayName = DialogPrimitive.Title.displayName const DialogDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogDescription.displayName = DialogPrimitive.Description.displayName export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, } [V0_FILE]typescriptreact:file="components/ui/button.tsx" isMerged="true" isEdit="true" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return }, ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/slider.tsx" isMerged="true" isEdit="true" "use client" import * as React from "react" import * as SliderPrimitive from "@radix-ui/react-slider" import { cn } from "@/lib/utils" const Slider = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Slider.displayName = SliderPrimitive.Root.displayName export { Slider } [V0_FILE]typescriptreact:file="tailwind.config.js" isMerged="true" isEdit="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) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]css:file="app/globals.css" isMerged="true" isEdit="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 0 0% 3.9%; --card: 0 0% 100%; --card-foreground: 0 0% 3.9%; --popover: 0 0% 100%; --popover-foreground: 0 0% 3.9%; --primary: 0 0% 9%; --primary-foreground: 0 0% 98%; --secondary: 0 0% 96.1%; --secondary-foreground: 0 0% 9%; --muted: 0 0% 96.1%; --muted-foreground: 0 0% 45.1%; --accent: 0 0% 96.1%; --accent-foreground: 0 0% 9%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 0 0% 89.8%; --input: 0 0% 89.8%; --ring: 0 0% 3.9%; --radius: 0.5rem; } .dark { --background: 0 0% 3.9%; --foreground: 0 0% 98%; --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; --popover: 0 0% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 0 0% 9%; --secondary: 0 0% 14.9%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 14.9%; --muted-foreground: 0 0% 63.9%; --accent: 0 0% 14.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 0 0% 14.9%; --input: 0 0% 14.9%; --ring: 0 0% 83.1%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" isEdit="true" import Image from "next/image" import { Heart, PawPrintIcon, Star, Award, Coffee } from "lucide-react" import MemoryGallery from "@/components/memory-gallery" import VideoPlayer from "@/components/video-player" import Timeline from "@/components/timeline" import MemoryCard from "@/components/memory-card" import PawprintLoader from "@/components/pawprint-loader" import Link from "next/link" export default function EugeneTribute() { return (

{/* Hero Section with Large Image */}

Eugene

"Small but Mighty"

Four pounds of attitude wrapped in a fur coat with ears. Eugene wasn't just a dog, he was a legend.

{/* Hero Buttons - Updated with completely opaque, vibrant colors */}

View Shared Memories Share Your Memory

{/* Introduction */}

The Legend of Eugene

Eugene was 12 years of sass and sweetness packed into a tiny, adorable package. He firmly believed he was a 100-pound guard dog trapped in a chihuahua's body, and no one could convince him otherwise.

Loving Fierce Sassy

{/* Photo Gallery */}

Eugene's Greatest Hits

{/* Video Memories */}

Eugene in Action

Eugene's personality was too big to be captured in still images alone. Here he is, showing off his signature moves.

{/* Timeline */}

The Eugene Chronicles

{/* Personality Traits */}

The Many Moods of Eugene

} /> } /> } />

{/* Quotes Section */}

Things Eugene Would Say

"I may be small, but my attitude is XL. Deal with it."

"That delivery guy? Yeah, I scared him off. You're welcome."

"I'm not shaking because I'm cold. I'm shaking because I'm so full of rage."

"Yes, I need all these sweaters. It's called fashion, look it up."

{/* Share a Memory */}

Share Your Eugene Story

Got a funny Eugene memory? We'd love to hear it!

Share a Memory

{/* Footer */}

) } [V0_FILE]typescriptreact:file="components/pawprint-loader.tsx" isQuickEdit="true" isMerged="true" isEdit="true" "use client" import { useEffect, useState } from "react" import { motion } from "framer-motion" import { PawPrint } from "lucide-react" export default function PawprintLoader() { const [loaded, setLoaded] = useState(false) useEffect(() => { const timer = setTimeout(() => { setLoaded(true) }, 1000) return () => clearTimeout(timer) }, []) return (

{/* Small paw prints walking across */}

) } [V0_FILE]javascript:file="functions/_middleware.js" isEdit="true" isMerged="true" // This middleware will handle Cloudflare KV integration export async function onRequest(context) { // Make KV namespace available to all functions context.env = context.env || {} context.env.MEMORIES = context.env.MEMORIES || { async put(key, value) { console.log(`Storing in KV: ${key} = ${value}`) return true }, async get(key) { console.log(`Retrieving from KV: ${key}`) return null }, async list() { console.log("Listing all KV entries") return [] }, } return await context.next() } [V0_FILE]typescriptreact:file="app/actions.ts" isEdit="true" isQuickEdit="true" isMerged="true" "use server" import { revalidatePath } from "next/cache" // This is a simple in-memory store for development const memories: Memory[] = [] export type Memory = { id: string name: string story: string imageUrl?: string userEmail?: string createdAt: string } export async function getMemories(): Promise { return [...memories].sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()) } export async function addMemory(formData: FormData): Promise<{ success: boolean; message: string }> { try { const name = formData.get("name") as string const story = formData.get("story") as string const imageDataUrl = formData.get("imageDataUrl") as string const userEmail = formData.get("userEmail") as string if (!name || !story) { return { success: false, message: "Name and story are required" } } // Create a new memory with the image data URL if provided const newMemory: Memory = { id: Date.now().toString(), name, story, imageUrl: imageDataUrl || undefined, userEmail: userEmail || undefined, createdAt: new Date().toISOString(), } // Add to our in-memory store memories.push(newMemory) // Revalidate the shared memories page to show the new submission revalidatePath("/shared-memories") return { success: true, message: "Memory added successfully!" } } catch (error) { console.error("Error adding memory:", error) return { success: false, message: "Failed to add memory. Please try again." } } } [V0_FILE]typescriptreact:file="components/memory-form.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useRef } from "react" import { useRouter } from "next/navigation" import { addMemory } from "@/app/actions" import { Button } from "@/components/ui/button" import { ImagePlus, Loader2, X } from "lucide-react" import Image from "next/image" export default function MemoryForm({ userEmail }: { userEmail?: string }) { const [isSubmitting, setIsSubmitting] = useState(false) const [message, setMessage] = useState<{ text: string; type: "success" | "error" } | null>(null) const [previewUrl, setPreviewUrl] = useState(null) const [imageDataUrl, setImageDataUrl] = useState(null) const formRef = useRef(null) const fileInputRef = useRef(null) const router = useRouter() const handleImageChange = (e: React.ChangeEvent) => { const file = e.target.files?.[0] if (file) { // Create a preview URL for display const objectUrl = URL.createObjectURL(file) setPreviewUrl(objectUrl) // Convert the file to a data URL for storage const reader = new FileReader() reader.onload = (event) => { setImageDataUrl(event.target?.result as string) } reader.readAsDataURL(file) } } const removeImage = () => { setPreviewUrl(null) setImageDataUrl(null) if (fileInputRef.current) { fileInputRef.current.value = "" } } async function handleSubmit(formData: FormData) { setIsSubmitting(true) setMessage(null) try { // Add the image data URL to the form data if we have one if (imageDataUrl) { formData.set("imageDataUrl", imageDataUrl) } // Add user email if available if (userEmail) { formData.set("userEmail", userEmail) } const result = await addMemory(formData) if (result.success) { setMessage({ text: result.message, type: "success" }) formRef.current?.reset() setPreviewUrl(null) setImageDataUrl(null) // Redirect to shared memories page after successful submission setTimeout(() => { router.push("/shared-memories") router.refresh() // Force a refresh to show the new memory }, 2000) } else { setMessage({ text: result.message, type: "error" }) } } catch (error) { setMessage({ text: "An unexpected error occurred", type: "error" }) } finally { setIsSubmitting(false) } } return (

Share Your Eugene Memory

{message && (

{message.text}

)}

Your Name

Your Memory of Eugene

</div>

<div>
          <label htmlFor="image" className="block text-sm font-medium text-gray-700 mb-1">
            Add a Photo (Optional)
          </label>
          <div className="mt-1">
            {previewUrl ? (
              <div className="relative w-full h-48 mb-2 border rounded-md overflow-hidden">
                <Image src={previewUrl || "/placeholder.svg"} alt="Preview" fill className="object-contain" />
                <button
                  type="button"
                  onClick={removeImage}
                  className="absolute top-2 right-2 bg-red-500 text-white p-1 rounded-full hover:bg-red-600"
                >
                  <X className="h-4 w-4" />
                </button>
              </div>
            ) : (
              <label className="flex items-center justify-center w-full h-32 border-2 border-gray-300 border-dashed rounded-md cursor-pointer hover:bg-gray-50">
                <div className="space-y-1 text-center">
                  <ImagePlus className="mx-auto h-12 w-12 text-gray-400" />
                  <div className="text-sm text-gray-600">
                    <span>Click to upload an image</span>
                  </div>
                </div>
                <input
                  ref={fileInputRef}
                  id="image"
                  name="image"
                  type="file"
                  accept="image/*"
                  className="sr-only"
                  onChange={handleImageChange}
                />
              </label>
            )}
          </div>
        </div>

<Button
          type="submit"
          className="w-full bg-yellow-400 hover:bg-yellow-500 text-black font-bold"
          disabled={isSubmitting}
        >
          {isSubmitting ? (
            <>
              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
              Submitting...
            </>
          ) : (
            "Share Memory"
          )}
        </Button>
      </form>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/shared-memory-card.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { formatDistanceToNow } from "date-fns"
import type { Memory } from "@/app/actions"
import { ImageOff, CheckCircle } from "lucide-react"

export default function SharedMemoryCard({ memory }: { memory: Memory }) {
  return (
    <div className="bg-white rounded-lg overflow-hidden shadow-md border border-gray-200">
      {memory.imageUrl ? (
        <div className="relative h-48 w-full bg-gray-100">
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src={memory.imageUrl || "/placeholder.svg"}
            alt={`Memory shared by ${memory.name}`}
            className="w-full h-full object-cover"
          />
        </div>
      ) : (
        <div className="h-48 w-full bg-gray-100 flex items-center justify-center">
          <div className="text-center text-gray-400">
            <ImageOff className="h-12 w-12 mx-auto mb-2" />
            <p>No image shared</p>
          </div>
        </div>
      )}

<div className="p-6">
        <div className="flex justify-between items-center mb-4">
          <div className="flex items-center gap-2">
            <h3 className="text-xl font-bold">{memory.name}</h3>
            {memory.userEmail && (
              <span className="inline-flex items-center text-green-600" title="Verified user">
                <CheckCircle className="h-4 w-4" />
              </span>
            )}
          </div>
          <span className="text-sm text-gray-500">
            {formatDistanceToNow(new Date(memory.createdAt), { addSuffix: true })}
          </span>
        </div>

<p className="text-gray-700 whitespace-pre-line">{memory.story}</p>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/shared-memories/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true" isEdit="true"
import Link from "next/link"
import { ArrowLeft, PlusCircle } from "lucide-react"
import SharedMemoryCard from "@/components/shared-memory-card"
import { getMemories } from "@/app/actions"

export const dynamic = "force-dynamic"

// Add some test memories if needed
const testMemories = [
  {
    id: "1",
    name: "Sarah Johnson",
    story:
      "Eugene once stole an entire sandwich from my plate when I wasn't looking. I turned around for just a second, and when I looked back, he was already halfway across the room with my lunch! His tiny legs could move so fast when food was involved.",
    imageUrl:
      "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG-20191201-WA0006.jpg-lK9NixED84HdcejDWMQM5m9LxWaJ8W.jpeg",
    createdAt: new Date(2023, 5, 15).toISOString(),
  },
  {
    id: "2",
    name: "Michael Chen",
    story:
      "I'll never forget how Eugene would always curl up in the smallest ball possible when he slept. He somehow managed to make himself look even tinier! And heaven forbid if you tried to move him - those little growls were adorable but serious.",
    imageUrl:
      "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20231113_110833295.jpg-69thc8f8zG4sYdHj8s2jkDvHexMzaK.jpeg",
    createdAt: new Date(2023, 6, 22).toISOString(),
  },
]

export default async function SharedMemoriesPage() {
  // Get memories from the server action
  let memories = await getMemories()

// If there are no memories yet, use the test memories
  if (memories.length === 0) {
    memories = testMemories
  }

return (
    <div className="min-h-screen bg-gray-100 py-12">
      <div className="container px-4 md:px-6">
        <div className="mb-8">
          <Link href="/" className="inline-flex items-center text-gray-700 hover:text-black mb-4">
            <ArrowLeft className="mr-2 h-4 w-4" />
            Back to Home
          </Link>

<div className="flex flex-col md:flex-row justify-between items-center">
            <div>
              <h1 className="text-3xl font-bold mb-2">Eugene's Memory Wall</h1>
              <p className="text-gray-600">Memories and stories shared by those who loved Eugene</p>
            </div>

<Link
              href="/share-memory"
              className="mt-4 md:mt-0 inline-flex items-center justify-center h-12 px-6 font-bold rounded-lg bg-yellow-400 text-black shadow-md hover:bg-yellow-300 transition duration-200 ease-in-out"
            >
              <PlusCircle className="mr-2 h-4 w-4" />
              Share Your Memory
            </Link>
          </div>
        </div>

<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
          {memories.map((memory) => (
            <SharedMemoryCard key={memory.id} memory={memory} />
          ))}
        </div>
      </div>
    </div>
  )
}

[V0_FILE]xml:file="public/google-logo.svg" url="https://v0.blob.vercel-storage.com/google-logo-Rl9Hl5Hl7Hl9Hl5Hl7Hl9Hl5Hl7Hl9.svg" isMerged="true" isEdit="true"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
  <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
  <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
  <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
  <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
</svg>

[V0_FILE]typescriptreact:file="app/api/auth/[...nextauth]/route.ts" isEdit="true"
import NextAuth from "next-auth"
import GoogleProvider from "next-auth/providers/google"

export const authOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
  secret: process.env.AUTH_SECRET,
  pages: {
    signIn: "/sign-in",
  },
}

const handler = NextAuth(authOptions)

export { handler as GET, handler as POST }

[V0_FILE]typescriptreact:file="components/google-sign-in-button.tsx" isEdit="true"
"use client"

import { Button } from "@/components/ui/button"
import { useState } from "react"
import { Loader2 } from "lucide-react"

export function GoogleSignInButton() {
  const [isLoading, setIsLoading] = useState(false)

const handleSignIn = async () => {
    setIsLoading(true)
    try {
      // Direct redirect to Google OAuth
      window.location.href = "/api/auth/signin/google?callbackUrl=/share-memory"
    } catch (error) {
      console.error("Error signing in:", error)
      setIsLoading(false)
    }
  }

return (
    <Button
      onClick={handleSignIn}
      disabled={isLoading}
      className="w-full flex items-center justify-center gap-2 bg-white hover:bg-gray-50 text-black border border-gray-300 shadow-sm"
    >
      {isLoading ? (
        <Loader2 className="h-5 w-5 animate-spin" />
      ) : (
        <svg viewBox="0 0 24 24" width="24" height="24" className="h-5 w-5">
          <path
            fill="#4285F4"
            d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
          />
          <path
            fill="#34A853"
            d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
          />
          <path
            fill="#FBBC05"
            d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
          />
          <path
            fill="#EA4335"
            d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
          />
        </svg>
      )}
      <span className="font-medium">Sign in with Google</span>
    </Button>
  )
}

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

import type React from "react"

import { SessionProvider } from "next-auth/react"

export function Providers({ children }: { children: React.ReactNode }) {
  return <SessionProvider>{children}</SessionProvider>
}

[V0_FILE]typescriptreact:file="components/sign-out-button.tsx" isEdit="true"
"use client"

import { Button } from "@/components/ui/button"
import { LogOut } from "lucide-react"

export function SignOutButton() {
  return (
    <Button
      onClick={() => (window.location.href = "/api/auth/signout?callbackUrl=/")}
      variant="outline"
      size="sm"
      className="flex items-center gap-2"
    >
      <LogOut className="h-4 w-4" />
      <span>Sign Out</span>
    </Button>
  )
}

[V0_FILE]typescriptreact:file="app/sign-in/page.tsx" isEdit="true"
import { GoogleSignInButton } from "@/components/google-sign-in-button"
import Link from "next/link"
import { ArrowLeft } from "lucide-react"
import { Button } from "@/components/ui/button"
import { AlertCircle } from "lucide-react"

export default function SignInPage({
  searchParams,
}: {
  searchParams: { error?: string }
}) {
  const error = searchParams.error

return (
    <div className="min-h-screen bg-gray-100 py-12">
      <div className="container px-4 md:px-6">
        <div className="mb-8">
          <Button asChild variant="ghost" className="mb-4">
            <Link href="/" className="flex items-center">
              <ArrowLeft className="mr-2 h-4 w-4" />
              Back to Home
            </Link>
          </Button>

<h1 className="text-3xl font-bold text-center mb-2">Sign In to Share Your Memory</h1>
          <p className="text-center text-gray-600 mb-8">
            Sign in with your Google account to share your memories of Eugene
          </p>
        </div>

<div className="max-w-md mx-auto bg-white p-8 rounded-lg shadow-md border border-gray-200">
          {error && (
            <div className="mb-4 p-4 bg-red-50 text-red-700 rounded-md flex items-center">
              <AlertCircle className="h-5 w-5 mr-2" />
              <span>There was an error signing in. Please try again.</span>
            </div>
          )}

<div className="text-center mb-6">
            <h2 className="text-xl font-semibold">Welcome</h2>
            <p className="text-gray-600 mt-2">Please sign in with Google to share your memories of Eugene</p>
          </div>

<div className="mt-8 text-center text-sm text-gray-500">
            <p>By signing in, you'll be able to share your memories and photos of Eugene with our community.</p>
          </div>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]json:file="package.json" isEdit="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next-auth": "^4.22.1",
    "@hookform/resolvers": "^3.9.1",
    "@radix-ui/react-accordion": "^1.2.2",
    "@radix-ui/react-alert-dialog": "^1.1.4",
    "@radix-ui/react-aspect-ratio": "^1.1.1",
    "@radix-ui/react-avatar": "^1.1.2",
    "@radix-ui/react-checkbox": "^1.1.3",
    "@radix-ui/react-collapsible": "^1.1.2",
    "@radix-ui/react-context-menu": "^2.2.4",
    "@radix-ui/react-dialog": "^1.1.4",
    "@radix-ui/react-dropdown-menu": "^2.1.4",
    "@radix-ui/react-hover-card": "^1.1.4",
    "@radix-ui/react-label": "^2.1.1",
    "@radix-ui/react-menubar": "^1.1.4",
    "@radix-ui/react-navigation-menu": "^1.2.3",
    "@radix-ui/react-popover": "^1.1.4",
    "@radix-ui/react-progress": "^1.1.1",
    "@radix-ui/react-radio-group": "^1.2.2",
    "@radix-ui/react-scroll-area": "^1.2.2",
    "@radix-ui/react-select": "^2.1.4",
    "@radix-ui/react-separator": "^1.1.1",
    "@radix-ui/react-slider": "^1.2.2",
    "@radix-ui/react-slot": "^1.1.1",
    "@radix-ui/react-switch": "^1.1.2",
    "@radix-ui/react-tabs": "^1.1.2",
    "@radix-ui/react-toast": "^1.2.4",
    "@radix-ui/react-toggle": "^1.1.1",
    "@radix-ui/react-toggle-group": "^1.1.1",
    "@radix-ui/react-tooltip": "^1.1.6",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "^2.30.0",
    "embla-carousel-react": "8.5.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "14.2.16",
    "next-themes": "^0.4.4",
    "react": "^19",
    "react-day-picker": "8.10.1",
    "react-dom": "^19",
    "react-hook-form": "^7.54.1",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.0",
    "sonner": "^1.7.1",
    "tailwind-merge": "^2.5.5",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.6",
    "zod": "^3.24.1"
  },
  "devDependencies": {
    "@types/node": "^22",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "postcss": "^8",
    "tailwindcss": "^3.4.17",
    "typescript": "^5"
  }
}

[V0_FILE]typescriptreact:file="app/share-memory/fallback-page.tsx" isEdit="true"
"use client"

import MemoryForm from "@/components/memory-form"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { ArrowLeft } from "lucide-react"
import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"

export default function ShareMemoryFallbackPage() {
  const [isAuthenticated, setIsAuthenticated] = useState(false)
  const [isLoading, setIsLoading] = useState(true)
  const router = useRouter()

useEffect(() => {
    // Simple check for authentication - check if we have a session cookie
    const hasCookie = document.cookie.includes("next-auth.session-token")

if (!hasCookie) {
      router.push("/sign-in")
    } else {
      setIsAuthenticated(true)
      setIsLoading(false)
    }
  }, [router])

if (isLoading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <p>Loading...</p>
      </div>
    )
  }

if (!isAuthenticated) {
    return null
  }

<h1 className="text-3xl font-bold text-center mb-2">Share Your Eugene Memory</h1>
          <p className="text-center text-gray-600 mb-8">
            Help us celebrate Eugene by sharing your favorite memory or story
          </p>

<p className="text-center text-sm text-gray-500 mb-4">Signed in with Google</p>
        </div>

<div className="mt-8 text-center">
          <Link href="/shared-memories" className="text-black hover:underline">
            View all shared memories
          </Link>
        </div>
      </div>
    </div>
  )
}

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

export function middleware(request: NextRequest) {
  // Check if the user is trying to access the share-memory page
  if (request.nextUrl.pathname.startsWith("/share-memory")) {
    // Check if the user has a session cookie
    const hasSessionCookie = request.cookies.has("next-auth.session-token")

if (!hasSessionCookie) {
      // Redirect to sign-in page if no session cookie
      return NextResponse.redirect(new URL("/sign-in", request.url))
    }
  }

return NextResponse.next()
}

export const config = {
  matcher: ["/share-memory"],
}

[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true"
import type React from "react"
import type { Metadata } from "next"
import "./globals.css"

export const metadata: Metadata = {
  title: "Eugene Tribute",
  description: "A tribute to Eugene",
}

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

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

import type React from "react"

import { useEffect } from "react"
import { useRouter } from "next/navigation"

export function AuthCheck({ children }: { children: React.ReactNode }) {
  const router = useRouter()

useEffect(() => {
    // Simple check for authentication - check if we have a session cookie
    const hasCookie = document.cookie.includes("next-auth.session-token")

if (!hasCookie) {
      router.push("/sign-in")
    }
  }, [router])

return <>{children}</>
}

[V0_FILE]typescriptreact:file="app/share-memory/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true"
import { AuthCheck } from "@/components/auth-check"
import ShareMemoryFallbackPage from "./fallback-page"

export default function ShareMemoryPage() {
  return (
    <AuthCheck>
      <ShareMemoryFallbackPage />
    </AuthCheck>
  )
}
</article></body></html>

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This