[V0_FILE]typescriptreact:file="components/blessing-form.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { useForm } from "react-hook-form" import { addBlessing } from "@/lib/actions" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { toast } from "@/hooks/use-toast" import { Loader2, MapPin } from "lucide-react" import type { BlessingCategory } from "@/lib/types" type FormData = { name: string message: string latitude: number longitude: number category: BlessingCategory } export default function BlessingForm() { const [isLocating, setIsLocating] = useState(false) const [isSubmitting, setIsSubmitting] = useState(false) const { register, handleSubmit, setValue, watch, formState: { errors }, reset, } = useForm({ defaultValues: { name: "", message: "", latitude: 0, longitude: 0, category: "other", }, }) const selectedCategory = watch("category") // Update the locateMe function to better handle geolocation errors const locateMe = () => { setIsLocating(true) if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( (position) => { setValue("latitude", position.coords.latitude) setValue("longitude", position.coords.longitude) setIsLocating(false) toast({ title: "Location detected", description: "Your current location has been added to the blessing.", }) }, (error) => { console.error("Error getting location:", error) setIsLocating(false) // More user-friendly error messages based on error code let errorMessage = "Could not detect your location. " switch (error.code) { case error.PERMISSION_DENIED: errorMessage += "Please allow location access in your browser settings or enter coordinates manually." break case error.POSITION_UNAVAILABLE: errorMessage += "Location information is unavailable. Please enter coordinates manually." break case error.TIMEOUT: errorMessage += "Location request timed out. Please try again or enter coordinates manually." break default: errorMessage += "Please try again or enter coordinates manually." } toast({ title: "Location error", description: errorMessage, variant: "destructive", }) // Set default coordinates as fallback (center of world map) setValue("latitude", 20) setValue("longitude", 0) }, // Additional options for geolocation { enableHighAccuracy: true, timeout: 5000, maximumAge: 0, }, ) } else { setIsLocating(false) toast({ title: "Geolocation not supported", description: "Your browser does not support geolocation. Please enter coordinates manually.", variant: "destructive", }) } } // Add a helper function to set example locations const setExampleLocation = (location: string) => { switch (location) { case "newyork": setValue("latitude", 40.7128) setValue("longitude", -74.006) break case "tokyo": setValue("latitude", 35.6762) setValue("longitude", 139.6503) break case "london": setValue("latitude", 51.5074) setValue("longitude", -0.1278) break case "sydney": setValue("latitude", -33.8688) setValue("longitude", 151.2093) break default: break } toast({ title: "Location set", description: `Example location coordinates for ${location} have been set.`, }) } const onSubmit = async (data: FormData) => { setIsSubmitting(true) try { const newBlessing = await addBlessing({ ...data, timestamp: new Date().toISOString(), }) // Dispatch custom event for the map to react const newBlessingEvent = new CustomEvent("new-blessing", { detail: newBlessing, }) window.dispatchEvent(newBlessingEvent) reset() toast({ title: "Blessing added", description: "Your blessing has been added to the global map. Thank you!", }) } catch (error) { toast({ title: "Error", description: "Failed to add your blessing. Please try again.", variant: "destructive", }) } finally { setIsSubmitting(false) } } return ( Share Your Blessing Add your blessing to light up the world map

Your Name {errors.name &&

{errors.name.message}

}

Blessing Type

Your Blessing

{errors.message && <p className="text-sm text-red-500">{errors.message.message}</p>}
          </div>

<div className="space-y-2">
            <div className="flex items-center justify-between">
              <Label className="text-gray-300">Your Location</Label>
              <Button
                type="button"
                variant="outline"
                size="sm"
                onClick={locateMe}
                disabled={isLocating}
                className="bg-gray-900/60 border-gray-700 text-gray-300 hover:bg-gray-800 hover:text-white"
              >
                {isLocating ? (
                  <>
                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                    Detecting...
                  </>
                ) : (
                  <>
                    <MapPin className="mr-2 h-4 w-4" />
                    Detect Location
                  </>
                )}
              </Button>
            </div>

{(errors.latitude || errors.longitude) && (
              <p className="text-sm text-red-500">Location coordinates are required</p>
            )}

