[V0_FILE]plaintext:file=".gitignore" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts [V0_FILE]markdown:file="README.md" # rainbow peace village *Automatically synced with your [v0.app](https://v0.app) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/enesdiscovers-gmailcoms-projects/v0-rainbow-peace-village-m7quoio1grc) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.app-black?style=for-the-badge)](https://v0.app/chat/projects/M7qUOIo1GrC) ## Overview This repository will stay in sync with your deployed chats on [v0.app](https://v0.app). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.app](https://v0.app). ## Deployment Your project is live at: **[https://vercel.com/enesdiscovers-gmailcoms-projects/v0-rainbow-peace-village-m7quoio1grc](https://vercel.com/enesdiscovers-gmailcoms-projects/v0-rainbow-peace-village-m7quoio1grc)** ## Build your app Continue building your app on: **[https://v0.app/chat/projects/M7qUOIo1GrC](https://v0.app/chat/projects/M7qUOIo1GrC)** ## How It Works 1. Create and modify your project using [v0.app](https://v0.app) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]typescriptreact:file="app/about/page.tsx" export default function About() { return (

About Rainbow Peace Village

Our Manifesto

Peace Village is born from the magic, love, and connection experienced at Rainbow Gatherings. We envision a permanent, self-sustaining community where we can live in harmony with nature and one another, carrying the Rainbow spirit throughout the year.

Our Core Principles:

Self-Sustainability: Powered by renewable energy and sustainable practices, we aim to live in tune with the land.
Collective Ownership: Land belongs to everyone. We practice collective care for the earth and each other.
Transparent Resource Management: Community resources are managed with complete transparency, possibly utilizing Bitcoin & blockchain technology for total transparency, community ownership and accountability.
Community-Owned Enterprises: Businesses run by the community contribute to our sustainability and growth to generate income to expand our free land and welcome more family.
Shared Responsibilities: Everyone contributes their unique skills and passions to the community.
Holistic Education: We raise our children as a community, fostering love, compassion, and respect for nature.

Inspired by works like B.F. Skinner's "Walden Two" and successful eco-communities around the world, we believe in the power of intentional living to create positive change. Our village will be a living experiment in sustainable, compassionate, and joyful coexistence.

We recognize that this vision requires patience, love, and collective effort. It's a long-term project, but one that we believe is vital for creating a more harmonious way of life on our planet.

Join us in manifesting this dream. Together, we can create a place where the Rainbow spirit thrives every day, where we work in unity, raise families, live sustainably, and welcome all who share this vision of a brighter, more connected future.

) } [V0_FILE]typescriptreact:file="app/admin/health/page.tsx" "use client" import { useEffect, useMemo, useState } from "react" import { getSupabaseBrowserClient } from "@/lib/supabase" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" type CheckResult = { ok: boolean; message: string; details?: any } export default function AdminHealthPage() { // Create a client only in the browser, lazily const supabase = useMemo(() => { try { return getSupabaseBrowserClient() } catch { return null } }, []) const [envCheck, setEnvCheck] = useState(null) const [dbCheck, setDbCheck] = useState(null) const [storageRead, setStorageRead] = useState(null) const [pending, setPending] = useState(false) useEffect(() => { // Run an automatic env check on mount const url = process.env.NEXT_PUBLIC_SUPABASE_URL const key = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY const host = url ? new URL(url).host : "(missing)" setEnvCheck({ ok: Boolean(url && key), message: `NEXT_PUBLIC_SUPABASE_URL: ${host}; ANON KEY present: ${Boolean(key)}`, }) }, []) const runDbCheck = async () => { setPending(true) try { const res = await fetch("/api/health", { cache: "no-store" }) const json = await res.json() setDbCheck({ ok: json?.ok, message: json?.ok ? "Database reachable" : "Database not reachable", details: json, }) } catch (e: any) { setDbCheck({ ok: false, message: e?.message || "Health API failed" }) } finally { setPending(false) } } const runStorageReadCheck = async () => { if (!supabase) { setStorageRead({ ok: false, message: "Supabase client not initialized (envs missing?)" }) return } const { data } = supabase.storage.from("media").getPublicUrl("health/does-not-exist.txt") try { const head = await fetch(data.publicUrl, { method: "HEAD" }) setStorageRead({ ok: head.status === 200 || head.status === 404, message: `Public URL responded with status ${head.status}`, }) } catch (e: any) { setStorageRead({ ok: false, message: "Public URL unreachable (bucket missing/policies/CORS)", details: e?.message }) } } return (

Admin Health

Environment

{envCheck?.message || "Checking envs..."}

