69 lines
2.2 KiB
TypeScript
69 lines
2.2 KiB
TypeScript
import clsx from "clsx";
|
||
import { Server } from "../types/Server";
|
||
import LightningIcon from "./icons/LightningIcon";
|
||
import { useEffect } from "react";
|
||
|
||
interface TableSelectorProps {
|
||
tables: Server[];
|
||
selectedTable: Server | null;
|
||
onSelect: (table: Server | null) => void;
|
||
}
|
||
|
||
function TableSelector({
|
||
tables,
|
||
selectedTable,
|
||
onSelect,
|
||
}: TableSelectorProps) {
|
||
useEffect(() => {
|
||
if (selectedTable !== null) {
|
||
onSelect(selectedTable);
|
||
} else {
|
||
onSelect(tables.find((table) => table.status === "online") || null);
|
||
}
|
||
}, [onSelect, selectedTable, tables]);
|
||
|
||
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" ||
|
||
(!!table.sessions &&
|
||
table.sessions.length > 0 &&
|
||
table.sessions[0].status !== "ended")
|
||
}
|
||
onClick={(e) => {
|
||
e.preventDefault();
|
||
onSelect(table);
|
||
}}
|
||
className={clsx(
|
||
"rounded-[0.833vw] outline-none p-[1.111vw] space-y-[0.278vw] disabled:text-[#D6D6D6] enabled:cursor-pointer disabled:!cursor-not-allowed enabled:hover:bg-[#F0F0F0] transition-colors shrink-0",
|
||
selectedTable?.id === table.id && "bg-[#F6F6F6]"
|
||
)}
|
||
>
|
||
<p className="button-m font-medium text-left">{table.name}</p>
|
||
{table.status === "offline" ? (
|
||
<p className="text-[#D6D6D6] font-medium caption-s text-left">
|
||
Недоступен
|
||
</p>
|
||
) : table.sessions &&
|
||
table.sessions.length > 0 &&
|
||
table.sessions[0].status !== "ended" ? (
|
||
<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>
|
||
) : (
|
||
<p className="text-[#29AF61] caption-s font-medium">Свободен</p>
|
||
)}
|
||
</button>
|
||
))}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default TableSelector;
|