added select component

src/app/(game)/page.tsx

@@ -11,7 +11,7 @@ import { useState } from "react";
 import { twMerge } from "tailwind-merge";
 import { useLocalStorage } from "usehooks-ts";
 import { CheckCircle2, Circle } from "lucide-react";
-
+import Select from "@/components/Select";
 function Activity({
   activity,
   finished,
@@ -146,15 +146,15 @@ export default function Home() {
         </div>
 
         <div className="flex justify-end">
-          <select
+          <Select
             value={filter}
             onChange={(e) => setFilter(e.target.value as Filter)}
-            className="h-10 w-24 rounded-xl border-2 border-sitcon-secondary bg-sitcon-white px-3 py-[6px]"
+            className="h-10 w-24 appearance-none rounded-xl border-2 border-sitcon-secondary bg-sitcon-white px-3 py-[6px]"
           >
             <option value="all">全部</option>
             <option value="finished">已完成</option>
             <option value="unfinished">未完成</option>
-          </select>
+          </Select>
         </div>
 
         <div className="grid gap-3 md:grid-cols-2">

src/components/Scanner.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { useEffect, useState } from "react";
 import { QrReader } from "react-qr-reader";
-
+import Select from "@/components/Select";
 // Override console.error
 // This is a hack to suppress the warning about missing defaultProps in react-qr-reader
 const error = console.error;
@@ -51,18 +51,19 @@ function Scanner({ onResult }: { onResult: (result: string) => void }) {
 
   return (
     <div className="relative flex h-full min-h-[396px] w-full items-center justify-center text-center">
-      <select
+      <Select
         onChange={(e) => setCurrentCamera(e.target.value)}
         value={currentCamera || ""}
-        className="absolute left-0 right-0 top-4 z-[1] m-auto w-[256px] rounded-md bg-white/75 p-2 shadow-md outline-0 backdrop-blur-lg"
+        className="w-full appearance-none rounded-md bg-white/75 p-2 shadow-md outline-0 backdrop-blur-lg"
+        containerClassName="absolute left-0 right-0 top-4 z-[1] w-[256px] m-auto"
       >
         <option value={manual}>手動輸入</option>
         {cameras.map((camera) => (
           <option key={camera.deviceId} value={camera.deviceId}>
             {camera.label}
           </option>
         ))}
-      </select>
+      </Select>
 
       {currentCamera === "manual" ? (
         <Manual onResult={onResult} />

src/components/Select.tsx

@@ -0,0 +1,23 @@
+import { twMerge } from "tailwind-merge";
+import { ChevronDown } from "lucide-react";
+export default function Select({
+  children,
+  className,
+  containerClassName = "",
+  ...props
+}: {
+  containerClassName?: string;
+} & React.SelectHTMLAttributes<HTMLSelectElement>) {
+  return (
+    <div className={twMerge("relative", containerClassName)}>
+      <select {...props} className={className}>
+        {children}
+      </select>
+      <ChevronDown
+        strokeWidth={1}
+        size={24}
+        className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 transform"
+      />
+    </div>
+  );
+}