[V0_FILE]typescriptreact:file="lib/utils.ts" isMerged="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescriptreact:file="components/ui/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 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return }, ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/card.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" const Card = React.forwardRef>(({ className, ...props }, ref) => (

)) Card.displayName = "Card" const CardHeader = React.forwardRef>( ({ className, ...props }, ref) => (

), ) CardHeader.displayName = "CardHeader" const CardTitle = React.forwardRef>( ({ className, ...props }, ref) => (

), ) CardTitle.displayName = "CardTitle" const CardDescription = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardDescription.displayName = "CardDescription" const CardContent = React.forwardRef>( ({ className, ...props }, ref) =>
, ) CardContent.displayName = "CardContent" const CardFooter = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardFooter.displayName = "CardFooter" export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } [V0_FILE]typescriptreact:file="components/ui/radio-group.tsx" isMerged="true" import * as React from "react" import * as RadioGroupPrimitive from "@radix-ui/react-radio-group" import { cn } from "@/lib/utils" import { Circle } from "lucide-react" const RadioGroup = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => { return }) RadioGroup.displayName = RadioGroupPrimitive.Root.displayName const RadioGroupItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => { return ( ) }) RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName export { RadioGroup, RadioGroupItem } [V0_FILE]typescriptreact:file="components/ui/label.tsx" isMerged="true" 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, React.ComponentPropsWithoutRef & VariantProps >(({ className, ...props }, ref) => ( )) Label.displayName = LabelPrimitive.Root.displayName export { Label } [V0_FILE]typescriptreact:file="components/ui/progress.tsx" isMerged="true" import * as React from "react" import * as ProgressPrimitive from "@radix-ui/react-progress" import { cn } from "@/lib/utils" const Progress = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, value, ...props }, ref) => ( )) Progress.displayName = ProgressPrimitive.Root.displayName export { Progress } [V0_FILE]typescriptreact:file="tailwind.config.js" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/.{ts,tsx}", ".{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 48%; } .purple { --background: 280 50% 99%; --foreground: 280 30% 10%; --card: 280 50% 99%; --card-foreground: 280 30% 10%; --popover: 280 50% 99%; --popover-foreground: 280 30% 10%; --primary: 280 60% 50%; --primary-foreground: 280 10% 98%; --secondary: 280 20% 92%; --secondary-foreground: 280 30% 10%; --muted: 280 20% 92%; --muted-foreground: 280 20% 40%; --accent: 280 20% 92%; --accent-foreground: 280 30% 10%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 280 20% 88%; --input: 280 20% 88%; --ring: 280 60% 50%; } .purple.dark { --background: 280 50% 5%; --foreground: 280 10% 98%; --card: 280 50% 5%; --card-foreground: 280 10% 98%; --popover: 280 50% 5%; --popover-foreground: 280 10% 98%; --primary: 280 60% 60%; --primary-foreground: 280 50% 10%; --secondary: 280 30% 15%; --secondary-foreground: 280 10% 98%; --muted: 280 30% 15%; --muted-foreground: 280 20% 65%; --accent: 280 30% 15%; --accent-foreground: 280 10% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 280 30% 20%; --input: 280 30% 20%; --ring: 280 60% 60%; } .green { --background: 150 50% 99%; --foreground: 150 30% 10%; --card: 150 50% 99%; --card-foreground: 150 30% 10%; --popover: 150 50% 99%; --popover-foreground: 150 30% 10%; --primary: 150 60% 40%; --primary-foreground: 150 10% 98%; --secondary: 150 20% 92%; --secondary-foreground: 150 30% 10%; --muted: 150 20% 92%; --muted-foreground: 150 20% 40%; --accent: 150 20% 92%; --accent-foreground: 150 30% 10%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 150 20% 88%; --input: 150 20% 88%; --ring: 150 60% 40%; } .green.dark { --background: 150 50% 5%; --foreground: 150 10% 98%; --card: 150 50% 5%; --card-foreground: 150 10% 98%; --popover: 150 50% 5%; --popover-foreground: 150 10% 98%; --primary: 150 60% 50%; --primary-foreground: 150 50% 10%; --secondary: 150 30% 15%; --secondary-foreground: 150 10% 98%; --muted: 150 30% 15%; --muted-foreground: 150 20% 65%; --accent: 150 30% 15%; --accent-foreground: 150 10% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 150 30% 20%; --input: 150 30% 20%; --ring: 150 60% 50%; } .blue { --background: 210 50% 99%; --foreground: 210 30% 10%; --card: 210 50% 99%; --card-foreground: 210 30% 10%; --popover: 210 50% 99%; --popover-foreground: 210 30% 10%; --primary: 210 100% 50%; --primary-foreground: 210 10% 98%; --secondary: 210 20% 92%; --secondary-foreground: 210 30% 10%; --muted: 210 20% 92%; --muted-foreground: 210 20% 40%; --accent: 210 20% 92%; --accent-foreground: 210 30% 10%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 210 20% 88%; --input: 210 20% 88%; --ring: 210 100% 50%; } .blue.dark { --background: 210 50% 5%; --foreground: 210 10% 98%; --card: 210 50% 5%; --card-foreground: 210 10% 98%; --popover: 210 50% 5%; --popover-foreground: 210 10% 98%; --primary: 210 100% 60%; --primary-foreground: 210 50% 10%; --secondary: 210 30% 15%; --secondary-foreground: 210 10% 98%; --muted: 210 30% 15%; --muted-foreground: 210 20% 65%; --accent: 210 30% 15%; --accent-foreground: 210 10% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 210 30% 20%; --input: 210 30% 20%; --ring: 210 100% 60%; } .rose { --background: 350 50% 99%; --foreground: 350 30% 10%; --card: 350 50% 99%; --card-foreground: 350 30% 10%; --popover: 350 50% 99%; --popover-foreground: 350 30% 10%; --primary: 350 80% 60%; --primary-foreground: 350 10% 98%; --secondary: 350 20% 92%; --secondary-foreground: 350 30% 10%; --muted: 350 20% 92%; --muted-foreground: 350 20% 40%; --accent: 350 20% 92%; --accent-foreground: 350 30% 10%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 350 20% 88%; --input: 350 20% 88%; --ring: 350 80% 60%; } .rose.dark { --background: 350 50% 5%; --foreground: 350 10% 98%; --card: 350 50% 5%; --card-foreground: 350 10% 98%; --popover: 350 50% 5%; --popover-foreground: 350 10% 98%; --primary: 350 80% 60%; --primary-foreground: 350 50% 10%; --secondary: 350 30% 15%; --secondary-foreground: 350 10% 98%; --muted: 350 30% 15%; --muted-foreground: 350 20% 65%; --accent: 350 30% 15%; --accent-foreground: 350 10% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 350 30% 20%; --input: 350 30% 20%; --ring: 350 80% 60%; } .orange { --background: 30 50% 99%; --foreground: 30 30% 10%; --card: 30 50% 99%; --card-foreground: 30 30% 10%; --popover: 30 50% 99%; --popover-foreground: 30 30% 10%; --primary: 30 100% 50%; --primary-foreground: 30 10% 98%; --secondary: 30 20% 92%; --secondary-foreground: 30 30% 10%; --muted: 30 20% 92%; --muted-foreground: 30 20% 40%; --accent: 30 20% 92%; --accent-foreground: 30 30% 10%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 30 20% 88%; --input: 30 20% 88%; --ring: 30 100% 50%; } .orange.dark { --background: 30 50% 5%; --foreground: 30 10% 98%; --card: 30 50% 5%; --card-foreground: 30 10% 98%; --popover: 30 50% 5%; --popover-foreground: 30 10% 98%; --primary: 30 100% 60%; --primary-foreground: 30 50% 10%; --secondary: 30 30% 15%; --secondary-foreground: 30 10% 98%; --muted: 30 30% 15%; --muted-foreground: 30 20% 65%; --accent: 30 30% 15%; --accent-foreground: 30 10% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 30 30% 20%; --input: 30 30% 20%; --ring: 30 100% 60%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } .glassmorphism .bg-background\/80 { backdrop-filter: blur(12px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); } @keyframes confetti { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(100vh) rotate(720deg); opacity: 0; } } .animate-confetti { animation: confetti 3s ease-in-out forwards; } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import "./globals.css" import type { Metadata } from "next" import { Inter } from "next/font/google" import { ThemeProvider } from "@/components/theme-provider" import { SiteHeader } from "@/components/site-header" import { SiteFooter } from "@/components/site-footer" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "ImageBuddy - Your Image Processing Companion", description: "Transform, convert, and enhance your images with our powerful suite of tools", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return (
{children}
) } [V0_FILE]json:file="package.json" isEdit="true" isMerged="true" { "name": "image-buddy", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-dropdown-menu": "^2.0.6", "@radix-ui/react-label": "^2.0.2", "@radix-ui/react-progress": "^1.0.3", "@radix-ui/react-radio-group": "^1.1.3", "@radix-ui/react-select": "^2.0.0", "@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-switch": "^1.0.3", "@radix-ui/react-tabs": "^1.0.4", "class-variance-authority": "^0.7.0", "clsx": "^2.0.0", "framer-motion": "^10.16.4", "heic2any": "^0.0.4", "lucide-react": "^0.294.0", "next": "14.0.4", "next-themes": "^0.2.1", "pdf-lib": "^1.17.1", "react": "^18", "react-beautiful-dnd": "^13.1.1", "react-dom": "^18", "tailwind-merge": "^2.1.0", "tailwindcss-animate": "^1.0.7" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-beautiful-dnd": "^13.1.7", "@types/react-dom": "^18", "autoprefixer": "^10.0.1", "eslint": "^8", "eslint-config-next": "14.0.4", "postcss": "^8", "tailwindcss": "^3.3.0", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/ui/dropdown-menu.tsx" isMerged="true" "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, React.ComponentPropsWithoutRef & { inset?: boolean } >(({ className, inset, children, ...props }, ref) => ( {children} )) DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName const DropdownMenuSubContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName const DropdownMenuContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, sideOffset = 4, ...props }, ref) => ( )) DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName const DropdownMenuItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { inset?: boolean } >(({ className, inset, ...props }, ref) => ( )) DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName const DropdownMenuCheckboxItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, checked, ...props }, ref) => ( {children} )) DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName const DropdownMenuRadioItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} )) DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName const DropdownMenuLabel = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { inset?: boolean } >(({ className, inset, ...props }, ref) => ( )) DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName const DropdownMenuSeparator = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes) => { return } 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/tabs.tsx" isMerged="true" "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, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsList.displayName = TabsPrimitive.List.displayName const TabsTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsTrigger.displayName = TabsPrimitive.Trigger.displayName const TabsContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsContent.displayName = TabsPrimitive.Content.displayName export { Tabs, TabsList, TabsTrigger, TabsContent } [V0_FILE]typescriptreact:file="components/ui/switch.tsx" isMerged="true" "use client" import * as React from "react" import * as SwitchPrimitives from "@radix-ui/react-switch" import { cn } from "@/lib/utils" const Switch = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Switch.displayName = SwitchPrimitives.Root.displayName export { Switch } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" "use client" import { ThemeProvider as NextThemesProvider } from "next-themes" import type { ThemeProviderProps } from "next-themes" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="components/site-header.tsx" isEdit="true" isMerged="true" "use client" import Link from "next/link" import { usePathname } from "next/navigation" import { Sun, Moon, Palette, Settings } from "lucide-react" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, DropdownMenuLabel, DropdownMenuGroup, } from "@/components/ui/dropdown-menu" import { useTheme } from "next-themes" import { Switch } from "@/components/ui/switch" import { Label } from "@/components/ui/label" import { useState } from "react" const themes = [ { name: "light", label: "Light", icon: Sun }, { name: "dark", label: "Dark", icon: Moon }, { name: "purple", label: "Purple", icon: Palette }, { name: "green", label: "Green", icon: Palette }, { name: "blue", label: "Blue", icon: Palette }, { name: "rose", label: "Rose", icon: Palette }, { name: "orange", label: "Orange", icon: Palette }, ] export function SiteHeader() { const pathname = usePathname() const { theme, setTheme } = useTheme() const [useGlassmorphism, setUseGlassmorphism] = useState(true) return (

