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

modularized a bit of a code

This commit is contained in:
Daniel 2023-05-15 22:48:33 +03:30
parent 9b064bbb1e
commit ff158915e7
4 changed files with 115 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
components/Checkbox.tsx Normal file
View File

@ -0,0 +1,31 @@
import { faSquare, faSquareCheck } from "@fortawesome/free-regular-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { ChangeEventHandler } from "react";
type Props = {
label: string;
state: boolean;
onClick: ChangeEventHandler<HTMLInputElement>;
};
export default function Checkbox({ label, state, onClick }: Props) {
return (
<label className="cursor-pointer flex items-center gap-2 text-sky-500">
<input
type="checkbox"
checked={state}
onChange={onClick}
className="peer sr-only"
/>
<FontAwesomeIcon
icon={faSquareCheck}
className="w-5 h-5 text-sky-500 peer-checked:block hidden"
/>
<FontAwesomeIcon
icon={faSquare}
className="w-5 h-5 text-sky-500 peer-checked:hidden block"
/>
<span className="text-sky-900 rounded select-none">{label}</span>
</label>
);
}

32
components/RadioButton.tsx Normal file
View File

@ -0,0 +1,32 @@
import { faCircle, faCircleCheck } from "@fortawesome/free-regular-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { ChangeEventHandler } from "react";
type Props = {
label: string;
state: boolean;
onClick: ChangeEventHandler<HTMLInputElement>;
};
export default function RadioButton({ label, state, onClick }: Props) {
return (
<label className="cursor-pointer flex items-center gap-2">
<input
type="radio"
value={label}
className="peer sr-only"
checked={state}
onChange={onClick}
/>
<FontAwesomeIcon
icon={faCircleCheck}
className="w-5 h-5 text-sky-500 peer-checked:block hidden"
/>
<FontAwesomeIcon
icon={faCircle}
className="w-5 h-5 text-sky-500 peer-checked:hidden block"
/>
<span className="text-sky-900 rounded select-none">{label}</span>
</label>
);
}

87
components/Search.tsx
View File

