92:I[903690,["/chat-static/_next/static/immutable/chunks/19x10s5ceog9a.js","/chat-static/_next/static/immutable/chunks/12f-nm5otxtlb.js","/chat-static/_next/static/immutable/chunks/3iq-dyxnzhw6x.js","/chat-static/_next/static/immutable/chunks/1zebkw4t37hrt.js","/chat-static/_next/static/immutable/chunks/02d62qecapvyp.js","/chat-static/_next/static/immutable/chunks/1ca1eagukd03f.js","/chat-static/_next/static/immutable/chunks/1ihyvxny9u4w4.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/41hpffipu4cd5.js","/chat-static/_next/static/immutable/chunks/06l8mr_zo_pdk.js","/chat-static/_next/static/immutable/chunks/05ziczzmpg4l8.js","/chat-static/_next/static/immutable/chunks/2_3cf1lh0ov9g.js","/chat-static/_next/static/immutable/chunks/1o3uedpb5nwwe.js","/chat-static/_next/static/immutable/chunks/3tvsw776zkqg9.js","/chat-static/_next/static/immutable/chunks/1e-qtuskm58ha.js","/chat-static/_next/static/immutable/chunks/0ue-l2nq6d-fd.js","/chat-static/_next/static/immutable/chunks/1e5k5x1kcenwe.js","/chat-static/_next/static/immutable/chunks/3hnrzurk988jk.js","/chat-static/_next/static/immutable/chunks/0vmwm1j0c62ij.js","/chat-static/_next/static/immutable/chunks/1-qk02sdtfqkn.js","/chat-static/_next/static/immutable/chunks/1te_-knuy9ss-.js","/chat-static/_next/static/immutable/chunks/3siudrckqpsjx.js","/chat-static/_next/static/immutable/chunks/120lp9kxd910m.js","/chat-static/_next/static/immutable/chunks/3w1zcr9c32026.js","/chat-static/_next/static/immutable/chunks/2x3mu3fgb5m94.js","/chat-static/_next/static/immutable/chunks/3_y066xfe1cmo.js","/chat-static/_next/static/immutable/chunks/2_9d7galk0wiq.js","/chat-static/_next/static/immutable/chunks/0lys-rd0h1ssv.js","/chat-static/_next/static/immutable/chunks/3p3trwcegfkeh.js","/chat-static/_next/static/immutable/chunks/1vea1ewevhe85.js","/chat-static/_next/static/immutable/chunks/3ucy-zmd9da95.js","/chat-static/_next/static/immutable/chunks/3a3e1uof0x3hs.js","/chat-static/_next/static/immutable/chunks/2ikegn6lkshq2.js","/chat-static/_next/static/immutable/chunks/2fjkv44_ofoly.js","/chat-static/_next/static/immutable/chunks/40d8rjwe4x81w.js","/chat-static/_next/static/immutable/chunks/1nma-60foff1_.js","/chat-static/_next/static/immutable/chunks/14jzqba1i3vth.js"],"ExplicitChatIdProvider"] 93:I[838238,["/chat-static/_next/static/immutable/chunks/19x10s5ceog9a.js","/chat-static/_next/static/immutable/chunks/12f-nm5otxtlb.js","/chat-static/_next/static/immutable/chunks/3iq-dyxnzhw6x.js","/chat-static/_next/static/immutable/chunks/1zebkw4t37hrt.js","/chat-static/_next/static/immutable/chunks/02d62qecapvyp.js","/chat-static/_next/static/immutable/chunks/1ca1eagukd03f.js","/chat-static/_next/static/immutable/chunks/1ihyvxny9u4w4.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/41hpffipu4cd5.js","/chat-static/_next/static/immutable/chunks/06l8mr_zo_pdk.js","/chat-static/_next/static/immutable/chunks/05ziczzmpg4l8.js","/chat-static/_next/static/immutable/chunks/2_3cf1lh0ov9g.js","/chat-static/_next/static/immutable/chunks/1o3uedpb5nwwe.js","/chat-static/_next/static/immutable/chunks/3tvsw776zkqg9.js","/chat-static/_next/static/immutable/chunks/1e-qtuskm58ha.js","/chat-static/_next/static/immutable/chunks/0ue-l2nq6d-fd.js","/chat-static/_next/static/immutable/chunks/1e5k5x1kcenwe.js","/chat-static/_next/static/immutable/chunks/3hnrzurk988jk.js","/chat-static/_next/static/immutable/chunks/0vmwm1j0c62ij.js","/chat-static/_next/static/immutable/chunks/1-qk02sdtfqkn.js","/chat-static/_next/static/immutable/chunks/1te_-knuy9ss-.js","/chat-static/_next/static/immutable/chunks/3siudrckqpsjx.js","/chat-static/_next/static/immutable/chunks/120lp9kxd910m.js","/chat-static/_next/static/immutable/chunks/3w1zcr9c32026.js","/chat-static/_next/static/immutable/chunks/2x3mu3fgb5m94.js","/chat-static/_next/static/immutable/chunks/3_y066xfe1cmo.js","/chat-static/_next/static/immutable/chunks/2_9d7galk0wiq.js","/chat-static/_next/static/immutable/chunks/0lys-rd0h1ssv.js","/chat-static/_next/static/immutable/chunks/3p3trwcegfkeh.js","/chat-static/_next/static/immutable/chunks/1vea1ewevhe85.js","/chat-static/_next/static/immutable/chunks/3ucy-zmd9da95.js","/chat-static/_next/static/immutable/chunks/3a3e1uof0x3hs.js","/chat-static/_next/static/immutable/chunks/2ikegn6lkshq2.js","/chat-static/_next/static/immutable/chunks/2fjkv44_ofoly.js","/chat-static/_next/static/immutable/chunks/40d8rjwe4x81w.js","/chat-static/_next/static/immutable/chunks/1nma-60foff1_.js","/chat-static/_next/static/immutable/chunks/14jzqba1i3vth.js"],"SWRDataProvider"] 94:Td31f,[V0_FILE]plaintext:file=".gitignore" isMerged="true" # 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" isMerged="true" # Image to parallax layers *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/aykut-kardas-projects/v0-image-to-parallax-layers) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.app-black?style=for-the-badge)](https://v0.app/chat/projects/ZSp19iInUz9) ## 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/aykut-kardas-projects/v0-image-to-parallax-layers](https://vercel.com/aykut-kardas-projects/v0-image-to-parallax-layers)** ## Build your app Continue building your app on: **[https://v0.app/chat/projects/ZSp19iInUz9](https://v0.app/chat/projects/ZSp19iInUz9)** ## 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]css:file="app/globals.css" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Updated color tokens to match design brief with cyan-800 primary and purple accent */ --background: oklch(1 0 0); /* #ffffff */ --foreground: oklch(0.145 0 0); /* #475569 */ --card: oklch(1 0 0); /* #ecfeff */ --card-foreground: oklch(0.145 0 0); /* #164e63 */ --popover: oklch(1 0 0); /* #ffffff */ --popover-foreground: oklch(0.145 0 0); /* #475569 */ --primary: oklch(0.205 0 0); /* #164e63 */ --primary-foreground: oklch(0.985 0 0); /* #ffffff */ --secondary: oklch(0.97 0 0); /* #ecfeff */ --secondary-foreground: oklch(0.205 0 0); /* #164e63 */ --muted: oklch(0.97 0 0); /* #f1f5f9 */ --muted-foreground: oklch(0.556 0 0); /* #6b7280 */ --accent: oklch(0.97 0 0); /* #8b5cf6 */ --accent-foreground: oklch(0.205 0 0); /* #ffffff */ --destructive: oklch(0.577 0.245 27.325); /* #ea580c */ --destructive-foreground: oklch(0.985 0 0); /* #ffffff */ --border: oklch(0.922 0 0); /* #d1d5db */ --input: oklch(0.922 0 0); /* #ffffff */ --ring: oklch(0.708 0 0); /* rgba(22, 78, 99, 0.3) */ --chart-1: oklch(0.646 0.222 41.116); /* #164e63 */ --chart-2: oklch(0.6 0.118 184.704); /* #8b5cf6 */ --chart-3: oklch(0.398 0.07 227.392); /* #ea580c */ --chart-4: oklch(0.828 0.189 84.429); /* #f97316 */ --chart-5: oklch(0.769 0.188 70.08); /* #475569 */ --radius: 0.625rem; --sidebar: oklch(0.985 0 0); /* #ecfeff */ --sidebar-foreground: oklch(0.145 0 0); /* #475569 */ --sidebar-primary: oklch(0.205 0 0); /* #164e63 */ --sidebar-primary-foreground: oklch(0.985 0 0); /* #ffffff */ --sidebar-accent: oklch(0.97 0 0); /* #8b5cf6 */ --sidebar-accent-foreground: oklch(0.205 0 0); /* #ffffff */ --sidebar-border: oklch(0.922 0 0); /* #d1d5db */ --sidebar-ring: oklch(0.708 0 0); /* rgba(22, 78, 99, 0.3) */ } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.205 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.269 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.922 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.371 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.704 0.191 22.216); --destructive-foreground: oklch(0.985 0 0); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.556 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { ImageUpload } from "@/components/image-upload" import { ParallaxPreview } from "@/components/parallax-preview" import { FalKeyDialog } from "@/components/fal-key-dialog" import { Button } from "@/components/ui/button" import { Settings } from "lucide-react" import { useToast } from "@/hooks/use-toast" import { Toaster } from "@/components/ui/toaster" export interface ParallaxLayers { first_layer: { url: string } second_layer: { url: string }[] third_layer: { url: string }[] original: string } export default function Home() { const { toast } = useToast() const [selectedImage, setSelectedImage] = useState(null) const [isProcessing, setIsProcessing] = useState(false) const [originalImageUrl, setOriginalImageUrl] = useState(null) const [layers, setLayers] = useState({ first_layer: { url: "https://v3.fal.media/files/zebra/lzzgyrd3ACRi0ZEOlhXah.jpeg" }, second_layer: [{ url: "https://v3.fal.media/files/tiger/VL2yTM93CZlbfCPwEEO39.jpeg" }], third_layer: [], original: "", }) const [falKey, setFalKey] = useState("") const [showKeyDialog, setShowKeyDialog] = useState(false) useEffect(() => { const savedKey = localStorage.getItem("fal-api-key") if (savedKey) { setFalKey(savedKey) } }, []) const handleImageSelect = (file: File) => { setSelectedImage(file) const url = URL.createObjectURL(file) setOriginalImageUrl(url) setLayers(null) } const handleProcessComplete = (result: ParallaxLayers) => { console.log(result) setLayers(result?.data) setIsProcessing(false) } const handleProcessError = (errorMessage: string) => { toast({ variant: "destructive", title: "Processing Error", description: errorMessage, }) setIsProcessing(false) } const handleKeySet = (key: string) => { setFalKey(key) localStorage.setItem("fal-api-key", key) } return (