Database {dbCheck && (

{dbCheck.message}

{dbCheck.details && (

{JSON.stringify(dbCheck.details, null, 2)}

)}

)} Storage {storageRead && (

{storageRead.message}

)}

) } [V0_FILE]typescript:file="app/api/btcpay/create-invoice/route.ts" import { NextResponse } from "next/server" export async function POST(req: Request) { try { const body = await req.json() const { amount, currency = "USD", metadata, redirectUrl } = body || {} const host = process.env.BTCPAY_HOST const storeId = process.env.BTCPAY_STORE_ID const apiKey = process.env.BTCPAY_API_KEY if (!host || !storeId || !apiKey) { return NextResponse.json( { error: "BTCPay is not configured. Set BTCPAY_HOST, BTCPAY_STORE_ID, BTCPAY_API_KEY." }, { status: 400 }, ) } if (!amount || Number(amount) <= 0) { return NextResponse.json({ error: "Invalid amount" }, { status: 400 }) } const url = `${host.replace(/\/+$/, "")}/api/v1/stores/${storeId}/invoices` const res = await fetch(url, { method: "POST", headers: { Authorization: `token ${apiKey}`, "Content-Type": "application/json", Accept: "application/json", }, body: JSON.stringify({ amount: Number(amount), currency, metadata: metadata || {}, checkout: { // Let BTCPay choose available payment methods (BTC on-chain and LN if enabled on the store) speedPolicy: "HighSpeed", redirectURL: redirectUrl, }, }), }) const json = await res.json() if (!res.ok) { return NextResponse.json( { error: json?.message || json?.error || "BTCPay invoice creation failed" }, { status: 500 }, ) } // BTCPay returns checkoutLink (and id, status, etc.) return NextResponse.json( { id: json.id, status: json.status, checkoutLink: json.checkoutLink || json.checkoutLink || json.checkoutLink }, { status: 200 }, ) } catch (e: any) { return NextResponse.json({ error: e?.message || "Unexpected error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/health/route.ts" import { NextResponse } from "next/server" import { createClient } from "@supabase/supabase-js" export async function GET() { const url = process.env.NEXT_PUBLIC_SUPABASE_URL const key = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY const envs = { url: Boolean(url), key: Boolean(key), } if (!url || !key) { return NextResponse.json({ ok: false, envs, db: { ok: false, error: "Missing envs" } }, { status: 200 }) } const supabase = createClient(url, key) // Lightweight DB reachability: head count on profiles (works even if empty) const { count, error } = await supabase.from("profiles").select("id", { count: "exact", head: true }) const db = { ok: !error, error: error?.message || null, count: typeof count === "number" ? count : null, } return NextResponse.json({ ok: Boolean(envs.url && envs.key && !error), envs, db }, { status: 200 }) } [V0_FILE]typescriptreact:file="app/auth/callback/loading.tsx" export default function Loading() { return (

Completing sign-in...

) } [V0_FILE]typescriptreact:file="app/auth/callback/page.tsx" "use client" import { useEffect, useState } from "react" import { useRouter, useSearchParams } from "next/navigation" import { useSupabase } from "@/components/supabase-provider" export default function AuthCallbackPage() { const { supabase } = useSupabase() const router = useRouter() const search = useSearchParams() const [status, setStatus] = useState("Completing sign-in...") useEffect(() => { const run = async () => { try { // Handle both PKCE "code" and hash-based access_token flows const code = search.get("code") if (code) { const { error } = await supabase.auth.exchangeCodeForSession(code) if (error) throw error setStatus("Signed in! Redirecting...") router.replace("/profile") return } // If magic-link style hash is present, let SDK parse it: if (window.location.hash && window.location.hash.includes("access_token")) { const { error } = await supabase.auth.getSessionFromUrl({ storeSession: true }) if (error) throw error setStatus("Signed in! Redirecting...") router.replace("/profile") return } // If neither code nor hash, just go home setStatus("No auth params found. Redirecting...") router.replace("/") } catch (e: any) { setStatus(e?.message || "Authentication failed. The link may be invalid or expired.") } } run() // eslint-disable-next-line react-hooks/exhaustive-deps }, []) return (

{status}

) } [V0_FILE]typescriptreact:file="app/auth/signin/page.tsx" "use client" import type React from "react" import { useState } from "react" import { useRouter } from "next/navigation" import { useSupabase } from "@/components/supabase-provider" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" export default function SignIn() { const [email, setEmail] = useState("") const [password, setPassword] = useState("") const router = useRouter() const { supabase } = useSupabase() const handleSignIn = async (e: React.FormEvent) => { e.preventDefault() const { error } = await supabase.auth.signInWithPassword({ email, password }) if (error) { alert(error.message) } else { router.push("/") } } return (

) } [V0_FILE]typescriptreact:file="app/auth/signup/page.tsx" "use client" import type React from "react" import { useState } from "react" import { useRouter } from "next/navigation" import { useSupabase } from "@/components/supabase-provider" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { countries } from "@/lib/countries" export default function SignUp() { const [formData, setFormData] = useState({ name: "", email: "", password: "", phone: "", interests: "", location: "", suggestions: "", captcha: "", }) const [captchaQuestion] = useState("What is 7 + 8?") const [captchaAnswer] = useState("15") const router = useRouter() const { supabase } = useSupabase() const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (formData.captcha !== captchaAnswer) { alert("Incorrect answer to security question") return } try { const redirectTo = (typeof window !== "undefined" ? window.location.origin : "") + "/auth/callback" const { error } = await supabase.auth.signUp({ email: formData.email, password: formData.password, options: { emailRedirectTo: redirectTo, }, }) if (error) throw error alert("Check your email for the confirmation link!") router.push("/auth/signin") } catch (error: any) { alert(error.message || "Sign up failed") } } return (

Join Rainbow Peace Village

Name setFormData({ ...formData, name: e.target.value })} />

Email setFormData({ ...formData, email: e.target.value })} />

Password setFormData({ ...formData, password: e.target.value })} />

Phone (optional) setFormData({ ...formData, phone: e.target.value })} />

Interests

setFormData({ ...formData, interests: e.target.value })}
              />
            </div>

<div className="space-y-2">
              <label className="text-sm font-medium">Current Location</label>
              <Select
                value={formData.location}
                onValueChange={(value) => setFormData({ ...formData, location: value })}
              >
                <SelectTrigger>
                  <SelectValue placeholder="Select your country" />
                </SelectTrigger>
                <SelectContent>
                  {countries.map((country) => (
                    <SelectItem key={country.code} value={country.code}>
                      {country.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

<div className="space-y-2">
              <label className="text-sm font-medium">Suggestions</label>
              <Textarea
                placeholder="Share any ideas, locations, or suggestions for our vision"
                value={formData.suggestions}
                onChange={(e) => setFormData({ ...formData, suggestions: e.target.value })}
              />
            </div>

<div className="space-y-2">
              <label className="text-sm font-medium">{captchaQuestion}</label>
              <Input
                type="text"
                required
                value={formData.captcha}
                onChange={(e) => setFormData({ ...formData, captcha: e.target.value })}
              />
            </div>

<Button type="submit" className="w-full bg-green-600 hover:bg-green-700">
              Join Us
            </Button>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/blog/[id]/page.tsx"
import { notFound } from "next/navigation"

const blogPosts = [
  { id: 1, title: "The Birth of Rainbow Peace Village", date: "2023-05-01", content: "..." },
  { id: 2, title: "Sustainable Energy Solutions for Our Village", date: "2023-05-15", content: "..." },
  { id: 3, title: "Community Governance: Our Approach", date: "2023-06-01", content: "..." },
]

export default function BlogPost({ params }: { params: { id: string } }) {
  const post = blogPosts.find((p) => p.id === Number.parseInt(params.id))

if (!post) {
    notFound()
  }

return (
    <article className="space-y-4">
      <h1 className="text-4xl font-bold mb-4">{post.title}</h1>
      <p className="text-gray-600">{post.date}</p>
      <div className="prose max-w-none">
        <p>{post.content}</p>
      </div>
    </article>
  )
}
[V0_FILE]typescriptreact:file="app/blog/page.tsx"
import Link from "next/link"

const blogPosts = [
  { id: 1, title: "The Birth of Rainbow Peace Village", date: "2023-05-01" },
  { id: 2, title: "Sustainable Energy Solutions for Our Village", date: "2023-05-15" },
  { id: 3, title: "Community Governance: Our Approach", date: "2023-06-01" },
]

export default function Blog() {
  return (
    <div className="space-y-8">
      <h1 className="text-4xl font-bold mb-4">Blog</h1>

<section>
        {blogPosts.map((post) => (
          <article key={post.id} className="mb-8">
            <h2 className="text-2xl font-bold mb-2">
              <Link href={`/blog/${post.id}`} className="hover:underline">
                {post.title}
              </Link>
            </h2>
            <p className="text-gray-600">{post.date}</p>
          </article>
        ))}
      </section>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/Footer.tsx"
export default function Footer() {
  return (
    <footer className="bg-green-600 text-white mt-8">
      <div className="container mx-auto max-w-screen-lg px-4 lg:px-8 py-4 text-center">
        <p>© {new Date().getFullYear()} Rainbow Peace Village. All rights reserved.</p>
      </div>
    </footer>
  )
}
[V0_FILE]typescriptreact:file="app/components/Header.tsx"
"use client"

import Link from "next/link"
import { useState } from "react"
import { Menu, X } from "lucide-react"

export default function Header() {
  const [isMenuOpen, setIsMenuOpen] = useState(false)

const toggleMenu = () => setIsMenuOpen(!isMenuOpen)

const navLinks = [
    { href: "/", label: "Home" },
    { href: "/about", label: "About" },
    { href: "/updates", label: "Updates" },
    { href: "/contribute", label: "Contribute" },
    { href: "/blog", label: "Blog" },
    { href: "/join", label: "Join Us" },
  ]

return (
    <header className="bg-green-600 text-white">
      <nav className="container mx-auto px-5 py-5">
        <div className="flex justify-between items-center">
          <Link href="/" className="text-2xl font-bold">
            Rainbow Peace Village
          </Link>

<ul className="hidden md:flex space-x-5">
            {navLinks.map((link) => (
              <li key={link.href}>
                <Link href={link.href} className="hover:text-green-200 transition-colors">
                  {link.label}
                </Link>
              </li>
            ))}
          </ul>

<button
            onClick={toggleMenu}
            className="md:hidden p-2 hover:bg-green-700 rounded-md transition-colors"
            aria-label="Toggle menu"
          >
            {isMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
          </button>
        </div>

{isMenuOpen && (
          <div className="md:hidden mt-4 pb-4 border-t border-green-500">
            <ul className="space-y-2 pt-4">
              {navLinks.map((link) => (
                <li key={link.href}>
                  <Link
                    href={link.href}
                    className="block py-2 px-4 hover:bg-green-700 rounded-md transition-colors"
                    onClick={() => setIsMenuOpen(false)}
                  >
                    {link.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>
        )}
      </nav>
    </header>
  )
}
[V0_FILE]typescriptreact:file="app/contribute/page.tsx"
"use client"

import type React from "react"

import { useState } from "react"
import { useSupabase } from "@/components/supabase-provider"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Label } from "@/components/ui/label"
import { MapPin, Heart, Lightbulb, Home, Bitcoin } from "lucide-react"
import DonationWidget from "@/components/donation-widget"
import { MediaUpload } from "@/components/MediaUpload"
import { toast } from "@/components/ui/use-toast"

async function geocodeAddress(address: string): Promise<{ lat: number; lng: number } | null> {
  try {
    const url = `https://nominatim.openstreetmap.org/search?format=json&limit=1&q=${encodeURIComponent(address)}`
    const res = await fetch(url, { headers: { "Accept-Language": "en" } })
    const json = await res.json()
    if (Array.isArray(json) && json.length > 0) {
      return { lat: Number.parseFloat(json[0].lat), lng: Number.parseFloat(json[0].lon) }
    }
  } catch {}
  return null
}

export default function Contribute() {
  const [submitted, setSubmitted] = useState(false)
  const [ideaImage, setIdeaImage] = useState<{ publicUrl: string; filePath: string }>({ publicUrl: "", filePath: "" })
  const [locationImage, setLocationImage] = useState<{
    publicUrl: string
    filePath: string
  }>({
    publicUrl: "",
    filePath: "",
  })
  const { supabase, session } = useSupabase()
  const [guestName, setGuestName] = useState("")

const handleSubmit = async (e: React.FormEvent, type: "idea" | "resource" | "contact" | "location") => {
    e.preventDefault()

const form = e.target as HTMLFormElement
    const formData = new FormData(form)

try {
      // Ensure Supabase client is ready
      if (!supabase) {
        toast({
          title: "Supabase not ready",
          description: "Please wait a moment and try again.",
          variant: "destructive",
        })
        return
      }

const data: any = {}
      formData.forEach((value, key) => {
        data[key] = value
      })

const user_id = session?.user.id || null
      const guest_name = session ? null : guestName

if (type === "idea") {
        const tags =
          typeof data.tags === "string"
            ? data.tags
                .split(",")
                .map((t: string) => t.trim())
                .filter(Boolean)
            : []
        const { error } = await supabase.from("ideas").insert({
          title: data.title,
          description: data.description,
          image_url: ideaImage.publicUrl || null,
          image_path: ideaImage.filePath || null,
          tags,
          user_id,
          guest_name,
        })
        if (error) throw error
      } else if (type === "resource") {
        const tags =
          typeof data.tags === "string"
            ? data.tags
                .split(",")
                .map((t: string) => t.trim())
                .filter(Boolean)
            : []
        const { error } = await supabase.from("resources").insert({
          title: data.title || data.name,
          category: data.category || data.type,
          description: data.description,
          tags,
          location: data.location || null,
          link: data.link || null,
          user_id,
          guest_name,
        })
        if (error) throw error
      } else if (type === "contact") {
        // Connect entries are stored in contacts (and intentionally not shown on Resources)
        const { error } = await supabase.from("contacts").insert({
          name: data.name,
          role: data.role,
          email: data.email,
          phone: data.phone || null,
          message: data.message,
          user_id,
          guest_name,
        })
        if (error) throw error
      } else if (type === "location") {
        const tags =
          typeof data.tags === "string"
            ? data.tags
                .split(",")
                .map((t: string) => t.trim())
                .filter(Boolean)
            : []
        // If you previously added geocoding, you can leave it; otherwise, insert lat/lng as null
        const { error } = await supabase.from("locations").insert({
          name: data.name,
          address: data.address,
          description: data.description,
          image_url: locationImage.publicUrl || null,
          image_path: locationImage.filePath || null,
          tags,
          user_id,
          guest_name,
        })
        if (error) throw error
      } else {
        throw new Error("Unknown submission type")
      }

setSubmitted(true)
      toast({ title: "Contribution submitted", description: "Thank you for your contribution!" })
      setTimeout(() => setSubmitted(false), 3000)
      form.reset()
      setIdeaImage({ publicUrl: "", filePath: "" })
      setLocationImage({ publicUrl: "", filePath: "" })
      setGuestName("")
    } catch (error: any) {
      console.error("Error submitting contribution:", error)
      toast({
        title: "Error submitting contribution",
        description: error?.message || "There was an error submitting your contribution. Please try again.",
        variant: "destructive",
      })
    }
  }

return (
    <div className="max-w-4xl mx-auto py-8 px-2 sm:px-4">
      <h1 className="text-3xl font-bold mb-8">Contribute to Our Vision</h1>
      <div className="space-y-6">
        <Tabs defaultValue="idea" className="space-y-4">
          <TabsList className="flex w-full overflow-x-auto">
            <TabsTrigger
              value="idea"
              className="flex-1 flex items-center justify-center gap-1 px-2 py-2 text-[2.5vw] sm:text-sm"
            >
              <Lightbulb className="h-3 w-3 sm:h-4 sm:w-4" />
              <span>Share Idea</span>
            </TabsTrigger>
            <TabsTrigger
              value="resource"
              className="flex-1 flex items-center justify-center gap-1 px-2 py-2 text-[2.5vw] sm:text-sm"
            >
              <Home className="h-3 w-3 sm:h-4 sm:w-4" />
              <span>Add Resource</span>
            </TabsTrigger>
            <TabsTrigger
              value="contact"
              className="flex-1 flex items-center justify-center gap-1 px-2 py-2 text-[2.5vw] sm:text-sm"
            >
              <Heart className="h-3 w-3 sm:h-4 sm:w-4" />
              <span>Connect</span>
            </TabsTrigger>
            <TabsTrigger
              value="location"
              className="flex-1 flex items-center justify-center gap-1 px-2 py-2 text-[2.5vw] sm:text-sm"
            >
              <MapPin className="h-3 w-3 sm:h-4 sm:w-4" />
              <span>Suggest Location</span>
            </TabsTrigger>
            <TabsTrigger
              value="donate"
              className="flex-1 flex items-center justify-center gap-1 px-2 py-2 text-[2.5vw] sm:text-sm"
            >
              <Bitcoin className="h-3 w-3 sm:h-4 sm:w-4" />
              <span>Donate</span>
            </TabsTrigger>
          </TabsList>

<TabsContent value="idea">
            <Card>
              <CardHeader>
                <CardTitle>Share Your Vision</CardTitle>
              </CardHeader>
              <CardContent>
                <form onSubmit={(e) => handleSubmit(e, "idea")} className="space-y-4">
                  {!session && (
                    <div className="space-y-2">
                      <Label htmlFor="guest-name-idea">Your Name (for guests)</Label>
                      <Input
                        id="guest-name-idea"
                        name="guest_name"
                        value={guestName}
                        onChange={(e) => setGuestName(e.target.value)}
                        required
                      />
                    </div>
                  )}
                  <div className="space-y-2">
                    <Label htmlFor="idea-title">Title of Your Idea</Label>
                    <Input id="idea-title" name="title" required />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="idea-description">Description</Label>
                    <Textarea id="idea-description" name="description" className="min-h-[200px]" required />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="idea-tags">Tags (comma-separated)</Label>
                    <Input id="idea-tags" name="tags" placeholder="e.g., solar, permaculture" />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="idea-image">Add Images (optional)</Label>
                    <MediaUpload onUpload={(data) => setIdeaImage(data)} />
                  </div>
                  <Button type="submit">{submitted ? "Thank you!" : "Submit Idea"}</Button>
                </form>
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="resource">
            <Card>
              <CardHeader>
                <CardTitle>Share a Resource</CardTitle>
              </CardHeader>
              <CardContent>
                <form onSubmit={(e) => handleSubmit(e, "resource")} className="space-y-4">
                  {!session && (
                    <div className="space-y-2">
                      <Label htmlFor="guest-name-resource">Your Name (for guests)</Label>
                      <Input
                        id="guest-name-resource"
                        name="guest_name"
                        value={guestName}
                        onChange={(e) => setGuestName(e.target.value)}
                        required
                      />
                    </div>
                  )}
                  <div className="space-y-2">
                    <Label htmlFor="resource-title">Resource Name</Label>
                    <Input id="resource-title" name="title" required />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="resource-category">Category</Label>
                    <Input id="resource-category" name="category" placeholder="e.g., Ecovillage, Tool" required />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="resource-tags">Tags (comma-separated)</Label>
                    <Input id="resource-tags" name="tags" placeholder="e.g., sustainable, solar" />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="resource-description">Description</Label>
                    <Textarea id="resource-description" name="description" className="min-h-[100px]" required />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="resource-location">Location (optional)</Label>
                    <Input id="resource-location" name="location" placeholder="City / Region / Country" />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="resource-link">Link (optional)</Label>
                    <Input id="resource-link" name="link" type="url" placeholder="https://example.org" />
                  </div>
                  <Button type="submit">{submitted ? "Thank you!" : "Submit Resource"}</Button>
                </form>
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="contact">
            <Card>
              <CardHeader>
                <CardTitle>Connect With Us</CardTitle>
              </CardHeader>
              <CardContent>
                <form onSubmit={(e) => handleSubmit(e, "contact")} className="space-y-4">
                  {!session && (
                    <div className="space-y-2">
                      <Label htmlFor="guest-name-contact">Your Name (for guests)</Label>
                      <Input
                        id="guest-name-contact"
                        name="guest_name"
                        value={guestName}
                        onChange={(e) => setGuestName(e.target.value)}
                        required
                      />
                    </div>
                  )}
                  <div className="grid grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="contact-name">Name</Label>
                      <Input id="contact-name" name="name" required />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="contact-role">Role/Interest</Label>
                      <Input id="contact-role" name="role" required />
                    </div>
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="contact-email">Email</Label>
                      <Input id="contact-email" name="email" type="email" required />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="contact-phone">Phone (optional)</Label>
                      <Input id="contact-phone" name="phone" type="tel" />
                    </div>
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="contact-message">Message</Label>
                    <Textarea id="contact-message" name="message" className="min-h-[100px]" required />
                  </div>
                  <Button type="submit">{submitted ? "Thank you!" : "Submit Contact"}</Button>
                </form>
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="location">
            <Card>
              <CardHeader>
                <CardTitle>Suggest a Location</CardTitle>
              </CardHeader>
              <CardContent>
                <form onSubmit={(e) => handleSubmit(e, "location")} className="space-y-4">
                  {!session && (
                    <div className="space-y-2">
                      <Label htmlFor="guest-name-location">Your Name (for guests)</Label>
                      <Input
                        id="guest-name-location"
                        name="guest_name"
                        value={guestName}
                        onChange={(e) => setGuestName(e.target.value)}
                        required
                      />
                    </div>
                  )}
                  <div className="space-y-2">
                    <Label htmlFor="location-name">Location Name</Label>
                    <Input id="location-name" name="name" required />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="location-address">Address/Region</Label>
                    <Input id="location-address" name="address" placeholder="Address or general region" required />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="location-description">Why this location?</Label>
                    <Textarea id="location-description" name="description" className="min-h-[100px]" required />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="location-tags">Tags (comma-separated)</Label>
                    <Input id="location-tags" name="tags" placeholder="e.g., water, sun, soil, remote" />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="location-image">Add Images (optional)</Label>
                    <MediaUpload onUpload={(data) => setLocationImage(data)} />
                  </div>
                  <Button type="submit">{submitted ? "Thank you!" : "Submit Location"}</Button>
                </form>
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="donate">
            <DonationWidget
              btcAddress="bc1qk4zc5pjhqemp03yz93n4kf5vuf2u73k2wchf9g9dyw0eysumg76sqdg2e8"
              usdt={{
                TRC20: "THUHqUH1SKLJ6DLMWRynjVqxtjgKj2khWi",
                ARBITRUM: "0x4191d0d1dc7d1fbfe88693579e35809bc7199656",
                SOL: "8JekfK7GoySAGbhjyKh9EznfZqgwo3EqwYQZvkbF1i5k",
              }}
              usdc={{
                SOL: "ehncfnqCTi6jXFTnuHZpfrfA8JYS5tGSJZXRTcz4rBS",
                ARBITRUM: "0x4191d0d1dc7d1fbfe88693579e35809bc7199656",
                POLYGON: "0x4191d0d1dc7d1fbfe88693579e35809bc7199656",
                AVALANCHE: "0x4191d0d1dc7d1fbfe88693579e35809bc7199656",
              }}
              qrOverrides={{
                BTC: "/images/IMG_2628.jpg",
                "USDT:TRC20": "/images/IMG_2629.jpg",
                "USDT:ARBITRUM": "/images/IMG_2630.jpg",
                "USDT:SOL": "/images/IMG_2631.jpg",
                "USDC:SOL": "/images/IMG_2632.jpg",
                "USDC:ARBITRUM": "/images/IMG_2633.jpg",
                "USDC:POLYGON": "/images/IMG_2635.jpg",
                "USDC:AVALANCHE": "/images/IMG_2634.jpg",
              }}
            />
          </TabsContent>
        </Tabs>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/events/page.tsx"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"

export default function Events() {
  return (
    <div className="container py-12 md:py-24 lg:py-32">
      <h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl mb-8">Upcoming Events</h1>
      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
        <Card>
          <CardHeader>
            <CardTitle>Vision Brainstorming Session</CardTitle>
            <CardDescription>Every Wednesday at 7 PM UTC</CardDescription>
          </CardHeader>
          <CardContent>
            <p className="mb-4">
              Join our weekly online gathering to share ideas and shape the future of our community.
            </p>
            <Button>Join Session</Button>
          </CardContent>
        </Card>
        <Card>
          <CardHeader>
            <CardTitle>Village Design Hackathon</CardTitle>
            <CardDescription>Monthly - Last Saturday</CardDescription>
          </CardHeader>
          <CardContent>
            <p className="mb-4">Collaborate with architects, designers, and dreamers to design our future home.</p>
            <Button>Register</Button>
          </CardContent>
        </Card>
        <Card>
          <CardHeader>
            <CardTitle>Sustainable Technology Workshop</CardTitle>
            <CardDescription>Bi-weekly - Sundays at 3 PM UTC</CardDescription>
          </CardHeader>
          <CardContent>
            <p className="mb-4">Learn about solar power, permaculture, and other sustainable technologies.</p>
            <Button>Learn More</Button>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/forum/page.tsx"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useSupabase } from "@/components/supabase-provider"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Textarea } from "@/components/ui/textarea"
import { Input } from "@/components/ui/input"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { MessageCircle, Heart, Share2, MoreVertical, Trash2 } from 'lucide-react'
import { MediaUpload } from "@/components/MediaUpload"
import { toast } from "@/components/ui/use-toast"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog"

interface Like { id: string; user_id: string }
interface Comment {
  id: string
  content: string
  user_id: string | null
  guest_name: string | null
  created_at: string
  profiles?: { username?: string | null; avatar_url?: string | null } | null
}
interface ForumPost {
  id: string
  content: string
  image_url?: string | null
  image_path?: string | null
  user_id?: string | null
  guest_name?: string | null
  created_at: string
  type?: string | null
  profiles?: { username?: string | null; avatar_url?: string | null } | null
  likes?: Like[] | null
  comments?: Comment[] | null
}

export default function Forum() {
  const [posts, setPosts] = useState<ForumPost[]>([])
  const [newPost, setNewPost] = useState("")
  const [newPostImage, setNewPostImage] = useState<{ publicUrl: string; filePath: string }>({
    publicUrl: "",
    filePath: "",
  })
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
  const [itemToDelete, setItemToDelete] = useState<{ id: string; type: "post" | "comment" } | null>(null)
  const { supabase, session } = useSupabase()
  const [guestName, setGuestName] = useState("")

useEffect(() => {
    fetchPosts()
    const channel = supabase
      .channel("forum_changes")
      .on("postgres_changes", { event: "*", schema: "public", table: "forum_posts" }, () => {
        // Re-fetch to ensure likes/comments/profiles are included
        fetchPosts()
      })
      .subscribe()

return () => {
      supabase.removeChannel(channel)
    }
  }, [supabase])

const fetchPosts = async () => {
    const { data, error } = await supabase
      .from("forum_posts")
      .select(`
        *,
        profiles:profiles!forum_posts_user_id_fkey (username, avatar_url),
        comments:forum_comments (
          id, 
          content, 
          user_id, 
          guest_name,
          created_at,
          profiles:profiles!forum_comments_user_id_fkey (username, avatar_url)
        ),
        likes:forum_likes (id, user_id)
      `)
      .eq("type", "forum")
      .order("created_at", { ascending: false })

if (error) {
      console.error("Error fetching posts:", error)
      toast({
        title: "Error fetching posts",
        description: "There was an error fetching the forum posts. Please try again.",
        variant: "destructive",
      })
    } else {
      setPosts(data)
    }
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!newPost.trim()) return

try {
      const postData = {
        content: newPost,
        image_url: newPostImage.publicUrl || null,
        image_path: newPostImage.filePath || null,
        user_id: session?.user.id || null,
        guest_name: session ? null : guestName,
        type: "forum",
      }

const { data, error } = await supabase
        .from("forum_posts")
        .insert(postData)
        .select("*, profiles:profiles(*)")
        .single()

if (error) throw error

await fetchPosts()
      setNewPost("")
      setNewPostImage({ publicUrl: "", filePath: "" })
      setGuestName("")

toast({
        title: "Post created",
        description: "Your post has been successfully created.",
      })
    } catch (error: any) {
      console.error("Error creating post:", error)
      toast({
        title: "Error creating post",
        description: error.message || "There was an error creating your post. Please try again.",
        variant: "destructive",
      })
    }
  }

const handleLike = async (postId: string) => {
    if (!session) {
      toast({
        title: "Sign in required",
        description: "Please sign in to like posts.",
        variant: "destructive",
      })
      return
    }

const { error } = await supabase.from("forum_likes").insert({ post_id: postId, user_id: session.user.id })

if (error) {
      if (error.code === "23505") {
        // unique_violation
        await supabase.from("forum_likes").delete().match({ post_id: postId, user_id: session.user.id })
      } else {
        toast({
          title: "Error liking post",
          description: "There was an error liking the post. Please try again.",
          variant: "destructive",
        })
      }
    }
    fetchPosts()
  }

const handleComment = async (postId: string, comment: string, guestNameForComment: string) => {
    if (!comment.trim()) return

const commentData = {
      post_id: postId,
      content: comment,
      user_id: session?.user.id || null,
      guest_name: session ? null : guestNameForComment,
    }

const { error } = await supabase.from("forum_comments").insert(commentData)

if (error) {
      toast({
        title: "Error creating comment",
        description: "There was an error creating your comment. Please try again.",
        variant: "destructive",
      })
    } else {
      fetchPosts()
      toast({
        title: "Comment created",
        description: "Your comment has been successfully added.",
      })
    }
  }

const handleShare = async (post: any) => {
    const shareData = {
      title: "Rainbow Peace Village Forum Post",
      text: post.content,
      url: window.location.href,
    }

try {
      if (navigator.share) {
        await navigator.share(shareData)
      } else {
        await navigator.clipboard.writeText(window.location.href)
        toast({
          title: "Link copied",
          description: "The post link has been copied to your clipboard.",
        })
      }
    } catch (error) {
      console.error("Error sharing:", error)
      toast({
        title: "Error sharing post",
        description: "There was an error sharing the post. Please try again.",
        variant: "destructive",
      })
    }
  }

const handleDelete = async () => {
    if (!itemToDelete) return

try {
      const { error } = await supabase
        .from(itemToDelete.type === "post" ? "forum_posts" : "forum_comments")
        .delete()
        .eq("id", itemToDelete.id)

if (error) throw error

if (itemToDelete.type === "post") {
        setPosts(posts.filter((post) => post.id !== itemToDelete.id))
      } else {
        fetchPosts() // Refresh to update comments
      }
      toast({
        title: `${itemToDelete.type} deleted`,
        description: `The ${itemToDelete.type} has been successfully deleted.`,
      })
    } catch (error) {
      console.error(`Error deleting ${itemToDelete.type}:`, error)
      toast({
        title: `Error deleting ${itemToDelete.type}`,
        description: `There was an error deleting the ${itemToDelete.type}. Please try again.`,
        variant: "destructive",
      })
    }

setDeleteDialogOpen(false)
    setItemToDelete(null)
  }

return (
    <div className="max-w-4xl mx-auto">
      <h1 className="text-3xl font-bold mb-8">Community Forum</h1>

<Card className="mb-8">
        <CardHeader>
          <CardTitle>Share Your Thoughts</CardTitle>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-4">
            {!session && (
              <Input
                placeholder="Your Name (for guests)"
                value={guestName}
                onChange={(e) => setGuestName(e.target.value)}
                required
              />
            )}
            <Textarea
              placeholder="What's on your mind?"
              value={newPost}
              onChange={(e) => setNewPost(e.target.value)}
              className="min-h-[100px]"
              required
            />
            <MediaUpload onUpload={(data) => setNewPostImage(data)} />
            <Button type="submit">Post Update</Button>
          </form>
        </CardContent>
      </Card>

<div className="space-y-4">
        {posts.map((post: any) => {
          const likes = Array.isArray(post.likes) ? post.likes : []
          const comments = Array.isArray(post.comments) ? post.comments : []

return (
            <Card key={post.id}>
              <CardContent className="pt-6">
                <div className="flex items-start space-x-4">
                  <Avatar>
                    <AvatarImage src={post.profiles?.avatar_url || "/placeholder.svg"} />
                    <AvatarFallback>{(post.profiles?.username || post.guest_name || "Guest").slice(0, 1) || "G"}</AvatarFallback>
                  </Avatar>
                  <div className="flex-1">
                    <div className="flex items-center justify-between">
                      <div>
                        <h3 className="font-semibold">{post.profiles?.username || post.guest_name || "Guest"}</h3>
                        <span className="text-sm text-muted-foreground">
                          {new Date(post.created_at).toLocaleString()}
                        </span>
                        {post.type && (
                          <span className="ml-2 inline-flex items-center rounded bg-muted px-2 py-0.5 text-xs uppercase tracking-wide">
                            {post.type}
                          </span>
                        )}
                      </div>
                      {session?.user.id === post.user_id && (
                        <DropdownMenu>
                          <DropdownMenuTrigger asChild>
                            <Button variant="ghost" size="icon">
                              <MoreVertical className="h-4 w-4" />
                            </Button>
                          </DropdownMenuTrigger>
                          <DropdownMenuContent align="end">
                            <DropdownMenuItem
                              className="text-destructive"
                              onClick={() => {
                                setItemToDelete({ id: post.id, type: "post" })
                                setDeleteDialogOpen(true)
                              }}
                            >
                              <Trash2 className="h-4 w-4 mr-2" />
                              Delete Post
                            </DropdownMenuItem>
                          </DropdownMenuContent>
                        </DropdownMenu>
                      )}
                    </div>
                    <p className="mt-2 text-sm">{post.content}</p>
                    {post.image_url && (
                      <img
                        src={post.image_url || "/placeholder.svg"}
                        alt="Post image"
                        className="mt-2 rounded-lg max-h-64 object-cover"
                      />
                    )}
                    <div className="flex items-center space-x-4 mt-4">
                      <Button
                        variant="ghost"
                        size="sm"
                        className="flex items-center space-x-2"
                        onClick={() => handleLike(post.id)}
                      >
                        <Heart
                          className={`h-4 w-4 ${likes.some((like: any) => like.user_id === session?.user.id) ? "fill-current text-red-500" : ""}`}
                        />
                        <span>{likes.length}</span>
                      </Button>
                      <Button variant="ghost" size="sm" className="flex items-center space-x-2">
                        <MessageCircle className="h-4 w-4" />
                        <span>{comments.length}</span>
                      </Button>
                      <Button
                        variant="ghost"
                        size="sm"
                        className="flex items-center space-x-2"
                        onClick={() => handleShare(post)}
                      >
                        <Share2 className="h-4 w-4" />
                        <span>Share</span>
                      </Button>
                    </div>
                    <div className="mt-4 space-y-2">
                      {comments.map((comment: any) => (
                        <div key={comment.id} className="flex items-start space-x-2">
                          <Avatar className="w-6 h-6">
                            <AvatarImage src={comment.profiles?.avatar_url || "/placeholder.svg"} />
                            <AvatarFallback>
                              {(comment.profiles?.username || comment.guest_name || "Guest").slice(0, 1) || "G"}
                            </AvatarFallback>
                          </Avatar>
                          <div className="flex-1">
                            <div className="flex items-center justify-between">
                              <div>
                                <p className="text-sm font-semibold">
                                  {comment.profiles?.username || comment.guest_name || "Guest"}
                                </p>
                                <p className="text-xs text-muted-foreground">
                                  {new Date(comment.created_at).toLocaleString()}
                                </p>
                              </div>
                              {session?.user.id === comment.user_id && (
                                <Button
                                  variant="ghost"
                                  size="icon"
                                  className="h-6 w-6"
                                  onClick={() => {
                                    setItemToDelete({ id: comment.id, type: "comment" })
                                    setDeleteDialogOpen(true)
                                  }}
                                >
                                  <Trash2 className="h-3 w-3" />
                                </Button>
                              )}
                            </div>
                            <p className="text-sm">{comment.content}</p>
                          </div>
                        </div>
                      ))}
                    </div>
                    <form
                      onSubmit={(e) => {
                        e.preventDefault()
                        const form = e.target as HTMLFormElement
                        const comment = form.comment.value
                        const guestNameForComment = form.guestNameForComment ? form.guestNameForComment.value : ""
                        handleComment(post.id, comment, guestNameForComment)
                        form.reset()
                      }}
                      className="mt-4 space-y-2"
                    >
                      {!session && <Input name="guestNameForComment" placeholder="Your Name (for guests)" required />}
                      <Textarea name="comment" placeholder="Add a comment..." className="min-h-[60px]" required />
                      <Button type="submit" className="mt-2">
                        Comment
                      </Button>
                    </form>
                  </div>
                </div>
              </CardContent>
            </Card>
          )
        })}
      </div>

<AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Are you sure?</AlertDialogTitle>
            <AlertDialogDescription>
              This action cannot be undone. This will permanently delete your {itemToDelete?.type}.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction onClick={handleDelete}>Delete</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  )
}
[V0_FILE]css:file="app/globals.css"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

--muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

--popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

--card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

--border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;

--primary: 142.1 76.2% 36.3%;
    --primary-foreground: 355.7 100% 97.3%;

--secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

--accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

--destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

--ring: 215 20.2% 65.1%;

--radius: 0.5rem;
  }

.dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

--muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

--popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

--card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

--border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;

--primary: 142.1 70.6% 45.3%;
    --primary-foreground: 144.9 80.4% 10%;

--secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

--accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

--destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 85.7% 97.3%;

--ring: 217.2 32.6% 17.5%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]typescriptreact:file="app/join/page.tsx"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
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 { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { countries } from "@/lib/countries"

export default function JoinUs() {
  const [name, setName] = useState("")
  const [email, setEmail] = useState("")
  const [interests, setInterests] = useState("")
  const [phone, setPhone] = useState("")
  const [captcha, setCaptcha] = useState({ question: "", answer: 0 })
  const [userCaptcha, setUserCaptcha] = useState("")
  const [submitted, setSubmitted] = useState(false)
  const [location, setLocation] = useState("")
  const [suggestions, setSuggestions] = useState("")

const generateCaptcha = () => {
    const num1 = Math.floor(Math.random() * 10)
    const num2 = Math.floor(Math.random() * 10)
    setCaptcha({ question: `What is ${num1} + ${num2}?`, answer: num1 + num2 })
  }

useEffect(() => {
    generateCaptcha()
  }, [])

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (Number.parseInt(userCaptcha) !== captcha.answer) {
      alert("Incorrect captcha. Please try again.")
      generateCaptcha()
      setUserCaptcha("")
      return
    }
    // Here you would typically send this data to your backend
    console.log({ name, email, phone, interests, location, suggestions })
    setSubmitted(true)
  }

if (submitted) {
    return (
      <div className="container py-8 max-w-md">
        <Card>
          <CardHeader>
            <CardTitle>Thank You for Joining!</CardTitle>
          </CardHeader>
          <CardContent>
            <p>We've received your information and will keep you updated on the Rainbow Peace Village project.</p>
          </CardContent>
        </Card>
      </div>
    )
  }

return (
    <div className="container py-8 max-w-md">
      <Card>
        <CardHeader>
          <CardTitle>Join Rainbow Peace Village</CardTitle>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="name">Name</Label>
              <Input id="name" value={name} onChange={(e) => setName(e.target.value)} required />
            </div>
            <div className="space-y-2">
              <Label htmlFor="email">Email</Label>
              <Input id="email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
            </div>
            <div className="space-y-2">
              <Label htmlFor="phone">Phone (optional)</Label>
              <Input id="phone" type="tel" value={phone} onChange={(e) => setPhone(e.target.value)} />
            </div>
            <div className="space-y-2">
              <Label htmlFor="interests">Interests</Label>
              <Textarea
                id="interests"
                value={interests}
                onChange={(e) => setInterests(e.target.value)}
                placeholder="Tell us about your interests in sustainable living, community building, etc."
                className="min-h-[100px]"
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="location">Current Location</Label>
              <Select value={location} onValueChange={setLocation}>
                <SelectTrigger id="location">
                  <SelectValue placeholder="Select your country" />
                </SelectTrigger>
                <SelectContent>
                  {countries.map((country) => (
                    <SelectItem key={country.code} value={country.code}>
                      {country.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label htmlFor="suggestions">Suggestions</Label>
              <Textarea
                id="suggestions"
                value={suggestions}
                onChange={(e) => setSuggestions(e.target.value)}
                placeholder="Share any ideas, locations, or suggestions for our vision"
                className="min-h-[100px]"
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="captcha">{captcha.question}</Label>
              <Input
                id="captcha"
                type="number"
                value={userCaptcha}
                onChange={(e) => setUserCaptcha(e.target.value)}
                required
              />
            </div>
            <Button type="submit" className="w-full">
              Join Us
            </Button>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx"
import type React from "react"
import { Inter } from "next/font/google"
import { SiteHeader } from "@/components/site-header"
import { SiteFooter } from "@/components/site-footer"
import "./globals.css"
import { SupabaseProvider } from "@/components/supabase-provider"

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

export const metadata = {
  title: "Peace Village",
  description:
    "A self-sustaining backed by solar energy and loving community where harmony with nature meets modern innovation",
    generator: 'v0.app'
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className="h-full">
      <body className={`${inter.className} flex flex-col min-h-screen bg-gray-50`}>
        <SupabaseProvider>
          <div className="flex flex-col min-h-screen">
            <SiteHeader />
            <main className="flex-grow w-full">
              <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-8 max-w-5xl">{children}</div>
            </main>
            <SiteFooter />
          </div>
        </SupabaseProvider>
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="app/manifesto/page.tsx"
export default function Manifesto() {
  return (
    <article className="max-w-4xl mx-auto py-12 md:py-24 lg:py-32">
      <h1 className="text-4xl font-bold tracking-tighter sm:text-5xl md:text-6xl mb-8">
        Manifesto for a Self-Sustaining Community
      </h1>
      <div className="prose prose-lg max-w-none">
        <p className="lead">
          In a world dominated by fiat systems and societal isolation, it is imperative to reclaim our autonomy and
          humanity. Our current reliance on mass-produced food and centralized currencies has led to environmental
          degradation, economic slavery, and disconnection from one another.
        </p>

<h2 className="text-3xl font-bold mt-12 mb-4">Our Vision</h2>
        <p>
          We aim to create a self-sustaining, solar-powered community that thrives on collective effort and shared
          resources. Inspired by eco-communities and B.F. Skinner's "Walden Two", this village will:
        </p>
        <ul>
          <li>
            <strong>Own Land Collectively:</strong> No private ownership; land is for the community.
          </li>
          <li>
            <strong>Ensure Food Independence:</strong> Grow our own food and eliminate reliance on external systems.
          </li>
          <li>
            <strong>Achieve Energy Autonomy:</strong> Solar-powered systems for sustainable living.
          </li>
          <li>
            <strong>Foster Transparency:</strong> Use Bitcoin and smart contracts to prevent corruption and ensure
            transparency in community.
          </li>
          <li>
            <strong>Community Owned Businesses:</strong> Establish and manage community-owned enterprises that generate
            income to expand the land, build solar power infrastructure and sustain the village, ensuring all profits
            benefit the collective.
          </li>
          <li>
            <strong>Support Each Other:</strong> Build permanent relationships, grow families, and live free from
            isolation.
          </li>
        </ul>

<p className="mt-8">
          This is a living document that will grow and evolve with our community. We invite all who share these values
          to join us in building this dream.
        </p>

<h2 className="text-3xl font-bold mt-12 mb-4">Why Community?</h2>
        <p>
          The fiat-driven system isolates us and fosters dependency. Living in a self-sufficient community liberates us
          from this cycle, offering support, purpose, and freedom. Together, we produce food, share resources, and
          reject the slavery of consumerism.
        </p>

<p className="mt-8 font-bold">
          By embracing this vision, we not only sustain ourselves but also create a legacy of freedom, resilience, and
          unity for future generations.
        </p>
      </div>
    </article>
  )
}
[V0_FILE]typescriptreact:file="app/map/map-client.tsx"
"use client"

import { useEffect, useMemo, useState } from "react"
import { useSupabase } from "@/components/supabase-provider"
import { Card, CardContent } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { MapPin } from 'lucide-react'

import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet"
import "leaflet/dist/leaflet.css"
import L from "leaflet"

// Configure default marker icon (Leaflet doesn't bundle assets by default)
const markerIcon = new L.Icon({
  iconUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png",
  iconRetinaUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png",
  shadowUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png",
  iconSize: [25, 41],
  iconAnchor: [12, 41],
  popupAnchor: [1, -34],
  shadowSize: [41, 41],
})

type LocationRow = {
  id: string
  name: string
  address: string
  description: string
  image_url: string | null
  created_at: string
  lat: number | null
  lng: number | null
  profiles: { username: string | null; avatar_url: string | null } | null
  guest_name: string | null
}

async function geocodeAddress(address: string): Promise<{ lat: number; lng: number } | null> {
  try {
    const url = `https://nominatim.openstreetmap.org/search?format=json&limit=1&q=${encodeURIComponent(address)}`
    const res = await fetch(url, { headers: { "Accept-Language": "en" } })
    const json = await res.json()
    if (Array.isArray(json) && json.length > 0) {
      return { lat: parseFloat(json[0].lat), lng: parseFloat(json[0].lon) }
    }
  } catch {
    // ignore errors and fall back to no marker
  }
  return null
}

export default function MapClient() {
  const { supabase } = useSupabase()
  const [locations, setLocations] = useState<LocationRow[]>([])
  const [q, setQ] = useState("")
  const [coordsCache, setCoordsCache] = useState<Record<string, { lat: number; lng: number }>>({})

useEffect(() => {
    fetchLocations()
    const ch = supabase
      .channel("locations_changes")
      .on("postgres_changes", { event: "*", schema: "public", table: "locations" }, fetchLocations)
      .subscribe()
    return () => {
      supabase.removeChannel(ch)
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [supabase])

async function fetchLocations() {
    const { data, error } = await supabase
      .from("locations")
      .select(`
        id, name, address, description, image_url, created_at, lat, lng, guest_name,
        profiles:profiles!locations_user_id_fkey (username, avatar_url)
      `)
      .order("created_at", { ascending: false })

if (!error && data) {
      setLocations(data as LocationRow[])
    }
  }

const filtered = useMemo(() => {
    const s = q.trim().toLowerCase()
    if (!s) return locations
    return locations.filter(
      (l) =>
        l.name.toLowerCase().includes(s) ||
        l.address.toLowerCase().includes(s) ||
        l.description.toLowerCase().includes(s) ||
        (l.profiles?.username || l.guest_name || "guest").toLowerCase().includes(s),
    )
  }, [locations, q])

useEffect(() => {
    const fillMissing = async () => {
      const missing = filtered.filter((l) => l.lat == null || l.lng == null)
      if (missing.length === 0) return
      for (const row of missing) {
        if (coordsCache[row.id]) continue
        const coords = await geocodeAddress(row.address)
        if (coords) {
          setCoordsCache((prev) => ({ ...prev, [row.id]: coords }))
        }
      }
    }
    fillMissing()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [filtered])

const firstWithCoords =
    filtered.find((l) => (l.lat != null && l.lng != null) || coordsCache[l.id]) || null
  const center: [number, number] = firstWithCoords
    ? [
        (firstWithCoords.lat ?? coordsCache[firstWithCoords.id]?.lat)!,
        (firstWithCoords.lng ?? coordsCache[firstWithCoords.id]?.lng)!,
      ]
    : [20, 0]

return (
    <div className="max-w-6xl mx-auto py-8 space-y-4">
      <div className="flex items-center gap-2">
        <MapPin className="h-5 w-5" />
        <h1 className="text-2xl font-semibold">Location Suggestions Map</h1>
      </div>

<Card>
        <CardContent className="p-4 flex flex-col sm:flex-row gap-3 items-start sm:items-center">
          <Input
            placeholder="Search by name, address, contributor..."
            value={q}
            onChange={(e) => setQ(e.target.value)}
            className="sm:max-w-sm"
          />
          <Button variant="outline" onClick={() => setQ("")}>
            Clear
          </Button>
        </CardContent>
      </Card>

<div className="w-full h-[70vh] overflow-hidden rounded-md border">
        <MapContainer center={center} zoom={firstWithCoords ? 6 : 2} style={{ height: "100%", width: "100%" }} scrollWheelZoom>
          <TileLayer attribution="© OpenStreetMap contributors" url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
          {filtered.map((l) => {
            const c = l.lat != null && l.lng != null ? { lat: l.lat, lng: l.lng } : coordsCache[l.id]
            if (!c) return null
            return (
              <Marker key={l.id} position={[c.lat, c.lng]} icon={markerIcon}>
                <Popup>
                  <div className="space-y-1">
                    <div className="font-semibold">{l.name}</div>
                    <div className="text-xs text-muted-foreground">{l.address}</div>
                    <div className="text-sm mt-1">{l.description}</div>
                    <div className="text-xs text-muted-foreground mt-2">
                      By {l.profiles?.username || l.guest_name || "Guest"} • {new Date(l.created_at).toLocaleDateString()}
                    </div>
                    {l.image_url && (
                      <img
                        src={l.image_url || "/placeholder.svg?height=160&width=280&query=location+image"}
                        alt="Location"
                        className="mt-2 rounded object-cover max-h-40 w-full"
                      />
                    )}
                  </div>
                </Popup>
              </Marker>
            )
          })}
        </MapContainer>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/map/map-wrapper.tsx"
"use client"

import dynamic from "next/dynamic"

// Important: the dynamic import with ssr: false must live in a Client Component
const MapClient = dynamic(() => import("./map-client"), { ssr: false })

export default function MapWrapper() {
  return <MapClient />
}
[V0_FILE]typescriptreact:file="app/map/page.tsx"
import MapWrapper from "./map-wrapper"

export const dynamic = "force-dynamic"
export const revalidate = 0

export default function MapPage() {
  return <MapWrapper />
}
[V0_FILE]typescriptreact:file="app/my/page.tsx"
"use client"

import { useEffect, useState } from "react"
import { useSupabase } from "@/components/supabase-provider"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Loader2 } from 'lucide-react'

export default function MyContributionsPage() {
  const { supabase, session } = useSupabase()
  const [loading, setLoading] = useState(true)
  const [ideas, setIdeas] = useState<any[]>([])
  const [resources, setResources] = useState<any[]>([])
  const [locations, setLocations] = useState<any[]>([])

useEffect(() => {
    const load = async () => {
      if (!session?.user) return setLoading(false)
      const [i, r, l] = await Promise.all([
        supabase.from("ideas").select("*").eq("user_id", session.user.id).order("created_at", { ascending: false }),
        supabase.from("resources").select("*").eq("user_id", session.user.id).order("created_at", { ascending: false }),
        supabase.from("locations").select("*").eq("user_id", session.user.id).order("created_at", { ascending: false }),
      ])
      setIdeas(i.data || [])
      setResources(r.data || [])
      setLocations(l.data || [])
      setLoading(false)
    }
    load()
  }, [session, supabase])

if (!session) {
    return <p className="py-8">Please sign in to view your contributions.</p>
  }

if (loading) {
    return (
      <div className="py-16 flex items-center justify-center">
        <Loader2 className="h-6 w-6 animate-spin" />
      </div>
    )
  }

return (
    <div className="max-w-4xl mx-auto py-8">
      <h1 className="text-3xl font-bold mb-6">My Contributions</h1>
      <Tabs defaultValue="ideas" className="space-y-4">
        <TabsList>
          <TabsTrigger value="ideas">Ideas ({ideas.length})</TabsTrigger>
          <TabsTrigger value="resources">Resources ({resources.length})</TabsTrigger>
          <TabsTrigger value="locations">Locations ({locations.length})</TabsTrigger>
        </TabsList>

<TabsContent value="ideas">
          {ideas.length === 0 ? (
            <p className="text-sm text-muted-foreground">No ideas yet.</p>
          ) : (
            <div className="space-y-4">
              {ideas.map((i) => (
                <Card key={i.id}>
                  <CardHeader>
                    <CardTitle>{i.title}</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-sm">{i.description}</p>
                    {i.image_url && <img src={i.image_url || "/placeholder.svg"} alt="idea" className="mt-2 rounded-md max-h-64 object-cover" />}
                  </CardContent>
                </Card>
              ))}
            </div>
          )}
        </TabsContent>

<TabsContent value="resources">
          {resources.length === 0 ? (
            <p className="text-sm text-muted-foreground">No resources yet.</p>
          ) : (
            <div className="space-y-4">
              {resources.map((r) => (
                <Card key={r.id}>
                  <CardHeader>
                    <CardTitle>{r.title}</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-sm">Category: {r.category}</p>
                    <p className="text-sm mt-2">{r.description}</p>
                    {Array.isArray(r.tags) && r.tags.length > 0 && (
                      <div className="mt-2 flex flex-wrap gap-2">
                        {r.tags.map((t: string) => (
                          <span key={t} className="text-xs px-2 py-0.5 rounded bg-muted">
                            {t}
                          </span>
                        ))}
                      </div>
                    )}
                    {r.link && (
                      <a href={r.link} target="_blank" rel="noreferrer" className="text-sm text-primary underline mt-2 inline-block">
                        Visit link
                      </a>
                    )}
                  </CardContent>
                </Card>
              ))}
            </div>
          )}
        </TabsContent>

<TabsContent value="locations">
          {locations.length === 0 ? (
            <p className="text-sm text-muted-foreground">No locations yet.</p>
          ) : (
            <div className="space-y-4">
              {locations.map((l) => (
                <Card key={l.id}>
                  <CardHeader>
                    <CardTitle>{l.name}</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-sm">Address: {l.address}</p>
                    <p className="text-sm mt-2">{l.description}</p>
                    {l.image_url && <img src={l.image_url || "/placeholder.svg"} alt="location" className="mt-2 rounded-md max-h-64 object-cover" />}
                  </CardContent>
                </Card>
              ))}
            </div>
          )}
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx"
import Image from "next/image"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Leaf, Users, Droplet, Sun, HomeIcon, Sprout, Recycle, Bitcoin } from 'lucide-react'

export default function Home() {
return (
  <div className="flex flex-col space-y-12 md:space-y-24">
    <section className="text-center">
      <h1 className="text-4xl font-bold tracking-tighter sm:text-5xl md:text-6xl lg:text-7xl">
        {"Welcome to Peace Village"}
      </h1>
      <p className="mt-4 text-lg text-gray-600 max-w-3xl mx-auto">
        {"A self-sustaining community where harmony with nature meets modern innovation. Sometimes it only takes one person to start the change the world needs. Let it be us. "}    
      </p>
      <div className="mt-8 flex flex-col sm:flex-row justify-center gap-4">
        <Link href="/contribute">
          <Button size="lg" className="w-full sm:w-auto">
            Join Our Vision
          </Button>
        </Link>
        <Link href="/manifesto">
          <Button variant="outline" size="lg" className="w-full sm:w-auto">
            Read Our Manifesto
          </Button>
        </Link>
      </div>
    </section>

<section>
      <h2 className="text-3xl font-bold mb-8 text-center">Our Core Values</h2>
      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
        <FeatureCard
          icon={<Leaf className="h-10 w-10 text-green-600" />}
          title="Self-Sustaining"
          description="Powered by solar energy and sustainable practices, living in harmony with nature"
        />
        <FeatureCard
          icon={<Users className="h-10 w-10 text-blue-600" />}
          title="Community-Owned Land"
          description="Collectively owned and managed for shared benefit, ensuring equitable control"
        />
        <FeatureCard
          icon={<HomeIcon className="h-10 w-10 text-yellow-600" />}
          title="Community-Owned Businesses"
          description="Cooperative enterprises generating income to expand land and support growth"
        />
        <FeatureCard
          icon={<Sun className="h-10 w-10 text-orange-600" />}
          title="Solar-Powered Independence"
          description="Reliance on renewable solar energy with battery storage for resilience"
        />
        <FeatureCard
          icon={<Sprout className="h-10 w-10 text-green-600" />}
          title="Self-Sustaining Food Production"
          description="Permaculture-based farming and community greenhouses for year-round sustenance"
        />
        <FeatureCard
          icon={<Droplet className="h-10 w-10 text-blue-600" />}
          title="Sustainable Water Management"
          description="Access to natural water sources with purification and rainwater harvesting systems"
        />
        <FeatureCard
          icon={<Recycle className="h-10 w-10 text-green-600" />}
          title="Circular Economy"
          description="Zero-waste systems and composting for a sustainable closed-loop ecosystem. Using proceeds from the community-owned businesses to expand the land and freedom of community and building solar structure to gain energy independence."
        />
        <FeatureCard
          icon={<Users className="h-10 w-10 text-purple-600" />}
          title="Consensus Governance"
          description="No boss, no politicians, no prime ministers. Consensus with the community in circles."
        />
        <FeatureCard
          icon={<Bitcoin className="h-10 w-10 text-orange-600" />}
          title="Transparent Finances"
          description="Using Bitcoin and smart contracts for transparent, corruption-resistant financial management"
        />
        <FeatureCard
          icon={<Bitcoin className="h-10 w-10 text-orange-600" />}
          title="Bitcoin Mining for Heat & Permaculture"
          description="Using solar-powered Bitcoin mining to generate heat, which is then converted into resource for our farming operations, creating a sustainable cycle of energy, finance, and permaculture."
        />
      </div>
    </section>
  </div>
)
}

function FeatureCard({ icon, title, description }) {
return (
  <Card>
    <CardContent className="p-6 flex flex-col items-center text-center">
      {icon}
      <h3 className="text-lg font-bold mt-4 mb-2">{title}</h3>
      <p className="text-sm text-gray-600">{description}</p>
    </CardContent>
  </Card>
)
}
[V0_FILE]typescriptreact:file="app/profile/page.tsx"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { useSupabase } from "@/components/supabase-provider"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { MediaUpload } from "@/components/MediaUpload"
import { toast } from "@/components/ui/use-toast"
import { Badge } from "@/components/ui/badge"
import { Label } from "@/components/ui/label"
import { Separator } from "@/components/ui/separator"
import { Calendar, Mail, MapPin, Phone, User, Camera, Shield, Key, AtSign, Loader2 } from "lucide-react"

interface Profile {
  id: string
  username: string
  full_name: string
  avatar_url: string
  avatar_path: string
  bio: string
  location: string
  phone: string
  interests: string
  created_at: string
  updated_at: string
}

export default function Profile() {
  const [loading, setLoading] = useState(true)
  const [profile, setProfile] = useState<Profile | null>(null)
  const [currentPassword, setCurrentPassword] = useState("")
  const [newPassword, setNewPassword] = useState("")
  const [newEmail, setNewEmail] = useState("")
  const [saving, setSaving] = useState(false)
  const router = useRouter()
  const { supabase, session } = useSupabase()

useEffect(() => {
    if (!session) {
      router.push("/auth/signin")
    } else {
      fetchProfile()
      setNewEmail(session.user.email)
    }
  }, [session, router])

const fetchProfile = async () => {
    try {
      setLoading(true)
      const { data, error } = await supabase.from("profiles").select("*").eq("id", session?.user.id).single()

if (error) throw error

if (data) {
        setProfile(data)
      } else {
        // If no profile exists, create one with default values
        const newProfile: Profile = {
          id: session?.user.id || "",
          username: "",
          full_name: "",
          avatar_url: "",
          avatar_path: "",
          bio: "",
          location: "",
          phone: "",
          interests: "",
          created_at: new Date().toISOString(),
          updated_at: new Date().toISOString(),
        }
        const { data: createdProfile, error: createError } = await supabase
          .from("profiles")
          .insert([newProfile])
          .select()
          .single()

if (createError) throw createError
        setProfile(createdProfile)
      }
    } catch (error) {
      console.error("Error fetching profile:", error)
      toast({
        title: "Error fetching profile",
        description: "There was an error loading your profile. Please try again.",
        variant: "destructive",
      })
    } finally {
      setLoading(false)
    }
  }

const updateProfile = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!profile || !session?.user?.id) return

try {
      setSaving(true)
      const updates = {
        ...profile,
        updated_at: new Date().toISOString(),
        id: session.user.id,
      }

const { error } = await supabase.from("profiles").upsert(updates)

if (error) throw error

setProfile(updates)
      toast({
        title: "Profile updated",
        description: "Your profile has been successfully updated.",
      })
    } catch (error) {
      console.error("Error updating profile:", error)
      toast({
        title: "Error updating profile",
        description: "There was an error updating your profile. Please try again.",
        variant: "destructive",
      })
    } finally {
      setSaving(false)
    }
  }

const updatePassword = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!currentPassword || !newPassword) {
      toast({
        title: "Missing fields",
        description: "Please fill in both current and new password fields.",
        variant: "destructive",
      })
      return
    }

try {
      setSaving(true)
      const { error } = await supabase.auth.updateUser({
        password: newPassword,
      })

if (error) throw error

toast({
        title: "Password updated",
        description: "Your password has been successfully updated.",
      })
      setCurrentPassword("")
      setNewPassword("")
    } catch (error: any) {
      toast({
        title: "Error updating password",
        description: error.message,
        variant: "destructive",
      })
    } finally {
      setSaving(false)
    }
  }

const updateEmail = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!newEmail) {
      toast({
        title: "Missing email",
        description: "Please provide a new email address.",
        variant: "destructive",
      })
      return
    }

try {
      setSaving(true)
      const { error } = await supabase.auth.updateUser({
        email: newEmail,
      })

if (error) throw error

toast({
        title: "Email update initiated",
        description: "A confirmation email has been sent to your new email address.",
      })
    } catch (error: any) {
      toast({
        title: "Error updating email",
        description: error.message,
        variant: "destructive",
      })
    } finally {
      setSaving(false)
    }
  }

const handleAvatarUpload = async (data: { publicUrl: string; filePath: string }) => {
    if (!profile || !session?.user?.id) return

try {
      setSaving(true)
      const updates = {
        ...profile,
        avatar_url: data.publicUrl,
        avatar_path: data.filePath,
        updated_at: new Date().toISOString(),
        id: session.user.id,
      }

const { error } = await supabase.from("profiles").upsert(updates)

if (error) throw error

setProfile(updates)
      toast({
        title: "Avatar updated",
        description: "Your profile picture has been successfully updated.",
      })
    } catch (error) {
      console.error("Error updating avatar:", error)
      toast({
        title: "Error updating avatar",
        description: "There was an error updating your profile picture. Please try again.",
        variant: "destructive",
      })
    } finally {
      setSaving(false)
    }
  }

if (loading) {
    return (
      <div className="flex items-center justify-center min-h-[400px]">
        <Loader2 className="h-8 w-8 animate-spin" />
      </div>
    )
  }

return (
    <div className="container max-w-4xl mx-auto py-8 px-4">
      <div className="flex items-center justify-between mb-8">
        <div>
          <h1 className="text-3xl font-bold">Profile Settings</h1>
          <p className="text-muted-foreground">Manage your account settings and set your preferences</p>
        </div>
        {saving && (
          <div className="flex items-center gap-2 text-muted-foreground">
            <Loader2 className="h-4 w-4 animate-spin" />
            Saving changes...
          </div>
        )}
      </div>

<Tabs defaultValue="profile" className="space-y-6">
        <TabsList className="grid w-full grid-cols-2">
          <TabsTrigger value="profile" className="flex items-center gap-2">
            <User className="h-4 w-4" />
            Profile
          </TabsTrigger>
          <TabsTrigger value="security" className="flex items-center gap-2">
            <Shield className="h-4 w-4" />
            Security
          </TabsTrigger>
        </TabsList>

<TabsContent value="profile">
          <Card>
            <CardHeader>
              <CardTitle>Profile Information</CardTitle>
              <CardDescription>Update your profile information and manage your account</CardDescription>
            </CardHeader>
            <CardContent>
              <form onSubmit={updateProfile} className="space-y-8">
                <div className="flex flex-col items-center space-y-4">
                  <div className="relative">
                    <Avatar className="w-32 h-32">
                      <AvatarImage src={profile?.avatar_url || "/placeholder.svg"} />
                      <AvatarFallback>{profile?.username?.[0]?.toUpperCase() || "U"}</AvatarFallback>
                    </Avatar>
                    <div className="absolute -bottom-2 left-1/2 -translate-x-1/2">
                      <Label htmlFor="media-upload" className="cursor-pointer">
                        <div className="flex items-center justify-center h-8 w-8 rounded-full bg-primary text-primary-foreground shadow-lg">
                          <Camera className="h-4 w-4" />
                        </div>
                      </Label>
                    </div>
                  </div>
                  <MediaUpload onUpload={handleAvatarUpload} currentImage={profile?.avatar_url} />
                </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div className="space-y-2">
                    <Label htmlFor="username" className="flex items-center gap-2">
                      <User className="h-4 w-4" />
                      Username
                    </Label>
                    <Input
                      id="username"
                      value={profile?.username || ""}
                      onChange={(e) => setProfile(profile ? { ...profile, username: e.target.value } : null)}
                      placeholder="Enter your username"
                      required
                    />
                  </div>

<div className="space-y-2">
                    <Label htmlFor="full_name" className="flex items-center gap-2">
                      <User className="h-4 w-4" />
                      Full Name
                    </Label>
                    <Input
                      id="full_name"
                      value={profile?.full_name || ""}
                      onChange={(e) => setProfile(profile ? { ...profile, full_name: e.target.value } : null)}
                      placeholder="Enter your full name"
                      required
                    />
                  </div>

<div className="space-y-2">
                    <Label htmlFor="email" className="flex items-center gap-2">
                      <Mail className="h-4 w-4" />
                      Email
                    </Label>
                    <Input id="email" value={session?.user.email || ""} disabled className="bg-muted" required />
                  </div>

<div className="space-y-2">
                    <Label htmlFor="phone" className="flex items-center gap-2">
                      <Phone className="h-4 w-4" />
                      Phone
                    </Label>
                    <Input
                      id="phone"
                      value={profile?.phone || ""}
                      onChange={(e) => setProfile(profile ? { ...profile, phone: e.target.value } : null)}
                      placeholder="Enter your phone number"
                    />
                  </div>
                </div>

<div className="space-y-2">
                  <Label htmlFor="bio" className="flex items-center gap-2">
                    <User className="h-4 w-4" />
                    Bio
                  </Label>
                  <Textarea
                    id="bio"
                    value={profile?.bio || ""}
                    onChange={(e) => setProfile(profile ? { ...profile, bio: e.target.value } : null)}
                    placeholder="Tell us about yourself"
                    className="min-h-[100px]"
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="location" className="flex items-center gap-2">
                    <MapPin className="h-4 w-4" />
                    Location
                  </Label>
                  <Input
                    id="location"
                    value={profile?.location || ""}
                    onChange={(e) => setProfile(profile ? { ...profile, location: e.target.value } : null)}
                    placeholder="Enter your location"
                    required
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="interests" className="flex items-center gap-2">
                    <Calendar className="h-4 w-4" />
                    Interests
                  </Label>
                  <Input
                    id="interests"
                    value={profile?.interests || ""}
                    onChange={(e) => setProfile(profile ? { ...profile, interests: e.target.value } : null)}
                    placeholder="Enter interests separated by commas"
                  />
                  {profile?.interests && (
                    <div className="flex flex-wrap gap-2 mt-2">
                      {profile.interests.split(",").map((interest, index) => (
                        <Badge key={index} variant="secondary">
                          {interest.trim()}
                        </Badge>
                      ))}
                    </div>
                  )}
                </div>

<div className="flex justify-end">
                  <Button type="submit" disabled={saving}>
                    {saving ? (
                      <>
                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                        Saving...
                      </>
                    ) : (
                      "Save Changes"
                    )}
                  </Button>
                </div>
              </form>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="security">
          <div className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Key className="h-5 w-5" />
                  Change Password
                </CardTitle>
                <CardDescription>Update your password to keep your account secure</CardDescription>
              </CardHeader>
              <CardContent>
                <form onSubmit={updatePassword} className="space-y-4">
                  <div className="space-y-2">
                    <Label htmlFor="current-password">Current Password</Label>
                    <Input
                      id="current-password"
                      type="password"
                      value={currentPassword}
                      onChange={(e) => setCurrentPassword(e.target.value)}
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="new-password">New Password</Label>
                    <Input
                      id="new-password"
                      type="password"
                      value={newPassword}
                      onChange={(e) => setNewPassword(e.target.value)}
                    />
                  </div>
                  <Button type="submit" disabled={saving}>
                    {saving ? (
                      <>
                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                        Updating...
                      </>
                    ) : (
                      "Update Password"
                    )}
                  </Button>
                </form>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <AtSign className="h-5 w-5" />
                  Change Email
                </CardTitle>
                <CardDescription>
                  Update your email address. A confirmation will be sent to the new address.
                </CardDescription>
              </CardHeader>
              <CardContent>
                <form onSubmit={updateEmail} className="space-y-4">
                  <div className="space-y-2">
                    <Label htmlFor="new-email">New Email</Label>
                    <Input id="new-email" type="email" value={newEmail} onChange={(e) => setNewEmail(e.target.value)} />
                  </div>
                  <Button type="submit" disabled={saving}>
                    {saving ? (
                      <>
                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                        Updating...
                      </>
                    ) : (
                      "Update Email"
                    )}
                  </Button>
                </form>
              </CardContent>
            </Card>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/resources/loading.tsx"
export default function Loading() {
  // Lightweight loading skeleton for Resources page
  return (
    <div className="max-w-4xl mx-auto py-8">
      <div className="h-8 w-56 bg-muted rounded animate-pulse mb-6" />
      <div className="flex gap-4 mb-8">
        <div className="h-10 flex-1 bg-muted rounded animate-pulse" />
        <div className="h-10 w-40 bg-muted rounded animate-pulse" />
      </div>
      <div className="space-y-4">
        {[0, 1, 2].map((i) => (
          <div key={i} className="p-6 border rounded-lg">
            <div className="h-5 w-48 bg-muted rounded animate-pulse mb-2" />
            <div className="h-4 w-24 bg-muted rounded animate-pulse mb-4" />
            <div className="h-4 w-full bg-muted rounded animate-pulse mb-2" />
            <div className="h-4 w-3/4 bg-muted rounded animate-pulse" />
          </div>
        ))}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/resources/page.tsx"
"use client"

import { useEffect, useMemo, useState } from "react"
import Link from "next/link"
import { useSupabase } from "@/components/supabase-provider"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent } from "@/components/ui/card"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Filter, MoreVertical, Pencil, Trash2, Tag, MapPin, LinkIcon } from 'lucide-react'

type ContributionType = "all" | "resource" | "idea" | "location"

type Contribution = {
  id: string
  type: "resource" | "idea" | "location"
  title: string
  category: string | null
  description: string
  tags: string[]
  location: string | null
  link: string | null
  image_url: string | null
  user_id: string | null
  guest_name: string | null
  created_at: string
  source_table: "resources" | "ideas" | "locations"
  source_id: string
  contributor_name: string | null
  contributor_avatar_url: string | null
}

export default function Resources() {
  const { supabase, session } = useSupabase()
  const [items, setItems] = useState<Contribution[]>([])
  const [searchTerm, setSearchTerm] = useState("")
  const [timeFilter, setTimeFilter] = useState<"all" | "recent">("all")
  const [typeFilter, setTypeFilter] = useState<ContributionType>("all")

const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
  const [toDelete, setToDelete] = useState<{ id: string; source_table: Contribution["source_table"] } | null>(null)

const [editDialogOpen, setEditDialogOpen] = useState(false)
  const [editing, setEditing] = useState<Contribution | null>(null)
  const [editTitle, setEditTitle] = useState("")
  const [editCategory, setEditCategory] = useState("")
  const [editDescription, setEditDescription] = useState("")
  const [editTags, setEditTags] = useState("")

useEffect(() => {
    fetchItems()
    const channels = [
      supabase.channel("resources_changes").on("postgres_changes", { event: "*", schema: "public", table: "resources" }, fetchItems).subscribe(),
      supabase.channel("ideas_changes").on("postgres_changes", { event: "*", schema: "public", table: "ideas" }, fetchItems).subscribe(),
      supabase.channel("locations_changes").on("postgres_changes", { event: "*", schema: "public", table: "locations" }, fetchItems).subscribe(),
    ]
    return () => {
      channels.forEach((ch) => supabase.removeChannel(ch))
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [supabase])

const fetchItems = async () => {
    const { data, error } = await supabase
      .from("contributions_view")
      .select("*")
      .order("created_at", { ascending: false })

if (error) {
      console.error("Error fetching contributions:", error)
    } else {
      const normalized = (data as any[]).map((row) => ({
        ...row,
        tags: Array.isArray(row.tags) ? row.tags : [],
      })) as Contribution[]
      setItems(normalized)
    }
  }

const filtered = useMemo(() => {
    const nowMinus7 = Date.now() - 7 * 24 * 60 * 60 * 1000
    return items.filter((it) => {
      const matchesType = typeFilter === "all" ? true : it.type === typeFilter
      const matchesTime = timeFilter === "all" ? true : new Date(it.created_at).getTime() > nowMinus7
      const q = searchTerm.trim().toLowerCase()
      const matchesSearch =
        q.length === 0 ||
        it.title.toLowerCase().includes(q) ||
        (it.description || "").toLowerCase().includes(q) ||
        (it.category || "").toLowerCase().includes(q) ||
        (it.location || "").toLowerCase().includes(q) ||
        it.tags.some((t) => t.toLowerCase().includes(q)) ||
        (it.contributor_name || "").toLowerCase().includes(q)
      return matchesType && matchesTime && matchesSearch
    })
  }, [items, typeFilter, timeFilter, searchTerm])

const openEdit = (item: Contribution) => {
    if (item.type !== "resource") return
    setEditing(item)
    setEditTitle(item.title || "")
    setEditCategory(item.category || "")
    setEditDescription(item.description || "")
    setEditTags(item.tags?.join(", ") || "")
    setEditDialogOpen(true)
  }

const saveEdit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!editing || editing.type !== "resource") return

const { error } = await supabase
      .from("resources")
      .update({
        title: editTitle,
        category: editCategory,
        description: editDescription,
        tags: editTags
          .split(",")
          .map((t) => t.trim())
          .filter(Boolean),
      })
      .eq("id", editing.id)

if (error) {
      alert("Error updating resource: " + error.message)
    } else {
      setEditDialogOpen(false)
      setEditing(null)
      fetchItems()
    }
  }

const confirmDelete = (item: Contribution) => {
    if (!session || session.user.id !== item.user_id) return
    setToDelete({ id: item.id, source_table: item.source_table })
    setDeleteDialogOpen(true)
  }

const handleDelete = async () => {
    if (!toDelete) return
    const { id, source_table } = toDelete
    const { error } = await supabase.from(source_table).delete().eq("id", id)
    if (error) {
      alert("Error deleting: " + error.message)
    } else {
      setItems((prev) => prev.filter((it) => !(it.id === id && it.source_table === source_table)))
    }
    setDeleteDialogOpen(false)
    setToDelete(null)
  }

return (
    <div className="max-w-4xl mx-auto py-8">
      <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-8">
        <h1 className="text-3xl font-bold">Community Library</h1>
        <Link href="/contribute">
          <Button className="bg-green-600 hover:bg-green-700 text-white">Add Contribution</Button>
        </Link>
      </div>

<div className="flex flex-col sm:flex-row gap-4 mb-8">
        <div className="relative flex-1">
          <Input
            placeholder="Search ideas, resources, and locations..."
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="pl-3"
          />
        </div>

<div className="flex items-center gap-2">
          <select
            value={typeFilter}
            onChange={(e) => setTypeFilter(e.target.value as ContributionType)}
            className="h-10 rounded-md border px-3 text-sm bg-background"
            aria-label="Filter by type"
          >
            <option value="all">All types</option>
            <option value="idea">Ideas</option>
            <option value="resource">Resources</option>
            <option value="location">Location suggestions</option>
          </select>
          <Button
            variant="outline"
            className="flex items-center gap-2"
            onClick={() => setTimeFilter((t) => (t === "all" ? "recent" : "all"))}
          >
            <Filter className="h-4 w-4" />
            {timeFilter === "all" ? "All time" : "Recent (7d)"}
          </Button>
        </div>
      </div>

<div className="space-y-4">
        {filtered.map((item) => (
          <Card key={`${item.source_table}-${item.id}`}>
            <CardContent className="p-6">
              <div className="flex justify-between items-start gap-4">
                <div className="min-w-0 flex-1">
                  {/* Contributor row */}
                  <div className="flex items-center gap-3">
                    <Avatar className="h-8 w-8">
                      <AvatarImage src={item.contributor_avatar_url || "/placeholder.svg?height=64&width=64&query=avatar+placeholder"} />
                      <AvatarFallback>{(item.contributor_name || "G").slice(0, 1).toUpperCase()}</AvatarFallback>
                    </Avatar>
                    <div className="text-sm">
                      <div className="font-medium leading-5">{item.contributor_name || "Guest"}</div>
                      <div className="text-muted-foreground">{new Date(item.created_at).toLocaleString()}</div>
                    </div>
                  </div>

{/* Meta badges */}
                  <div className="flex items-center gap-2 flex-wrap mt-3">
                    <span className="inline-flex items-center rounded bg-muted px-2 py-0.5 text-xs uppercase tracking-wide">
                      {item.type === "location" ? "Location suggestion" : item.type}
                    </span>
                    {item.category && (
                      <span className="inline-flex items-center rounded bg-muted px-2 py-0.5 text-xs">
                        {item.category}
                      </span>
                    )}
                  </div>

<h3 className="font-semibold text-lg mt-2 break-words">{item.title}</h3>
                  <p className="mt-2 break-words">{item.description}</p>

{item.image_url && (
                    <div className="mt-3">
                      <img
                        src={item.image_url || "/placeholder.svg?height=320&width=640&query=contribution+image"}
                        alt="Contribution image"
                        className="rounded-md max-h-56 object-cover"
                      />
                    </div>
                  )}

<div className="flex flex-wrap gap-3 mt-3 text-sm items-center">
                    {item.location && (
                      <span className="inline-flex items-center gap-1 text-muted-foreground">
                        <MapPin className="h-4 w-4" />
                        {item.location}
                      </span>
                    )}
                    {item.link && (
                      <a
                        href={item.link}
                        target="_blank"
                        rel="noreferrer"
                        className="inline-flex items-center gap-1 text-primary underline"
                      >
                        <LinkIcon className="h-4 w-4" />
                        Visit link
                      </a>
                    )}
                    {item.tags?.length > 0 && (
                      <span className="inline-flex items-center gap-1 text-muted-foreground">
                        <Tag className="h-4 w-4" />
                        {item.tags.join(", ")}
                      </span>
                    )}
                  </div>
                </div>

{/* Owner menu */}
                {session?.user.id === item.user_id && (
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                      <Button variant="ghost" size="icon">
                        <MoreVertical className="h-4 w-4" />
                      </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end">
                      {item.type === "resource" && (
                        <DropdownMenuItem onClick={() => openEdit(item)}>
                          <Pencil className="h-4 w-4 mr-2" />
                          Edit
                        </DropdownMenuItem>
                      )}
                      <DropdownMenuItem
                        className="text-destructive"
                        onClick={() => setDeleteDialogOpen(true) || setToDelete({ id: item.id, source_table: item.source_table })}
                      >
                        <Trash2 className="h-4 w-4 mr-2" />
                        Delete
                      </DropdownMenuItem>
                    </DropdownMenuContent>
                  </DropdownMenu>
                )}
              </div>
            </CardContent>
          </Card>
        ))}

{filtered.length === 0 && (
          <div className="text-sm text-muted-foreground text-center py-12">
            No contributions match your filters.
          </div>
        )}
      </div>

{/* Delete dialog */}
      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Delete this entry?</AlertDialogTitle>
            <AlertDialogDescription>
              This action cannot be undone. It will permanently delete your contribution.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction onClick={handleDelete}>Delete</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>

{/* Edit dialog (resources only) */}
      <Dialog open={editDialogOpen} onOpenChange={setEditDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Edit Resource</DialogTitle>
          </DialogHeader>
          <form onSubmit={saveEdit} className="space-y-4">
            <div>
              <Label htmlFor="title">Title</Label>
              <Input id="title" value={editTitle} onChange={(e) => setEditTitle(e.target.value)} />
            </div>
            <div>
              <Label htmlFor="category">Category</Label>
              <Input id="category" value={editCategory} onChange={(e) => setEditCategory(e.target.value)} />
            </div>
            <div>
              <Label htmlFor="description">Description</Label>
              <Textarea id="description" value={editDescription} onChange={(e) => setEditDescription(e.target.value)} />
            </div>
            <div>
              <Label htmlFor="tags">Tags (comma-separated)</Label>
              <Input id="tags" value={editTags} onChange={(e) => setEditTags(e.target.value)} />
            </div>
            <div className="flex justify-end">
              <Button type="submit">Save changes</Button>
            </div>
          </form>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/updates/page.tsx"
export default function Updates() {
  return (
    <div className="space-y-8">
      <h1 className="text-4xl font-bold mb-4">Project Updates</h1>

<section>
        <h2 className="text-2xl font-bold mb-4">Latest Milestones</h2>
        <ul className="list-disc list-inside space-y-2">
          <li>Virtual community meeting scheduled for next month</li>
          <li>Fundraising goal for initial land purchase: 25% reached!</li>
          <li>Sustainability expert joined our advisory board</li>
          <li>First draft of community guidelines completed</li>
        </ul>
      </section>

<section>
        <h2 className="text-2xl font-bold mb-4">Upcoming Events</h2>
        <ul className="list-disc list-inside space-y-2">
          <li>Vision Brainstorm Session - June 15, 2023</li>
          <li>Village Design Hackathon - July 1-3, 2023</li>
          <li>Fundraising Workshop - July 20, 2023</li>
        </ul>
      </section>
    </div>
  )
}
[V0_FILE]json:file="components.json"
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide"
}
[V0_FILE]typescriptreact:file="components/BitcoinDonation.tsx"
"use client"

import { useState } from "react"
import { Button } from "./ui/button"
import { Input } from "./ui/input"
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card"
import { Bitcoin } from "lucide-react"

const BITCOIN_ADDRESS = "1YourBitcoinAddressHere" // Replace with your actual Bitcoin address

export function BitcoinDonation() {
  const [amount, setAmount] = useState("")

const handleDonate = () => {
    // In a real implementation, you would integrate with a Bitcoin payment processor
    // For now, we'll just open a new window with a Bitcoin URI
    const btcUri = `bitcoin:${BITCOIN_ADDRESS}?amount=${amount}`
    window.open(btcUri, "_blank")
  }

return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center">
          <Bitcoin className="mr-2" />
          Donate with Bitcoin
        </CardTitle>
        <p className="text-sm text-muted-foreground mt-2">
          Our community uses Bitcoin and smart contracts for complete financial transparency. Every transaction is
          publicly visible, and our multi-signature smart contracts ensure that no single person can move funds without
          community consensus. This creates a truly democratic and accountable financial system for our village.
        </p>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          <Input type="number" placeholder="Amount in BTC" value={amount} onChange={(e) => setAmount(e.target.value)} />
          <Button onClick={handleDonate} className="w-full">
            Donate
          </Button>
          <div className="text-sm text-center">
            <p>Bitcoin Address:</p>
            <p className="font-mono">{BITCOIN_ADDRESS}</p>
          </div>
          <div className="text-sm text-center">
            <a
              href={`https://www.blockchain.com/explorer/addresses/btc/${BITCOIN_ADDRESS}`}
              target="_blank"
              rel="noopener noreferrer"
              className="text-blue-500 hover:underline"
            >
              View Wallet Transactions
            </a>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/MediaUpload.tsx"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useSupabase } from "./supabase-provider"
import { Button } from "./ui/button"
import { Input } from "./ui/input"
import { Upload, X, Info } from "lucide-react"
import Image from "next/image"
import { toast } from "@/components/ui/use-toast"

interface MediaUploadProps {
  onUpload: (data: { publicUrl: string; filePath: string }) => void
  currentImage?: string
}

export function MediaUpload({ onUpload, currentImage }: MediaUploadProps) {
  const [uploading, setUploading] = useState(false)
  const [preview, setPreview] = useState(currentImage)
  const { supabase } = useSupabase()

const createBucketIfNotExists = async () => {
    const { data, error } = await supabase.storage.getBucket("media")
    if (error && error.statusCode === "404") {
      const { data, error: createError } = await supabase.storage.createBucket("media", { public: true })
      if (createError) {
        console.error("Error creating bucket:", createError)
      }
    }
  }

useEffect(() => {
    createBucketIfNotExists()
  }, [supabase])

const uploadMedia = async (event: React.ChangeEvent<HTMLInputElement>) => {
    try {
      setUploading(true)

if (!event.target.files || event.target.files.length === 0) {
        throw new Error("You must select an image to upload.")
      }

const file = event.target.files[0]

const maxSize = 2 * 1024 * 1024 // 2MB in bytes
      if (file.size > maxSize) {
        throw new Error("File size must be less than 2MB. Please compress your image or provide a URL instead.")
      }

const allowedTypes = ["image/jpeg", "image/jpg", "image/png", "image/webp"]
      if (!allowedTypes.includes(file.type)) {
        throw new Error("Only JPEG, PNG, and WebP images are allowed.")
      }

const fileExt = file.name.split(".").pop()
      const fileName = `${Date.now()}-${Math.random().toString(36).substring(2)}.${fileExt}`
      const filePath = `uploads/${fileName}`

// First, ensure the bucket exists
      const { data: bucketData, error: bucketError } = await supabase.storage.getBucket("media")

if (bucketError && bucketError.message.includes("not found")) {
        await supabase.storage.createBucket("media", { public: true })
      }

// Then upload the file
      const { error: uploadError } = await supabase.storage.from("media").upload(filePath, file, {
        cacheControl: "3600",
        upsert: false,
      })

if (uploadError) throw uploadError

// Get the public URL
      const {
        data: { publicUrl },
      } = supabase.storage.from("media").getPublicUrl(filePath)

onUpload({ publicUrl, filePath })

// Create preview
      const objectUrl = URL.createObjectURL(file)
      setPreview(objectUrl)

toast({
        title: "Upload successful",
        description: "Your image has been uploaded successfully.",
      })
    } catch (error: any) {
      console.error("Error uploading media:", error)
      toast({
        title: "Upload failed",
        description: error.message || "There was an error uploading your image.",
        variant: "destructive",
      })
    } finally {
      setUploading(false)
    }
  }

const removeImage = () => {
    setPreview(undefined)
    onUpload({ publicUrl: "", filePath: "" })
  }

return (
    <div className="space-y-4">
      <div className="flex items-start gap-2 p-3 bg-blue-50 dark:bg-blue-950/20 rounded-lg border border-blue-200 dark:border-blue-800">
        <Info className="h-4 w-4 text-blue-600 dark:text-blue-400 mt-0.5 flex-shrink-0" />
        <p className="text-sm text-blue-700 dark:text-blue-300">
          <strong>Tip:</strong> It would be perfect to have a URL of the image, a link, as it would save us space for
          the website :)
          <br />
          <span className="text-xs opacity-75">Upload limit: 2MB • Formats: JPEG, PNG, WebP</span>
        </p>
      </div>

<div>
        <Input
          type="file"
          accept="image/jpeg,image/jpg,image/png,image/webp"
          onChange={uploadMedia}
          disabled={uploading}
          className="hidden"
          id="media-upload"
        />
        <label htmlFor="media-upload">
          <Button variant="outline" disabled={uploading} asChild>
            <span className="flex items-center gap-2">
              {uploading ? (
                <>
                  <div className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
                  Uploading...
                </>
              ) : (
                <>
                  <Upload className="h-4 w-4" />
                  Upload Media
                </>
              )}
            </span>
          </Button>
        </label>
      </div>

{preview && (
        <div className="relative">
          <div className="relative aspect-video w-full overflow-hidden rounded-lg">
            <Image src={preview || "/placeholder.svg"} alt="Preview" fill className="object-cover" />
          </div>
          <Button variant="destructive" size="icon" className="absolute -top-2 -right-2 h-6 w-6" onClick={removeImage}>
            <X className="h-4 w-4" />
          </Button>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/Notifications.tsx"
"use client"

import { useState, useEffect } from "react"
import { useSupabase } from "./supabase-provider"
import { Bell } from "lucide-react"
import { Button } from "./ui/button"
import { Card, CardContent } from "./ui/card"

export function Notifications() {
  const [notifications, setNotifications] = useState([])
  const [showNotifications, setShowNotifications] = useState(false)
  const { supabase, session } = useSupabase()

useEffect(() => {
    if (session) {
      fetchNotifications()
      subscribeToNotifications()
    }
  }, [session])

const fetchNotifications = async () => {
    const { data, error } = await supabase
      .from("notifications")
      .select("*")
      .order("created_at", { ascending: false })
      .limit(10)

if (error) {
      console.error("Error fetching notifications:", error)
    } else {
      setNotifications(data)
    }
  }

const subscribeToNotifications = () => {
    const channel = supabase
      .channel("notifications")
      .on("postgres_changes", { event: "INSERT", schema: "public", table: "notifications" }, (payload) => {
        setNotifications((prev) => [payload.new, ...prev])
      })
      .subscribe()

return () => {
      supabase.removeChannel(channel)
    }
  }

const markAsRead = async (id) => {
    const { error } = await supabase.from("notifications").update({ is_read: true }).eq("id", id)

if (error) {
      console.error("Error marking notification as read:", error)
    } else {
      setNotifications((prev) => prev.map((notif) => (notif.id === id ? { ...notif, is_read: true } : notif)))
    }
  }

return (
    <div className="relative">
      <Button variant="ghost" size="sm" onClick={() => setShowNotifications(!showNotifications)} className="relative">
        <Bell className="h-5 w-5" />
        {notifications.filter((n) => !n.is_read).length > 0 && (
          <span className="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500" />
        )}
      </Button>
      {showNotifications && (
        <Card className="absolute right-0 mt-2 w-80 z-50">
          <CardContent className="p-4">
            <h3 className="font-bold mb-2">Notifications</h3>
            {notifications.length === 0 ? (
              <p>No notifications</p>
            ) : (
              <ul className="space-y-2">
                {notifications.map((notif) => (
                  <li
                    key={notif.id}
                    className={`text-sm ${notif.is_read ? "text-gray-500" : "font-bold"}`}
                    onClick={() => markAsRead(notif.id)}
                  >
                    {notif.content}
                  </li>
                ))}
              </ul>
            )}
          </CardContent>
        </Card>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/donation-widget.tsx"
"use client"

import { useMemo, useState, useEffect } from "react"
import { QRCodeSVG } from "qrcode.react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Copy, Clock, DollarSign } from "lucide-react"
import { toast } from "@/components/ui/use-toast"

function copy(text: string) {
  if (!text) return
  navigator.clipboard.writeText(text).then(
    () => toast({ title: "Copied", description: "Copied to clipboard." }),
    () => toast({ title: "Copy failed", description: "Please copy manually.", variant: "destructive" }),
  )
}

// Network fee and time data
const networkInfo = {
  BTC: { fee: "$2-15", time: "10-60 min", feeNote: "Varies by network congestion" },
  TRC20: { fee: "$1-3", time: "1-3 min", feeNote: "TRON network" },
  ARBITRUM: { fee: "$0.50-2", time: "1-2 min", feeNote: "Layer 2 scaling" },
  SOL: { fee: "$0.01-0.10", time: "1-2 min", feeNote: "Solana network" },
  POLYGON: { fee: "$0.01-0.50", time: "1-3 min", feeNote: "Polygon network" },
  AVALANCHE: { fee: "$0.50-2", time: "1-3 min", feeNote: "Avalanche C-Chain" },
}

export default function DonationWidget({
  // Bitcoin mainnet on-chain address
  btcAddress = "",
  usdt = { TRC20: "", ARBITRUM: "", SOL: "" },
  usdc = { SOL: "", ARBITRUM: "", POLYGON: "", AVALANCHE: "" },
  // Optional QR image overrides
  qrOverrides = {},
}: {
  btcAddress?: string
  usdt?: Partial<Record<"TRC20" | "ARBITRUM" | "SOL", string>>
  usdc?: Partial<Record<"SOL" | "ARBITRUM" | "POLYGON" | "AVALANCHE", string>>
  qrOverrides?: Record<string, string>
}) {
  // Bitcoin price state
  const [btcPrice, setBtcPrice] = useState<number | null>(null)
  const [priceLoading, setPriceLoading] = useState(true)

// Fetch BTC price
  useEffect(() => {
    const fetchBtcPrice = async () => {
      try {
        const response = await fetch("https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&vs_currencies=usd")
        const data = await response.json()
        setBtcPrice(data.bitcoin.usd)
      } catch (error) {
        console.error("Failed to fetch BTC price:", error)
      } finally {
        setPriceLoading(false)
      }
    }

fetchBtcPrice()
    // Update price every 30 seconds
    const interval = setInterval(fetchBtcPrice, 30000)
    return () => clearInterval(interval)
  }, [])

// Bitcoin on-chain
  const [btcAmount, setBtcAmount] = useState<string>("") // BTC
  const btcUri = useMemo(() => {
    const amt = Number.parseFloat(btcAmount)
    return `bitcoin:${btcAddress || ""}${!isNaN(amt) && amt > 0 ? `?amount=${amt}` : ""}`
  }, [btcAddress, btcAmount])

// Calculate USD value
  const usdValue = useMemo(() => {
    const amt = Number.parseFloat(btcAmount)
    if (!isNaN(amt) && amt > 0 && btcPrice) {
      return (amt * btcPrice).toFixed(2)
    }
    return null
  }, [btcAmount, btcPrice])

// Stablecoins
  const [stable, setStable] = useState<Stable>("USDT")
  const [chain, setChain] = useState<Chain>("TRC20")

const stableAddress =
    stable === "USDT"
      ? (usdt?.[chain as "TRC20" | "ARBITRUM" | "SOL"] as string) || ""
      : stable === "USDC"
        ? (usdc?.[chain as "SOL" | "ARBITRUM" | "POLYGON" | "AVALANCHE"] as string) || ""
        : ""

const availableChainsForStable = (coin: Stable): Chain[] => {
    if (coin === "USDT") return ["TRC20", "ARBITRUM", "SOL"]
    // For USDC we support SOL, ARBITRUM, POLYGON, AVALANCHE
    return ["SOL", "ARBITRUM", "POLYGON", "AVALANCHE"]
  }

// Helper to choose override key
  const getQrKey = (coin: "BTC" | "USDT" | "USDC", ch?: Chain) => (coin === "BTC" ? "BTC" : `${coin}:${ch}`)

const getChainDisplayName = (c: Chain) => {
    switch (c) {
      case "TRC20":
        return "TRC20 (Tron)"
      case "ARBITRUM":
        return "Arbitrum One"
      case "SOL":
        return "SOL (Solana)"
      case "POLYGON":
        return "Polygon"
      case "AVALANCHE":
        return "Avalanche C-Chain"
      default:
        return c
    }
  }

const getChainShortName = (c: Chain) => {
    switch (c) {
      case "TRC20":
        return "Tron"
      case "ARBITRUM":
        return "Arbitrum One"
      case "SOL":
        return "Solana"
      case "POLYGON":
        return "Polygon"
      case "AVALANCHE":
        return "Avalanche C-Chain"
      default:
        return c
    }
  }

return (
    <Card>
      <CardHeader>
        <CardTitle>Donate to Rainbow Peace Village</CardTitle>
      </CardHeader>
      <CardContent className="space-y-8">
        <Tabs defaultValue="bitcoin" className="space-y-6">
          <TabsList className="w-full flex flex-wrap gap-2">
            <TabsTrigger value="bitcoin" className="flex-1">
              Bitcoin (Mainnet)
            </TabsTrigger>
            <TabsTrigger value="stable" className="flex-1">
              USDT / USDC
            </TabsTrigger>
          </TabsList>

{/* Bitcoin on-chain only */}
          <TabsContent value="bitcoin" className="space-y-4">
            <div className="bg-muted/50 rounded-lg p-4 space-y-2">
              <div className="flex items-center gap-2">
                <DollarSign className="h-4 w-4" />
                <span className="font-medium">Bitcoin Price</span>
              </div>
              {priceLoading ? (
                <div className="text-sm text-muted-foreground">Loading price...</div>
              ) : btcPrice ? (
                <div className="text-lg font-bold">${btcPrice.toLocaleString()}</div>
              ) : (
                <div className="text-sm text-muted-foreground">Price unavailable</div>
              )}
            </div>

<div className="grid gap-3 sm:grid-cols-[1fr_auto]">
              <div className="space-y-2">
                <Label htmlFor="btc-address">BTC Address</Label>
                <div className="flex gap-2">
                  <Input id="btc-address" readOnly value={btcAddress} placeholder="Add a BTC address" />
                  <Button type="button" variant="outline" onClick={() => copy(btcAddress)} disabled={!btcAddress}>
                    <Copy className="h-4 w-4" />
                  </Button>
                </div>
              </div>
              <div className="space-y-2">
                <Label htmlFor="btc-amount">Amount (BTC)</Label>
                <Input
                  id="btc-amount"
                  type="number"
                  step="0.00000001"
                  min="0"
                  placeholder="e.g. 0.01"
                  value={btcAmount}
                  onChange={(e) => setBtcAmount(e.target.value)}
                />
                {usdValue && <div className="text-sm text-muted-foreground">≈ ${usdValue} USD</div>}
              </div>
            </div>

<div className="bg-muted/50 rounded-lg p-4 space-y-2">
              <div className="flex items-center gap-2">
                <Clock className="h-4 w-4" />
                <span className="font-medium">Network Info</span>
              </div>
              <div className="grid grid-cols-2 gap-4 text-sm">
                <div>
                  <div className="text-muted-foreground">Network Fee</div>
                  <div className="font-medium">{networkInfo.BTC.fee}</div>
                </div>
                <div>
                  <div className="text-muted-foreground">Confirmation Time</div>
                  <div className="font-medium">{networkInfo.BTC.time}</div>
                </div>
              </div>
              <div className="text-xs text-muted-foreground">{networkInfo.BTC.feeNote}</div>
            </div>

<div className="flex flex-col sm:flex-row items-center gap-6">
              <div className="border rounded-md p-3">
                {qrOverrides[getQrKey("BTC")] ? (
                  // eslint-disable-next-line @next/next/no-img-element
                  <img
                    src={qrOverrides[getQrKey("BTC")] || "/placeholder.svg"}
                    alt="BTC QR"
                    className="h-40 w-40 object-contain"
                  />
                ) : (
                  <QRCodeSVG value={btcUri || btcAddress || "bitcoin:"} size={160} />
                )}
              </div>
              <div className="space-y-2 w-full sm:w-auto">
                <div className="text-xs text-muted-foreground break-all">{btcUri}</div>
                <div className="flex gap-2">
                  <Button type="button" onClick={() => copy(btcUri)} disabled={!btcAddress}>
                    Copy URI
                  </Button>
                </div>
              </div>
            </div>
          </TabsContent>

{/* Stablecoins */}
          <TabsContent value="stable" className="space-y-4">
            <div className="flex flex-wrap gap-3">
              <select
                value={stable}
                onChange={(e) => {
                  const coin = e.target.value as Stable
                  setStable(coin)
                  const firstChain = availableChainsForStable(coin)[0]
                  setChain(firstChain)
                }}
                className="h-10 rounded-md border bg-background px-3 text-sm"
                aria-label="Select stablecoin"
              >
                <option value="USDT">USDT</option>
                <option value="USDC">USDC</option>
              </select>

<select
                value={chain}
                onChange={(e) => setChain(e.target.value as Chain)}
                className="h-10 rounded-md border bg-background px-3 text-sm"
                aria-label="Select chain"
              >
                {availableChainsForStable(stable).map((c) => (
                  <option key={c} value={c}>
                    {getChainDisplayName(c)}
                  </option>
                ))}
              </select>
            </div>

<div className="space-y-2">
              <Label htmlFor="stable-address">
                {stable} Address ({getChainShortName(chain)})
              </Label>
              <div className="flex gap-2">
                <Input id="stable-address" readOnly value={stableAddress} placeholder="Address for this chain" />
                <Button type="button" variant="outline" onClick={() => copy(stableAddress)} disabled={!stableAddress}>
                  <Copy className="h-4 w-4" />
                </Button>
              </div>
            </div>

<div className="bg-muted/50 rounded-lg p-4 space-y-2">
              <div className="flex items-center gap-2">
                <Clock className="h-4 w-4" />
                <span className="font-medium">Network Info</span>
              </div>
              <div className="grid grid-cols-2 gap-4 text-sm">
                <div>
                  <div className="text-muted-foreground">Network Fee</div>
                  <div className="font-medium">{networkInfo[chain].fee}</div>
                </div>
                <div>
                  <div className="text-muted-foreground">Confirmation Time</div>
                  <div className="font-medium">{networkInfo[chain].time}</div>
                </div>
              </div>
              <div className="text-xs text-muted-foreground">{networkInfo[chain].feeNote}</div>
            </div>

<div className="flex items-center gap-6">
              <div className="border rounded-md p-3">
                {qrOverrides[getQrKey(stable, chain)] ? (
                  // eslint-disable-next-line @next/next/no-img-element
                  <img
                    src={qrOverrides[getQrKey(stable, chain)] || "/placeholder.svg"}
                    alt={`${stable} ${chain} QR`}
                    className="h-40 w-40 object-contain"
                  />
                ) : (
                  <QRCodeSVG value={stableAddress || `${stable}:${chain}:`} size={160} />
                )}
              </div>
              <div className="text-xs text-muted-foreground break-all">
                {stableAddress
                  ? `Scan to donate ${stable} on ${getChainShortName(chain)}`
                  : `Provide a ${stable} ${chain} address to enable QR`}
              </div>
            </div>

<p className="text-xs text-muted-foreground">
              We accept direct wallet transfers to the addresses above to help fund the project and you can follow the balance on the network. Only Bitcoin as reserve asset and as the deflationary currency.               
            </p>
          </TabsContent>
        </Tabs>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/site-footer.tsx"
import { Heart } from "lucide-react"

export function SiteFooter() {
  return (
    <footer className="border-t w-full">
      <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-5xl flex items-center justify-center py-10 md:h-24 md:py-0">
        <div className="flex items-center gap-2">
          <Heart className="h-4 w-4" />
          <p className="text-center text-sm leading-loose">Built with love, light and peace for the humanity</p>
        </div>
      </div>
    </footer>
  )
}
[V0_FILE]typescriptreact:file="components/site-header.tsx"
"use client"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
import { Sun, Menu } from "lucide-react"
import { useSupabase } from "./supabase-provider"
import { useRouter } from "next/navigation"
import { Notifications } from "./Notifications"

export function SiteHeader() {
  const { supabase, session } = useSupabase()
  const router = useRouter()

const handleSignOut = async () => {
    await supabase.auth.signOut()
    router.push("/")
  }

return (
    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <div className="container flex h-16 items-center">
        <Link href="/" className="flex items-center space-x-2 mr-4">
          <Sun className="h-6 w-6" />
          <span className="font-bold hidden md:inline">Rainbow Peace Village</span>
        </Link>
        <nav className="hidden md:flex items-center space-x-4 ml-auto">
          <Link href="/manifesto" className="text-sm font-medium hover:underline underline-offset-4">
            Manifesto
          </Link>
          <Link href="/forum" className="text-sm font-medium hover:underline underline-offset-4">
            Forum
          </Link>
          <Link href="/resources" className="text-sm font-medium hover:underline underline-offset-4">
            Resources
          </Link>
          <Link href="/contribute" className="text-sm font-medium hover:underline underline-offset-4">
            Contribute
          </Link>
        </nav>
        <div className="hidden md:flex items-center space-x-4">
          <Notifications />
          {session ? (
            <>
              <Link href="/profile">
                <Button variant="ghost">Profile</Button>
              </Link>
              <Button onClick={handleSignOut}>Sign Out</Button>
            </>
          ) : (
            <>
              <Link href="/auth/signin">
                <Button variant="ghost">Sign In</Button>
              </Link>
              <Link href="/auth/signup">
                <Button>Connect</Button>
              </Link>
            </>
          )}
        </div>
        <div className="md:hidden flex justify-end">
          <Sheet>
            <SheetTrigger asChild>
              <Button variant="ghost" size="icon" className="md:hidden">
                <Menu className="h-5 w-5" />
                <span className="sr-only">Toggle menu</span>
              </Button>
            </SheetTrigger>
            <SheetContent side="right" className="w-[300px] sm:w-[400px]">
              <nav className="flex flex-col space-y-6 mt-6">
                <Link href="/manifesto" className="text-lg font-medium hover:underline underline-offset-4 py-2">
                  Manifesto
                </Link>
                <Link href="/forum" className="text-lg font-medium hover:underline underline-offset-4 py-2">
                  Forum
                </Link>
                <Link href="/resources" className="text-lg font-medium hover:underline underline-offset-4 py-2">
                  Resources
                </Link>
                <Link href="/contribute" className="text-lg font-medium hover:underline underline-offset-4 py-2">
                  Contribute
                </Link>
                <Notifications />
                {session ? (
                  <>
                    <Link href="/profile">
                      <Button variant="ghost" className="w-full justify-start text-lg py-2">
                        Profile
                      </Button>
                    </Link>
                    <Button onClick={handleSignOut} className="w-full justify-start text-lg py-2">
                      Sign Out
                    </Button>
                  </>
                ) : (
                  <>
                    <Link href="/auth/signin" className="w-full">
                      <Button variant="ghost" className="w-full justify-start text-lg py-2">
                        Sign In
                      </Button>
                    </Link>
                    <Link href="/auth/signup" className="w-full">
                      <Button className="w-full justify-start text-lg py-2">Connect</Button>
                    </Link>
                  </>
                )}
              </nav>
            </SheetContent>
          </Sheet>
        </div>
      </div>
    </header>
  )
}
[V0_FILE]typescriptreact:file="components/supabase-provider.tsx"
"use client"

import type React from "react"
import { createContext, useContext, useEffect, useMemo, useState } from "react"
import type { Session, SupabaseClient } from "@supabase/supabase-js"
import { getSupabaseBrowserClient } from "@/lib/supabase"

type SupabaseContext = {
  supabase: SupabaseClient | null
  session: Session | null
}

const Context = createContext<SupabaseContext | undefined>(undefined)

export function SupabaseProvider({ children }: { children: React.ReactNode }) {
  // IMPORTANT: never call browser-only code on the server
  const supabase = useMemo<SupabaseClient | null>(() => {
    if (typeof window === "undefined") return null
    try {
      return getSupabaseBrowserClient()
    } catch {
      return null
    }
  }, [])

const [session, setSession] = useState<Session | null>(null)

useEffect(() => {
    if (!supabase) return
    let mounted = true

supabase.auth.getSession().then(({ data }) => {
      if (mounted) setSession(data.session ?? null)
    })

const { data } = supabase.auth.onAuthStateChange((_event, s) => {
      if (mounted) setSession(s)
    })

return () => {
      mounted = false
      data.subscription.unsubscribe()
    }
  }, [supabase])

return <Context.Provider value={{ supabase, session }}>{children}</Context.Provider>
}

export const useSupabase = () => {
  const context = useContext(Context)
  if (context === undefined) {
    throw new Error("useSupabase must be used inside SupabaseProvider")
  }
  return context
}
[V0_FILE]typescriptreact:file="components/theme-provider.tsx"
'use client'

import * as React from 'react'
import {
  ThemeProvider as NextThemesProvider,
  type ThemeProviderProps,
} from 'next-themes'

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}
[V0_FILE]typescriptreact:file="components/ui/alert-dialog.tsx"
"use client"

import * as React from "react"
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"

import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button"

const AlertDialog = AlertDialogPrimitive.Root

const AlertDialogTrigger = AlertDialogPrimitive.Trigger

const AlertDialogPortal = AlertDialogPrimitive.Portal

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

const AlertDialogContent = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
>(({ className, ...props }, ref) => (
  <AlertDialogPortal>
    <AlertDialogOverlay />
    <AlertDialogPrimitive.Content
      ref={ref}
      className={cn(
        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
        className
      )}
      {...props}
    />
  </AlertDialogPortal>
))
AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName

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

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

const AlertDialogTitle = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Title
    ref={ref}
    className={cn("text-lg font-semibold", className)}
    {...props}
  />
))
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName

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

const AlertDialogAction = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Action>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Action
    ref={ref}
    className={cn(buttonVariants(), className)}
    {...props}
  />
))
AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName

const AlertDialogCancel = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Cancel
    ref={ref}
    className={cn(
      buttonVariants({ variant: "outline" }),
      "mt-2 sm:mt-0",
      className
    )}
    {...props}
  />
))
AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName

export {
  AlertDialog,
  AlertDialogPortal,
  AlertDialogOverlay,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogFooter,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel,
}
[V0_FILE]typescriptreact:file="components/ui/avatar.tsx"
"use client"

import * as React from "react"
import * as AvatarPrimitive from "@radix-ui/react-avatar"

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

const Avatar = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Root
    ref={ref}
    className={cn(
      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
      className
    )}
    {...props}
  />
))
Avatar.displayName = AvatarPrimitive.Root.displayName

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

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

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

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

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

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

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

export { Badge, badgeVariants }
[V0_FILE]typescriptreact:file="components/ui/button.tsx"
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"

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

const buttonVariants = cva(
  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive:
          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline:
          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
        secondary:
          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
        lg: "h-11 rounded-md px-8",
        icon: "h-10 w-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean
}

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

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

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

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

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

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

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

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

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

export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
[V0_FILE]typescriptreact:file="components/ui/dialog.tsx"
"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<typeof DialogPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Overlay
    ref={ref}
    className={cn(
      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
      className
    )}
    {...props}
  />
))
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName

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

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

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

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

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

export {
  Dialog,
  DialogPortal,
  DialogOverlay,
  DialogClose,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogDescription,
}
[V0_FILE]typescriptreact:file="components/ui/dropdown-menu.tsx"
"use client"

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

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

const DropdownMenu = DropdownMenuPrimitive.Root

const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger

const DropdownMenuGroup = DropdownMenuPrimitive.Group

const DropdownMenuPortal = DropdownMenuPrimitive.Portal

const DropdownMenuSub = DropdownMenuPrimitive.Sub

const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

import * as React from "react"
import * as SelectPrimitive from "@radix-ui/react-select"
import { Check, ChevronDown, ChevronUp } from "lucide-react"

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

const Select = SelectPrimitive.Root

const SelectGroup = SelectPrimitive.Group

const SelectValue = SelectPrimitive.Value

const SelectTrigger = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <SelectPrimitive.Trigger
    ref={ref}
    className={cn(
      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
      className
    )}
    {...props}
  >
    {children}
    <SelectPrimitive.Icon asChild>
      <ChevronDown className="h-4 w-4 opacity-50" />
    </SelectPrimitive.Icon>
  </SelectPrimitive.Trigger>
))
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName

const SelectScrollUpButton = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.ScrollUpButton
    ref={ref}
    className={cn(
      "flex cursor-default items-center justify-center py-1",
      className
    )}
    {...props}
  >
    <ChevronUp className="h-4 w-4" />
  </SelectPrimitive.ScrollUpButton>
))
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName

const SelectScrollDownButton = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.ScrollDownButton
    ref={ref}
    className={cn(
      "flex cursor-default items-center justify-center py-1",
      className
    )}
    {...props}
  >
    <ChevronDown className="h-4 w-4" />
  </SelectPrimitive.ScrollDownButton>
))
SelectScrollDownButton.displayName =
  SelectPrimitive.ScrollDownButton.displayName

const SelectContent = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
>(({ className, children, position = "popper", ...props }, ref) => (
  <SelectPrimitive.Portal>
    <SelectPrimitive.Content
      ref={ref}
      className={cn(
        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
        position === "popper" &&
          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
        className
      )}
      position={position}
      {...props}
    >
      <SelectScrollUpButton />
      <SelectPrimitive.Viewport
        className={cn(
          "p-1",
          position === "popper" &&
            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
        )}
      >
        {children}
      </SelectPrimitive.Viewport>
      <SelectScrollDownButton />
    </SelectPrimitive.Content>
  </SelectPrimitive.Portal>
))
SelectContent.displayName = SelectPrimitive.Content.displayName

const SelectLabel = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.Label
    ref={ref}
    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
    {...props}
  />
))
SelectLabel.displayName = SelectPrimitive.Label.displayName

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

<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
  </SelectPrimitive.Item>
))
SelectItem.displayName = SelectPrimitive.Item.displayName

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

export {
  Select,
  SelectGroup,
  SelectValue,
  SelectTrigger,
  SelectContent,
  SelectLabel,
  SelectItem,
  SelectSeparator,
  SelectScrollUpButton,
  SelectScrollDownButton,
}
[V0_FILE]typescriptreact:file="components/ui/separator.tsx"
"use client"

import * as React from "react"
import * as SeparatorPrimitive from "@radix-ui/react-separator"

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

const Separator = React.forwardRef<
  React.ElementRef<typeof SeparatorPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
>(
  (
    { className, orientation = "horizontal", decorative = true, ...props },
    ref
  ) => (
    <SeparatorPrimitive.Root
      ref={ref}
      decorative={decorative}
      orientation={orientation}
      className={cn(
        "shrink-0 bg-border",
        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
        className
      )}
      {...props}
    />
  )
)
Separator.displayName = SeparatorPrimitive.Root.displayName

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

import * as React from "react"
import * as SheetPrimitive from "@radix-ui/react-dialog"
import { cva, type VariantProps } from "class-variance-authority"
import { X } from "lucide-react"

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

const Sheet = SheetPrimitive.Root

const SheetTrigger = SheetPrimitive.Trigger

const SheetClose = SheetPrimitive.Close

const SheetPortal = SheetPrimitive.Portal

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

const sheetVariants = cva(
  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
  {
    variants: {
      side: {
        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
        bottom:
          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
        right:
          "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
      },
    },
    defaultVariants: {
      side: "right",
    },
  }
)

interface SheetContentProps
  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
    VariantProps<typeof sheetVariants> {}

const SheetContent = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Content>,
  SheetContentProps
>(({ side = "right", className, children, ...props }, ref) => (
  <SheetPortal>
    <SheetOverlay />
    <SheetPrimitive.Content
      ref={ref}
      className={cn(sheetVariants({ side }), className)}
      {...props}
    >
      {children}
      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
        <X className="h-4 w-4" />
        <span className="sr-only">Close</span>
      </SheetPrimitive.Close>
    </SheetPrimitive.Content>
  </SheetPortal>
))
SheetContent.displayName = SheetPrimitive.Content.displayName

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

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

const SheetTitle = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
>(({ className, ...props }, ref) => (
  <SheetPrimitive.Title
    ref={ref}
    className={cn("text-lg font-semibold text-foreground", className)}
    {...props}
  />
))
SheetTitle.displayName = SheetPrimitive.Title.displayName

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

export {
  Sheet,
  SheetPortal,
  SheetOverlay,
  SheetTrigger,
  SheetClose,
  SheetContent,
  SheetHeader,
  SheetFooter,
  SheetTitle,
  SheetDescription,
}
[V0_FILE]typescriptreact:file="components/ui/tabs.tsx"
"use client"

import * as React from "react"
import * as TabsPrimitive from "@radix-ui/react-tabs"

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

const Tabs = TabsPrimitive.Root

const TabsList = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.List
    ref={ref}
    className={cn(
      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
      className
    )}
    {...props}
  />
))
TabsList.displayName = TabsPrimitive.List.displayName

const TabsTrigger = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Trigger
    ref={ref}
    className={cn(
      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
      className
    )}
    {...props}
  />
))
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName

const TabsContent = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Content
    ref={ref}
    className={cn(
      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
      className
    )}
    {...props}
  />
))
TabsContent.displayName = TabsPrimitive.Content.displayName

export { Tabs, TabsList, TabsTrigger, TabsContent }
[V0_FILE]typescriptreact:file="components/ui/textarea.tsx"
import * as React from "react"

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

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

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

import * as React from "react"
import * as ToastPrimitives from "@radix-ui/react-toast"
import { cva, type VariantProps } from "class-variance-authority"
import { X } from "lucide-react"

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

const ToastProvider = ToastPrimitives.Provider

const ToastViewport = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Viewport>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Viewport
    ref={ref}
    className={cn(
      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
      className
    )}
    {...props}
  />
))
ToastViewport.displayName = ToastPrimitives.Viewport.displayName

const toastVariants = cva(
  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
  {
    variants: {
      variant: {
        default: "border bg-background text-foreground",
        destructive:
          "destructive group border-destructive bg-destructive text-destructive-foreground",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)

const Toast = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Root>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
    VariantProps<typeof toastVariants>
>(({ className, variant, ...props }, ref) => {
  return (
    <ToastPrimitives.Root
      ref={ref}
      className={cn(toastVariants({ variant }), className)}
      {...props}
    />
  )
})
Toast.displayName = ToastPrimitives.Root.displayName

const ToastAction = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Action>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Action
    ref={ref}
    className={cn(
      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
      className
    )}
    {...props}
  />
))
ToastAction.displayName = ToastPrimitives.Action.displayName

const ToastClose = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Close>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Close
    ref={ref}
    className={cn(
      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
      className
    )}
    toast-close=""
    {...props}
  >
    <X className="h-4 w-4" />
  </ToastPrimitives.Close>
))
ToastClose.displayName = ToastPrimitives.Close.displayName

const ToastTitle = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Title>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Title
    ref={ref}
    className={cn("text-sm font-semibold", className)}
    {...props}
  />
))
ToastTitle.displayName = ToastPrimitives.Title.displayName

const ToastDescription = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Description>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Description
    ref={ref}
    className={cn("text-sm opacity-90", className)}
    {...props}
  />
))
ToastDescription.displayName = ToastPrimitives.Description.displayName