ImageBuddy

HEIC Converter PDF Maker

Appearance

Glass UI { setUseGlassmorphism(checked) if (checked) { document.body.classList.add("glassmorphism") } else { document.body.classList.remove("glassmorphism") } }} />

Theme {themes.map((t) => { const Icon = t.icon return ( setTheme(t.name)}>

{(t.name === "light" || t.name === "dark") && }
{t.label}
{theme === t.name && ( )} ) })}

) } [V0_FILE]typescriptreact:file="components/site-footer.tsx" isMerged="true" import { Github } from "lucide-react" import { Button } from "@/components/ui/button" export function SiteFooter() { return (

Built with ❤️ by{" "} Joseph El Khoury

) } [V0_FILE]typescriptreact:file="app/heic-converter/page.tsx" isMoved="true" isMovedFrom="app/page.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useRef, useEffect } from "react" import { Upload, FileType, X, Check, Download, Sun, Moon, Palette, Sparkles } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Label } from "@/components/ui/label" import { Progress } from "@/components/ui/progress" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuSeparator, } from "@/components/ui/dropdown-menu" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Switch } from "@/components/ui/switch" import Image from "next/image" import { cn } from "@/lib/utils" import { motion, AnimatePresence } from "framer-motion" import { useTheme } from "next-themes" import { ImageIcon, Zap } from "lucide-react" const themes = [ { name: "light", label: "Light", icon: Sun }, { name: "dark", label: "Dark", icon: Moon }, { name: "purple", label: "Purple", icon: Palette }, { name: "green", label: "Green", icon: Palette }, { name: "blue", label: "Blue", icon: Palette }, { name: "rose", label: "Rose", icon: Palette }, { name: "orange", label: "Orange", icon: Palette }, ] const features = [ { icon: ImageIcon, title: "HEIC Converter", description: "Convert HEIC images to JPG or PNG format with ease. Perfect for Apple device users.", href: "/heic-converter", }, { icon: Zap, title: "Image Optimizer", description: "Coming soon - Optimize your images for web without losing quality.", href: "#", disabled: true, }, { icon: Sparkles, title: "Image Effects", description: "Coming soon - Add beautiful effects and filters to your images.", href: "#", disabled: true, }, ] export default function ImageConverter() { const [files, setFiles] = useState([]) const [previews, setPreviews] = useState([]) const [convertedImages, setConvertedImages] = useState([]) const [format, setFormat] = useState<"png" | "jpg">("jpg") const [isConverting, setIsConverting] = useState(false) const [progress, setProgress] = useState(0) const [isDragging, setIsDragging] = useState(false) const [activeTab, setActiveTab] = useState("upload") const [showConfetti, setShowConfetti] = useState(false) const [quality, setQuality] = useState(80) const [useGlassmorphism, setUseGlassmorphism] = useState(true) const { theme, setTheme } = useTheme() const fileInputRef = useRef(null) useEffect(() => { // Apply glass morphism class to body when enabled if (useGlassmorphism) { document.body.classList.add("glassmorphism") } else { document.body.classList.remove("glassmorphism") } return () => { document.body.classList.remove("glassmorphism") } }, [useGlassmorphism]) const handleFileChange = (selectedFiles: FileList | null) => { if (!selectedFiles) return const newFiles: File[] = [] const newPreviews: string[] = [] Array.from(selectedFiles).forEach((file) => { // Check if file is HEIC or other image format if (file.name.toLowerCase().endsWith(".heic") || file.type.startsWith("image/")) { newFiles.push(file) // For non-HEIC images, we can create previews directly if (!file.name.toLowerCase().endsWith(".heic")) { const url = URL.createObjectURL(file) newPreviews.push(url) } else { // For HEIC, we'll just use a placeholder until conversion newPreviews.push("") } } }) setFiles((prev) => [...prev, ...newFiles]) setPreviews((prev) => [...prev, ...newPreviews]) setConvertedImages((prev) => [...prev, ...Array(newFiles.length).fill("")]) // Switch to gallery tab if files were added if (newFiles.length > 0) { setActiveTab("gallery") } } const removeFile = (index: number) => { setFiles((prev) => prev.filter((_, i) => i !== index)) setPreviews((prev) => { const newPreviews = [...prev] if (newPreviews[index]) URL.revokeObjectURL(newPreviews[index]) return newPreviews.filter((_, i) => i !== index) }) setConvertedImages((prev) => prev.filter((_, i) => i !== index)) } const convertImages = async () => { if (files.length === 0) return setIsConverting(true) setProgress(0) try { // Dynamically import heic2any only when needed const heic2any = (await import("heic2any")).default const newConvertedImages = [...convertedImages] for (let i = 0; i < files.length; i++) { const file = files[i] if (file.name.toLowerCase().endsWith(".heic")) { try { const outputBlob = await heic2any({ blob: file, toType: format === "jpg" ? "image/jpeg" : "image/png", quality: quality / 100, }) const url = URL.createObjectURL(outputBlob as Blob) newConvertedImages[i] = url // If we didn't have a preview before, use the converted image as preview if (!previews[i]) { setPreviews((prev) => { const newPreviews = [...prev] newPreviews[i] = url return newPreviews }) } } catch (error) { console.error("Error converting file:", error) } } else if (file.type.startsWith("image/")) { // For non-HEIC images, we'll just use them as is newConvertedImages[i] = previews[i] } // Update progress setProgress(Math.round(((i + 1) / files.length) * 100)) } setConvertedImages(newConvertedImages) // Show confetti when conversion is complete if (newConvertedImages.filter(Boolean).length === files.length) { setShowConfetti(true) setTimeout(() => setShowConfetti(false), 3000) } } catch (error) { console.error("Error loading conversion library:", error) } finally { setIsConverting(false) } } const downloadImage = (url: string, fileName: string) => { const a = document.createElement("a") a.href = url a.download = fileName.replace(/\.[^/.]+$/, "") + "." + format document.body.appendChild(a) a.click() document.body.removeChild(a) } const downloadAllImages = () => { convertedImages.forEach((url, index) => { if (url) { setTimeout(() => { downloadImage(url, files[index].name) }, index * 500) // Stagger downloads to avoid browser limitations } }) } const handleDragOver = (e: React.DragEvent) => { e.preventDefault() setIsDragging(true) } const handleDragLeave = () => { setIsDragging(false) } const handleDrop = (e: React.DragEvent) => { e.preventDefault() setIsDragging(false) handleFileChange(e.dataTransfer.files) } const clearAllFiles = () => { // Clean up object URLs previews.forEach((url) => { if (url) URL.revokeObjectURL(url) }) convertedImages.forEach((url) => { if (url) URL.revokeObjectURL(url) }) setFiles([]) setPreviews([]) setConvertedImages([]) } return (
{showConfetti && (

{Array.from({ length: 100 }).map((_, i) => (
0.5 ? "50%" : "0", }} /> ))}

)}

