xwx.moe/el.xwx.moe
xwx.moe/ el.xwx.moe
1
0
Disbranĉigi 0
Fontkodo Issues Tirpetoj Actions Packages Projects Eldonoj Wiki Activity

change the checkboxes to radio button

This commit is contained in:
daniel31x13 2024-02-08 08:45:14 -05:00
parent ef08edf1fb
commit efddd55841
1 changed files with 82 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
pages/settings/preference.tsx
View File

@ -21,7 +21,9 @@ export default function Appearance() {
const [archiveAsPDF, setArchiveAsPDF] = useState<boolean>(false); const [archiveAsPDF, setArchiveAsPDF] = useState<boolean>(false);
const [archiveAsWaybackMachine, setArchiveAsWaybackMachine] = const [archiveAsWaybackMachine, setArchiveAsWaybackMachine] =
useState<boolean>(false); useState<boolean>(false);
const [linksRouteTo, setLinksRouteTo] = useState<LinksRouteTo>(user.linksRouteTo); const [linksRouteTo, setLinksRouteTo] = useState<LinksRouteTo>(
user.linksRouteTo
);
useEffect(() => { useEffect(() => {
setUser({ setUser({
@ -29,9 +31,15 @@ export default function Appearance() {
archiveAsScreenshot, archiveAsScreenshot,
archiveAsPDF, archiveAsPDF,
archiveAsWaybackMachine, archiveAsWaybackMachine,
linksRouteTo linksRouteTo,
}); });
}, [account, archiveAsScreenshot, archiveAsPDF, archiveAsWaybackMachine, linksRouteTo]); }, [
account,
archiveAsScreenshot,
archiveAsPDF,
archiveAsWaybackMachine,
linksRouteTo,
]);
function objectIsEmpty(obj: object) { function objectIsEmpty(obj: object) {
return Object.keys(obj).length === 0; return Object.keys(obj).length === 0;
@ -74,10 +82,11 @@ export default function Appearance() {
<p className="mb-3">Select Theme</p> <p className="mb-3">Select Theme</p>
<div className="flex gap-3 w-full"> <div className="flex gap-3 w-full">
<div <div
className={`w-full text-center outline-solid outline-neutral-content outline dark:outline-neutral-700 h-36 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-black ${localStorage.getItem("theme") === "dark" className={`w-full text-center outline-solid outline-neutral-content outline dark:outline-neutral-700 h-36 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-black ${
? "dark:outline-primary text-primary" localStorage.getItem("theme") === "dark"
: "text-white" ? "dark:outline-primary text-primary"
}`} : "text-white"
}`}
onClick={() => updateSettings({ theme: "dark" })} onClick={() => updateSettings({ theme: "dark" })}
> >
<i className="bi-moon-fill text-6xl"></i> <i className="bi-moon-fill text-6xl"></i>
@ -86,10 +95,11 @@ export default function Appearance() {
{/* <hr className="my-3 outline-1 outline-neutral-content dark:outline-neutral-700" /> */} {/* <hr className="my-3 outline-1 outline-neutral-content dark:outline-neutral-700" /> */}
</div> </div>
<div <div
className={`w-full text-center outline-solid outline-neutral-content outline dark:outline-neutral-700 h-36 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-white ${localStorage.getItem("theme") === "light" className={`w-full text-center outline-solid outline-neutral-content outline dark:outline-neutral-700 h-36 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-white ${
? "outline-primary text-primary" localStorage.getItem("theme") === "light"
: "text-black" ? "outline-primary text-primary"
}`} : "text-black"
}`}
onClick={() => updateSettings({ theme: "light" })} onClick={() => updateSettings({ theme: "light" })}
> >
<i className="bi-sun-fill text-6xl"></i> <i className="bi-sun-fill text-6xl"></i>
@ -135,31 +145,71 @@ export default function Appearance() {
<div className="divider my-3"></div> <div className="divider my-3"></div>
<p>Clicking on Links should open:</p> <p>Clicking on Links should:</p>
<div className="p-3"> <div className="p-3">
<Checkbox <label
label="Original" className="label cursor-pointer flex gap-2 justify-start"
state={linksRouteTo === LinksRouteTo.ORIGINAL} tabIndex={0}
onClick={() => setLinksRouteTo(LinksRouteTo.ORIGINAL)} role="button"
/> >
<input
type="radio"
name="link-preference-radio"
className="radio checked:bg-primary"
value="Original"
checked={linksRouteTo === LinksRouteTo.ORIGINAL}
onChange={() => setLinksRouteTo(LinksRouteTo.ORIGINAL)}
/>
<span className="label-text">Open the original content</span>
</label>
<Checkbox <label
label="PDF" className="label cursor-pointer flex gap-2 justify-start"
state={linksRouteTo === LinksRouteTo.PDF} tabIndex={0}
onClick={() => setLinksRouteTo(LinksRouteTo.PDF)} role="button"
/> >
<input
type="radio"
name="link-preference-radio"
className="radio checked:bg-primary"
value="PDF"
checked={linksRouteTo === LinksRouteTo.PDF}
onChange={() => setLinksRouteTo(LinksRouteTo.PDF)}
/>
<span className="label-text">Open PDF, if available</span>
</label>
<Checkbox <label
label="Readable" className="label cursor-pointer flex gap-2 justify-start"
state={linksRouteTo === LinksRouteTo.READABLE} tabIndex={0}
onClick={() => setLinksRouteTo(LinksRouteTo.READABLE)} role="button"
/> >
<input
type="radio"
name="link-preference-radio"
className="radio checked:bg-primary"
value="Readable"
checked={linksRouteTo === LinksRouteTo.READABLE}
onChange={() => setLinksRouteTo(LinksRouteTo.READABLE)}
/>
<span className="label-text">Open Readable, if available</span>
</label>
<Checkbox <label
label="Screenshot" className="label cursor-pointer flex gap-2 justify-start"
state={linksRouteTo === LinksRouteTo.SCREENSHOT} tabIndex={0}
onClick={() => setLinksRouteTo(LinksRouteTo.SCREENSHOT)} role="button"
/> >
<input
type="radio"
name="link-preference-radio"
className="radio checked:bg-primary"
value="Screenshot"
checked={linksRouteTo === LinksRouteTo.SCREENSHOT}
onChange={() => setLinksRouteTo(LinksRouteTo.SCREENSHOT)}
/>
<span className="label-text">Open Screenshot, if available</span>
</label>
</div> </div>
</div> </div>