mirror of
https://github.com/upscayl/upscayl.git
synced 2024-12-18 18:35:58 +01:00
95843ded88
* Initial refactor * Remove unused imports * Update code * Refactor and Update Code - Change file names to kebab-caase - Add new useTranslation Hook - Change useLog hook name to useLogger - Update translation hook to provide autocomplete * Update import and component name * Rename files and components * Update locales * Update electron commands * Update var * Change Lowercase * Replace filter with map * Add props * Update flag check * Add validate paths * Update formats * Update import * Update function * Update function and translation * Update handlePaste
40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
import { translationAtom } from "@/atoms/translations-atom";
|
|
import { tileSizeAtom } from "@/atoms/user-settings-atom";
|
|
import { useAtom, useAtomValue } from "jotai";
|
|
import React from "react";
|
|
|
|
export function InputTileSize() {
|
|
const [tileSize, setTileSize] = useAtom(tileSizeAtom);
|
|
const t = useAtomValue(translationAtom);
|
|
|
|
return (
|
|
<div>
|
|
<div className="flex flex-col gap-1">
|
|
<p className="text-sm font-medium">
|
|
{t("SETTINGS.CUSTOM_TILE_SIZE.TITLE")}
|
|
</p>
|
|
<p className="text-xs text-base-content/80">
|
|
<br />
|
|
{t("SETTINGS.CUSTOM_TILE_SIZE.DESCRIPTION")}
|
|
</p>
|
|
</div>
|
|
<div className="mt-2 flex items-center gap-2">
|
|
<input
|
|
type="number"
|
|
value={tileSize}
|
|
onChange={(e) => {
|
|
if (e.currentTarget.value === "") {
|
|
setTileSize(null);
|
|
localStorage.removeItem("customWidth");
|
|
return;
|
|
}
|
|
setTileSize(parseInt(e.currentTarget.value));
|
|
}}
|
|
placeholder="0 = Auto"
|
|
className="input input-primary [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|