{!falKey && (

Please set your Fal AI API key to generate parallax layers.

)}

setIsProcessing(true)} onProcessComplete={handleProcessComplete} onProcessError={handleProcessError} falKey={falKey} isProcessing={isProcessing} />

) } [V0_FILE]json:file="components.json" isMerged="true" { "$schema": "https://ui.shadcn.com/schema.json", "style": "new-york", "rsc": true, "tsx": true, "tailwind": { "config": "", "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/fal-key-dialog.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Settings, Eye, EyeOff } from "lucide-react" interface FalKeyDialogProps { open: boolean onOpenChange: (open: boolean) => void onKeySet: (key: string) => void currentKey?: string } export function FalKeyDialog({ open, onOpenChange, onKeySet, currentKey }: FalKeyDialogProps) { const [key, setKey] = useState(currentKey || "") const [showKey, setShowKey] = useState(false) useEffect(() => { setKey(currentKey || "") }, [currentKey]) const handleSave = () => { if (key.trim()) { onKeySet(key.trim()) onOpenChange(false) } } return ( ) } [V0_FILE]typescriptreact:file="components/image-upload.tsx" isMerged="true" "use client" import type React from "react" import { useRef, useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Upload, X, Loader2 } from "lucide-react" import { fal } from "@fal-ai/client" import type { ParallaxLayers } from "@/app/page" interface ImageUploadProps { onImageSelect: (file: File) => void selectedImage: File | null onProcessStart: () => void onProcessComplete: (result: ParallaxLayers) => void onProcessError: (error: string) => void falKey: string isProcessing: boolean // Added isProcessing prop } export function ImageUpload({ onImageSelect, selectedImage, onProcessStart, onProcessComplete, onProcessError, falKey, isProcessing, // Added isProcessing prop }: ImageUploadProps) { const fileInputRef = useRef(null) const [previewUrl, setPreviewUrl] = useState(null) useEffect(() => { if (selectedImage && previewUrl && falKey && !isProcessing) { processImage() } }, [selectedImage, previewUrl, falKey]) const handleFileSelect = (file: File) => { if (file && file.type.startsWith("image/")) { onImageSelect(file) const url = URL.createObjectURL(file) setPreviewUrl(url) } } const handleInputChange = (e: React.ChangeEvent) => { if (e.target.files && e.target.files[0]) { handleFileSelect(e.target.files[0]) } } const clearImage = () => { onImageSelect(null as any) setPreviewUrl(null) if (fileInputRef.current) { fileInputRef.current.value = "" } } const processImage = async () => { if (!selectedImage) return if (!falKey) { onProcessError("Please set your Fal AI API key first") return } try { onProcessStart() fal.config({ credentials: falKey, }) const reader = new FileReader() const imageDataUrl = await new Promise((resolve, reject) => { reader.onload = () => { const result = reader.result as string // Check if data URL is too large (>10MB base64) if (result.length > 10 * 1024 * 1024) { reject(new Error("Image too large. Please use an image smaller than 10MB.")) return } resolve(result) } reader.onerror = reject reader.readAsDataURL(selectedImage) }) console.log("[v0] Processing image with fal API...") const result = await fal.run("workflows/aykutkardas/parallax-layers", { input: { image_url: imageDataUrl, }, }) console.log("[v0] Fal API result:", result) onProcessComplete(result as ParallaxLayers) } catch (error) { console.error("Processing error:", error) const errorMessage = error instanceof Error ? error.message : "Failed to process image" onProcessError(errorMessage) } } return (

{!selectedImage ? (

) : (

{previewUrl && (

{isProcessing && (

)}

) } [V0_FILE]typescriptreact:file="components/parallax-preview.tsx" isMerged="true" "use client" import { useState, useRef, useEffect } from "react" import type { ParallaxLayers } from "@/app/page" interface ParallaxPreviewProps { layers: ParallaxLayers | null originalImageUrl?: string | null } export function ParallaxPreview({ layers, originalImageUrl }: ParallaxPreviewProps) { const [scale, setScale] = useState([100]) const containerRef = useRef(null) const [mousePos, setMousePos] = useState({ x: 0, y: 0 }) const intensity = 50 // Fixed intensity value console.log("[v0] ParallaxPreview layers data:", layers) useEffect(() => { const handleMouseMove = (e: MouseEvent) => { if (!containerRef.current) return const rect = containerRef.current.getBoundingClientRect() const centerX = rect.left + rect.width / 2 const centerY = rect.top + rect.height / 2 const x = (e.clientX - centerX) / (rect.width / 2) const y = (e.clientY - centerY) / (rect.height / 2) setMousePos({ x: x * intensity, y: y * intensity }) } const handleMouseLeave = () => { setMousePos({ x: 0, y: 0 }) } const container = containerRef.current if (container) { container.addEventListener("mousemove", handleMouseMove) container.addEventListener("mouseleave", handleMouseLeave) return () => { container.removeEventListener("mousemove", handleMouseMove) container.removeEventListener("mouseleave", handleMouseLeave) } } }, []) // Removed intensity dependency since it's now fixed if (!layers && !originalImageUrl) { return (

{/* Default second layer as blurred background */}

No layers generated yet

Upload an image and generate layers to see the parallax preview

) } return (

{originalImageUrl && (

)} {layers && ( <> {/* Second Layers - Background (behind) */} {layers?.second_layer?.map( (layer, index) => layer?.url && (

console.log("[v0] Failed to load second layer:", layer.url)} />

), )} {/* First Layer - Foreground (on top) */} {layers.first_layer?.url && (

console.log("[v0] Failed to load first layer:", layers.first_layer.url)} />

)} {!layers.first_layer?.url && (!layers.second_layer?.length || !layers.second_layer[0]?.url) && (

No valid layer URLs found

Check console for debugging info

)} )} {!layers && originalImageUrl && (

Processing image...

Generating parallax layers

)}

) } [V0_FILE]typescriptreact:file="components/processing-status.tsx" isMerged="true" "use client" import { Loader2 } from "lucide-react" export function ProcessingStatus() { return (

Processing your image...

AI is generating parallax layers. This may take a few moments.

) } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" 'use client' import * as React from 'react' import { ThemeProvider as NextThemesProvider, type ThemeProviderProps, } from 'next-themes' export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="components/ui/button.tsx" isMerged="true" import * as React from 'react' import { Slot } from '@radix-ui/react-slot' import { cva, type VariantProps } from 'class-variance-authority' import { cn } from '@/lib/utils' const buttonVariants = cva( "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", { variants: { variant: { default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90', destructive: 'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60', outline: 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50', secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80', ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50', link: 'text-primary underline-offset-4 hover:underline', }, size: { default: 'h-9 px-4 py-2 has-[>svg]:px-3', sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5', lg: 'h-10 rounded-md px-6 has-[>svg]:px-4', icon: 'size-9', }, }, defaultVariants: { variant: 'default', size: 'default', }, }, ) function Button({ className, variant, size, asChild = false, ...props }: React.ComponentProps<'button'> & VariantProps & { asChild?: boolean }) { const Comp = asChild ? Slot : 'button' return ( ) } export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/dialog.tsx" isMerged="true" 'use client' import * as React from 'react' import * as DialogPrimitive from '@radix-ui/react-dialog' import { XIcon } from 'lucide-react' import { cn } from '@/lib/utils' function Dialog({ ...props }: React.ComponentProps) { return } function DialogTrigger({ ...props }: React.ComponentProps) { return } function DialogPortal({ ...props }: React.ComponentProps) { return } function DialogClose({ ...props }: React.ComponentProps) { return } function DialogOverlay({ className, ...props }: React.ComponentProps) { return ( ) } function DialogContent({ className, children, showCloseButton = true, ...props }: React.ComponentProps & { showCloseButton?: boolean }) { return ( {children} {showCloseButton && ( Close )} ) } function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function DialogTitle({ className, ...props }: React.ComponentProps) { return ( ) } function DialogDescription({ className, ...props }: React.ComponentProps) { return ( ) } export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, } [V0_FILE]typescriptreact:file="components/ui/input.tsx" isMerged="true" import * as React from 'react' import { cn } from '@/lib/utils' function Input({ className, type, ...props }: React.ComponentProps<'input'>) { return ( ) } export { Input } [V0_FILE]typescriptreact:file="components/ui/label.tsx" isMerged="true" 'use client' import * as React from 'react' import * as LabelPrimitive from '@radix-ui/react-label' import { cn } from '@/lib/utils' function Label({ className, ...props }: React.ComponentProps) { return ( ) } export { Label } [V0_FILE]typescriptreact:file="components/ui/toast.tsx" isMerged="true" '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, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) 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, React.ComponentPropsWithoutRef & VariantProps >(({ className, variant, ...props }, ref) => { return ( ) }) Toast.displayName = ToastPrimitives.Root.displayName const ToastAction = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastAction.displayName = ToastPrimitives.Action.displayName const ToastClose = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastClose.displayName = ToastPrimitives.Close.displayName const ToastTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastTitle.displayName = ToastPrimitives.Title.displayName const ToastDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastDescription.displayName = ToastPrimitives.Description.displayName type ToastProps = React.ComponentPropsWithoutRef type ToastActionElement = React.ReactElement export { type ToastProps, type ToastActionElement, ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastClose, ToastAction, } [V0_FILE]typescriptreact:file="components/ui/toaster.tsx" isMerged="true" 'use client' import { useToast } from '@/hooks/use-toast' import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, } from '@/components/ui/toast' export function Toaster() { const { toasts } = useToast() return ( {toasts.map(function ({ id, title, description, action, ...props }) { return (

