From 714848265aabd487c84845d18e3d816aae4331c3 Mon Sep 17 00:00:00 2001
From: ynwd <10122431+ynwd@users.noreply.github.com>
Date: Wed, 4 Dec 2024 07:10:44 +0700
Subject: [PATCH] chore: add arrow down icon

---
 components/icons/arrow-down.tsx    | 21 +++++++++++++++++++++
 modules/index/index.navigation.tsx | 19 ++-----------------
 modules/index/index.room.tsx       | 28 ++++++++++++++++------------
 3 files changed, 39 insertions(+), 29 deletions(-)
 create mode 100644 components/icons/arrow-down.tsx

diff --git a/components/icons/arrow-down.tsx b/components/icons/arrow-down.tsx
new file mode 100644
index 00000000..52fa9bd8
--- /dev/null
+++ b/components/icons/arrow-down.tsx
@@ -0,0 +1,21 @@
+export default function ArrowDownSvg() {
+  return (
+    <svg
+      class="w-4 h-4"
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      width="12"
+      height="12"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <path
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="1"
+        d="m19 9-7 7-7-7"
+      />
+    </svg>
+  );
+}
diff --git a/modules/index/index.navigation.tsx b/modules/index/index.navigation.tsx
index 235ca62b..a0714f96 100644
--- a/modules/index/index.navigation.tsx
+++ b/modules/index/index.navigation.tsx
@@ -3,6 +3,7 @@
 import { effect } from "@preact/signals";
 import { AppContext } from "@app/modules/index/index.context.ts";
 import { useContext, useEffect, useState } from "preact/hooks";
+import ArrowDownSvg from "@app/components/icons/arrow-down.tsx";
 
 // import useWebSocket from "@app/modules/hook/socket.ts";
 
@@ -218,23 +219,7 @@ function Item(props: { data: any }) {
       </div>
 
       <div class={`cursor-pointer`} onClick={() => handleClick(props.data)}>
-        <svg
-          class="w-4 h-4"
-          aria-hidden="true"
-          xmlns="http://www.w3.org/2000/svg"
-          width="12"
-          height="12"
-          fill="none"
-          viewBox="0 0 24 24"
-        >
-          <path
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="1"
-            d="m19 9-7 7-7-7"
-          />
-        </svg>
+        <ArrowDownSvg />
       </div>
       <div
         class={`absolute ${
diff --git a/modules/index/index.room.tsx b/modules/index/index.room.tsx
index f4dc1e66..7510fd7b 100644
--- a/modules/index/index.room.tsx
+++ b/modules/index/index.room.tsx
@@ -2,6 +2,7 @@ import { JSX } from "preact/jsx-runtime";
 import { useContext, useState } from "preact/hooks";
 import { AppContext } from "@app/modules/index/index.context.ts";
 import useFetch from "@app/modules/hook/fetch.ts";
+import ArrowDownSvg from "@app/components/icons/arrow-down.tsx";
 
 export function Room(
   props: { title: string; id: string; checked?: boolean; disabled?: boolean },
@@ -23,19 +24,22 @@ export function Room(
   return (
     <li
       key={props.id}
-      class={`inline-flex items-start gap-x-2`}
+      class={`inline-flex justify-between`}
     >
-      <input
-        id={props.id}
-        name="room"
-        type="radio"
-        value={props.id}
-        onChange={handleChange}
-        defaultChecked={s}
-        disabled={props.disabled}
-        class="w-4 h-4 text-blue-600 bg-gray-100 focus:ring-blue-600 ring-offset-gray-700 focus:ring-offset-gray-700 focus:ring-2 border-gray-500"
-      />
-      <span class={`capitalize`}>{props.title}</span>
+      <div class={`inline-flex items-start gap-x-2`}>
+        <input
+          id={props.id}
+          name="room"
+          type="radio"
+          value={props.id}
+          onChange={handleChange}
+          defaultChecked={s}
+          disabled={props.disabled}
+          class="w-4 h-4 text-blue-600 bg-gray-100 focus:ring-blue-600 ring-offset-gray-700 focus:ring-offset-gray-700 focus:ring-2 border-gray-500"
+        />
+        <span class={`capitalize`}>{props.title}</span>
+      </div>
+      <ArrowDownSvg />
     </li>
   );
 }