{/* Example locations */}
            <div className="pt-1">
              <p className="text-xs text-gray-400 mb-2">Or use an example location:</p>
              <div className="flex flex-wrap gap-2">
                <Button
                  type="button"
                  variant="outline"
                  size="sm"
                  onClick={() => setExampleLocation("newyork")}
                  className="text-xs bg-gray-900/60 border-gray-700 text-gray-300 hover:bg-gray-800 hover:text-white"
                >
                  New York
                </Button>
                <Button
                  type="button"
                  variant="outline"
                  size="sm"
                  onClick={() => setExampleLocation("tokyo")}
                  className="text-xs bg-gray-900/60 border-gray-700 text-gray-300 hover:bg-gray-800 hover:text-white"
                >
                  Tokyo
                </Button>
                <Button
                  type="button"
                  variant="outline"
                  size="sm"
                  onClick={() => setExampleLocation("london")}
                  className="text-xs bg-gray-900/60 border-gray-700 text-gray-300 hover:bg-gray-800 hover:text-white"
                >
                  London
                </Button>
                <Button
                  type="button"
                  variant="outline"
                  size="sm"
                  onClick={() => setExampleLocation("sydney")}
                  className="text-xs bg-gray-900/60 border-gray-700 text-gray-300 hover:bg-gray-800 hover:text-white"
                >
                  Sydney
                </Button>
              </div>
            </div>
          </div>
        </CardContent>

<CardFooter>
          <Button
            type="submit"
            className="w-full bg-gradient-to-r from-purple-600 via-pink-500 to-amber-500 hover:from-purple-700 hover:via-pink-600 hover:to-amber-600"
            disabled={isSubmitting}
          >
            {isSubmitting ? (
              <>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                Adding Blessing...
              </>
            ) : (
              "Add My Blessing"
            )}
          </Button>
        </CardFooter>
      </form>
    </Card>
  )
}

export type Blessing = {
  id: string
  name: string
  message: string
  latitude: number
  longitude: number
  timestamp: string
  category: BlessingCategory
  likes: number
}

export type Comment = {
  id: string
  blessingId: string
  name: string
  message: string
  timestamp: string
}

[V0_FILE]typescriptreact:file="lib/actions.ts" isEdit="true" isMerged="true"
"use server"

import type { Blessing, BlessingCategory, Comment } from "./types"

// In a real app, this would be stored in a database
let blessings: Blessing[] = [
  {
    id: "1",
    name: "Maria",
    message: "Peace and love to everyone around the world",
    latitude: 40.7128,
    longitude: -74.006,
    timestamp: "2023-12-25T12:00:00Z",
    category: "peace",
    likes: 24,
  },
  {
    id: "2",
    name: "Hiroshi",
    message: "May happiness find you wherever you are",
    latitude: 35.6762,
    longitude: 139.6503,
    timestamp: "2023-12-31T23:59:00Z",
    category: "holiday",
    likes: 18,
  },
  {
    id: "3",
    name: "Amara",
    message: "Sending light and healing to all corners of the earth",
    latitude: 9.082,
    longitude: 8.6753,
    timestamp: "2024-01-15T08:30:00Z",
    category: "wellbeing",
    likes: 12,
  },
  {
    id: "4",
    name: "Carlos",
    message: "Wishing prosperity and joy to everyone",
    latitude: -23.5505,
    longitude: -46.6333,
    timestamp: "2024-02-01T15:45:00Z",
    category: "encouragement",
    likes: 31,
  },
  {
    id: "5",
    name: "Sophia",
    message: "Happy birthday to my friend across the ocean! May your day be filled with joy!",
    latitude: 48.8566,
    longitude: 2.3522,
    timestamp: "2024-02-14T09:20:00Z",
    category: "birthday",
    likes: 42,
  },
  {
    id: "6",
    name: "Ahmed",
    message: "Blessings of peace and harmony to all nations",
    latitude: 30.0444,
    longitude: 31.2357,
    timestamp: "2024-02-20T11:10:00Z",
    category: "peace",
    likes: 15,
  },
  {
    id: "7",
    name: "Mei",
    message: "Congratulations on your graduation! Your hard work has paid off!",
    latitude: 39.9042,
    longitude: 116.4074,
    timestamp: "2024-03-05T14:25:00Z",
    category: "congratulations",
    likes: 27,
  },
  {
    id: "8",
    name: "Raj",
    message: "May all beings be free from suffering",
    latitude: 28.6139,
    longitude: 77.209,
    timestamp: "2024-03-08T16:50:00Z",
    category: "wellbeing",
    likes: 19,
  },
]

