Add custom Select component and update HomePage to use it

frontend/src/components/select.tsx

@@ -0,0 +1,59 @@
+import { MdArrowDropDown } from "react-icons/md";
+import { createRef } from "react";
+
+export default function Select({
+  current,
+  values,
+  onSelected,
+}: {
+  current?: number;
+  values: string[];
+  onSelected: (value: number) => void;
+}) {
+  const menuRef = createRef<HTMLUListElement>();
+
+  if (!values || values.length === 0) {
+    return <></>;
+  }
+  if (current && (current < 0 || current >= values.length)) {
+    current = undefined;
+  }
+
+  return (
+    <div className={"dropdown"}>
+      <div>
+        <div
+          tabIndex={0}
+          role={"button"}
+          className={
+            "flex border border-primary rounded-3xl px-4 py-2 items-center cursor-pointer min-w-52 focus:outline-2 focus:outline-primary outline-offset-2"
+          }
+        >
+          <span className={"flex-1 text-sm"}>
+            {current != null && values[current]}
+          </span>
+          <span className={"w-4"}></span>
+          <MdArrowDropDown size={20} />
+        </div>
+      </div>
+      <ul
+        ref={menuRef}
+        tabIndex={0}
+        className="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow mt-1"
+      >
+        {values.map((value, index) => (
+          <li
+            key={index}
+            className={`cursor-pointer ${current === index ? "bg-primary text-primary-content rounded-box" : ""}`}
+            onClick={() => {
+              menuRef.current?.blur();
+              onSelected(index);
+            }}
+          >
+            <span>{value}</span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

frontend/src/pages/home_page.tsx

@@ -5,6 +5,7 @@ import { app } from "../app.ts";
 import { RSort } from "../network/models.ts";
 import { useTranslation } from "react-i18next";
 import { useAppContext } from "../components/AppContext.tsx";
+import Select from "../components/select.tsx";
 
 export default function HomePage() {
   useEffect(() => {
@@ -30,23 +31,24 @@ export default function HomePage() {
 
   return (
     <>
-      <div className={"flex p-4 items-center"}>
+      <div className={"flex pt-4 px-4 items-center"}>
-        <select
+        <Select
-          value={order}
+          values={[
-          className="select w-52 select-primary"
+            t("Time Ascending"),
-          onInput={(e) => {
+            t("Time Descending"),
-            const value = Number(e.currentTarget.value);
+            t("Views Ascending"),
-            setOrder(value as RSort);
+            t("Views Descending"),
+            t("Downloads Ascending"),
+            t("Downloads Descending"),
+          ]}
+          current={order}
+          onSelected={(index) => {
+            setOrder(index);
+            if (appContext) {
+              appContext.set("home_page_order", index);
+            }
           }}
-        >
+        />
-          <option disabled>{t("Select a Order")}</option>
-          <option value="0">{t("Time Ascending")}</option>
-          <option value="1">{t("Time Descending")}</option>
-          <option value="2">{t("Views Ascending")}</option>
-          <option value="3">{t("Views Descending")}</option>
-          <option value="4">{t("Downloads Ascending")}</option>
-          <option value="5">{t("Downloads Descending")}</option>
-        </select>
       </div>
       <ResourcesView
         key={`home_page_${order}`}