External/SnapOtter
1
0
Fork 0
mirror of https://github.com/snapotter-hq/SnapOtter.git synced 2026-08-03 07:46:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor: rename Tool.alpha to Tool.experimental

Browse Source
This commit is contained in:
Siddharth Kumar Sah
2026-03-26 01:10:51 +08:00
parent ab370a74fe
commit 585d66f0c9
178 changed files with 5637 additions and 4082 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/tools/watermark-text-settings.tsx
+48 -10
View File
@@ -1,15 +1,23 @@
import { useState } from "react";
import { useFileStore } from "@/stores/file-store";
import { useToolProcessor } from "@/hooks/use-tool-processor";
import { Download } from "lucide-react";
import { useState } from "react";
import { ProgressCard } from "@/components/common/progress-card";
import { useToolProcessor } from "@/hooks/use-tool-processor";
import { useFileStore } from "@/stores/file-store";
type Position = "center" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "tiled";
export function WatermarkTextSettings() {
const { files } = useFileStore();
const { processFiles, processAllFiles, processing, error, downloadUrl, originalSize, processedSize, progress } =
useToolProcessor("watermark-text");
const {
processFiles,
processAllFiles,
processing,
error,
downloadUrl,
originalSize,
processedSize,
progress,
} = useToolProcessor("watermark-text");
const [text, setText] = useState("Sample Watermark");
const [fontSize, setFontSize] = useState(48);
@@ -46,20 +54,39 @@ export function WatermarkTextSettings() {
<label className="text-xs text-muted-foreground">Font Size</label>
<span className="text-xs font-mono text-foreground">{fontSize}px</span>
</div>
<input type="range" min={8} max={200} value={fontSize} onChange={(e) => setFontSize(Number(e.target.value))} className="w-full mt-1" />
<input
type="range"
min={8}
max={200}
value={fontSize}
onChange={(e) => setFontSize(Number(e.target.value))}
className="w-full mt-1"
/>
</div>
<div className="flex gap-2">
<div className="flex-1">
<label className="text-xs text-muted-foreground">Color</label>
<input type="color" value={color} onChange={(e) => setColor(e.target.value)} className="w-full mt-0.5 h-8 rounded border border-border" />
<input
type="color"
value={color}
onChange={(e) => setColor(e.target.value)}
className="w-full mt-0.5 h-8 rounded border border-border"
/>
</div>
<div className="flex-1">
<div className="flex justify-between items-center">
<label className="text-xs text-muted-foreground">Opacity</label>
<span className="text-xs font-mono text-foreground">{opacity}%</span>
</div>
<input type="range" min={0} max={100} value={opacity} onChange={(e) => setOpacity(Number(e.target.value))} className="w-full mt-1" />
<input
type="range"
min={0}
max={100}
value={opacity}
onChange={(e) => setOpacity(Number(e.target.value))}
className="w-full mt-1"
/>
</div>
</div>
@@ -84,7 +111,14 @@ export function WatermarkTextSettings() {
<label className="text-xs text-muted-foreground">Rotation</label>
<span className="text-xs font-mono text-foreground">{rotation}&deg;</span>
</div>
<input type="range" min={-180} max={180} value={rotation} onChange={(e) => setRotation(Number(e.target.value))} className="w-full mt-1" />
<input
type="range"
min={-180}
max={180}
value={rotation}
onChange={(e) => setRotation(Number(e.target.value))}
className="w-full mt-1"
/>
</div>
{error && <p className="text-xs text-red-500">{error}</p>}
@@ -116,7 +150,11 @@ export function WatermarkTextSettings() {
)}
{downloadUrl && (
<a href={downloadUrl} download className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5">
<a
href={downloadUrl}
download
className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
>
<Download className="h-4 w-4" />
Download
</a>