89 lines
2.9 KiB
TypeScript
89 lines
2.9 KiB
TypeScript
import { useState } from "react";
|
|
import { Server } from "../types/IServer";
|
|
import Button from "./Button";
|
|
import { useClickAway } from "@uidotdev/usehooks";
|
|
import ArrowDownIcon from "./icons/ArrowDownIcon";
|
|
|
|
interface Props {
|
|
servers: Server[] | undefined;
|
|
value: Server | undefined;
|
|
onChange: (server: Server) => void;
|
|
}
|
|
|
|
export default function DesktopSelect({ servers, value, onChange }: Props) {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const ref = useClickAway<HTMLDivElement>(() => setIsOpen(false));
|
|
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className="relative outline-black/10 outline w-[13.889vw] rounded-[0.556vw]"
|
|
>
|
|
<Button
|
|
onlyIcon
|
|
variant="tertiary"
|
|
className="px-[0.833vw] py-[0.417vw] !justify-between w-full"
|
|
onClick={() => setIsOpen((prev) => !prev)}
|
|
>
|
|
<div className="flex gap-[0.278vw] items-center">
|
|
{value?.name && (
|
|
<div
|
|
className="rounded-full w-[0.417vw] aspect-square"
|
|
style={{
|
|
backgroundColor:
|
|
value?.sessions &&
|
|
value.sessions?.length > 0 &&
|
|
value.sessions[value.sessions.length - 1].status === "started"
|
|
? "#EF3C26"
|
|
: "#108C33",
|
|
}}
|
|
/>
|
|
)}
|
|
<p className="text-[0.972vw] leading-[115%]">
|
|
{value?.name || "Выберите из списка"}
|
|
</p>
|
|
</div>
|
|
<div
|
|
className={`w-[1.389vw] transition-transform h-[1.389vw]${
|
|
isOpen ? " rotate-180" : ""
|
|
}`}
|
|
>
|
|
<ArrowDownIcon />
|
|
</div>
|
|
</Button>
|
|
{isOpen && (
|
|
<div className="absolute z-1 top-full w-full bg-white rounded-[0.556vw] outline outline-black/10">
|
|
{servers?.map((server) => (
|
|
<Button
|
|
key={server.id}
|
|
onlyIcon
|
|
variant="tertiary"
|
|
className="px-[0.833vw] py-[0.417vw] !justify-start w-full !first:rounded-t-[0.556vw] !last:rounded-b-[0.556vw]"
|
|
onClick={() => {
|
|
onChange(server);
|
|
setIsOpen(false);
|
|
}}
|
|
>
|
|
<div className="flex gap-[0.278vw] items-center">
|
|
<div
|
|
className="rounded-full w-[0.417vw] aspect-square"
|
|
style={{
|
|
backgroundColor:
|
|
server.sessions &&
|
|
server.sessions?.length > 0 &&
|
|
server.sessions[server.sessions.length - 1].status ===
|
|
"started"
|
|
? "#EF3C26"
|
|
: "#108C33",
|
|
}}
|
|
/>
|
|
<p className="text-[0.972vw] leading-[115%]">{server.name}</p>
|
|
</div>
|
|
</Button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|