type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>

type ToastActionElement = React.ReactElement<typeof ToastAction>

export {
  type ToastProps,
  type ToastActionElement,
  ToastProvider,
  ToastViewport,
  Toast,
  ToastTitle,
  ToastDescription,
  ToastClose,
  ToastAction,
}
[V0_FILE]typescript:file="components/ui/use-toast.ts"
"use client"

// Inspired by react-hot-toast library
import * as React from "react"

import type {
  ToastActionElement,
  ToastProps,
} from "@/components/ui/toast"

const TOAST_LIMIT = 1
const TOAST_REMOVE_DELAY = 1000000

type ToasterToast = ToastProps & {
  id: string
  title?: React.ReactNode
  description?: React.ReactNode
  action?: ToastActionElement
}

const actionTypes = {
  ADD_TOAST: "ADD_TOAST",
  UPDATE_TOAST: "UPDATE_TOAST",
  DISMISS_TOAST: "DISMISS_TOAST",
  REMOVE_TOAST: "REMOVE_TOAST",
} as const

let count = 0

function genId() {
  count = (count + 1) % Number.MAX_SAFE_INTEGER
  return count.toString()
}

type ActionType = typeof actionTypes

type Action =
  | {
      type: ActionType["ADD_TOAST"]
      toast: ToasterToast
    }
  | {
      type: ActionType["UPDATE_TOAST"]
      toast: Partial<ToasterToast>
    }
  | {
      type: ActionType["DISMISS_TOAST"]
      toastId?: ToasterToast["id"]
    }
  | {
      type: ActionType["REMOVE_TOAST"]
      toastId?: ToasterToast["id"]
    }

