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

feat: add html file upload mode to html-to-image tool

Browse Source
This commit is contained in:
SnapOtter
2026-06-06 21:45:39 +08:00
parent 8512c518b2
commit 6b037e3abc
26 changed files with 248 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/tools/html-to-image-settings.tsx
+54 -10
View File
@@ -18,17 +18,61 @@ export function HtmlToImageSettings() {
return (
<form onSubmit={handleSubmit} className="space-y-4">
<div>
<label className="mb-1 block text-sm font-medium">{ts.url}</label>
<input
type="url"
value={store.url}
onChange={(e) => store.setUrl(e.target.value)}
placeholder={ts.urlPlaceholder}
className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm"
/>
<div className="flex gap-1 rounded-lg bg-muted p-1">
<button
type="button"
onClick={() => store.setMode("url")}
className={`flex-1 rounded-md px-3 py-1.5 text-sm font-medium transition-colors ${
store.mode === "url"
? "bg-background shadow-sm"
: "text-muted-foreground hover:text-foreground"
}`}
>
{ts.modeUrl}
</button>
<button
type="button"
onClick={() => store.setMode("html")}
className={`flex-1 rounded-md px-3 py-1.5 text-sm font-medium transition-colors ${
store.mode === "html"
? "bg-background shadow-sm"
: "text-muted-foreground hover:text-foreground"
}`}
>
{ts.modeHtml}
</button>
</div>
{store.mode === "url" && (
<div>
<label className="mb-1 block text-sm font-medium">{ts.url}</label>
<input
type="url"
value={store.url}
onChange={(e) => store.setUrl(e.target.value)}
placeholder={ts.urlPlaceholder}
className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm"
/>
</div>
)}
{store.mode === "html" && (
<div>
<label className="mb-1 block text-sm font-medium">{ts.htmlFile}</label>
<input
type="file"
accept=".html,.htm"
onChange={(e) => {
const file = e.target.files?.[0];
if (file) {
file.text().then((text) => store.setHtmlContent(text));
}
}}
className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm file:mr-3 file:rounded-md file:border-0 file:bg-primary file:px-3 file:py-1 file:text-sm file:font-medium file:text-primary-foreground"
/>
</div>
)}
<div>
<label className="mb-1 block text-sm font-medium">{ts.format}</label>
<select
@@ -128,7 +172,7 @@ export function HtmlToImageSettings() {
<button
type="submit"
disabled={!store.url || store.capturing}
disabled={(store.mode === "url" ? !store.url : !store.htmlContent) || store.capturing}
className="inline-flex w-full items-center justify-center gap-2 rounded-lg bg-primary px-4 py-2.5 text-sm font-medium text-primary-foreground disabled:opacity-50"
>
{store.capturing && <Loader2 className="h-4 w-4 animate-spin" />}