chore: add arrow down icon

fastrodev · Dec 4, 2024 · 7148482 · 7148482
1 parent 5f4bfe6
commit 7148482
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 29 deletions.
diff --git a/components/icons/arrow-down.tsx 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
@@ -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
@@ -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>
   );
 }