interface State {
  toasts: ToasterToast[]
}

const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()

const addToRemoveQueue = (toastId: string) => {
  if (toastTimeouts.has(toastId)) {
    return
  }

const timeout = setTimeout(() => {
    toastTimeouts.delete(toastId)
    dispatch({
      type: "REMOVE_TOAST",
      toastId: toastId,
    })
  }, TOAST_REMOVE_DELAY)

toastTimeouts.set(toastId, timeout)
}

export const reducer = (state: State, action: Action): State => {
  switch (action.type) {
    case "ADD_TOAST":
      return {
        ...state,
        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
      }

case "UPDATE_TOAST":
      return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === action.toast.id ? { ...t, ...action.toast } : t
        ),
      }

case "DISMISS_TOAST": {
      const { toastId } = action

// ! Side effects ! - This could be extracted into a dismissToast() action,
      // but I'll keep it here for simplicity
      if (toastId) {
        addToRemoveQueue(toastId)
      } else {
        state.toasts.forEach((toast) => {
          addToRemoveQueue(toast.id)
        })
      }

return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === toastId || toastId === undefined
            ? {
                ...t,
                open: false,
              }
            : t
        ),
      }
    }
    case "REMOVE_TOAST":
      if (action.toastId === undefined) {
        return {
          ...state,
          toasts: [],
        }
      }
      return {
        ...state,
        toasts: state.toasts.filter((t) => t.id !== action.toastId),
      }
  }
}