// Comments storage
let comments: Comment[] = [
  {
    id: "c1",
    blessingId: "5",
    name: "Jean",
    message: "Such a beautiful birthday wish!",
    timestamp: "2024-02-14T10:30:00Z",
  },
  {
    id: "c2",
    blessingId: "5",
    name: "Miguel",
    message: "Happy birthday to your friend!",
    timestamp: "2024-02-14T11:45:00Z",
  },
  {
    id: "c3",
    blessingId: "7",
    name: "Lina",
    message: "Congratulations to the graduate!",
    timestamp: "2024-03-05T16:20:00Z",
  },
]

export async function getBlessings(filters?: {
  category?: BlessingCategory
  startDate?: string
  endDate?: string
}): Promise<Blessing[]> {
  // Simulate network delay
  await new Promise((resolve) => setTimeout(resolve, 500))

let filteredBlessings = [...blessings]

if (filters) {
    if (filters.category) {
      filteredBlessings = filteredBlessings.filter((b) => b.category === filters.category)
    }

if (filters.startDate) {
      filteredBlessings = filteredBlessings.filter((b) => new Date(b.timestamp) >= new Date(filters.startDate!))
    }

if (filters.endDate) {
      filteredBlessings = filteredBlessings.filter((b) => new Date(b.timestamp) <= new Date(filters.endDate!))
    }
  }

return filteredBlessings
}

export async function addBlessing(blessing: Omit<Blessing, "id" | "likes">): Promise<Blessing> {
  // Simulate network delay
  await new Promise((resolve) => setTimeout(resolve, 1000))

const newBlessing: Blessing = {
    ...blessing,
    id: Math.random().toString(36).substring(2, 9),
    likes: 0,
  }

blessings = [...blessings, newBlessing]
  return newBlessing
}

export async function getComments(blessingId: string): Promise<Comment[]> {
  // Simulate network delay
  await new Promise((resolve) => setTimeout(resolve, 300))

return comments.filter((c) => c.blessingId === blessingId)
}

export async function addComment(comment: Omit<Comment, "id" | "timestamp">): Promise<Comment> {
  // Simulate network delay
  await new Promise((resolve) => setTimeout(resolve, 800))

const newComment: Comment = {
    ...comment,
    id: Math.random().toString(36).substring(2, 9),
    timestamp: new Date().toISOString(),
  }

comments = [...comments, newComment]
  return newComment
}

export async function likeBlessing(blessingId: string): Promise<Blessing> {
  // Simulate network delay
  await new Promise((resolve) => setTimeout(resolve, 300))

const blessingIndex = blessings.findIndex((b) => b.id === blessingId)

if (blessingIndex === -1) {
    throw new Error("Blessing not found")
  }

const updatedBlessing = {
    ...blessings[blessingIndex],
    likes: blessings[blessingIndex].likes + 1,
  }

blessings = [...blessings.slice(0, blessingIndex), updatedBlessing, ...blessings.slice(blessingIndex + 1)]

return updatedBlessing
}

[V0_FILE]typescriptreact:file="tailwind.config.ts" isEdit="true" isQuickEdit="true" isMerged="true"
import type { Config } from "tailwindcss"

const config = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  prefix: "",
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
} satisfies Config

export default config

[V0_FILE]typescriptreact:file="components/filter-controls.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { CalendarIcon, Filter, X } from "lucide-react"
import { format } from "date-fns"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Calendar } from "@/components/ui/calendar"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import type { BlessingCategory } from "@/lib/types"

type FilterControlsProps = {
  onFilterChange: (filters: {
    category?: BlessingCategory
    startDate?: string
    endDate?: string
  }) => void
}