HEIC Converter

Convert HEIC to PNG/JPG with style

Glass UI
setTheme("light")}> Light setTheme("dark")}> Dark setTheme("purple")}>
Purple setTheme("green")}>
Green setTheme("blue")}>
Blue setTheme("rose")}>
Rose setTheme("orange")}>
Orange

Upload {files.length > 0 && ( {files.length} )} Gallery Settings
{files.length > 0 && ( <> {convertedImages.filter(Boolean).length > 0 && ( )} )}

fileInputRef.current?.click()} >

Drag & drop your images here

Or click to browse your files

Supports HEIC, JPG, PNG and other image formats
handleFileChange(e.target.files)} className="hidden" accept=".heic,.jpg,.jpeg,.png,.webp" multiple /> {isConverting && (

Converting... {progress}%

)}
{files.map((file, index) => (
{previews[index] ? ( ) : (

)} {convertedImages[index] && ( )} {convertedImages[index] && (

)}

{file.name}

{(file.size / 1024).toFixed(1)} KB
{convertedImages[index] && ( Converted )}

))}

Conversion Settings

Output Format
setFormat(value as "png" | "jpg")} className="flex gap-4" >
JPG

PNG

Quality
{quality}%
setQuality(Number.parseInt(e.target.value))} className="w-full accent-primary" />
Lower quality, smaller file Higher quality, larger file

