upd table selector

src/components/modals/CreateSessionModal.tsx

@@ -10,18 +10,25 @@ import api from "../../utils/api.ts";
 import { ISession } from "../../types/ISession.ts";
 import { IClient } from "../../types/IClient.ts";
 import useModalStore from "../../stores/useModalStore.ts";
+import TableSelector from "../TableSelector.tsx";
 
 interface Props {
   servers: IServer[] | undefined;
+  targetServer: IServer | null;
 }
 
-export default function CreateSessionModal({ servers }: Props) {
+export default function CreateSessionModal({
+  servers,
+  targetServer = null,
+}: Props) {
   const { setModal } = useModalStore();
   const [name, setName] = useState("");
   const [phone, setPhone] = useState("");
   const [email, setEmail] = useState("");
-  const [selectedServer, setSelectedServer] = useState<IServer>();
-  const [selectedApp, setSelectedApp] = useState<IApp>();
+  const [selectedServer, setSelectedServer] = useState<IServer | null>(
+    targetServer
+  );
+  const [selectedApp, setSelectedApp] = useState<IApp | null>(null);
 
   async function createClient() {
     console.log(name, phone, email);
@@ -66,10 +73,33 @@ export default function CreateSessionModal({ servers }: Props) {
 
   return (
     <form
-      className="w-[34.375vw] rounded-[0.833vw] bg-white p-[1.667vw] flex flex-col min-h-[calc(100dvh-0.972vw*2)] justify-between gap-[1.111vw]"
+      className="rounded-[2.222vw] w-[25vw] min-h-[calc(100dvh-2.222vw)] bg-[#F0F0F0] flex flex-col overflow-hidden"
       onSubmit={handleClickCreateSession}
     >
-      <div className="gap-y-[1.111vw] flex flex-col justify-between">
+      <div className="w-full h-[4.861vw] flex items-center justify-center">
+        <p className="title-s font-medium">Новый сеанс</p>
+      </div>
+      <div className="w-full h-[6.944vw] bg-[url(/images/Table.png)] bg-no-repeat bg-top bg-[length:9.306vw]" />
+      <div className="bg-white rounded-t-[2.222vw] p-[1.389vw] flex flex-col gap-y-[1.667vw] flex-1 overflow-y-auto">
+        <TableSelector
+          tables={servers || []}
+          selectedTable={selectedServer}
+          onSelect={setSelectedServer}
+        />
+        <div className="flex flex-col gap-y-[0.833vw]">
+          <p className="title-s font-medium">Укажите данные клиента</p>
+          <div className="flex flex-col gap-y-[0.556vw]">
+            <Input placeholder="Номер телефона" required />
+            <Input placeholder="Имя" required />
+            <Input placeholder="Электронная почта" />
+          </div>
+        </div>
+        <div className="flex flex-col gap-y-[0.833vw]">
+          <p className="title-s font-medium">Выберите параметры сеанса</p>
+        </div>
+      </div>
+
+      {/* <div className="gap-y-[1.111vw] flex flex-col justify-between">
         <div className="space-y-[0.556vw]">
           <div className="p-[0.833vw] ring-[0.069vw] ring-[#E6E6E6] w-fit rounded-[0.556vw]">
             <div className="w-[1.389vw] h-[1.389vw]">
@@ -169,7 +199,7 @@ export default function CreateSessionModal({ servers }: Props) {
         >
           <p className="text-[0.972vw] font-medium">Запустить сеанс</p>
         </Button>
-      </div>
+      </div> */}
     </form>
   );
 }