upd table selector

2025-06-03 16:34:34 +05:00
parent 379eae3a7b
commit 02b07f4f12
7 changed files with 134 additions and 35 deletions
@@ -0,0 +1,50 @@
+import clsx from "clsx";
+import { IServer } from "../types/IServer";
+import LightningIcon from "./icons/LightningIcon";
+
+interface TableSelectorProps {
+  tables: IServer[];
+  selectedTable: IServer | null;
+  onSelect: (table: IServer) => void;
+}
+
+function TableSelector({
+  tables,
+  selectedTable,
+  onSelect,
+}: TableSelectorProps) {
+  return (
+    <div className="flex gap-[0.556vw] overflow-x-auto -mx-[1.111vw] pl-[1.111vw] [scrollbar-width:none]">
+      {tables.map((table) => (
+        <button
+          key={table.id}
+          disabled={table.status === "offline"}
+          onClick={(e) => {
+            e.preventDefault();
+            onSelect(table);
+          }}
+          className={clsx(
+            "rounded-[0.833vw] outline-none p-[1.111vw] space-y-[0.278vw] disabled:text-[#D6D6D6] disabled:cursor-not-allowed enabled:cursor-pointer enabled:hover:bg-[#F0F0F0] transition-colors shrink-0",
+            selectedTable?.id === table.id && "bg-[#F6F6F6]"
+          )}
+        >
+          <p className="button-m font-medium">{table.name}</p>
+          {table.status === "offline" ? (
+            <p className="text-[#D6D6D6]">Недоступен</p>
+          ) : table.sessions?.[0].status === "ended" ? (
+            <p className="text-[#29AF61] caption-s">Свободен</p>
+          ) : (
+            <div className="flex gap-[0.139vw] items-center">
+              <span className="size-[0.883vw] text-[#7B60F3]">
+                <LightningIcon />
+              </span>
+              <p className="caption-s text-[#7B60F3] font-medium">Идет сеанс</p>
+            </div>
+          )}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export default TableSelector;