const listeners: Array<(state: State) => void> = []

let memoryState: State = { toasts: [] }

function dispatch(action: Action) {
  memoryState = reducer(memoryState, action)
  listeners.forEach((listener) => {
    listener(memoryState)
  })
}

type Toast = Omit<ToasterToast, "id">

function toast({ ...props }: Toast) {
  const id = genId()

const update = (props: ToasterToast) =>
    dispatch({
      type: "UPDATE_TOAST",
      toast: { ...props, id },
    })
  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })

dispatch({
    type: "ADD_TOAST",
    toast: {
      ...props,
      id,
      open: true,
      onOpenChange: (open) => {
        if (!open) dismiss()
      },
    },
  })

return {
    id: id,
    dismiss,
    update,
  }
}

function useToast() {
  const [state, setState] = React.useState<State>(memoryState)

React.useEffect(() => {
    listeners.push(setState)
    return () => {
      const index = listeners.indexOf(setState)
      if (index > -1) {
        listeners.splice(index, 1)
      }
    }
  }, [state])

return {
    ...state,
    toast,
    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
  }
}

export { useToast, toast }
[V0_FILE]plaintext:file="files"
// app/layout.tsx
// This file needs to be created based on the updates provided.
// Since there's no existing code, I'll create a basic layout structure
// and incorporate the Toaster component as instructed.

