dc:"ExplicitChatIdProvider" dd:I[903690,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$5e","$5f","$60","$61","$62"],"$dc"] de:I[838238,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$5e","$5f","$60","$61","$62"],"SWRDataProvider"] df:Te308,[V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" "use client" import * as React from "react" import { ThemeProvider as NextThemesProvider } from "next-themes" import type { ThemeProviderProps } from "next-themes" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]javascript:file="tailwind.config.js" isQuickEdit="true" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: ["./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}"], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")], } [V0_FILE]typescriptreact:file="components/ui/sheet.tsx" isMerged="true" "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, React.ComponentPropsWithoutRef >(({ className, ...props }, 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, VariantProps {} const SheetContent = React.forwardRef, SheetContentProps>( ({ side = "right", className, children, ...props }, ref) => ( {children} Close ), ) SheetContent.displayName = SheetPrimitive.Content.displayName const SheetHeader = ({ className, ...props }: React.HTMLAttributes) => (

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

) SheetFooter.displayName = "SheetFooter" const SheetTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SheetTitle.displayName = SheetPrimitive.Title.displayName const SheetDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SheetDescription.displayName = SheetPrimitive.Description.displayName export { Sheet, SheetPortal, SheetOverlay, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, } [V0_FILE]json:file="data/projects.json" isEdit="true" isMerged="true" [ { "id": 1, "title": "Community Learning Platform", "description": "An online platform for sharing knowledge and skills within our community.", "goal": 10000, "raised": 7500, "daysLeft": 15, "category": "Education", "imageSearchTerm": "community learning" }, { "id": 2, "title": "Local Mentorship Program", "description": "Connecting experienced professionals with aspiring individuals in our community.", "goal": 5000, "raised": 3200, "daysLeft": 20, "category": "Community", "imageSearchTerm": "mentorship" }, { "id": 3, "title": "Tech Workshop Series", "description": "A series of hands-on workshops to teach practical tech skills to community members.", "goal": 8000, "raised": 6000, "daysLeft": 10, "category": "Technology", "imageSearchTerm": "tech workshop" }, { "id": 4, "title": "Urban Garden Initiative", "description": "Creating green spaces and promoting sustainable living in urban areas.", "goal": 15000, "raised": 9000, "daysLeft": 25, "category": "Environment", "imageSearchTerm": "urban garden" }, { "id": 5, "title": "Community Art Project", "description": "Bringing together local artists to create public art installations.", "goal": 12000, "raised": 4500, "daysLeft": 30, "category": "Arts & Culture", "imageSearchTerm": "art on an underpass" }, { "id": 6, "title": "Mental Health Awareness", "description": "Raising awareness and providing resources for mental health support in our community.", "goal": 7000, "raised": 3500, "daysLeft": 18, "category": "Wellness", "imageSearchTerm": "mental health" } ] [V0_FILE]typescriptreact:file="components/donation-overlay.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import confetti from "canvas-confetti" interface DonationOverlayProps { isOpen: boolean onClose: () => void projectTitle: string } export function DonationOverlay({ isOpen, onClose, projectTitle }: DonationOverlayProps) { const [step, setStep] = useState(1) const [amount, setAmount] = useState("") const [isAnonymous, setIsAnonymous] = useState(true) const [name, setName] = useState("") const [paymentMethod, setPaymentMethod] = useState<"check" | "credit" | null>(null) const handleNextStep = () => { if (step < 3) setStep(step + 1) } const handlePreviousStep = () => { if (step > 1) setStep(step - 1) } const handleSubmit = () => { // Here you would handle the actual donation submission console.log("Donation submitted:", { amount, isAnonymous, name, paymentMethod }) confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 }, }) onClose() } return ( ) } [V0_FILE]typescriptreact:file="components/start-project-overlay.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { ImageSearch } from "@/components/image-search" import Image from "next/image" import confetti from "canvas-confetti" import { X } from "lucide-react" import { useProjects } from "@/contexts/projects-context" interface StartProjectOverlayProps { isOpen: boolean onClose: () => void } const categories = ["Education", "Community", "Technology", "Environment", "Arts & Culture", "Wellness"] export function StartProjectOverlay({ isOpen, onClose }: StartProjectOverlayProps) { const [title, setTitle] = useState("") const [description, setDescription] = useState("") const [amount, setAmount] = useState("") const [category, setCategory] = useState("") const [imageUrl, setImageUrl] = useState("") const [imageCredit, setImageCredit] = useState("") const [step, setStep] = useState(1) const { addProject } = useProjects() const handleSelectImage = (url: string, credit: string) => { setImageUrl(url) setImageCredit(credit) } const handleRemoveImage = () => { setImageUrl("") setImageCredit("") } const handleNextStep = () => { if (step < 2) setStep(step + 1) } const handlePreviousStep = () => { if (step > 1) setStep(step - 1) } const handleSubmit = () => { const newProject = { id: `user-${Date.now()}`, title, description, raised: 0, goal: Number.parseInt(amount), category, imageUrl, imageCredit, imageSearchTerm: "", daysLeft: 30, backers: 0, } addProject(newProject) confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 }, }) setTitle("") setDescription("") setAmount("") setCategory("") setImageUrl("") setImageCredit("") setStep(1) onClose() } const isStep1Valid = title && description && amount && category return (

About

Tags

Share

About

Tags

Share

More from rcrades

More from rcrades