Theme Settings

{themes.map((t) => { const Icon = t.icon return ( ) })}

About

This tool converts HEIC images to JPG or PNG format directly in your browser.

Your images are processed locally and are never uploaded to any server.

HEIC is a file format used by Apple devices to store photos in a more efficient way.

© {new Date().getFullYear()} HEIC Converter. All rights reserved.

) } [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]typescriptreact:file="components/ui/input.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" export interface InputProps extends React.InputHTMLAttributes {} const Input = React.forwardRef(({ className, type, ...props }, ref) => { return ( ) }) Input.displayName = "Input" export { Input } [V0_FILE]typescriptreact:file="components/ui/select.tsx" isMerged="true" "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, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( span]:line-clamp-1", className, )} {...props} > {children} )) SelectTrigger.displayName = SelectPrimitive.Trigger.displayName const SelectScrollUpButton = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName const SelectScrollDownButton = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName const SelectContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, position = "popper", ...props }, ref) => ( {children} )) SelectContent.displayName = SelectPrimitive.Content.displayName const SelectLabel = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectLabel.displayName = SelectPrimitive.Label.displayName const SelectItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} )) SelectItem.displayName = SelectPrimitive.Item.displayName const SelectSeparator = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectSeparator.displayName = SelectPrimitive.Separator.displayName export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" "use client" import { useState, useEffect } from "react" import { Sun, Moon, Palette, Sparkles } from "lucide-react" import { Button } from "@/components/ui/button" import { motion } from "framer-motion" import { useTheme } from "next-themes" import { ArrowRight, ImageIcon, FileText, Zap } from "lucide-react" import Link from "next/link" const themes = [ { name: "light", label: "Light", icon: Sun }, { name: "dark", label: "Dark", icon: Moon }, { name: "purple", label: "Purple", icon: Palette }, { name: "green", label: "Green", icon: Palette }, { name: "blue", label: "Blue", icon: Palette }, { name: "rose", label: "Rose", icon: Palette }, { name: "orange", label: "Orange", icon: Palette }, ] const features = [ { icon: ImageIcon, title: "HEIC Converter", description: "Convert HEIC images to JPG or PNG format with ease. Perfect for Apple device users.", href: "/heic-converter", gradient: "from-blue-500 to-cyan-500", }, { icon: FileText, title: "PDF Maker", description: "Create beautiful PDFs from your images. Reorder, customize, and share with ease.", href: "/pdf-maker", gradient: "from-purple-500 to-pink-500", }, { icon: Zap, title: "Image Optimizer", description: "Coming soon - Optimize your images for web without losing quality.", href: "#", disabled: true, gradient: "from-orange-500 to-red-500", }, { icon: Sparkles, title: "Image Effects", description: "Coming soon - Add beautiful effects and filters to your images.", href: "#", disabled: true, gradient: "from-green-500 to-emerald-500", }, ] export default function Page() { const [useGlassmorphism, setUseGlassmorphism] = useState(true) const { theme, setTheme } = useTheme() useEffect(() => { if (useGlassmorphism) { document.body.classList.add("glassmorphism") } else { document.body.classList.remove("glassmorphism") } return () => { document.body.classList.remove("glassmorphism") } }, [useGlassmorphism]) return (
{/* Hero Section /}

Transform Your Images with ImageBuddy

Your all-in-one solution for image conversion, PDF creation, and optimization

{/ Features Section /}

Powerful Features

Everything you need to handle your images

{features.map((feature, index) => (

{feature.title}

{feature.description}
{!feature.disabled && (
Get Started
)}
{feature.disabled && (
Coming Soon
)} ))}

{/ How It Works Section /}

How It Works

Simple steps to transform your images

{[ { title: "Upload", description: "Drag and drop your images or click to browse", icon: "📁", }, { title: "Transform", description: "Convert, optimize, or combine into PDF", icon: "✨", }, { title: "Download", description: "Get your transformed files instantly", icon: "⬇️", }, ].map((step, index) => (

{step.icon}

{step.title}

{step.description}

{index < 2 && (

)} ))}

{/ CTA Section /}

Ready to Transform Your Images?

Start using our tools today and experience the difference. No account required.

) } [V0_FILE]typescriptreact:file="app/pdf-maker/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import { useState, useRef } from "react" import { motion, AnimatePresence } from "framer-motion" import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd" import { Upload, GripVertical, X, FileText, Settings2, Eye, EyeOff } from "lucide-react" import Image from "next/image" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Switch } from "@/components/ui/switch" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { cn } from "@/lib/utils" import { Progress } from "@/components/ui/progress" import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger, SheetFooter, } from "@/components/ui/sheet" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" type ImageFile = { id: string file: File preview: string } type PDFSettings = { name: string pageSize: string pageOrientation: string imageQuality: string margins: number imageFit: string showPageNumbers: boolean watermark: string backgroundColor: string addTitlePage: boolean titlePageText: string compression: string } const defaultSettings: PDFSettings = { name: "my-document", pageSize: "a4", pageOrientation: "portrait", imageQuality: "medium", margins: 40, imageFit: "contain", showPageNumbers: true, watermark: "", backgroundColor: "#ffffff", addTitlePage: false, titlePageText: "", compression: "medium", } export default function PDFMaker() { const [images, setImages] = useState([]) const [isDragging, setIsDragging] = useState(false) const [isGenerating, setIsGenerating] = useState(false) const [progress, setProgress] = useState(0) const [settings, setSettings] = useState(defaultSettings) const [previewMode, setPreviewMode] = useState(false) const fileInputRef = useRef(null) const handleFileChange = (selectedFiles: FileList | null) => { if (!selectedFiles) return const newImages: ImageFile[] = Array.from(selectedFiles) .filter((file) => file.type.startsWith("image/")) .map((file) => ({ id: Math.random().toString(36).substr(2, 9), file, preview: URL.createObjectURL(file), })) setImages((prev) => [...prev, ...newImages]) } const removeImage = (id: string) => { setImages((prev) => { const image = prev.find((img) => img.id === id) if (image?.preview) { URL.revokeObjectURL(image.preview) } return prev.filter((img) => img.id !== id) }) } const handleDragEnd = (result: any) => { if (!result.destination) return const items = Array.from(images) const [reorderedItem] = items.splice(result.source.index, 1) items.splice(result.destination.index, 0, reorderedItem) setImages(items) } const generatePDF = async () => { if (images.length === 0) return setIsGenerating(true) setProgress(0) try { const { PDFDocument, rgb } = await import("pdf-lib") const pdfDoc = await PDFDocument.create() // Add title page if enabled if (settings.addTitlePage) { const titlePage = pdfDoc.addPage(settings.pageSize === "a4" ? [595, 842] : [612, 792]) const { width, height } = titlePage.getSize() titlePage.drawText(settings.titlePageText || settings.name, { x: 50, y: height - 100, size: 24, }) } for (let i = 0; i < images.length; i++) { const image = images[i] const imageBytes = await fetch(image.preview).then((res) => res.arrayBuffer()) let pdfImage if (image.file.type === "image/jpeg") { pdfImage = await pdfDoc.embedJpg(imageBytes) } else { pdfImage = await pdfDoc.embedPng(imageBytes) } const page = pdfDoc.addPage(settings.pageSize === "a4" ? [595, 842] : [612, 792]) const { width, height } = page.getSize() const aspectRatio = pdfImage.width / pdfImage.height // Calculate image dimensions based on fit mode let imageWidth = width - settings.margins 2 let imageHeight = imageWidth / aspectRatio if (settings.imageFit === "contain" && imageHeight > height - settings.margins * 2) { imageHeight = height - settings.margins * 2 imageWidth = imageHeight * aspectRatio } const x = (width - imageWidth) / 2 const y = (height - imageHeight) / 2 // Draw background if specified if (settings.backgroundColor !== "#ffffff") { page.drawRectangle({ x: 0, y: 0, width, height, color: rgb( Number.parseInt(settings.backgroundColor.slice(1, 3), 16) / 255, Number.parseInt(settings.backgroundColor.slice(3, 5), 16) / 255, Number.parseInt(settings.backgroundColor.slice(5, 7), 16) / 255, ), }) } page.drawImage(pdfImage, { x, y, width: imageWidth, height: imageHeight, }) // Add page number if enabled if (settings.showPageNumbers) { page.drawText(`${i + 1}`, { x: width - 50, y: 30, size: 12, }) } // Add watermark if specified if (settings.watermark) { page.drawText(settings.watermark, { x: width / 2, y: height / 2, size: 24, opacity: 0.1, rotate: Math.PI / 4, }) } setProgress(((i + 1) / images.length) * 100) } const pdfBytes = await pdfDoc.save() const blob = new Blob([pdfBytes], { type: "application/pdf" }) const url = URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = `${settings.name}.pdf` document.body.appendChild(a) a.click() document.body.removeChild(a) URL.revokeObjectURL(url) } catch (error) { console.error("Error generating PDF:", error) } finally { setIsGenerating(false) setProgress(0) } } return (

PDF Maker

Convert your images into a beautiful PDF document

PDF Settings Customize your PDF output settings Basic Layout Advanced

Document Name setSettings({ ...settings, name: e.target.value })} placeholder="Enter document name" />

Page Size

Orientation

Page Margins (px) setSettings({ ...settings, margins: Number(e.target.value) })} />

Image Fit

Background Color
setSettings({ ...settings, backgroundColor: e.target.value })} className="w-[100px]" /> setSettings({ ...settings, backgroundColor: e.target.value })} placeholder="#ffffff" />

Show Page Numbers setSettings({ ...settings, showPageNumbers: checked })} />

Watermark Text setSettings({ ...settings, watermark: e.target.value })} placeholder="Enter watermark text" />

Add Title Page setSettings({ ...settings, addTitlePage: checked })} />
{settings.addTitlePage && (
Title Page Text setSettings({ ...settings, titlePageText: e.target.value })} placeholder="Enter title page text" />
)}
PDF Compression

{isGenerating && (

Generating PDF... {Math.round(progress)}%

)} 0 ? "mb-8" : "", )} onDragOver={(e) => { e.preventDefault() setIsDragging(true) }} onDragLeave={() => setIsDragging(false)} onDrop={(e) => { e.preventDefault() setIsDragging(false) handleFileChange(e.dataTransfer.files) }} >

Drop your images here

Or click to select files
handleFileChange(e.target.files)} className="hidden" accept="image/*" multiple /> {images.length > 0 && ( {(provided) => (
{images.map((image, index) => ( {(provided, snapshot) => (

Page {index + 1}

)} ))} {provided.placeholder}
)} )}
) }