// components/supabase-provider.tsx
// This file needs to be created based on the updates provided.
// Since there's no existing code, I'll create a basic SupabaseProvider
// and incorporate the useEffect hook as instructed.

// app/forum/page.tsx
// This file needs to be created based on the updates provided.
// Since there's no existing code, I'll create a basic page structure
// and incorporate the toast import change as instructed.

// app/contribute/page.tsx
// This file needs to be created based on the updates provided.
// Since there's no existing code, I'll create a basic page structure
// and incorporate the toast import change, the resource form, and the handleSubmit function as instructed.

// components/MediaUpload.tsx
// This file needs to be created based on the updates provided.
// Since there's no existing code, I'll create a basic MediaUpload component
// and incorporate the session, remove the bucket creation, replace the uploadMedia function, and update the button as instructed.

// app/profile/page.tsx
// This file needs to be created based on the updates provided.
// Since there's no existing code, I'll create a basic page structure
// and incorporate the toast import change as instructed.

// hooks/use-toast.tsx
// This file needs to be created because it is referenced in the updates.

// ui/toaster.tsx
// This file needs to be created because it is referenced in the updates.

// Here are the files with the updates applied:

// app/layout.tsx
import { Inter } from 'next/font/google'
import './globals.css'
import { SupabaseProvider } from "@/components/supabase-provider"
import SiteHeader from "@/components/SiteHeader"
import SiteFooter from "@/components/SiteFooter"
import { Toaster } from "@/components/ui/toaster"

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

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={`${inter.className} flex flex-col min-h-screen bg-gray-50`}>
        <SupabaseProvider>
          <div className="flex flex-col min-h-screen">
            <SiteHeader />
            <main className="flex-grow w-full">
              <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-8 max-w-5xl">{children}</div>
            </main>
            <SiteFooter />
          </div>
          <Toaster />
        </SupabaseProvider>
      </body>
    </html>
  )
}

// components/supabase-provider.tsx
"use client"

import { createContext, useContext, useState, useEffect, ReactNode } from 'react'
import { createClientComponentClient } from '@supabase/auth-helpers-nextjs'

const SupabaseContext = createContext<any>(undefined)

export const SupabaseProvider = ({ children }: { children: ReactNode }) => {
  const [supabase] = useState(() => createClientComponentClient())
  const [session, setSession] = useState(null)

useEffect(() => {
    // Set the current session on first load
    supabase.auth.getSession().then(({ data }) => {
      setSession(data.session ?? null)
    })

// Subscribe to auth changes
    const {
      data: { subscription },
    } = supabase.auth.onAuthStateChange((_event, session) => {
      setSession(session)
    })

return () => subscription.unsubscribe()
  }, [])

const value = { supabase, session }
  return <SupabaseContext.Provider value={value}>{children}</SupabaseContext.Provider>
}

export const useSupabase = () => {
  return useContext(SupabaseContext)
}

// app/forum/page.tsx
import { toast } from "@/hooks/use-toast"

export default function ForumPage() {
  return (
    <div>
      <h1>Forum Page</h1>
      <button onClick={() => toast({ title: "Hello" })}>Test Toast</button>
    </div>
  )
}

// app/contribute/page.tsx
"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { TabsContent } from "@/components/ui/tabs"
import { Label } from "@/components/ui/label"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Button } from "@/components/ui/button"
import { useSupabase } from "@/components/supabase-provider"
import { toast } from "@/hooks/use-toast"

export default function ContributePage() {
  const { supabase, session } = useSupabase()
  const [submitted, setSubmitted] = useState(false)
  const [guestName, setGuestName] = useState("")
  const [ideaImage, setIdeaImage] = useState({ publicUrl: "", filePath: "" })
  const [locationImage, setLocationImage] = useState({ publicUrl: "", filePath: "" })

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

const form = e.target as HTMLFormElement
    const formData = new FormData(form)
    // The nearest tab panel has role="tabpanel" and an id equal to the value ("idea" | "resource" | "contact" | "location" | "donate")
    const tabId = form.closest('[role="tabpanel"]')?.id

try {
      // Convert FormData to plain object
      const data: Record<string, any> = {}
      formData.forEach((value, key) => {
        data[key] = value
      })

const userId = session?.user.id || null
      const guestNameForForm = session ? null : guestName

if (tabId === "idea") {
        // ideas: title, description, image_url/path, user_id or guest_name
        data.user_id = userId
        data.guest_name = guestNameForForm
        data.image_url = ideaImage.publicUrl || null
        data.image_path = ideaImage.filePath || null
        await supabase.from("ideas").insert(data)
      } else if (tabId === "resource") {
        // resources: title, category, description, tags[], location, link, user_id or guest_name
        const tags =
          typeof data.tags === "string"
            ? data.tags
                .split(",")
                .map((t) => t.trim())
                .filter(Boolean)
            : []
        const payload = {
          title: data.title,
          category: data.category,
          description: data.description,
          tags,
          location: data.location || null,
          link: data.link || null,
          user_id: userId,
          guest_name: guestNameForForm,
        }
        await supabase.from("resources").insert(payload)
      } else if (tabId === "contact") {
        // contacts: name, role, email, phone, message, user_id or guest_name
        const payload = {
          name: data.name,
          role: data.role,
          email: data.email,
          phone: data.phone || null,
          message: data.message,
          user_id: userId,
          guest_name: guestNameForForm,
        }
        await supabase.from("contacts").insert(payload)
      } else if (tabId === "location") {
        // locations: name, address, description, image_url/path, user_id or guest_name
        const payload = {
          name: data.name,
          address: data.address,
          description: data.description,
          image_url: locationImage.publicUrl || null,
          image_path: locationImage.filePath || null,
          user_id: userId,
          guest_name: guestNameForForm,
        }
        await supabase.from("locations").insert(payload)
      }

setSubmitted(true)
      toast({
        title: "Contribution submitted",
        description: "Thank you for your contribution!",
      })
      setTimeout(() => setSubmitted(false), 3000)
      form.reset()
      setIdeaImage({ publicUrl: "", filePath: "" })
      setLocationImage({ publicUrl: "", filePath: "" })
      setGuestName("")
    } catch (error) {
      console.error("Error submitting contribution:", error)
      toast({
        title: "Error submitting contribution",
        description: "There was an error submitting your contribution. Please try again.",
        variant: "destructive",
      })
    }
  }

return (
    <div>
      <h1>Contribute Page</h1>
      {/* Example Tabs - Replace with actual tabs */}
      <TabsContent value="resource">
        <Card>
          <CardHeader>
            <CardTitle>Share a Resource</CardTitle>
          </CardHeader>
          <CardContent>
            <form onSubmit={handleSubmit} className="space-y-4">
              {!session && (
                <div className="space-y-2">
                  <Label htmlFor="guest-name">Your Name (for guests)</Label>
                  <Input
                    id="guest-name"
                    name="guest_name"
                    value={guestName}
                    onChange={(e) => setGuestName(e.target.value)}
                    placeholder="Enter your name"
                    required
                  />
                </div>
              )}
              <div className="space-y-2">
                <Label htmlFor="resource-title">Title</Label>
                <Input id="resource-title" name="title" placeholder="e.g., EcoVillage Network" required />
              </div>
              <div className="space-y-2">
                <Label htmlFor="resource-category">Category</Label>
                <Input id="resource-category" name="category" placeholder="e.g., Community, Tool, Knowledge" required />
              </div>
              <div className="space-y-2">
                <Label htmlFor="resource-description">Description</Label>
                <Textarea
                  id="resource-description"
                  name="description"
                  placeholder="Tell us about this resource..."
                  className="min-h-[100px]"
                  required
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="resource-tags">Tags (comma-separated)</Label>
                <Input id="resource-tags" name="tags" placeholder="e.g., permaculture, solar, open-source" />
              </div>
              <div className="space-y-2">
                <Label htmlFor="resource-location">Location (optional)</Label>
                <Input id="resource-location" name="location" placeholder="City / Region / Country" />
              </div>
              <div className="space-y-2">
                <Label htmlFor="resource-link">Link (optional)</Label>
                <Input id="resource-link" name="link" type="url" placeholder="https://example.org" />
              </div>
              <Button type="submit">{submitted ? "Thank you!" : "Submit Resource"}</Button>
            </form>
          </CardContent>
        </Card>
      </TabsContent>
    </div>
  )
}

// components/MediaUpload.tsx
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Upload } from 'lucide-react'
import { useSupabase } from "@/components/supabase-provider"
import { toast } from "@/hooks/use-toast"

interface MediaUploadProps {
  onUpload: (data: { publicUrl: string; filePath: string }) => void
}

export function MediaUpload({ onUpload }: MediaUploadProps) {
  const [uploading, setUploading] = useState(false)
  const [preview, setPreview] = useState<string | null>(null)
  const { supabase, session } = useSupabase()

const uploadMedia = async (event: React.ChangeEvent<HTMLInputElement>) => {
    try {
      setUploading(true)

if (!session) {
        toast({
          title: "Sign in required",
          description: "Please sign in to upload images. Guests can still post text.",
          variant: "destructive",
        })
        return
      }

if (!event.target.files || event.target.files.length === 0) {
        throw new Error("You must select an image to upload.")
      }

const file = event.target.files[0]
      const fileExt = file.name.split(".").pop()
      const fileName = `${Date.now()}-${Math.random().toString(36).substring(2)}.${fileExt}`
      const filePath = `uploads/${fileName}`

const { error: uploadError } = await supabase.storage.from("media").upload(filePath, file, {
        cacheControl: "3600",
        upsert: false,
      })

if (uploadError) {
        const msg = String(uploadError.message || uploadError)
        if (msg.toLowerCase().includes("not found") || msg.toLowerCase().includes("bucket")) {
          toast({
            title: "Storage bucket missing",
            description:
              "Create a public bucket named 'media' in Supabase Storage and allow authenticated uploads. Then try again.",
            variant: "destructive",
          })
        } else {
          toast({
            title: "Upload failed",
            description: msg || "There was an error uploading your image.",
            variant: "destructive",
          })
        }
        return
      }

const {
        data: { publicUrl },
      } = supabase.storage.from("media").getPublicUrl(filePath)

onUpload({ publicUrl, filePath })

const objectUrl = URL.createObjectURL(file)
      setPreview(objectUrl)

toast({
        title: "Upload successful",
        description: "Your image has been uploaded successfully.",
      })
    } catch (error: any) {
      console.error("Error uploading media:", error)
      toast({
        title: "Upload failed",
        description: error?.message || "There was an error uploading your image.",
        variant: "destructive",
      })
    } finally {
      setUploading(false)
    }
  }

return (
    <div>
      <input type="file" id="media-upload" accept="image/*" onChange={uploadMedia} className="hidden" />
      <label htmlFor="media-upload">
        <Button variant="outline" disabled={uploading || !session} asChild>
          <span className="flex items-center gap-2">
            {uploading ? (
              <>
                <div className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
                Uploading...
              </>
            ) : (
              <>
                <Upload className="h-4 w-4" />
                {session ? "Upload Media" : "Sign in to upload"}
              </>
            )}
          </span>
        </Button>
      </label>
      {!session && <p className="text-xs text-muted-foreground">Guests can still post text without images.</p>}
      {preview && <img src={preview || "/placeholder.svg"} alt="Preview" className="mt-2 max-h-40" />}
    </div>
  )
}

