55 lines
1.8 KiB
TypeScript
55 lines
1.8 KiB
TypeScript
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] 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;
|