export default function FilterControls({ onFilterChange }: FilterControlsProps) {
  const [isOpen, setIsOpen] = useState(false)
  const [category, setCategory] = useState<BlessingCategory | undefined>(undefined)
  const [startDate, setStartDate] = useState<Date | undefined>(undefined)
  const [endDate, setEndDate] = useState<Date | undefined>(undefined)
  const [isFiltering, setIsFiltering] = useState(false)

const categoryOptions: { value: BlessingCategory; label: string }[] = [
    { value: "birthday", label: "Birthday" },
    { value: "holiday", label: "Holiday" },
    { value: "encouragement", label: "Encouragement" },
    { value: "congratulations", label: "Congratulations" },
    { value: "wellbeing", label: "Well-being" },
    { value: "peace", label: "Peace" },
    { value: "other", label: "Other" },
  ]

useEffect(() => {
    // Check if any filters are active
    setIsFiltering(!!category || !!startDate || !!endDate)
  }, [category, startDate, endDate])

const handleApplyFilters = () => {
    onFilterChange({
      category,
      startDate: startDate ? startDate.toISOString() : undefined,
      endDate: endDate ? endDate.toISOString() : undefined,
    })
    setIsOpen(false)
  }

const handleClearFilters = () => {
    setCategory(undefined)
    setStartDate(undefined)
    setEndDate(undefined)
    onFilterChange({})
    setIsOpen(false)
  }

return (
    <Popover open={isOpen} onOpenChange={setIsOpen}>
      <PopoverTrigger asChild>
        <Button
          variant={isFiltering ? "default" : "outline"}
          size="sm"
          className={cn(
            "flex items-center gap-2 bg-gray-800/80 backdrop-blur-sm border-gray-700 text-white",
            isFiltering && "bg-primary/90 text-primary-foreground",
            "hover:bg-gray-700/90",
            "transition-colors duration-200"
          )}
        >
          <Filter className="h-4 w-4" />
          {isFiltering ? "Filters Applied" : "Filter Blessings"}
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-80 p-4 bg-black/80 backdrop-blur-md border-gray-700 text-white">
        <div className="space-y-4">
          <h3 className="font-medium text-lg">Filter Blessings</h3>

<div className="space-y-2">
            <label className="text-sm font-medium">Category</label>
            <Select value={category} onValueChange={(value) => setCategory(value as BlessingCategory)}>
              <SelectTrigger className="bg-gray-900 border-gray-700">
                <SelectValue placeholder="Select category" />
              </SelectTrigger>
              <SelectContent className="bg-gray-900 border-gray-700 text-white">
                <SelectItem value="all" className="text-white focus:bg-gray-800 focus:text-white">
                  All Categories
                </SelectItem>
                {categoryOptions.map((option) => (
                  <SelectItem
                    key={option.value}
                    value={option.value}
                    className="text-white focus:bg-gray-800 focus:text-white"
                  >
                    {option.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

<div className="grid grid-cols-2 gap-2">
            <div className="space-y-2">
              <label className="text-sm font-medium">Start Date</label>
              <Popover>
                <PopoverTrigger asChild>
                  <Button
                    variant="outline"
                    className={cn(
                      "w-full justify-start text-left font-normal bg-gray-900 border-gray-700",
                      !startDate && "text-muted-foreground",
                    )}
                  >
                    <CalendarIcon className="mr-2 h-4 w-4" />
                    {startDate ? format(startDate, "PPP") : "Pick a date"}
                  </Button>
                </PopoverTrigger>
                <PopoverContent className="w-auto p-0 bg-gray-900 border-gray-700">
                  <Calendar
                    mode="single"
                    selected={startDate}
                    onSelect={setStartDate}
                    initialFocus
                    className="bg-gray-900"
                  />
                </PopoverContent>
              </Popover>
            </div>

<div className="space-y-2">
              <label className="text-sm font-medium">End Date</label>
              <Popover>
                <PopoverTrigger asChild>
                  <Button
                    variant="outline"
                    className={cn(
                      "w-full justify-start text-left font-normal bg-gray-900 border-gray-700",
                      !endDate && "text-muted-foreground",
                    )}
                  >
                    <CalendarIcon className="mr-2 h-4 w-4" />
                    {endDate ? format(endDate, "PPP") : "Pick a date"}
                  </Button>
                </PopoverTrigger>
                <PopoverContent className="w-auto p-0 bg-gray-900 border-gray-700">
                  <Calendar
                    mode="single"
                    selected={endDate}
                    onSelect={setEndDate}
                    initialFocus
                    className="bg-gray-900"
                  />
                </PopoverContent>
              </Popover>
            </div>
          </div>

<div className="flex justify-between pt-2">
            <Button
              variant="outline"
              size="sm"
              onClick={handleClearFilters}
              className="bg-gray-900 border-gray-700 hover:bg-gray-800"
            >
              <X className="mr-2 h-4 w-4" />
              Clear
            </Button>
            <Button
              size="sm"
              onClick={handleApplyFilters}
              className="bg-gradient-to-r from-purple-600 via-pink-500 to-amber-500 hover:from-purple-700 hover:via-pink-600 hover:to-amber-600"
            >
              Apply Filters
            </Button>
          </div>
        </div>
      </PopoverContent>
    </Popover>
  )
}

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

import type React from "react"

import { useState, useEffect } from "react"
import { format } from "date-fns"
import { Heart, MessageCircle, X, Send } from "lucide-react"
import type { Blessing, Comment } from "@/lib/types"
import { getComments, addComment, likeBlessing } from "@/lib/actions"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { toast } from "@/hooks/use-toast"

const categoryLabels = {
  birthday: "Birthday",
  holiday: "Holiday",
  encouragement: "Encouragement",
  congratulations: "Congratulations",
  wellbeing: "Well-being",
  peace: "Peace",
  other: "Other",
}

const categoryColors = {
  birthday: "bg-pink-500",
  holiday: "bg-blue-500",
  encouragement: "bg-green-500",
  congratulations: "bg-yellow-500",
  wellbeing: "bg-purple-500",
  peace: "bg-sky-500",
  other: "bg-orange-500",
}

type BlessingDetailProps = {
  blessing: Blessing
  onClose: () => void
  onLikeUpdate: (blessing: Blessing) => void
}

export default function BlessingDetail({ blessing, onClose, onLikeUpdate }: BlessingDetailProps) {
  const [comments, setComments] = useState<Comment[]>([])
  const [isLoadingComments, setIsLoadingComments] = useState(true)
  const [newComment, setNewComment] = useState("")
  const [commentorName, setCommentorName] = useState("")
  const [isSubmittingComment, setIsSubmittingComment] = useState(false)
  const [isLiking, setIsLiking] = useState(false)
  const [showCommentForm, setShowCommentForm] = useState(false)
  const [currentLikes, setCurrentLikes] = useState(blessing.likes)

useEffect(() => {
    const loadComments = async () => {
      setIsLoadingComments(true)
      try {
        const data = await getComments(blessing.id)
        setComments(data)
      } catch (error) {
        console.error("Error loading comments:", error)
        toast({
          title: "Error",
          description: "Failed to load comments. Please try again.",
          variant: "destructive",
        })
      } finally {
        setIsLoadingComments(false)
      }
    }

loadComments()
  }, [blessing.id])

const handleLike = async () => {
    if (isLiking) return

setIsLiking(true)
    try {
      const updatedBlessing = await likeBlessing(blessing.id)
      setCurrentLikes(updatedBlessing.likes)
      onLikeUpdate(updatedBlessing)

// Add heart animation
      const heartContainer = document.getElementById(`heart-container-${blessing.id}`)
      if (heartContainer) {
        const heart = document.createElement("div")
        heart.className = "floating-heart"
        heart.innerHTML = "❤️"
        heart.style.left = `${Math.random() * 80 + 10}%`
        heartContainer.appendChild(heart)

setTimeout(() => {
          heart.remove()
        }, 2000)
      }
    } catch (error) {
      console.error("Error liking blessing:", error)
      toast({
        title: "Error",
        description: "Failed to like this blessing. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsLiking(false)
    }
  }

const handleSubmitComment = async (e: React.FormEvent) => {
    e.preventDefault()

if (!commentorName.trim() || !newComment.trim()) {
      toast({
        title: "Missing information",
        description: "Please provide your name and comment.",
        variant: "destructive",
      })
      return
    }

setIsSubmittingComment(true)
    try {
      const comment = await addComment({
        blessingId: blessing.id,
        name: commentorName,
        message: newComment,
      })

setComments((prev) => [...prev, comment])
      setNewComment("")
      setShowCommentForm(false)

toast({
        title: "Comment added",
        description: "Your comment has been added successfully.",
      })
    } catch (error) {
      console.error("Error adding comment:", error)
      toast({
        title: "Error",
        description: "Failed to add your comment. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsSubmittingComment(false)
    }
  }

const getInitials = (name: string) => {
    return name
      .split(" ")
      .map((part) => part[0])
      .join("")
      .toUpperCase()
      .substring(0, 2)
  }

return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/70 backdrop-blur-sm">
      <div
        className="relative w-full max-w-md max-h-[90vh] overflow-hidden rounded-lg bg-gradient-to-b from-gray-900 to-black border border-gray-800 shadow-xl"
        id={`heart-container-${blessing.id}`}
      >
        <Button
          variant="ghost"
          size="icon"
          className="absolute top-2 right-2 text-gray-400 hover:text-white hover:bg-gray-800 z-10"
          onClick={onClose}
        >
          <X className="h-5 w-5" />
        </Button>

<div className="p-6 overflow-y-auto max-h-[90vh]">
          <div className="space-y-4">
            {/* Header */}
            <div className="flex items-start gap-3">
              <Avatar className="h-12 w-12 border-2 border-white/20">
                <AvatarFallback className="bg-gradient-to-br from-purple-600 to-pink-500 text-white">
                  {getInitials(blessing.name)}
                </AvatarFallback>
              </Avatar>

<div className="flex-1">
                <h3 className="text-xl font-semibold text-white">{blessing.name}</h3>
                <div className="flex items-center gap-2 text-sm text-gray-400">
                  <span>{format(new Date(blessing.timestamp), "PPP")}</span>
                  <span className="text-gray-500">•</span>
                  <span className={`px-2 py-0.5 rounded-full text-xs ${categoryColors[blessing.category]} text-white`}>
                    {categoryLabels[blessing.category]}
                  </span>
                </div>
              </div>
            </div>

{/* Message */}
            <div className="bg-gray-800/50 rounded-lg p-4 border border-gray-700">
              <p className="text-white text-lg">{blessing.message}</p>
            </div>

{/* Actions */}
            <div className="flex items-center gap-4 pt-2 border-t border-gray-800">
              <Button
                variant="ghost"
                size="sm"
                className="flex items-center gap-2 text-gray-300 hover:text-pink-500 hover:bg-pink-500/10"
                onClick={handleLike}
                disabled={isLiking}
              >
                <Heart className={`h-5 w-5 ${currentLikes > blessing.likes ? "fill-pink-500 text-pink-500" : ""}`} />
                <span className="font-medium">{currentLikes}</span>
              </Button>

<Button
                variant="ghost"
                size="sm"
                className="flex items-center gap-2 text-gray-300 hover:text-blue-500 hover:bg-blue-500/10"
                onClick={() => setShowCommentForm(!showCommentForm)}
              >
                <MessageCircle className="h-5 w-5" />
                <span className="font-medium">{comments.length}</span>
              </Button>
            </div>

{/* Comment Form */}
            {showCommentForm && (
              <form
                onSubmit={handleSubmitComment}
                className="space-y-3 bg-gray-800/30 p-3 rounded-lg border border-gray-700"
              >
                <h4 className="font-medium text-white">Add a Comment</h4>

<div>
                  <Input
                    placeholder="Your name"
                    value={commentorName}
                    onChange={(e) => setCommentorName(e.target.value)}
                    className="bg-gray-900 border-gray-700"
                    required
                  />
                </div>

<div className="flex items-end gap-2">
                  <Textarea
                    placeholder="Write your comment..."
                    value={newComment}
                    onChange={(e) => setNewComment(e.target.value)}
                    className="flex-1 bg-gray-900 border-gray-700 min-h-[80px]"
                    required
                  />

<Button
                    type="submit"
                    size="icon"
                    disabled={isSubmittingComment}
                    className="bg-blue-600 hover:bg-blue-700"
                  >
                    {isSubmittingComment ? (
                      <div className="h-4 w-4 rounded-full border-2 border-t-transparent border-white animate-spin" />
                    ) : (
                      <Send className="h-4 w-4" />
                    )}
                  </Button>
                </div>
              </form>
            )}

{/* Comments */}
            <div className="space-y-4 pt-2">
              <h4 className="font-medium text-white">Comments</h4>

{isLoadingComments ? (
                <div className="flex justify-center py-4">
                  <div className="h-6 w-6 rounded-full border-2 border-t-transparent border-blue-500 animate-spin" />
                </div>
              ) : comments.length > 0 ? (
                <div className="space-y-3">
                  {comments.map((comment) => (
                    <div key={comment.id} className="bg-gray-800/30 p-3 rounded-lg border border-gray-700">
                      <div className="flex items-center gap-2 mb-1">
                        <Avatar className="h-6 w-6">
                          <AvatarFallback className="bg-gradient-to-br from-blue-600 to-indigo-500 text-white text-xs">
                            {getInitials(comment.name)}
                          </AvatarFallback>
                        </Avatar>
                        <span className="font-medium text-white">{comment.name}</span>
                        <span className="text-xs text-gray-400">{format(new Date(comment.timestamp), "PPP")}</span>
                      </div>
                      <p className="text-gray-300">{comment.message}</p>
                    </div>
                  ))}
                </div>
              ) : (
                <p className="text-gray-400 text-center py-2">No comments yet. Be the first to comment!</p>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/blessing-map.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useState, useEffect } from "react"
import { ComposableMap, Geographies, Geography, Marker } from "react-simple-maps"
import { getBlessings } from "@/lib/actions"
import type { Blessing, BlessingCategory } from "@/lib/types"
import BlessingDetail from "@/components/blessing-detail"
import FilterControls from "@/components/filter-controls"

const geoUrl = "https://raw.githubusercontent.com/deldersveld/topojson/master/world-countries.json"

const categoryColors = {
  birthday: "#F472B6", // pink
  holiday: "#60A5FA", // blue
  encouragement: "#34D399", // green
  congratulations: "#FBBF24", // yellow
  wellbeing: "#A78BFA", // purple
  peace: "#93C5FD", // light blue
  other: "#F97316", // orange (default)
}

export default function BlessingMap() {
  const [blessings, setBlessings] = useState<Blessing[]>([])
  const [newBlessing, setNewBlessing] = useState<Blessing | null>(null)
  const [selectedBlessing, setSelectedBlessing] = useState<Blessing | null>(null)
  const [filters, setFilters] = useState<{
    category?: BlessingCategory
    startDate?: string
    endDate?: string
  }>({})
  const [isLoading, setIsLoading] = useState(true)

const loadBlessings = async () => {
    setIsLoading(true)
    try {
      const data = await getBlessings(filters)
      setBlessings(data)
    } catch (error) {
      console.error("Error loading blessings:", error)
    } finally {
      setIsLoading(false)
    }
  }

useEffect(() => {
    loadBlessings()

// Set up event listener for new blessings
    const handleNewBlessing = (event: CustomEvent) => {
      const blessing = event.detail
      setNewBlessing(blessing)
      setTimeout(() => {
        setNewBlessing(null)
        setBlessings((prev) => [...prev, blessing])
      }, 2000)
    }

window.addEventListener("new-blessing" as any, handleNewBlessing)

return () => {
      window.removeEventListener("new-blessing" as any, handleNewBlessing)
    }
  }, [filters])

const handleMarkerClick = (blessing: Blessing) => {
    setSelectedBlessing(blessing)
  }

const handleFilterChange = (newFilters: {
    category?: BlessingCategory
    startDate?: string
    endDate?: string
  }) => {
    setFilters(newFilters)
  }

const getMarkerColor = (category: BlessingCategory) => {
    return categoryColors[category] || categoryColors.other
  }

return (
    <div className="w-full h-full absolute inset-0 bg-[#030314]">
      <div className="absolute top-4 right-4 z-10">
        <FilterControls onFilterChange={handleFilterChange} />
      </div>

{isLoading && (
        <div className="absolute inset-0 flex items-center justify-center bg-black/20 backdrop-blur-sm z-20">
          <div className="flex flex-col items-center gap-2">
            <div className="h-8 w-8 rounded-full border-4 border-t-transparent border-primary animate-spin"></div>
            <p className="text-white">Loading blessings...</p>
          </div>
        </div>
      )}

<ComposableMap
        projection="geoMercator"
        projectionConfig={{
          scale: 150,
        }}
        className="w-full h-full"
        style={{ backgroundColor: "#030314" }} // Explicitly set background color
      >
        <Geographies geography={geoUrl}>
          {({ geographies }) =>
            geographies.map((geo) => (
              <Geography
                key={geo.rsmKey}
                geography={geo}
                fill="#1e293b" // Lighter color for better visibility
                stroke="#334155" // Brighter stroke for better contrast
                strokeWidth={0.8} // Slightly thicker stroke
                style={{
                  default: { outline: "none" },
                  hover: { outline: "none", fill: "#334155" },
                  pressed: { outline: "none" },
                }}
              />
            ))
          }
        </Geographies>

{blessings.map((blessing) => (
          <Marker
            key={blessing.id}
            coordinates={[blessing.longitude, blessing.latitude]}
            onClick={() => handleMarkerClick(blessing)}
          >
            <circle
              r={5} // Slightly larger
              fill={getMarkerColor(blessing.category)}
              stroke="#ffffff"
              strokeWidth={1.5} // Thicker stroke
              className="blessing-marker cursor-pointer"
            />
            <circle
              r={12}
              fill={`${getMarkerColor(blessing.category)}33`} // 20% opacity
              stroke={`${getMarkerColor(blessing.category)}4D`} // 30% opacity
              strokeWidth={2}
              className="blessing-pulse cursor-pointer"
            />
          </Marker>
        ))}

{newBlessing && (
          <Marker coordinates={[newBlessing.longitude, newBlessing.latitude]}>
            <circle
              r={8}
              fill={getMarkerColor(newBlessing.category)}
              stroke="#ffffff"
              strokeWidth={2}
              className="new-blessing-marker animate-ping"
            />
            <circle
              r={30}
              fill={`${getMarkerColor(newBlessing.category)}4D`} // 30% opacity
              stroke={`${getMarkerColor(newBlessing.category)}80`} // 50% opacity
              strokeWidth={3}
              className="new-blessing-pulse animate-pulse"
            />
          </Marker>
        )}
      </ComposableMap>

{selectedBlessing && (
        <BlessingDetail
          blessing={selectedBlessing}
          onClose={() => setSelectedBlessing(null)}
          onLikeUpdate={(updatedBlessing) => {
            setBlessings((prev) => prev.map((b) => (b.id === updatedBlessing.id ? updatedBlessing : b)))
          }}
        />
      )}
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true"
import BlessingMap from "@/components/blessing-map"
import BlessingForm from "@/components/blessing-form"

export default function Home() {
  return (
    <main className="min-h-screen flex flex-col bg-[#030314]">
      <header className="py-6 px-4 text-center bg-gradient-to-r from-purple-600 via-pink-500 to-amber-500 text-white">
        <h1 className="text-3xl md:text-4xl font-bold">Global Blessing Map</h1>
        <p className="mt-2 text-lg">Share your blessing and light up the world</p>
      </header>

{/* Change the layout to use grid for better responsiveness */}
      <div className="flex-1 grid grid-rows-[minmax(300px,1fr)_auto] md:grid-rows-1 md:grid-cols-[1fr_auto]">
        {/* Map container with relative positioning and minimum height */}
        <div className="relative w-full min-h-[300px] md:min-h-[calc(100vh-120px)]">
          <BlessingMap />
        </div>

{/* Form container with scrollable content if needed */}
        <div className="w-full md:w-96 p-6 bg-black/80 max-h-[70vh] md:max-h-[calc(100vh-120px)] overflow-y-auto">
          <BlessingForm />
        </div>
      </div>
    </main>
  )
}

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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 24 94% 53%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 24 94% 53%;
    --radius: 0.5rem;
  }

.dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 24 94% 53%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 24 94% 53%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

@layer components {
  .blessing-marker {
    filter: drop-shadow(0 0 10px rgba(249, 115, 22, 0.9));
    transition: r 0.2s ease;
  }

.blessing-pulse {
    animation: pulse 3s infinite;
  }

@keyframes pulse {
    0% {
      opacity: 0.8;
      r: 8;
    }
    50% {
      opacity: 0.4;
      r: 12;
    }
    100% {
      opacity: 0.8;
      r: 8;
    }
  }

.new-blessing-marker {
    filter: drop-shadow(0 0 15px rgba(249, 115, 22, 1));
  }

.new-blessing-pulse {
    animation: newPulse 2s ease-out;
  }

@keyframes newPulse {
    0% {
      opacity: 1;
      r: 8;
      stroke-width: 4;
    }
    100% {
      opacity: 0;
      r: 60;
      stroke-width: 1;
    }
  }

.floating-heart {
    position: absolute;
    font-size: 24px;
    animation: float-up 2s ease-out forwards;
    pointer-events: none;
  }

@keyframes float-up {
    0% {
      transform: translateY(0) scale(0.5);
      opacity: 0;
    }
    50% {
      opacity: 1;
      transform: translateY(-40px) scale(1.2);
    }
    100% {
      transform: translateY(-80px) scale(0.8);
      opacity: 0;
    }
  }

/* Add styles for select components */
  [data-radix-select-item] {
    @apply text-white bg-gray-900 hover:bg-gray-800 focus:bg-gray-800;
  }

[data-radix-select-item][data-highlighted] {
    @apply bg-gray-800 text-white;
  }

[data-radix-select-content] {
    @apply bg-gray-900 border-gray-700 text-white;
  }

/* Enhanced map styling for better visibility */
  .rsm-geography {
    transition: fill 0.2s ease;
  }

.blessing-marker:hover {
    r: 6;
  }

/* Ensure the map container is visible */
  .rsm-svg {
    background-color: #030314;
    outline: none;
  }

/* Improve contrast for map elements */
  .rsm-geographies {
    stroke-linejoin: round;
  }
}
</article></body></html>