// app/profile/page.tsx
import { toast } from "@/hooks/use-toast"

export default function ProfilePage() {
  return (
    <div>
      <h1>Profile Page</h1>
      <button onClick={() => toast({ title: "Hello from Profile" })}>Test Toast</button>
    </div>
  )
}

// hooks/use-toast.tsx
import { useToast } from "@/components/ui/use-toast"

export { useToast, toast } from "@/components/ui/use-toast"

// ui/toaster.tsx
import {
  Toast,
  ToastClose,
  ToastDescription,
  ToastProvider,
  ToastTitle,
  ToastViewport,
} from "@/components/ui/toast"

export {
  Toast,
  ToastClose,
  ToastDescription,
  ToastProvider,
  ToastTitle,
  ToastViewport,
}

// ui/use-toast.tsx
import * as React from "react"

import { useToast as useToastHook } from "@/components/ui/use-toast"

export { useToastHook as useToast }

type ToastProps = {
  title?: string
  description?: string
  variant?: "default" | "destructive"
}

const toast = (props: ToastProps) => {
  useToastHook().toast(props)
}

export { toast }
[V0_FILE]typescript:file="lib/countries.ts"
export const countries = [
  { name: "Afghanistan", code: "AF" },
  { name: "Albania", code: "AL" },
  { name: "Algeria", code: "DZ" },
  { name: "Andorra", code: "AD" },
  { name: "Angola", code: "AO" },
  { name: "Antigua and Barbuda", code: "AG" },
  { name: "Argentina", code: "AR" },
  { name: "Armenia", code: "AM" },
  { name: "Australia", code: "AU" },
  { name: "Austria", code: "AT" },
  { name: "Azerbaijan", code: "AZ" },
  { name: "Bahamas", code: "BS" },
  { name: "Bahrain", code: "BH" },
  { name: "Bangladesh", code: "BD" },
  { name: "Barbados", code: "BB" },
  { name: "Belarus", code: "BY" },
  { name: "Belgium", code: "BE" },
  { name: "Belize", code: "BZ" },
  { name: "Benin", code: "BJ" },
  { name: "Bhutan", code: "BT" },
  { name: "Bolivia", code: "BO" },
  { name: "Bosnia and Herzegovina", code: "BA" },
  { name: "Botswana", code: "BW" },
  { name: "Brazil", code: "BR" },
  { name: "Brunei", code: "BN" },
  { name: "Bulgaria", code: "BG" },
  { name: "Burkina Faso", code: "BF" },
  { name: "Burundi", code: "BI" },
  { name: "Cabo Verde", code: "CV" },
  { name: "Cambodia", code: "KH" },
  { name: "Cameroon", code: "CM" },
  { name: "Canada", code: "CA" },
  { name: "Central African Republic", code: "CF" },
  { name: "Chad", code: "TD" },
  { name: "Chile", code: "CL" },
  { name: "China", code: "CN" },
  { name: "Colombia", code: "CO" },
  { name: "Comoros", code: "KM" },
  { name: "Congo (Congo-Brazzaville)", code: "CG" },
  { name: "Congo (DRC)", code: "CD" },
  { name: "Costa Rica", code: "CR" },
  { name: "Croatia", code: "HR" },
  { name: "Cuba", code: "CU" },
  { name: "Cyprus", code: "CY" },
  { name: "Czechia", code: "CZ" },
  { name: "Denmark", code: "DK" },
  { name: "Djibouti", code: "DJ" },
  { name: "Dominica", code: "DM" },
  { name: "Dominican Republic", code: "DO" },
  { name: "Ecuador", code: "EC" },
  { name: "Egypt", code: "EG" },
  { name: "El Salvador", code: "SV" },
  { name: "Equatorial Guinea", code: "GQ" },
  { name: "Eritrea", code: "ER" },
  { name: "Estonia", code: "EE" },
  { name: "Eswatini", code: "SZ" },
  { name: "Ethiopia", code: "ET" },
  { name: "Fiji", code: "FJ" },
  { name: "Finland", code: "FI" },
  { name: "France", code: "FR" },
  { name: "Gabon", code: "GA" },
  { name: "Gambia", code: "GM" },
  { name: "Georgia", code: "GE" },
  { name: "Germany", code: "DE" },
  { name: "Ghana", code: "GH" },
  { name: "Greece", code: "GR" },
  { name: "Grenada", code: "GD" },
  { name: "Guatemala", code: "GT" },
  { name: "Guinea", code: "GN" },
  { name: "Guinea-Bissau", code: "GW" },
  { name: "Guyana", code: "GY" },
  { name: "Haiti", code: "HT" },
  { name: "Holy See", code: "VA" },
  { name: "Honduras", code: "HN" },
  { name: "Hungary", code: "HU" },
  { name: "Iceland", code: "IS" },
  { name: "India", code: "IN" },
  { name: "Indonesia", code: "ID" },
  { name: "Iran", code: "IR" },
  { name: "Iraq", code: "IQ" },
  { name: "Ireland", code: "IE" },
  { name: "Israel", code: "IL" },
  { name: "Italy", code: "IT" },
  { name: "Jamaica", code: "JM" },
  { name: "Japan", code: "JP" },
  { name: "Jordan", code: "JO" },
  { name: "Kazakhstan", code: "KZ" },
  { name: "Kenya", code: "KE" },
  { name: "Kiribati", code: "KI" },
  { name: "Korea (North)", code: "KP" },
  { name: "Korea (South)", code: "KR" },
  { name: "Kuwait", code: "KW" },
  { name: "Kyrgyzstan", code: "KG" },
  { name: "Laos", code: "LA" },
  { name: "Latvia", code: "LV" },
  { name: "Lebanon", code: "LB" },
  { name: "Lesotho", code: "LS" },
  { name: "Liberia", code: "LR" },
  { name: "Libya", code: "LY" },
  { name: "Liechtenstein", code: "LI" },
  { name: "Lithuania", code: "LT" },
  { name: "Luxembourg", code: "LU" },
  { name: "Madagascar", code: "MG" },
  { name: "Malawi", code: "MW" },
  { name: "Malaysia", code: "MY" },
  { name: "Maldives", code: "MV" },
  { name: "Mali", code: "ML" },
  { name: "Malta", code: "MT" },
  { name: "Marshall Islands", code: "MH" },
  { name: "Mauritania", code: "MR" },
  { name: "Mauritius", code: "MU" },
  { name: "Mexico", code: "MX" },
  { name: "Micronesia", code: "FM" },
  { name: "Moldova", code: "MD" },
  { name: "Monaco", code: "MC" },
  { name: "Mongolia", code: "MN" },
  { name: "Montenegro", code: "ME" },
  { name: "Morocco", code: "MA" },
  { name: "Mozambique", code: "MZ" },
  { name: "Myanmar (Burma)", code: "MM" },
  { name: "Namibia", code: "NA" },
  { name: "Nauru", code: "NR" },
  { name: "Nepal", code: "NP" },
  { name: "Netherlands", code: "NL" },
  { name: "New Zealand", code: "NZ" },
  { name: "Nicaragua", code: "NI" },
  { name: "Niger", code: "NE" },
  { name: "Nigeria", code: "NG" },
  { name: "North Macedonia", code: "MK" },
  { name: "Norway", code: "NO" },
  { name: "Oman", code: "OM" },
  { name: "Pakistan", code: "PK" },
  { name: "Palau", code: "PW" },
  { name: "Palestine", code: "PS" },
  { name: "Panama", code: "PA" },
  { name: "Papua New Guinea", code: "PG" },
  { name: "Paraguay", code: "PY" },
  { name: "Peru", code: "PE" },
  { name: "Philippines", code: "PH" },
  { name: "Poland", code: "PL" },
  { name: "Portugal", code: "PT" },
  { name: "Qatar", code: "QA" },
  { name: "Romania", code: "RO" },
  { name: "Russia", code: "RU" },
  { name: "Rwanda", code: "RW" },
  { name: "Saint Kitts and Nevis", code: "KN" },
  { name: "Saint Lucia", code: "LC" },
  { name: "Saint Vincent and the Grenadines", code: "VC" },
  { name: "Samoa", code: "WS" },
  { name: "San Marino", code: "SM" },
  { name: "Sao Tome and Principe", code: "ST" },
  { name: "Saudi Arabia", code: "SA" },
  { name: "Senegal", code: "SN" },
  { name: "Serbia", code: "RS" },
  { name: "Seychelles", code: "SC" },
  { name: "Sierra Leone", code: "SL" },
  { name: "Singapore", code: "SG" },
  { name: "Slovakia", code: "SK" },
  { name: "Slovenia", code: "SI" },
  { name: "Solomon Islands", code: "SB" },
  { name: "Somalia", code: "SO" },
  { name: "South Africa", code: "ZA" },
  { name: "South Sudan", code: "SS" },
  { name: "Spain", code: "ES" },
  { name: "Sri Lanka", code: "LK" },
  { name: "Sudan", code: "SD" },
  { name: "Suriname", code: "SR" },
  { name: "Sweden", code: "SE" },
  { name: "Switzerland", code: "CH" },
  { name: "Syria", code: "SY" },
  { name: "Tajikistan", code: "TJ" },
  { name: "Tanzania", code: "TZ" },
  { name: "Thailand", code: "TH" },
  { name: "Timor-Leste", code: "TL" },
  { name: "Togo", code: "TG" },
  { name: "Tonga", code: "TO" },
  { name: "Trinidad and Tobago", code: "TT" },
  { name: "Tunisia", code: "TN" },
  { name: "Turkey", code: "TR" },
  { name: "Turkmenistan", code: "TM" },
  { name: "Tuvalu", code: "TV" },
  { name: "Uganda", code: "UG" },
  { name: "Ukraine", code: "UA" },
  { name: "United Arab Emirates", code: "AE" },
  { name: "United Kingdom", code: "GB" },
  { name: "United States", code: "US" },
  { name: "Uruguay", code: "UY" },
  { name: "Uzbekistan", code: "UZ" },
  { name: "Vanuatu", code: "VU" },
  { name: "Venezuela", code: "VE" },
  { name: "Vietnam", code: "VN" },
  { name: "Yemen", code: "YE" },
  { name: "Zambia", code: "ZM" },
  { name: "Zimbabwe", code: "ZW" },
]
[V0_FILE]typescript:file="lib/supabase.ts"
import { createBrowserClient } from "@supabase/ssr"
import type { SupabaseClient } from "@supabase/supabase-js"

let browserClient: SupabaseClient | null = null

export function getSupabaseBrowserClient(): SupabaseClient {
  if (typeof window === "undefined") {
    throw new Error("getSupabaseBrowserClient must be called in the browser")
  }
  if (!browserClient) {
    const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL
    const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
    if (!supabaseUrl || !supabaseAnonKey) {
      // Surface a clear error when envs are missing; this is a very common cause of "silent" failures
      throw new Error(
        "Missing NEXT_PUBLIC_SUPABASE_URL or NEXT_PUBLIC_SUPABASE_ANON_KEY. Set them in your Vercel project settings.",
      )
    }
    browserClient = createBrowserClient(supabaseUrl, supabaseAnonKey)
  }
  return browserClient
}
[V0_FILE]typescript:file="lib/utils.ts"
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

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

export default nextConfig
[V0_FILE]json:file="package.json"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "build": "next build",
    "dev": "next dev",
    "lint": "next lint",
    "start": "next start"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.9.1",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@supabase/ssr": "latest",
    "@supabase/supabase-js": "latest",
    "@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",
    "geist": "^1.3.1",
    "input-otp": "1.4.1",
    "leaflet": "latest",
    "lucide-react": "^0.454.0",
    "next": "15.2.4",
    "next-themes": "^0.4.4",
    "qrcode.react": "latest",
    "react": "^19",
    "react-day-picker": "9.8.0",
    "react-dom": "^19",
    "react-hook-form": "^7.54.1",
    "react-leaflet": "latest",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.0",
    "sonner": "^1.7.1",
    "tailwind-merge": "^2.5.5",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.6",
    "zod": "^3.24.1"
  },
  "devDependencies": {
    "@types/node": "^22",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "postcss": "^8.5",
    "tailwindcss": "^3.4.17",
    "typescript": "^5"
  }
}
[V0_FILE]javascript:file="postcss.config.mjs"
/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    tailwindcss: {},
  },
};

export default config;
[V0_FILE]sql:file="scripts/000_prereqs.sql"
-- Required extensions for UUID generation and crypto functions
create extension if not exists "pgcrypto";
[V0_FILE]sql:file="scripts/001_schema_profiles.sql"
-- Profiles table
create table if not exists public.profiles (
  id uuid primary key references auth.users(id) on delete cascade,
  username text,
  full_name text,
  avatar_url text,
  avatar_path text,
  bio text,
  location text,
  phone text,
  interests text,
  created_at timestamp with time zone default now(),
  updated_at timestamp with time zone default now()
);

alter table public.profiles enable row level security;

-- Allow anyone to read profiles (you can restrict later)
create policy "Profiles are readable by everyone"
on public.profiles for select
using (true);

-- Only the user can insert their own profile
create policy "Users can insert their own profile"
on public.profiles for insert
with check (auth.uid() = id);

-- Only the user can update their own profile
create policy "Users can update their own profile"
on public.profiles for update
using (auth.uid() = id)
with check (auth.uid() = id);

-- Only the user can delete their own profile
create policy "Users can delete their own profile"
on public.profiles for delete
using (auth.uid() = id);
[V0_FILE]sql:file="scripts/002_schema_forum.sql"
-- Forum posts
create table if not exists public.forum_posts (
  id uuid primary key default gen_random_uuid(),
  content text not null,
  image_url text,
  image_path text,
  user_id uuid references auth.users(id),
  guest_name text,
  created_at timestamp with time zone default now()
);

-- Comments
create table if not exists public.forum_comments (
  id uuid primary key default gen_random_uuid(),
  post_id uuid not null references public.forum_posts(id) on delete cascade,
  content text not null,
  user_id uuid references auth.users(id),
  guest_name text,
  created_at timestamp with time zone default now()
);

-- Likes
create table if not exists public.forum_likes (
  id uuid primary key default gen_random_uuid(),
  post_id uuid not null references public.forum_posts(id) on delete cascade,
  user_id uuid not null references auth.users(id),
  created_at timestamp with time zone default now(),
  unique (post_id, user_id)
);

alter table public.forum_posts enable row level security;
alter table public.forum_comments enable row level security;
alter table public.forum_likes enable row level security;

-- Posts: readable by all
create policy "forum_posts_select_all" on public.forum_posts for select using (true);

-- Posts: insert by authenticated (own user_id) or guest (user_id is null with guest_name)
create policy "forum_posts_insert_auth_or_guest" on public.forum_posts for insert
with check (
  (auth.uid() is not null and user_id = auth.uid())
  or
  (auth.uid() is null and user_id is null and guest_name is not null)
);

-- Posts: update/delete only by owner
create policy "forum_posts_update_own" on public.forum_posts for update
using (user_id = auth.uid()) with check (user_id = auth.uid());

create policy "forum_posts_delete_own" on public.forum_posts for delete
using (user_id = auth.uid());

-- Comments: readable by all
create policy "forum_comments_select_all" on public.forum_comments for select using (true);

-- Comments: insert by authenticated (own user_id) or guest (user_id is null with guest_name)
create policy "forum_comments_insert_auth_or_guest" on public.forum_comments for insert
with check (
  (auth.uid() is not null and user_id = auth.uid())
  or
  (auth.uid() is null and user_id is null and guest_name is not null)
);

-- Comments: update/delete only by owner
create policy "forum_comments_update_own" on public.forum_comments for update
using (user_id = auth.uid()) with check (user_id = auth.uid());

create policy "forum_comments_delete_own" on public.forum_comments for delete
using (user_id = auth.uid());

-- Likes: readable by all
create policy "forum_likes_select_all" on public.forum_likes for select using (true);

-- Likes: only authenticated users can like/unlike, and only for themselves
create policy "forum_likes_insert_auth_only" on public.forum_likes for insert
with check (user_id = auth.uid());

create policy "forum_likes_delete_own" on public.forum_likes for delete
using (user_id = auth.uid());

-- Helpful indexes
create index if not exists forum_posts_created_at_idx on public.forum_posts(created_at desc);
create index if not exists forum_comments_post_id_idx on public.forum_comments(post_id);
create index if not exists forum_likes_post_id_idx on public.forum_likes(post_id);
[V0_FILE]sql:file="scripts/003_schema_resources.sql"
-- Resources
create table if not exists public.resources (
  id uuid primary key default gen_random_uuid(),
  title text not null,
  category text not null,
  description text not null,
  tags text[] not null default '{}',
  location text,
  link text,
  user_id uuid references auth.users(id),
  guest_name text,
  created_at timestamp with time zone default now()
);

alter table public.resources enable row level security;

-- Readable by all
create policy "resources_select_all" on public.resources for select using (true);

-- Insert by authenticated (own user_id) or guest (user_id null with guest_name)
create policy "resources_insert_auth_or_guest" on public.resources for insert
with check (
  (auth.uid() is not null and user_id = auth.uid())
  or
  (auth.uid() is null and user_id is null and guest_name is not null)
);

-- Update/delete only by owner
create policy "resources_update_own" on public.resources for update
using (user_id = auth.uid()) with check (user_id = auth.uid());

create policy "resources_delete_own" on public.resources for delete
using (user_id = auth.uid());

create index if not exists resources_created_at_idx on public.resources(created_at desc);
create index if not exists resources_tags_gin on public.resources using gin (tags);
[V0_FILE]sql:file="scripts/004_schema_contributions.sql"
-- Ideas
create table if not exists public.ideas (
  id uuid primary key default gen_random_uuid(),
  title text not null,
  description text not null,
  image_url text,
  image_path text,
  user_id uuid references auth.users(id),
  guest_name text,
  created_at timestamp with time zone default now()
);

-- Contacts
create table if not exists public.contacts (
  id uuid primary key default gen_random_uuid(),
  name text not null,
  role text not null,
  email text not null,
  phone text,
  message text not null,
  user_id uuid references auth.users(id),
  guest_name text,
  created_at timestamp with time zone default now()
);

-- Locations
create table if not exists public.locations (
  id uuid primary key default gen_random_uuid(),
  name text not null,
  address text not null,
  description text not null,
  image_url text,
  image_path text,
  user_id uuid references auth.users(id),
  guest_name text,
  created_at timestamp with time zone default now()
);

alter table public.ideas enable row level security;
alter table public.contacts enable row level security;
alter table public.locations enable row level security;

-- Readable by all
create policy "ideas_select_all" on public.ideas for select using (true);
create policy "contacts_select_all" on public.contacts for select using (true);
create policy "locations_select_all" on public.locations for select using (true);

-- Insert: authenticated with user_id = auth.uid(), or guest with user_id null and guest_name present
create policy "ideas_insert_auth_or_guest" on public.ideas for insert
with check (
  (auth.uid() is not null and user_id = auth.uid())
  or (auth.uid() is null and user_id is null and guest_name is not null)
);

create policy "contacts_insert_auth_or_guest" on public.contacts for insert
with check (
  (auth.uid() is not null and user_id = auth.uid())
  or (auth.uid() is null and user_id is null and guest_name is not null)
);

create policy "locations_insert_auth_or_guest" on public.locations for insert
with check (
  (auth.uid() is not null and user_id = auth.uid())
  or (auth.uid() is null and user_id is null and guest_name is not null)
);

-- Update/Delete only by owner (applies mostly if authenticated users want to edit their own entries)
create policy "ideas_update_own" on public.ideas for update using (user_id = auth.uid()) with check (user_id = auth.uid());
create policy "ideas_delete_own" on public.ideas for delete using (user_id = auth.uid());

create policy "contacts_update_own" on public.contacts for update using (user_id = auth.uid()) with check (user_id = auth.uid());
create policy "contacts_delete_own" on public.contacts for delete using (user_id = auth.uid());

create policy "locations_update_own" on public.locations for update using (user_id = auth.uid()) with check (user_id = auth.uid());
create policy "locations_delete_own" on public.locations for delete using (user_id = auth.uid());
[V0_FILE]sql:file="scripts/005_schema_notifications.sql"
-- Notifications (optional per-user or global)
create table if not exists public.notifications (
  id uuid primary key default gen_random_uuid(),
  content text not null,
  user_id uuid references auth.users(id), -- nullable for global
  is_read boolean not null default false,
  created_at timestamp with time zone default now()
);

alter table public.notifications enable row level security;

-- Read: show global (user_id is null) or user-specific
create policy "notifications_select_scoped" on public.notifications for select
using (user_id is null or user_id = auth.uid());

-- Insert: allow authenticated users to create notifications for themselves or global (optional)
create policy "notifications_insert_auth" on public.notifications for insert
with check (
  auth.uid() is not null
  and (user_id is null or user_id = auth.uid())
);

-- Update: only owner can mark their own as read
create policy "notifications_update_own" on public.notifications for update
using (user_id = auth.uid()) with check (user_id = auth.uid());
[V0_FILE]sql:file="scripts/006_enable_realtime.sql"
-- Enable Realtime on key tables
alter publication supabase_realtime add table public.forum_posts;
alter publication supabase_realtime add table public.forum_comments;
alter publication supabase_realtime add table public.notifications;
[V0_FILE]sql:file="scripts/007_storage_policies.sql"
-- STORAGE: You must create a public bucket named 'media' in Supabase UI first.
-- Then run policies below to allow authenticated users to upload and read.

-- Allow read by anyone
create policy "media_read" on storage.objects for select
using ( bucket_id = 'media' );

