mirror of
https://github.com/snapotter-hq/SnapOtter.git
synced 2026-08-03 07:46:42 +02:00
feat: add Lucide icons to all 47 tools with BentoPDF-style card layout
This commit is contained in:
ashim-hq
@@ -1,6 +1,53 @@
|
||||
"use client";
|
||||
|
||||
import { Search } from "lucide-react";
|
||||
import type { LucideIcon } from "lucide-react";
|
||||
import {
|
||||
AppWindow,
|
||||
AudioLines,
|
||||
Code,
|
||||
Columns,
|
||||
Columns2,
|
||||
Copy,
|
||||
Crop,
|
||||
Eraser,
|
||||
Eye,
|
||||
EyeOff,
|
||||
FileEdit,
|
||||
FileImage,
|
||||
FileOutput,
|
||||
FileText,
|
||||
Film,
|
||||
Focus,
|
||||
Frame,
|
||||
Globe,
|
||||
Grid3x3,
|
||||
ImagePlus,
|
||||
Info,
|
||||
Layers,
|
||||
LayoutGrid,
|
||||
Maximize2,
|
||||
Minimize2,
|
||||
Palette,
|
||||
PenLine,
|
||||
PenTool,
|
||||
Pipette,
|
||||
QrCode,
|
||||
RotateCw,
|
||||
Scan,
|
||||
ScanFace,
|
||||
ScanLine,
|
||||
ScanText,
|
||||
Search,
|
||||
ShieldOff,
|
||||
SlidersHorizontal,
|
||||
Sparkles,
|
||||
TextCursorInput,
|
||||
Type,
|
||||
Undo2,
|
||||
UserCheck,
|
||||
Wand2,
|
||||
ZoomIn,
|
||||
} from "lucide-react";
|
||||
import { useMemo, useState } from "react";
|
||||
import { FadeIn } from "./fade-in";
|
||||
|
||||
@@ -15,28 +62,37 @@ const categories = [
|
||||
{ id: "ai", name: "AI Tools", color: "#F59E0B" },
|
||||
];
|
||||
|
||||
const tools = [
|
||||
const tools: { name: string; description: string; category: string; icon: LucideIcon }[] = [
|
||||
// Essentials
|
||||
{
|
||||
name: "Resize",
|
||||
description: "Resize by pixels, percentage, or social media presets",
|
||||
category: "essentials",
|
||||
icon: Maximize2,
|
||||
},
|
||||
{
|
||||
name: "Crop",
|
||||
description: "Freeform crop, aspect ratio presets, shape crop",
|
||||
category: "essentials",
|
||||
icon: Crop,
|
||||
},
|
||||
{
|
||||
name: "Rotate & Flip",
|
||||
description: "Rotate, flip, and straighten images",
|
||||
category: "essentials",
|
||||
icon: RotateCw,
|
||||
},
|
||||
{
|
||||
name: "Convert",
|
||||
description: "Convert between image formats",
|
||||
category: "essentials",
|
||||
icon: FileOutput,
|
||||
},
|
||||
{ name: "Convert", description: "Convert between image formats", category: "essentials" },
|
||||
{
|
||||
name: "Compress",
|
||||
description: "Reduce file size by quality or target size",
|
||||
category: "essentials",
|
||||
icon: Minimize2,
|
||||
},
|
||||
// Optimization
|
||||
{
|
||||
@@ -44,170 +100,255 @@ const tools = [
|
||||
description:
|
||||
"Optimize images for web with format conversion, quality control, and live preview",
|
||||
category: "optimization",
|
||||
icon: Globe,
|
||||
},
|
||||
{
|
||||
name: "Remove Metadata",
|
||||
description: "Remove EXIF, GPS, and camera info",
|
||||
category: "optimization",
|
||||
icon: ShieldOff,
|
||||
},
|
||||
{
|
||||
name: "Edit Metadata",
|
||||
description: "Edit EXIF, GPS, and camera info",
|
||||
category: "optimization",
|
||||
icon: PenLine,
|
||||
},
|
||||
{
|
||||
name: "Bulk Rename",
|
||||
description: "Rename multiple files with patterns",
|
||||
category: "optimization",
|
||||
icon: FileEdit,
|
||||
},
|
||||
{
|
||||
name: "Image to PDF",
|
||||
description: "Combine images into a PDF document",
|
||||
category: "optimization",
|
||||
icon: FileText,
|
||||
},
|
||||
{
|
||||
name: "Favicon Generator",
|
||||
description: "Generate all favicon and app icon sizes",
|
||||
category: "optimization",
|
||||
icon: AppWindow,
|
||||
},
|
||||
// Adjustments
|
||||
{
|
||||
name: "Adjust Colors",
|
||||
description: "Brightness, contrast, exposure, saturation, temperature, sharpness, and effects",
|
||||
category: "adjustments",
|
||||
icon: SlidersHorizontal,
|
||||
},
|
||||
{
|
||||
name: "Sharpening",
|
||||
description: "Adaptive, unsharp mask, and high-pass sharpening with presets",
|
||||
category: "adjustments",
|
||||
icon: Focus,
|
||||
},
|
||||
{
|
||||
name: "Replace & Invert Color",
|
||||
description: "Replace specific colors or invert",
|
||||
category: "adjustments",
|
||||
icon: Pipette,
|
||||
},
|
||||
// AI Tools
|
||||
{ name: "Remove Background", description: "AI-powered background removal", category: "ai" },
|
||||
{ name: "Image Upscaling", description: "AI super-resolution enhancement", category: "ai" },
|
||||
{ name: "Object Eraser", description: "Remove unwanted objects with AI", category: "ai" },
|
||||
{ name: "OCR / Text Extraction", description: "Extract text from images", category: "ai" },
|
||||
{
|
||||
name: "Remove Background",
|
||||
description: "AI-powered background removal",
|
||||
category: "ai",
|
||||
icon: Eraser,
|
||||
},
|
||||
{
|
||||
name: "Image Upscaling",
|
||||
description: "AI super-resolution enhancement",
|
||||
category: "ai",
|
||||
icon: ZoomIn,
|
||||
},
|
||||
{
|
||||
name: "Object Eraser",
|
||||
description: "Remove unwanted objects with AI",
|
||||
category: "ai",
|
||||
icon: Wand2,
|
||||
},
|
||||
{
|
||||
name: "OCR / Text Extraction",
|
||||
description: "Extract text from images",
|
||||
category: "ai",
|
||||
icon: ScanText,
|
||||
},
|
||||
{
|
||||
name: "Face / PII Blur",
|
||||
description: "Auto-detect and blur faces and sensitive info",
|
||||
category: "ai",
|
||||
icon: EyeOff,
|
||||
},
|
||||
{
|
||||
name: "Smart Crop",
|
||||
description: "Smart subject, face, or trim-based cropping",
|
||||
category: "ai",
|
||||
icon: Scan,
|
||||
},
|
||||
{
|
||||
name: "Image Enhancement",
|
||||
description: "One-click auto-improve with smart analysis",
|
||||
category: "ai",
|
||||
icon: Sparkles,
|
||||
},
|
||||
{
|
||||
name: "Face Enhancement",
|
||||
description: "Restore and enhance faces with AI",
|
||||
category: "ai",
|
||||
icon: ScanFace,
|
||||
},
|
||||
{ name: "Face Enhancement", description: "Restore and enhance faces with AI", category: "ai" },
|
||||
{
|
||||
name: "AI Colorization",
|
||||
description: "Convert B&W photos to full color with AI",
|
||||
category: "ai",
|
||||
icon: Palette,
|
||||
},
|
||||
{
|
||||
name: "Noise Removal",
|
||||
description: "AI-powered noise and grain removal",
|
||||
category: "ai",
|
||||
icon: AudioLines,
|
||||
},
|
||||
{ name: "Noise Removal", description: "AI-powered noise and grain removal", category: "ai" },
|
||||
{
|
||||
name: "Red Eye Removal",
|
||||
description: "AI-detect and fix red eye in flash photos",
|
||||
category: "ai",
|
||||
icon: Eye,
|
||||
},
|
||||
{
|
||||
name: "Photo Restoration",
|
||||
description: "Fix scratches, tears, and damage on old photos with AI",
|
||||
category: "ai",
|
||||
icon: Undo2,
|
||||
},
|
||||
{
|
||||
name: "Passport Photo",
|
||||
description: "AI-powered passport and ID photo generator",
|
||||
category: "ai",
|
||||
icon: UserCheck,
|
||||
},
|
||||
// Watermark & Overlay
|
||||
{ name: "Text Watermark", description: "Add text watermark overlay", category: "watermark" },
|
||||
{ name: "Image Watermark", description: "Overlay a logo as watermark", category: "watermark" },
|
||||
{ name: "Text Overlay", description: "Add styled text to images", category: "watermark" },
|
||||
{
|
||||
name: "Text Watermark",
|
||||
description: "Add text watermark overlay",
|
||||
category: "watermark",
|
||||
icon: Type,
|
||||
},
|
||||
{
|
||||
name: "Image Watermark",
|
||||
description: "Overlay a logo as watermark",
|
||||
category: "watermark",
|
||||
icon: ImagePlus,
|
||||
},
|
||||
{
|
||||
name: "Text Overlay",
|
||||
description: "Add styled text to images",
|
||||
category: "watermark",
|
||||
icon: TextCursorInput,
|
||||
},
|
||||
{
|
||||
name: "Image Composition",
|
||||
description: "Layer images with position and opacity",
|
||||
category: "watermark",
|
||||
icon: Layers,
|
||||
},
|
||||
// Utilities
|
||||
{
|
||||
name: "Image Info",
|
||||
description: "View all metadata and image properties",
|
||||
category: "utilities",
|
||||
icon: Info,
|
||||
},
|
||||
{
|
||||
name: "Image Compare",
|
||||
description: "Side-by-side comparison of two images",
|
||||
category: "utilities",
|
||||
icon: Columns2,
|
||||
},
|
||||
{
|
||||
name: "Find Duplicates",
|
||||
description: "Detect duplicate and near-duplicate images",
|
||||
category: "utilities",
|
||||
icon: Copy,
|
||||
},
|
||||
{
|
||||
name: "Color Palette",
|
||||
description: "Extract dominant colors from image",
|
||||
category: "utilities",
|
||||
icon: Palette,
|
||||
},
|
||||
{
|
||||
name: "QR Code Generator",
|
||||
description: "Generate styled QR codes with custom colors, patterns, and logos",
|
||||
category: "utilities",
|
||||
icon: QrCode,
|
||||
},
|
||||
{
|
||||
name: "Barcode Reader",
|
||||
description: "Scan images for QR codes, barcodes, and 2D codes",
|
||||
category: "utilities",
|
||||
icon: ScanLine,
|
||||
},
|
||||
{
|
||||
name: "Image to Base64",
|
||||
description: "Convert images to base64 strings for embedding in HTML, CSS, and more",
|
||||
category: "utilities",
|
||||
icon: Code,
|
||||
},
|
||||
// Layout & Composition
|
||||
{
|
||||
name: "Collage / Grid",
|
||||
description: "Combine images into beautiful grid collages with 25+ templates",
|
||||
category: "layout",
|
||||
icon: LayoutGrid,
|
||||
},
|
||||
{
|
||||
name: "Stitch / Combine",
|
||||
description: "Join images side by side, stacked, or in a grid",
|
||||
category: "layout",
|
||||
icon: Columns,
|
||||
},
|
||||
{
|
||||
name: "Image Splitting",
|
||||
description: "Split images into grid tiles or by pixel size with live preview",
|
||||
category: "layout",
|
||||
icon: Grid3x3,
|
||||
},
|
||||
{
|
||||
name: "Border & Frame",
|
||||
description: "Add borders, rounded corners, shadows",
|
||||
category: "layout",
|
||||
icon: Frame,
|
||||
},
|
||||
// Format & Conversion
|
||||
{
|
||||
name: "SVG to Raster",
|
||||
description: "Convert SVG to PNG, JPEG, WebP, AVIF, TIFF, GIF, or HEIF at custom scale and DPI",
|
||||
category: "format",
|
||||
icon: FileImage,
|
||||
},
|
||||
{
|
||||
name: "Image to SVG",
|
||||
description: "Vectorize images using tracing",
|
||||
category: "format",
|
||||
icon: PenTool,
|
||||
},
|
||||
{ name: "Image to SVG", description: "Vectorize images using tracing", category: "format" },
|
||||
{
|
||||
name: "GIF Tools",
|
||||
description:
|
||||
"Resize, optimize, change speed, reverse, extract frames, and rotate animated GIFs",
|
||||
category: "format",
|
||||
icon: Film,
|
||||
},
|
||||
{
|
||||
name: "PDF to Image",
|
||||
description: "Convert PDF pages to images",
|
||||
category: "format",
|
||||
icon: FileOutput,
|
||||
},
|
||||
{ name: "PDF to Image", description: "Convert PDF pages to images", category: "format" },
|
||||
];
|
||||
|
||||
const categoryMap = new Map(categories.map((c) => [c.id, c]));
|
||||
@@ -298,27 +439,30 @@ export function BentoGrid() {
|
||||
|
||||
{/* Tool grid */}
|
||||
{filtered.length > 0 ? (
|
||||
<div className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
<div className="mt-8 grid gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5">
|
||||
{filtered.map((tool) => {
|
||||
const cat = categoryMap.get(tool.category);
|
||||
const Icon = tool.icon;
|
||||
return (
|
||||
<div
|
||||
key={tool.name}
|
||||
className="rounded-xl border border-border bg-background p-5 transition-shadow hover:shadow-md"
|
||||
className="tool-card flex flex-col items-center rounded-xl border border-border bg-background-alt px-4 py-6 text-center transition-all hover:shadow-md"
|
||||
style={
|
||||
{
|
||||
"--cat-color": cat?.color,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<span
|
||||
className="inline-block h-2.5 w-2.5 shrink-0 rounded-full"
|
||||
style={{ backgroundColor: cat?.color }}
|
||||
/>
|
||||
<span className="font-semibold">{tool.name}</span>
|
||||
<Icon size={30} style={{ color: cat?.color }} className="mb-3 shrink-0" />
|
||||
<div className="flex items-center justify-center gap-1.5">
|
||||
<span className="font-bold text-sm">{tool.name}</span>
|
||||
{tool.category === "ai" && (
|
||||
<span className="rounded bg-amber-100 px-1.5 py-0.5 text-[10px] font-bold leading-none text-amber-700">
|
||||
AI
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="mt-2 text-sm leading-relaxed text-muted">{tool.description}</p>
|
||||
<p className="mt-1.5 text-xs leading-relaxed text-muted">{tool.description}</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
@@ -13,3 +13,8 @@
|
||||
--color-dark-fg: #fafaf9;
|
||||
--color-dark-muted: #a8a29e;
|
||||
}
|
||||
|
||||
/* Tool card hover border uses --cat-color set inline */
|
||||
.tool-card:hover {
|
||||
border-color: var(--cat-color);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user