[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" 'use client' import { useState } from 'react' import AspectRatioGallery from './components/AspectRatioGallery' import ImageCropper from './components/ImageCropper' import { AspectRatio } from './types' export default function Home() { const [selectedRatio, setSelectedRatio] = useState(null) const handleRatioSelect = (ratio: AspectRatio) => { setSelectedRatio(ratio) } return (

{!selectedRatio ? ( ) : ( setSelectedRatio(null)} /> )}

) } [V0_FILE]typescriptreact:file="app/types.ts" isEdit="true" isQuickEdit="true" isMerged="true" export interface AspectRatio { id: string label: string width: number height: number recommendedResolution: string } export const aspectRatios: AspectRatio[] = [ { id: 'open-graph', label: 'Open Graph', width: 1.91, height: 1, recommendedResolution: '1200 x 628 pixels' }, { id: 'x-banner', label: 'X Banner', width: 3, height: 1, recommendedResolution: '1500 x 500 pixels' }, { id: 'x-single-image', label: 'X Single Image Post', width: 16, height: 9, recommendedResolution: '1600 x 900 pixels' }, { id: 'instagram-square', label: 'Instagram Square', width: 1, height: 1, recommendedResolution: '1080 x 1080 pixels' }, { id: 'iphone', label: 'iPhone Screen', width: 19.5, height: 9, recommendedResolution: '2556 x 1179 pixels' }, { id: 'macbook', label: 'MacBook Screen', width: 16, height: 10, recommendedResolution: '2560 x 1600 pixels' }, { id: 'android', label: 'Android Screen', width: 20, height: 9, recommendedResolution: '2400 x 1080 pixels' }, { id: '16-9', label: 'Standard 16:9', width: 16, height: 9, recommendedResolution: '1920 x 1080 pixels' }, { id: '2-1', label: 'Standard 2:1', width: 2, height: 1, recommendedResolution: '1920 x 960 pixels' }, // iOS Widget Sizes { id: 'ios-small', label: 'iOS Small Widget', width: 1, height: 1, recommendedResolution: '158 x 158 pixels' }, { id: 'ios-medium', label: 'iOS Medium Widget', width: 2, height: 1, recommendedResolution: '338 x 158 pixels' }, { id: 'ios-large', label: 'iOS Large Widget', width: 2, height: 2, recommendedResolution: '338 x 338 pixels' }, { id: 'ios-extra-large', label: 'iOS Extra Large Widget', width: 4, height: 2, recommendedResolution: '720 x 338 pixels' }, // iOS Widget Sizes for different devices { id: 'ios-small-pro', label: 'iOS Small Widget (Pro)', width: 1, height: 1, recommendedResolution: '170 x 170 pixels' }, { id: 'ios-medium-pro', label: 'iOS Medium Widget (Pro)', width: 2, height: 1, recommendedResolution: '364 x 170 pixels' }, { id: 'ios-large-pro', label: 'iOS Large Widget (Pro)', width: 2, height: 2, recommendedResolution: '364 x 382 pixels' }, { id: 'ios-extra-large-pro', label: 'iOS Extra Large Widget (Pro)', width: 4, height: 2, recommendedResolution: '772 x 362 pixels' }, { id: 'ios-small-max', label: 'iOS Small Widget (Max)', width: 1, height: 1, recommendedResolution: '186 x 186 pixels' }, { id: 'ios-medium-max', label: 'iOS Medium Widget (Max)', width: 2, height: 1, recommendedResolution: '394 x 186 pixels' }, { id: 'ios-large-max', label: 'iOS Large Widget (Max)', width: 2, height: 2, recommendedResolution: '394 x 412 pixels' }, { id: 'ios-extra-large-max', label: 'iOS Extra Large Widget (Max)', width: 4, height: 2, recommendedResolution: '836 x 394 pixels' }, { id: 'x-two-images', label: 'X Two Images Post', width: 7, height: 8, recommendedResolution: '700 x 800 pixels' }, { id: 'x-three-images', label: 'X Three Images Post', width: 7, height: 8, recommendedResolution: '700 x 800 pixels (first two), 700 x 1800 pixels (third)' }, { id: 'x-four-images', label: 'X Four Images Post', width: 2, height: 1, recommendedResolution: '1200 x 600 pixels' } ] [V0_FILE]typescriptreact:file="app/components/AspectRatioGallery.tsx" isEdit="true" isMerged="true" import { aspectRatios, AspectRatio } from '../types' interface AspectRatioGalleryProps { onSelect: (ratio: AspectRatio) => void } export default function AspectRatioGallery({ onSelect }: AspectRatioGalleryProps) { return (

{aspectRatios.map((ratio) => (

onSelect(ratio)} >

{ratio.label} {ratio.recommendedResolution}

))}

) } [V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 93%; --foreground: 222.2 84% 4.9%; --card: 0 0% 96%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 222.2 47.4% 11.2%; --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: 0 0% 92%; --input: 214.3 31.8% 91.4%; --ring: 222.2 84% 4.9%; --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: 210 40% 98%; --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: 212.7 26.8% 83.9%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import './globals.css' import type { Metadata } from 'next' import { Inter } from 'next/font/google' import { ThemeProvider } from "@/components/theme-provider" const inter = Inter({ subsets: ['latin'] }) export const metadata: Metadata = { title: 'Image Cropper', description: 'A browser-based app for cropping images into predefined aspect ratios', } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]javascript: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}', ], 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]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]typescriptreact:file="app/components/ImageCropper.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import { useRef, useState, useEffect, useCallback } from "react" import type { AspectRatio } from "../types" import { Button } from "@/components/ui/button" import { ArrowLeft, Download, Maximize } from "lucide-react" interface ImageCropperProps { aspectRatio: AspectRatio onBack: () => void } export default function ImageCropper({ aspectRatio, onBack }: ImageCropperProps) { const canvasRef = useRef(null) const [image, setImage] = useState(null) const [originalImage, setOriginalImage] = useState(null) const [imagePosition, setImagePosition] = useState({ x: 0, y: 0 }) const [isDragging, setIsDragging] = useState(false) const [dragStart, setDragStart] = useState({ x: 0, y: 0 }) const [scale, setScale] = useState(0.33) // Display image at 1/3 of its original size const [isHoveringImage, setIsHoveringImage] = useState(false) const handleCrop = useCallback(() => { const canvas = canvasRef.current if (!canvas || !originalImage) return const cropWidth = Math.min(canvas.width * 0.8, canvas.height * 0.8 * (aspectRatio.width / aspectRatio.height)) const cropHeight = cropWidth * (aspectRatio.height / aspectRatio.width) const cropX = (canvas.width - cropWidth) / 2 const cropY = (canvas.height - cropHeight) / 2 // Calculate the crop area in terms of the original image dimensions const originalCropX = (cropX - imagePosition.x) / scale const originalCropY = (cropY - imagePosition.y) / scale const originalCropWidth = cropWidth / scale const originalCropHeight = cropHeight / scale const cropCanvas = document.createElement("canvas") cropCanvas.width = originalCropWidth cropCanvas.height = originalCropHeight const cropCtx = cropCanvas.getContext("2d") if (cropCtx) { cropCtx.drawImage( originalImage, originalCropX, originalCropY, originalCropWidth, originalCropHeight, 0, 0, originalCropWidth, originalCropHeight, ) const link = document.createElement("a") link.download = "cropped-image.png" link.href = cropCanvas.toDataURL("image/png") link.click() } }, [originalImage, imagePosition, scale, aspectRatio]) const handleCenterImage = useCallback(() => { if (!image || !canvasRef.current) return const canvas = canvasRef.current const cropWidth = Math.min(canvas.width * 0.8, canvas.height * 0.8 * (aspectRatio.width / aspectRatio.height)) const cropHeight = cropWidth * (aspectRatio.height / aspectRatio.width) const cropX = (canvas.width - cropWidth) / 2 const cropY = (canvas.height - cropHeight) / 2 const scaledWidth = image.width * scale const scaledHeight = image.height * scale const newX = cropX + (cropWidth - scaledWidth) / 2 const newY = cropY + (cropHeight - scaledHeight) / 2 setImagePosition({ x: newX, y: newY }) }, [image, scale, aspectRatio]) useEffect(() => { const canvas = canvasRef.current if (canvas) { canvas.width = window.innerWidth canvas.height = window.innerHeight drawCanvas() } }, [image, imagePosition, scale]) // Removed unnecessary dependency: isHoveringImage useEffect(() => { const handleKeyPress = (e: KeyboardEvent) => { if (e.key === "d" && image) { e.preventDefault() handleCrop() } else if (e.key === "c" && image) { e.preventDefault() handleCenterImage() } } window.addEventListener("keydown", handleKeyPress) return () => { window.removeEventListener("keydown", handleKeyPress) } }, [image, handleCrop, handleCenterImage]) const drawCanvas = () => { const canvas = canvasRef.current const ctx = canvas?.getContext("2d") if (!canvas || !ctx) return ctx.clearRect(0, 0, canvas.width, canvas.height) if (image) { // Draw the scaled down image const scaledWidth = image.width * scale const scaledHeight = image.height * scale ctx.drawImage(image, imagePosition.x, imagePosition.y, scaledWidth, scaledHeight) } // Draw the crop frame const cropWidth = Math.min(canvas.width * 0.8, canvas.height * 0.8 * (aspectRatio.width / aspectRatio.height)) const cropHeight = cropWidth * (aspectRatio.height / aspectRatio.width) const cropX = (canvas.width - cropWidth) / 2 const cropY = (canvas.height - cropHeight) / 2 ctx.strokeStyle = "rgba(200, 200, 200, 0.8)" // More visible gray ctx.lineWidth = 2 ctx.setLineDash([10, 10]) ctx.strokeRect(cropX, cropY, cropWidth, cropHeight) } const handleDragOver = (e: React.DragEvent) => { e.preventDefault() } const handleDrop = (e: React.DragEvent) => { e.preventDefault() const file = e.dataTransfer.files[0] if (file && file.type.startsWith("image/")) { const reader = new FileReader() reader.onload = (event) => { const img = new Image() img.onload = () => { setImage(img) setOriginalImage(img) const scaledWidth = img.width * scale const scaledHeight = img.height * scale setImagePosition({ x: e.clientX - scaledWidth / 2, y: e.clientY - scaledHeight / 2, }) } img.src = event.target?.result as string } reader.readAsDataURL(file) } } const handleMouseDown = (e: React.MouseEvent) => { if (image && isHoveringImage) { setIsDragging(true) setDragStart({ x: e.clientX - imagePosition.x, y: e.clientY - imagePosition.y }) } } const handleMouseMove = (e: React.MouseEvent) => { if (isDragging) { setImagePosition({ x: e.clientX - dragStart.x, y: e.clientY - dragStart.y, }) } if (image) { const scaledWidth = image.width * scale const scaledHeight = image.height * scale const isOverImage = e.clientX >= imagePosition.x && e.clientX <= imagePosition.x + scaledWidth && e.clientY >= imagePosition.y && e.clientY <= imagePosition.y + scaledHeight setIsHoveringImage(isOverImage) } } const handleMouseUp = () => { setIsDragging(false) } return (

{aspectRatio.label}

Ratio: {aspectRatio.width}:{aspectRatio.height} • {aspectRatio.recommendedResolution}

) }

About

Tags

Share

About

Tags

Share

More from peetzweg

More Templates Like This

About

Tags

Share

About

Tags

Share

More from peetzweg

More Templates Like This