modularized a bit of a code

components/Checkbox.tsx

@@ -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>
+  );
+}

components/RadioButton.tsx

@@ -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>
+  );
+}

components/Search.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 import ClickAwayHandler from "./ClickAwayHandler";
 import useSearchSettingsStore from "@/store/search";
 import { useRouter } from "next/router";
+import Checkbox from "./Checkbox";
 
 export default function Search() {
   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"
         />
         {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">
-            <p className="text-sky-900">Filter by:</p>
-            <div className="flex gap-1 text-sm font-bold flex-wrap text-sky-500">
-              <label className="cursor-pointer">
-                <input
-                  type="checkbox"
-                  checked={searchSettings.filter.name}
-                  onChange={() => toggleCheckbox("name")}
-                  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">
-                  Name
-                </span>
-              </label>
-              <label className="cursor-pointer">
-                <input
-                  type="checkbox"
-                  checked={searchSettings.filter.url}
-                  onChange={() => toggleCheckbox("url")}
-                  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">
-                  Link
-                </span>
-              </label>
-              <label className="cursor-pointer">
-                <input
-                  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 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">
+            <div className="grid grid-cols-2 gap-x-5 gap-y-2 w-fit mx-auto">
+              <p className="text-sky-900 font-semibold">Filter by</p>
+              <Checkbox
+                label="Name"
+                state={searchSettings.filter.name}
+                onClick={() => toggleCheckbox("name")}
+              />
+              <Checkbox
+                label="Link"
+                state={searchSettings.filter.url}
+                onClick={() => toggleCheckbox("url")}
+              />
+              <Checkbox
+                label="Title"
+                state={searchSettings.filter.title}
+                onClick={() => toggleCheckbox("title")}
+              />
+              <Checkbox
+                label="Collection"
+                state={searchSettings.filter.collection}
+                onClick={() => toggleCheckbox("collection")}
+              />
+              <Checkbox
+                label="Tags"
+                state={searchSettings.filter.tags}
+                onClick={() => toggleCheckbox("tags")}
+              />
             </div>
           </div>
         ) : null}

pages/collections/index.tsx

@@ -7,7 +7,6 @@ import useCollectionStore from "@/store/collections";
 import {
   faAdd,
   faBox,
-  faCheck,
   faEllipsis,
   faPlus,
   faSort,
@@ -20,6 +19,8 @@ import Modal from "@/components/Modal";
 import AddCollection from "@/components/Modal/AddCollection";
 import MainLayout from "@/layouts/MainLayout";
 import ClickAwayHandler from "@/components/ClickAwayHandler";
+import { faCircle, faCircleCheck } from "@fortawesome/free-regular-svg-icons";
+import RadioButton from "@/components/RadioButton";
 
 export default function () {
   const { collections } = useCollectionStore();
@@ -32,7 +33,7 @@ export default function () {
     setCollectionModal(!collectionModal);
   };
 
-  const [sortBy, setSortBy] = useState("");
+  const [sortBy, setSortBy] = useState("Name");
 
   const handleSortChange = (event: ChangeEvent<HTMLInputElement>) => {
     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"
               >
-                <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">
-                  <label className="cursor-pointer flex items-center gap-2">
-                    <input
-                      type="radio"
-                      name="Sort"
-                      value="Name"
-                      className="peer sr-only"
-                      checked={sortBy === "Name"}
-                      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">
-                      Name
-                    </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="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>
+                  <RadioButton
+                    label="Name"
+                    state={sortBy === "Name"}
+                    onClick={handleSortChange}
+                  />
+
+                  <RadioButton
+                    label="Description"
+                    state={sortBy === "Description"}
+                    onClick={handleSortChange}
+                  />
+
+                  <RadioButton
+                    label="Date"
+                    state={sortBy === "Date"}
+                    onClick={handleSortChange}
+                  />
                 </div>
               </ClickAwayHandler>
             ) : null}