@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
import ClickAwayHandler from "./ClickAwayHandler"; import ClickAwayHandler from "./ClickAwayHandler";
import useSearchSettingsStore from "@/store/search"; import useSearchSettingsStore from "@/store/search";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import Checkbox from "./Checkbox";
export default function Search() { export default function Search() {
const router = useRouter(); const router = useRouter();
@ -43,64 +44,34 @@ export default function Search() {
className="border border-sky-100 rounded-md pr-6 w-60 focus:border-sky-500 sm:focus:w-80 hover:border-sky-500 duration-100 outline-none p-1" className="border border-sky-100 rounded-md pr-6 w-60 focus:border-sky-500 sm:focus:w-80 hover:border-sky-500 duration-100 outline-none p-1"
/> />
{searchBox ? ( {searchBox ? (
<div className="absolute flex flex-wrap items-baseline justify-between gap-2 top-9 left-0 shadow-md bg-gray-50 rounded-md p-2 z-10 border border-sky-100 w-60 sm:w-80"> <div className="absolute top-9 left-0 shadow-md bg-gray-50 rounded-md p-2 z-20 border border-sky-100 w-60 sm:w-80">
<p className="text-sky-900">Filter by:</p> <div className="grid grid-cols-2 gap-x-5 gap-y-2 w-fit mx-auto">
<div className="flex gap-1 text-sm font-bold flex-wrap text-sky-500"> <p className="text-sky-900 font-semibold">Filter by</p>
<label className="cursor-pointer"> <Checkbox
<input label="Name"
type="checkbox" state={searchSettings.filter.name}
checked={searchSettings.filter.name} onClick={() => toggleCheckbox("name")}
onChange={() => toggleCheckbox("name")} />
className="peer sr-only" <Checkbox
/> label="Link"
<span className="text-sky-900 peer-checked:bg-sky-500 text-xs hover:bg-sky-200 duration-75 peer-checked:text-white rounded p-1 select-none"> state={searchSettings.filter.url}
Name onClick={() => toggleCheckbox("url")}
</span> />
</label> <Checkbox
<label className="cursor-pointer"> label="Title"
<input state={searchSettings.filter.title}
type="checkbox" onClick={() => toggleCheckbox("title")}
checked={searchSettings.filter.url} />
onChange={() => toggleCheckbox("url")} <Checkbox
className="peer sr-only" label="Collection"
/> state={searchSettings.filter.collection}
<span className="text-sky-900 peer-checked:bg-sky-500 text-xs hover:bg-sky-200 duration-75 peer-checked:text-white rounded p-1 select-none"> onClick={() => toggleCheckbox("collection")}
Link />
</span> <Checkbox
</label> label="Tags"
<label className="cursor-pointer"> state={searchSettings.filter.tags}
<input onClick={() => toggleCheckbox("tags")}
type="checkbox" />
checked={searchSettings.filter.title}
onChange={() => toggleCheckbox("title")}
className="peer sr-only"
/>
<span className="text-sky-900 peer-checked:bg-sky-500 text-xs hover:bg-sky-200 duration-75 peer-checked:text-white rounded p-1 select-none">
Title
</span>
</label>
<label className="cursor-pointer">
<input
type="checkbox"
checked={searchSettings.filter.collection}
onChange={() => toggleCheckbox("collection")}
className="peer sr-only"
/>
<span className="text-sky-900 peer-checked:bg-sky-500 text-xs hover:bg-sky-200 duration-75 peer-checked:text-white rounded p-1 select-none">
Collection
</span>
</label>
<label className="cursor-pointer">
<input
type="checkbox"
checked={searchSettings.filter.tags}
onChange={() => toggleCheckbox("tags")}
className="peer sr-only"
/>
<span className="text-sky-900 peer-checked:bg-sky-500 text-xs hover:bg-sky-200 duration-75 peer-checked:text-white rounded p-1 select-none">
Tags
</span>
</label>
</div> </div>
</div> </div>
) : null} ) : null}

77
pages/collections/index.tsx
View File

@ -7,7 +7,6 @@ import useCollectionStore from "@/store/collections";
import { import {
faAdd, faAdd,
faBox, faBox,
faCheck,
faEllipsis, faEllipsis,
faPlus, faPlus,
faSort, faSort,
@ -20,6 +19,8 @@ import Modal from "@/components/Modal";
import AddCollection from "@/components/Modal/AddCollection"; import AddCollection from "@/components/Modal/AddCollection";
import MainLayout from "@/layouts/MainLayout"; import MainLayout from "@/layouts/MainLayout";
import ClickAwayHandler from "@/components/ClickAwayHandler"; import ClickAwayHandler from "@/components/ClickAwayHandler";
import { faCircle, faCircleCheck } from "@fortawesome/free-regular-svg-icons";
import RadioButton from "@/components/RadioButton";
export default function () { export default function () {
const { collections } = useCollectionStore(); const { collections } = useCollectionStore();
@ -32,7 +33,7 @@ export default function () {
setCollectionModal(!collectionModal); setCollectionModal(!collectionModal);
}; };
const [sortBy, setSortBy] = useState(""); const [sortBy, setSortBy] = useState("Name");
const handleSortChange = (event: ChangeEvent<HTMLInputElement>) => { const handleSortChange = (event: ChangeEvent<HTMLInputElement>) => {
setSortBy(event.target.value); setSortBy(event.target.value);
@ -104,59 +105,27 @@ export default function () {
}} }}
className="absolute top-8 right-0 shadow-md bg-gray-50 rounded-md p-2 z-10 border border-sky-100 w-36" className="absolute top-8 right-0 shadow-md bg-gray-50 rounded-md p-2 z-10 border border-sky-100 w-36"
> >
<p className="mb-2 text-sky-900 text-sm text-center">Sort by</p> <p className="mb-2 text-sky-900 text-center font-semibold">
Sort by
</p>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<label className="cursor-pointer flex items-center gap-2"> <RadioButton
<input label="Name"
type="radio" state={sortBy === "Name"}
name="Sort" onClick={handleSortChange}
value="Name" />
className="peer sr-only"
checked={sortBy === "Name"} <RadioButton
onChange={handleSortChange} label="Description"
/> state={sortBy === "Description"}
<span className="text-sky-900 peer-checked:bg-sky-500 hover:bg-sky-200 duration-75 peer-checked:text-white rounded p-1 select-none"> onClick={handleSortChange}
Name />
</span>
<FontAwesomeIcon <RadioButton
icon={faCheck} label="Date"
className="w-5 h-5 text-sky-500 peer-checked:block hidden" state={sortBy === "Date"}
/> onClick={handleSortChange}
</label> />
<label className="cursor-pointer flex items-center gap-2">
<input
type="radio"
name="Sort"
value="Description"
className="peer sr-only"
checked={sortBy === "Description"}
onChange={handleSortChange}
/>
<span className="text-sky-900 peer-checked:bg-sky-500 hover:bg-sky-200 duration-75 peer-checked:text-white rounded p-1 select-none">
Description
</span>
<FontAwesomeIcon
icon={faCheck}
className="w-5 h-5 text-sky-500 peer-checked:block hidden"
/>
</label>
<label className="cursor-pointer flex items-center gap-2">
<input
type="radio"
name="Sort"
value="Date"
className="peer sr-only"
checked={sortBy === "Date"}
onChange={handleSortChange}
/>
<span className="text-sky-900 peer-checked:bg-sky-500 hover:bg-sky-200 duration-75 peer-checked:text-white rounded p-1 select-none">
Date
</span>
<FontAwesomeIcon
icon={faCheck}
className="w-5 h-5 text-sky-500 peer-checked:block hidden"
/>
</label>
</div> </div>
</ClickAwayHandler> </ClickAwayHandler>
) : null} ) : null}