73 lines
3.1 KiB
TypeScript
73 lines
3.1 KiB
TypeScript
import Button from "./Button";
|
||
import SessionIcon from "./icons/SessionIcon";
|
||
import Input from "./Input";
|
||
import useQueryApps from "../queries/useQueryApps.ts";
|
||
import useQueryServers from "../queries/useQueryServers.ts";
|
||
import Select from "./Select.tsx";
|
||
|
||
export default function CreateSessionModal() {
|
||
const { data: apps } = useQueryApps();
|
||
|
||
const { data: servers } = useQueryServers();
|
||
|
||
return (
|
||
<div className="w-[27.222vw] h-full rounded-[0.833vw] bg-white p-[1.667vw] flex flex-col justify-between gap-[1.111vw]">
|
||
<div className="gap-y-[1.111vw] flex flex-col justify-between">
|
||
<div className="space-y-[0.556vw]">
|
||
<div className="rounded-[0.556vw] w-fit p-[0.833vw] bg-[#2D68F60D]">
|
||
<div className="min-w-[1.389vw] min-h-[1.389vw] text-[#2D68F6]">
|
||
<SessionIcon />
|
||
</div>
|
||
</div>
|
||
<p className="text-[1.389vw]">Создание сеанса</p>
|
||
<p className="text-[0.833vw] text-black/20">
|
||
Укажите данные клиента, выберите менеджера и стол
|
||
</p>
|
||
</div>
|
||
<hr className="border-black/10" />
|
||
<div className="flex justify-between items-center">
|
||
<p className="text-[0.972vw]">
|
||
Имя <span className="text-[#C6C6C699]">*</span>
|
||
</p>
|
||
<div className="outline outline-black/10 rounded-[0.556vw] w-[13.889vw]">
|
||
<Input placeholder="Константин" required />
|
||
</div>
|
||
</div>
|
||
<div className="flex justify-between items-center">
|
||
<p className="text-[0.972vw]">
|
||
Номер <span className="text-[#C6C6C699]">*</span>
|
||
</p>
|
||
<div className="outline outline-black/10 rounded-[0.556vw] w-[13.889vw]">
|
||
<Input placeholder="+ 7 (999) 99 99 99" required type="tel" />
|
||
</div>
|
||
</div>
|
||
<div className="flex justify-between items-center">
|
||
<p className="text-[0.972vw]">Электронная почта</p>
|
||
<div className="outline outline-black/10 rounded-[0.556vw] w-[13.889vw]">
|
||
<Input placeholder="sample@mail.ru" type="email" />
|
||
</div>
|
||
</div>
|
||
{apps && (
|
||
<div className="flex justify-between items-center">
|
||
<p className="text-[0.972vw]">Приложение</p>
|
||
<div className="outline outline-black/10 rounded-[0.556vw] w-[13.889vw]">
|
||
<Select
|
||
options={apps.map(({ id, name }) => ({ id, value: name }))}
|
||
/>
|
||
</div>
|
||
</div>
|
||
)}
|
||
<hr className="border-black/10" />
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<Button className="bg-[#F9F9F9] px-[2.222vw] py-[0.556vw] !rounded-[0.556vw]">
|
||
<p className="text-black font-medium text-[0.972vw]">Отменить</p>
|
||
</Button>
|
||
<Button className="bg-[#2D68F6] px-[2.222vw] py-[0.556vw] !rounded-[0.556vw]">
|
||
<p className="text-[0.972vw] font-medium">Запустить сеанс</p>
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|