[dyad] Create image export application - wrote 4 file(s)
This commit is contained in:
[dyad]
@@ -1,6 +1,8 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { ThemeProvider } from "@/components/theme-provider";
|
||||
import { Toaster } from "@/components/ui/sonner";
|
||||
|
||||
const geistSans = Geist({
|
||||
variable: "--font-geist-sans",
|
||||
@@ -13,8 +15,8 @@ const geistMono = Geist_Mono({
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Create Next App",
|
||||
description: "Generated by create next app",
|
||||
title: "Image Web Exporter",
|
||||
description: "Upload a picture, then export it in a different resolution and format.",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
@@ -23,12 +25,20 @@ export default function RootLayout({
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<body
|
||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
||||
>
|
||||
{children}
|
||||
<ThemeProvider
|
||||
attribute="class"
|
||||
defaultTheme="system"
|
||||
enableSystem
|
||||
disableTransitionOnChange
|
||||
>
|
||||
{children}
|
||||
<Toaster />
|
||||
</ThemeProvider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,12 +1,23 @@
|
||||
import { ImageConverter } from "@/components/image-converter";
|
||||
import { MadeWithDyad } from "@/components/made-with-dyad";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="grid grid-rows-[1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 sm:p-20 font-[family-name:var(--font-geist-sans)]">
|
||||
<main className="flex flex-col gap-8 row-start-1 items-center sm:items-start">
|
||||
<h1>Blank page</h1>
|
||||
<div className="relative flex flex-col items-center justify-center min-h-screen p-4 bg-gray-50 dark:bg-background font-[family-name:var(--font-geist-sans)]">
|
||||
<main className="flex flex-col items-center w-full max-w-2xl z-10">
|
||||
<div className="text-center mb-8">
|
||||
<h1 className="text-4xl font-bold tracking-tight text-gray-900 dark:text-gray-100 sm:text-5xl">
|
||||
Image Web Exporter
|
||||
</h1>
|
||||
<p className="mt-3 text-lg text-gray-600 dark:text-gray-400">
|
||||
Upload a picture, then export it in a different resolution and format.
|
||||
</p>
|
||||
</div>
|
||||
<ImageConverter />
|
||||
</main>
|
||||
<MadeWithDyad />
|
||||
<div className="absolute bottom-4 z-10">
|
||||
<MadeWithDyad />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
190
src/components/image-converter.tsx
Normal file
190
src/components/image-converter.tsx
Normal file
@@ -0,0 +1,190 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useRef, ChangeEvent } from "react";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Upload, Download, Image as ImageIcon } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export function ImageConverter() {
|
||||
const [image, setImage] = useState<File | null>(null);
|
||||
const [previewUrl, setPreviewUrl] = useState<string | null>(null);
|
||||
const [width, setWidth] = useState<number | string>("");
|
||||
const [height, setHeight] = useState<number | string>("");
|
||||
const [format, setFormat] = useState<"png" | "jpeg" | "webp">("png");
|
||||
const [isConverting, setIsConverting] = useState(false);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const handleImageChange = (e: ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (file && file.type.startsWith("image/")) {
|
||||
setImage(file);
|
||||
const reader = new FileReader();
|
||||
reader.onload = (event) => {
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
setWidth(img.width);
|
||||
setHeight(img.height);
|
||||
};
|
||||
img.src = event.target?.result as string;
|
||||
setPreviewUrl(URL.createObjectURL(file));
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
} else {
|
||||
toast.error("Please select a valid image file.");
|
||||
}
|
||||
};
|
||||
|
||||
const handleConvertAndDownload = () => {
|
||||
if (!image || !previewUrl || !width || !height) {
|
||||
toast.error("Please upload an image and set dimensions.");
|
||||
return;
|
||||
}
|
||||
|
||||
setIsConverting(true);
|
||||
const img = new Image();
|
||||
img.crossOrigin = "anonymous";
|
||||
img.src = previewUrl;
|
||||
|
||||
img.onload = () => {
|
||||
const canvas = document.createElement("canvas");
|
||||
canvas.width = Number(width);
|
||||
canvas.height = Number(height);
|
||||
const ctx = canvas.getContext("2d");
|
||||
|
||||
if (ctx) {
|
||||
ctx.drawImage(img, 0, 0, Number(width), Number(height));
|
||||
const dataUrl = canvas.toDataURL(`image/${format}`);
|
||||
const link = document.createElement("a");
|
||||
link.href = dataUrl;
|
||||
const originalName = image.name.substring(0, image.name.lastIndexOf('.'));
|
||||
link.download = `${originalName}_${width}x${height}.${format}`;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
toast.success("Image exported successfully!");
|
||||
} else {
|
||||
toast.error("Could not process the image.");
|
||||
}
|
||||
setIsConverting(false);
|
||||
};
|
||||
|
||||
img.onerror = () => {
|
||||
toast.error("Failed to load image for conversion.");
|
||||
setIsConverting(false);
|
||||
};
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="w-full">
|
||||
<CardHeader>
|
||||
<CardTitle>Image Settings</CardTitle>
|
||||
<CardDescription>
|
||||
Adjust the resolution and format for your export.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{previewUrl ? (
|
||||
<div className="w-full aspect-video rounded-md overflow-hidden border flex items-center justify-center bg-gray-100 dark:bg-gray-800">
|
||||
<img
|
||||
src={previewUrl}
|
||||
alt="Image preview"
|
||||
className="max-w-full max-h-full object-contain"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className="w-full aspect-video rounded-md border-2 border-dashed flex flex-col items-center justify-center text-gray-500 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800"
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
>
|
||||
<ImageIcon className="w-12 h-12 mb-2" />
|
||||
<span>Click to upload an image</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Input
|
||||
type="file"
|
||||
ref={fileInputRef}
|
||||
onChange={handleImageChange}
|
||||
className="hidden"
|
||||
accept="image/*"
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="width">Width (px)</Label>
|
||||
<Input
|
||||
id="width"
|
||||
type="number"
|
||||
placeholder="e.g., 1920"
|
||||
value={width}
|
||||
onChange={(e) => setWidth(e.target.value)}
|
||||
disabled={!image}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="height">Height (px)</Label>
|
||||
<Input
|
||||
id="height"
|
||||
type="number"
|
||||
placeholder="e.g., 1080"
|
||||
value={height}
|
||||
onChange={(e) => setHeight(e.target.value)}
|
||||
disabled={!image}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="format">Format</Label>
|
||||
<Select
|
||||
value={format}
|
||||
onValueChange={(value: "png" | "jpeg" | "webp") => setFormat(value)}
|
||||
disabled={!image}
|
||||
>
|
||||
<SelectTrigger id="format">
|
||||
<SelectValue placeholder="Select format" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="png">PNG</SelectItem>
|
||||
<SelectItem value="jpeg">JPEG</SelectItem>
|
||||
<SelectItem value="webp">WEBP</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter className="flex justify-between">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
>
|
||||
<Upload className="mr-2 h-4 w-4" />
|
||||
{image ? "Change Image" : "Upload Image"}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleConvertAndDownload}
|
||||
disabled={!image || isConverting}
|
||||
>
|
||||
<Download className="mr-2 h-4 w-4" />
|
||||
{isConverting ? "Converting..." : "Convert & Download"}
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
9
src/components/theme-provider.tsx
Normal file
9
src/components/theme-provider.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { ThemeProvider as NextThemesProvider } from "next-themes"
|
||||
import { type ThemeProviderProps } from "next-themes/dist/types"
|
||||
|
||||
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
|
||||
return <NextThemesProvider {...props}>{children}</NextThemesProvider>
|
||||
}
|
||||
Reference in New Issue
Block a user