-- Allow authenticated users to upload to 'media'
create policy "media_insert_auth" on storage.objects for insert
with check (
  bucket_id = 'media' and auth.role() = 'authenticated'
);

-- Allow authenticated users to update/delete only their own objects (by naming convention or metadata).
-- If you prefix path with user id you can enforce ownership. Here we allow any authenticated update/delete.
create policy "media_update_auth" on storage.objects for update
using ( bucket_id = 'media' and auth.role() = 'authenticated' );

create policy "media_delete_auth" on storage.objects for delete
using ( bucket_id = 'media' and auth.role() = 'authenticated' );
[V0_FILE]sql:file="scripts/008_fix_foreign_keys.sql"
-- Ensure foreign keys reference profiles(id) so Supabase can join using:
-- profiles:profiles!<constraint_name> (...) as used in your forum page.

-- forum_posts.user_id -> profiles.id
alter table if exists public.forum_posts
  drop constraint if exists forum_posts_user_id_fkey;
alter table public.forum_posts
  add constraint forum_posts_user_id_fkey
  foreign key (user_id) references public.profiles(id) on delete set null;

-- forum_comments.user_id -> profiles.id
alter table if exists public.forum_comments
  drop constraint if exists forum_comments_user_id_fkey;
alter table public.forum_comments
  add constraint forum_comments_user_id_fkey
  foreign key (user_id) references public.profiles(id) on delete set null;

-- forum_likes.user_id -> profiles.id
alter table if exists public.forum_likes
  drop constraint if exists forum_likes_user_id_fkey;
alter table public.forum_likes
  add constraint forum_likes_user_id_fkey
  foreign key (user_id) references public.profiles(id) on delete set null;

-- resources.user_id -> profiles.id
alter table if exists public.resources
  drop constraint if exists resources_user_id_fkey;
alter table public.resources
  add constraint resources_user_id_fkey
  foreign key (user_id) references public.profiles(id) on delete set null;

-- ideas.user_id -> profiles.id
alter table if exists public.ideas
  drop constraint if exists ideas_user_id_fkey;
alter table public.ideas
  add constraint ideas_user_id_fkey
  foreign key (user_id) references public.profiles(id) on delete set null;

-- contacts.user_id -> profiles.id
alter table if exists public.contacts
  drop constraint if exists contacts_user_id_fkey;
alter table public.contacts
  add constraint contacts_user_id_fkey
  foreign key (user_id) references public.profiles(id) on delete set null;

-- locations.user_id -> profiles.id
alter table if exists public.locations
  drop constraint if exists locations_user_id_fkey;
alter table public.locations
  add constraint locations_user_id_fkey
  foreign key (user_id) references public.profiles(id) on delete set null;

-- Keep profiles.updated_at fresh automatically
create or replace function public.set_updated_at()
returns trigger
language plpgsql
as $$
begin
  new.updated_at = now();
  return new;
end;
$$;

drop trigger if exists profiles_set_updated_at on public.profiles;
create trigger profiles_set_updated_at
before update on public.profiles
for each row execute function public.set_updated_at();
[V0_FILE]sql:file="scripts/009_mirror_to_forum.sql"
-- Extend forum_posts with a type and source pointers
alter table if exists public.forum_posts
  add column if not exists type text not null default 'forum',
  add column if not exists source_table text,
  add column if not exists source_id uuid;

create index if not exists forum_posts_source_idx on public.forum_posts(source_table, source_id);

-- Helper to truncate safely
create or replace function public._truncate_text(txt text, max_len int)
returns text language sql immutable as $$
  select case when length(coalesce(txt, '')) <= max_len then txt else substr(txt, 1, max_len) || '…' end
$$;

-- Mirror IDEA -> forum_posts
create or replace function public.mirror_idea_to_forum()
returns trigger language plpgsql security definer as $$
begin
  insert into public.forum_posts (content, image_url, user_id, guest_name, type, source_table, source_id)
  values (
    'Idea: ' || coalesce(new.title, '') || ' — ' || public._truncate_text(new.description, 240),
    new.image_url,
    new.user_id,
    new.guest_name,
    'idea',
    'ideas',
    new.id
  );
  return new;
end;
$$;

drop trigger if exists trg_mirror_idea on public.ideas;
create trigger trg_mirror_idea
after insert on public.ideas
for each row execute function public.mirror_idea_to_forum();

-- Mirror LOCATION -> forum_posts
create or replace function public.mirror_location_to_forum()
returns trigger language plpgsql security definer as $$
begin
  insert into public.forum_posts (content, image_url, user_id, guest_name, type, source_table, source_id)
  values (
    'Suggested location: ' || coalesce(new.name, '') || ' (' || coalesce(new.address, '') || ') — ' || public._truncate_text(new.description, 240),
    new.image_url,
    new.user_id,
    new.guest_name,
    'location',
    'locations',
    new.id
  );
  return new;
end;
$$;

drop trigger if exists trg_mirror_location on public.locations;
create trigger trg_mirror_location
after insert on public.locations
for each row execute function public.mirror_location_to_forum();

-- Mirror RESOURCE -> forum_posts
create or replace function public.mirror_resource_to_forum()
returns trigger language plpgsql security definer as $$
begin
  insert into public.forum_posts (content, user_id, guest_name, type, source_table, source_id)
  values (
    'Resource: ' || coalesce(new.title, '') || case when new.category is not null then ' [' || new.category || ']' else '' end || ' — ' || public._truncate_text(new.description, 240),
    new.user_id,
    new.guest_name,
    'resource',
    'resources',
    new.id
  );
  return new;
end;
$$;

drop trigger if exists trg_mirror_resource on public.resources;
create trigger trg_mirror_resource
after insert on public.resources
for each row execute function public.mirror_resource_to_forum();
[V0_FILE]sql:file="scripts/010_profile_auto_insert.sql"
-- Auto-create a profile row when a new user signs up (prevents client-side RLS issues)
create or replace function public.handle_new_user()
returns trigger as $$
begin
  insert into public.profiles (id, created_at, updated_at)
  values (new.id, now(), now());
  return new;
end;
$$ language plpgsql security definer;

drop trigger if exists on_auth_user_created on auth.users;
create trigger on_auth_user_created
after insert on auth.users
for each row execute function public.handle_new_user();
[V0_FILE]sql:file="scripts/011_contributions_view.sql"
-- Unified read-only view combining ideas, resources, and locations
-- This view normalizes columns so the app can query a single list and filter by "type".
-- RLS is enforced on the underlying tables. Since select for these tables is allowed to everyone in previous scripts,
-- the view will be readable by everyone as well.

create or replace view public.contributions_view as
select
  r.id,
  'resource'::text as type,
  r.title,
  r.category,
  r.description,
  coalesce(r.tags, '{}'::text[]) as tags,
  r.location,
  r.link,
  null::text as image_url,
  r.user_id,
  r.guest_name,
  r.created_at,
  'resources'::text as source_table,
  r.id as source_id
from public.resources r

union all

select
  i.id,
  'idea'::text as type,
  i.title,
  'Idea'::text as category,
  i.description,
  '{}'::text[] as tags,
  null::text as location,
  null::text as link,
  i.image_url,
  i.user_id,
  i.guest_name,
  i.created_at,
  'ideas'::text as source_table,
  i.id as source_id
from public.ideas i

union all

select
  l.id,
  'location'::text as type,
  l.name as title,
  'Location'::text as category,
  l.description,
  '{}'::text[] as tags,
  l.address as location,
  null::text as link,
  l.image_url,
  l.user_id,
  l.guest_name,
  l.created_at,
  'locations'::text as source_table,
  l.id as source_id
from public.locations l;

-- Optional: convenience index on created_at in source tables already exists; the view will leverage those.
[V0_FILE]sql:file="scripts/012_alter_ideas_locations_tags.sql"
-- Add tags to ideas and locations (text array), default empty array
alter table if exists public.ideas
  add column if not exists tags text[] not null default '{}';

alter table if exists public.locations
  add column if not exists tags text[] not null default '{}';
[V0_FILE]sql:file="scripts/013_update_contributions_view.sql"
-- Recreate the unified view with contributor fields and real tags from ideas/locations
create or replace view public.contributions_view as
select
  r.id,
  'resource'::text as type,
  r.title,
  r.category,
  r.description,
  coalesce(r.tags, '{}'::text[]) as tags,
  r.location,
  r.link,
  null::text as image_url,
  r.user_id,
  r.guest_name,
  r.created_at,
  'resources'::text as source_table,
  r.id as source_id,
  coalesce(p.username, r.guest_name, 'Guest') as contributor_name,
  p.avatar_url as contributor_avatar_url
from public.resources r
left join public.profiles p on p.id = r.user_id

union all

select
  i.id,
  'idea'::text as type,
  i.title,
  'Idea'::text as category,
  i.description,
  coalesce(i.tags, '{}'::text[]) as tags,
  null::text as location,
  null::text as link,
  i.image_url,
  i.user_id,
  i.guest_name,
  i.created_at,
  'ideas'::text as source_table,
  i.id as source_id,
  coalesce(p.username, i.guest_name, 'Guest') as contributor_name,
  p.avatar_url as contributor_avatar_url
from public.ideas i
left join public.profiles p on p.id = i.user_id

union all

select
  l.id,
  'location'::text as type,
  l.name as title,
  'Location'::text as category,
  l.description,
  coalesce(l.tags, '{}'::text[]) as tags,
  l.address as location,
  null::text as link,
  l.image_url,
  l.user_id,
  l.guest_name,
  l.created_at,
  'locations'::text as source_table,
  l.id as source_id,
  coalesce(p.username, l.guest_name, 'Guest') as contributor_name,
  p.avatar_url as contributor_avatar_url
from public.locations l
left join public.profiles p on p.id = l.user_id;
[V0_FILE]sql:file="scripts/014_profiles_backfill_and_trigger_fix.sql"
-- Ensure every auth user has a matching profiles row and that future signups get one automatically.
-- 1) Robust trigger that bypasses RLS and never conflicts
create or replace function public.handle_new_user()
returns trigger
language plpgsql
security definer
set search_path = public
as $$
begin
  insert into public.profiles (id, created_at, updated_at)
  values (new.id, now(), now())
  on conflict (id) do nothing;
  return new;
end;
$$;

drop trigger if exists on_auth_user_created on auth.users;
create trigger on_auth_user_created
after insert on auth.users
for each row execute function public.handle_new_user();

-- 2) Backfill profiles for any existing auth.users that don't have a profile yet
insert into public.profiles (id, created_at, updated_at)
select u.id, now(), now()
from auth.users u
left join public.profiles p on p.id = u.id
where p.id is null
on conflict (id) do nothing;
[V0_FILE]sql:file="scripts/015_locations_coords.sql"
-- Add coordinates to locations for map visualization (optional; we also geocode on the fly in the map page)
alter table if exists public.locations
  add column if not exists lat double precision,
  add column if not exists lng double precision;

-- Optional index if you later do proximity queries
-- create index if not exists locations_lat_lng_idx on public.locations (lat, lng);
[V0_FILE]sql:file="scripts/016_fix_contributions_view_security.sql"
-- Recreate the contributions_view with SECURITY INVOKER (use caller's RLS), addressing Advisor error.
drop view if exists public.contributions_view;

create or replace view public.contributions_view
security invoker
as
select
  r.id,
  'resource'::text as type,
  r.title,
  r.category,
  r.description,
  coalesce(r.tags, '{}'::text[]) as tags,
  r.location,
  r.link,
  null::text as image_url,
  r.user_id,
  r.guest_name,
  r.created_at,
  'resources'::text as source_table,
  r.id as source_id,
  coalesce(p.username, r.guest_name, 'Guest') as contributor_name,
  p.avatar_url as contributor_avatar_url
from public.resources r
left join public.profiles p on p.id = r.user_id

union all

create or replace function public.set_updated_at()
returns trigger
language plpgsql
security definer
set search_path = public
as $$
begin
  new.updated_at = now();
  return new;
end;
$$;

create or replace function public._truncate_text(txt text, max_len int)
returns text
language sql
immutable
set search_path = public
as $$
  select case when length(coalesce(txt, '')) <= max_len then txt else substr(txt, 1, max_len) || '…' end
$$;

create or replace function public.mirror_idea_to_forum()
returns trigger
language plpgsql
security definer
set search_path = public
as $$
begin
  insert into public.forum_posts (content, image_url, user_id, guest_name, type, source_table, source_id)
  values (
    'Idea: ' || coalesce(new.title, '') || ' — ' || public._truncate_text(new.description, 240),
    new.image_url,
    new.user_id,
    new.guest_name,
    'idea',
    'ideas',
    new.id
  );
  return new;
end;
$$;

create or replace function public.mirror_location_to_forum()
returns trigger
language plpgsql
security definer
set search_path = public
as $$
begin
  insert into public.forum_posts (content, image_url, user_id, guest_name, type, source_table, source_id)
  values (
    'Suggested location: ' || coalesce(new.name, '') || ' (' || coalesce(new.address, '') || ') — ' || public._truncate_text(new.description, 240),
    new.image_url,
    new.user_id,
    new.guest_name,
    'location',
    'locations',
    new.id
  );
  return new;
end;
$$;

create or replace function public.mirror_resource_to_forum()
returns trigger
language plpgsql
security definer
set search_path = public
as $$
begin
  insert into public.forum_posts (content, user_id, guest_name, type, source_table, source_id)
  values (
    'Resource: ' || coalesce(new.title, '') || case when new.category is not null then ' [' || new.category || ']' else '' end || ' — ' || public._truncate_text(new.description, 240),
    new.user_id,
    new.guest_name,
    'resource',
    'resources',
    new.id
  );
  return new;
end;
$$;
[V0_FILE]css:file="styles/globals.css"
@tailwind base;
@tailwind components;
@tailwind utilities;

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

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

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

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

const config: Config = {
    darkMode: ["class"],
    content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "*.{js,ts,jsx,tsx,mdx}"
  ],
  theme: {
  	extend: {
  		colors: {
  			background: 'hsl(var(--background))',
  			foreground: 'hsl(var(--foreground))',
  			card: {
  				DEFAULT: 'hsl(var(--card))',
  				foreground: 'hsl(var(--card-foreground))'
  			},
  			popover: {
  				DEFAULT: 'hsl(var(--popover))',
  				foreground: 'hsl(var(--popover-foreground))'
  			},
  			primary: {
  				DEFAULT: 'hsl(var(--primary))',
  				foreground: 'hsl(var(--primary-foreground))'
  			},
  			secondary: {
  				DEFAULT: 'hsl(var(--secondary))',
  				foreground: 'hsl(var(--secondary-foreground))'
  			},
  			muted: {
  				DEFAULT: 'hsl(var(--muted))',
  				foreground: 'hsl(var(--muted-foreground))'
  			},
  			accent: {
  				DEFAULT: 'hsl(var(--accent))',
  				foreground: 'hsl(var(--accent-foreground))'
  			},
  			destructive: {
  				DEFAULT: 'hsl(var(--destructive))',
  				foreground: 'hsl(var(--destructive-foreground))'
  			},
  			border: 'hsl(var(--border))',
  			input: 'hsl(var(--input))',
  			ring: 'hsl(var(--ring))',
  			chart: {
  				'1': 'hsl(var(--chart-1))',
  				'2': 'hsl(var(--chart-2))',
  				'3': 'hsl(var(--chart-3))',
  				'4': 'hsl(var(--chart-4))',
  				'5': 'hsl(var(--chart-5))'
  			},
  			sidebar: {
  				DEFAULT: 'hsl(var(--sidebar-background))',
  				foreground: 'hsl(var(--sidebar-foreground))',
  				primary: 'hsl(var(--sidebar-primary))',
  				'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
  				accent: 'hsl(var(--sidebar-accent))',
  				'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
  				border: 'hsl(var(--sidebar-border))',
  				ring: 'hsl(var(--sidebar-ring))'
  			}
  		},
  		borderRadius: {
  			lg: 'var(--radius)',
  			md: 'calc(var(--radius) - 2px)',
  			sm: 'calc(var(--radius) - 4px)'
  		},
  		keyframes: {
  			'accordion-down': {
  				from: {
  					height: '0'
  				},
  				to: {
  					height: 'var(--radix-accordion-content-height)'
  				}
  			},
  			'accordion-up': {
  				from: {
  					height: 'var(--radix-accordion-content-height)'
  				},
  				to: {
  					height: '0'
  				}
  			}
  		},
  		animation: {
  			'accordion-down': 'accordion-down 0.2s ease-out',
  			'accordion-up': 'accordion-up 0.2s ease-out'
  		}
  	}
  },
  plugins: [require("tailwindcss-animate")],
};
export default config;
[V0_FILE]json:file="tsconfig.json"
{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "target": "ES6",
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}
[V0_FILE]jpg:file="public/images/IMG_1108.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_LuXaXkgVNJjAHcbPAeheu3PfUaK0/am9syGaE52MlVLE0_HnowN/public/images/IMG_1108.jpg"
[V0_FILE]jpg:file="public/images/IMG_1154.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_LuXaXkgVNJjAHcbPAeheu3PfUaK0/pCsTVyaSOeS6ToNUj51p2y/public/images/IMG_1154.jpg"
[V0_FILE]jpg:file="public/images/IMG_1155.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_LuXaXkgVNJjAHcbPAeheu3PfUaK0/yPvl67x5qvX_fuzl4LTjBA/public/images/IMG_1155.jpg"
[V0_FILE]jpg:file="public/images/IMG_2560.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_LuXaXkgVNJjAHcbPAeheu3PfUaK0/vjB11tn_nCu3qyN2bPHSsn/public/images/IMG_2560.jpg"
[V0_FILE]jpg:file="public/images/IMG_2562.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_LuXaXkgVNJjAHcbPAeheu3PfUaK0/5HOFyp9h69lcnWwaJLPlZT/public/images/IMG_2562.jpg"
[V0_FILE]jpg:file="public/images/IMG_2563.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_LuXaXkgVNJjAHcbPAeheu3PfUaK0/XBuFR4rpwcyzsCD2j7g6jy/public/images/IMG_2563.jpg"
[V0_FILE]jpg:file="public/images/IMG_2628.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_LuXaXkgVNJjAHcbPAeheu3PfUaK0/dTdRk02aN-43hv9KS_WDV_/public/images/IMG_2628.jpg"
[V0_FILE]jpg:file="public/images/IMG_2629.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_LuXaXkgVNJjAHcbPAeheu3PfUaK0/BQ6JSb6OOMPeMifD6QwlZs/public/images/IMG_2629.jpg"
[V0_FILE]jpg:file="public/images/IMG_2630.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_LuXaXkgVNJjAHcbPAeheu3PfUaK0/IDPST16qieLvdmsxtVEL6o/public/images/IMG_2630.jpg"
[V0_FILE]jpg:file="public/images/IMG_2631.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_LuXaXkgVNJjAHcbPAeheu3PfUaK0/gQVJt5yri4t328eMNkUAlX/public/images/IMG_2631.jpg"
[V0_FILE]jpg:file="public/images/IMG_2632.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_LuXaXkgVNJjAHcbPAeheu3PfUaK0/W6mboMzeQ28zWslUA-qvKn/public/images/IMG_2632.jpg"
[V0_FILE]jpg:file="public/images/IMG_2633.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_LuXaXkgVNJjAHcbPAeheu3PfUaK0/O1FmVVfxzZKs12-eu8XH3K/public/images/IMG_2633.jpg"
[V0_FILE]jpg:file="public/images/IMG_2634.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_LuXaXkgVNJjAHcbPAeheu3PfUaK0/-U3ancEKpbq7FfQR05UPLd/public/images/IMG_2634.jpg"
[V0_FILE]jpg:file="public/images/IMG_2635.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_LuXaXkgVNJjAHcbPAeheu3PfUaK0/oW3CZeUf3WDHdQaPAZJA5o/public/images/IMG_2635.jpg"
[V0_FILE]png:file="public/images/btc-qr-cropped.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_LuXaXkgVNJjAHcbPAeheu3PfUaK0/XWoArG2__xRF4UnmwVowPD/public/images/btc-qr-cropped.png"
[V0_FILE]jpg:file="public/images/btc-qr.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_LuXaXkgVNJjAHcbPAeheu3PfUaK0/dTdRk02aN-43hv9KS_WDV_/public/images/btc-qr.jpg"
[V0_FILE]jpg:file="public/images/usdc-arbitrum-qr.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_LuXaXkgVNJjAHcbPAeheu3PfUaK0/O1FmVVfxzZKs12-eu8XH3K/public/images/usdc-arbitrum-qr.jpg"
[V0_FILE]jpg:file="public/images/usdc-avalanche-qr.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_LuXaXkgVNJjAHcbPAeheu3PfUaK0/-U3ancEKpbq7FfQR05UPLd/public/images/usdc-avalanche-qr.jpg"
[V0_FILE]jpg:file="public/images/usdc-polygon-qr.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_LuXaXkgVNJjAHcbPAeheu3PfUaK0/oW3CZeUf3WDHdQaPAZJA5o/public/images/usdc-polygon-qr.jpg"
[V0_FILE]jpg:file="public/images/usdc-solana-qr.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_LuXaXkgVNJjAHcbPAeheu3PfUaK0/W6mboMzeQ28zWslUA-qvKn/public/images/usdc-solana-qr.jpg"
[V0_FILE]jpg:file="public/images/usdt-arbitrum-qr.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_LuXaXkgVNJjAHcbPAeheu3PfUaK0/IDPST16qieLvdmsxtVEL6o/public/images/usdt-arbitrum-qr.jpg"
[V0_FILE]jpg:file="public/images/usdt-solana-qr.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_LuXaXkgVNJjAHcbPAeheu3PfUaK0/gQVJt5yri4t328eMNkUAlX/public/images/usdt-solana-qr.jpg"
[V0_FILE]jpg:file="public/images/usdt-trc20-qr.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_LuXaXkgVNJjAHcbPAeheu3PfUaK0/BQ6JSb6OOMPeMifD6QwlZs/public/images/usdt-trc20-qr.jpg"
[V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_LuXaXkgVNJjAHcbPAeheu3PfUaK0/1uv3SMJqY6_jxcFCTgTEak/public/placeholder-logo.png"
[V0_FILE]xml:file="public/placeholder-logo.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_LuXaXkgVNJjAHcbPAeheu3PfUaK0/XB_XF8ESrwbAjotfOd5Wmb/public/placeholder-logo.svg"
[V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_LuXaXkgVNJjAHcbPAeheu3PfUaK0/ONejAluG3EJATcwwA61bXn/public/placeholder-user.jpg"
[V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_LuXaXkgVNJjAHcbPAeheu3PfUaK0/BlrBc_c6JuPtjsBHFMcNJn/public/placeholder.jpg"
[V0_FILE]xml:file="public/placeholder.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_LuXaXkgVNJjAHcbPAeheu3PfUaK0/J0QvC3Vjlpi92ZtRdLC4Mx/public/placeholder.svg"</article></body></html>