{title && {title}} {description && ( {description} )}

{action} ) })} ) } [V0_FILE]typescript:file="hooks/use-toast.ts" isMerged="true" '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 } | { type: ActionType['DISMISS_TOAST'] toastId?: ToasterToast['id'] } | { type: ActionType['REMOVE_TOAST'] toastId?: ToasterToast['id'] } interface State { toasts: ToasterToast[] } const toastTimeouts = new Map>() 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 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(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]typescript:file="lib/utils.ts" isMerged="true" 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" isMerged="true" /** @type {import('next').NextConfig} */ const nextConfig = { eslint: { ignoreDuringBuilds: true, }, typescript: { ignoreBuildErrors: true, }, images: { unoptimized: true, }, } export default nextConfig [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "build": "next build", "dev": "next dev", "lint": "next lint", "start": "next start" }, "dependencies": { "@fal-ai/client": "latest", "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.16", "next-themes": "^0.4.6", "react": "^18", "react-day-picker": "9.8.0", "react-dom": "^18", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^2.5.5", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]javascript:file="postcss.config.mjs" isMerged="true" /** @type {import('postcss-load-config').Config} */ const config = { plugins: { '@tailwindcss/postcss': {}, }, } export default config [V0_FILE]css:file="styles/globals.css" isMerged="true" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]json:file="tsconfig.json" isMerged="true" { "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]xml:file="public/fal-logo.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_JmoA847AnVMR5yC0iF6QY8n8aUhT/KXQv1hZ8UfDtdk2YpIVZ8E/public/fal-logo.svg" isMerged="true" [V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_JmoA847AnVMR5yC0iF6QY8n8aUhT/1uv3SMJqY6_jxcFCTgTEak/public/placeholder-logo.png" isMerged="true" [V0_FILE]xml:file="public/placeholder-logo.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_JmoA847AnVMR5yC0iF6QY8n8aUhT/XB_XF8ESrwbAjotfOd5Wmb/public/placeholder-logo.svg" isMerged="true" [V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_JmoA847AnVMR5yC0iF6QY8n8aUhT/ONejAluG3EJATcwwA61bXn/public/placeholder-user.jpg" isMerged="true" [V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_JmoA847AnVMR5yC0iF6QY8n8aUhT/BlrBc_c6JuPtjsBHFMcNJn/public/placeholder.jpg" isMerged="true" [V0_FILE]xml:file="public/placeholder.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_JmoA847AnVMR5yC0iF6QY8n8aUhT/J0QvC3Vjlpi92ZtRdLC4Mx/public/placeholder.svg" isMerged="true" [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" import type React from "react" import type { Metadata } from "next" import { GeistSans } from "geist/font/sans" import { GeistMono } from "geist/font/mono" import { Analytics } from "@vercel/analytics/next" import { Suspense } from "react" import "./globals.css" export const metadata: Metadata = { title: "v0 App", description: "Created with v0", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( Loading...

}> {children} ) }89:["$","$L92",null,{"chatId":"KzKE76hCyak","children":["$","$L93",null,{"data":{"@\"active-block\",\"KzKE76hCyak\",":{"id":"b_kOZwBofpxek","messageId":"y9TuzPEsXjzWEJIlG6KX30tG6xqsc3bk","source":"$94","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"parallax-layers-app","type":"code-project","project":"parallax-layers-app","taskNameActive":"Adding Suspense boundary","taskNameComplete":"Added Suspense boundary"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"KzKE76hCyak\",":false},"children":"$L95"}]}]

About

Tags

Share

About

Tags

Share

More from aykutkardas

More Templates Like This