upd fix unlinked desktop
This commit is contained in:
@@ -9,6 +9,8 @@ import CogIcon from "./icons/CogIcon";
|
||||
import ChevronLeftIcon from "./icons/ChevronLeftIcon";
|
||||
import PlusIcon from "./icons/PlusIcon";
|
||||
import EditTable from "./modals/EditTable";
|
||||
import UnlinkIcon from "./icons/UnlinkIcon";
|
||||
import clsx from "clsx";
|
||||
|
||||
interface IDesktopCardProps {
|
||||
server: IServer;
|
||||
@@ -46,56 +48,68 @@ export default function DesktopCard({ server }: IDesktopCardProps) {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='flex flex-col gap-[0.833vw] aspect-[300/211] w-[20.833vw] h-[14.653vw]'>
|
||||
<div className='relative w-full h-[8.056vw] aspect-[300/116] bg-[#F6F6F6] rounded-3xl bg-[url("/images/Table.png")] bg-no-repeat bg-[top_1.111vw_left_50%] bg-[length:8.125vw]'>
|
||||
<div className="flex flex-col gap-[0.833vw] aspect-[300/211] w-[20.833vw] h-[14.653vw]">
|
||||
<div
|
||||
className={clsx(
|
||||
'relative w-full h-[8.056vw] aspect-[300/116] bg-[#F6F6F6] rounded-3xl bg-[url("/images/Table.png")] bg-no-repeat bg-[top_1.111vw_left_50%] bg-[length:8.125vw]',
|
||||
server.status === "offline" && "opacity-40"
|
||||
)}
|
||||
>
|
||||
<NewButton
|
||||
variant='secondary'
|
||||
size='medium'
|
||||
className='absolute top-[0.347vw] right-[0.347vw] cursor-pointer flex items-center justify-center'
|
||||
variant="secondary"
|
||||
size="medium"
|
||||
className="absolute top-[0.347vw] right-[0.347vw] cursor-pointer flex items-center justify-center"
|
||||
onClick={() => setModal(<EditTable table={server} />)}
|
||||
>
|
||||
<span className='text-[#7D7D7D] w-[0.972vw] h-[0.972vw]'>
|
||||
<span className="text-[#7D7D7D] w-[0.972vw] h-[0.972vw]">
|
||||
<CogIcon />
|
||||
</span>
|
||||
</NewButton>
|
||||
</div>
|
||||
<div className='flex self-center justify-between items-start'>
|
||||
<div className='space-y-[0.278vw] text-center'>
|
||||
<p className='leading-none font-[500] text-[1.111vw] title-s'>
|
||||
<div className="flex self-center justify-between items-start">
|
||||
<div className="space-y-[0.278vw] text-center">
|
||||
<p className="leading-none font-[500] text-[1.111vw] title-s">
|
||||
{server.name}
|
||||
</p>
|
||||
<p className='caption-s text-[#7D7D7D]'>{server.location}</p>
|
||||
<p className="caption-s text-[#7D7D7D]">{server.location}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex gap-[0.278vw] justify-center -mt-[0.278vw]'>
|
||||
<div className="flex gap-[0.278vw] justify-center -mt-[0.278vw]">
|
||||
{server.sessions?.[0]?.status === "started" ? (
|
||||
<div className='flex items-center gap-[0.278vw]'>
|
||||
<div className="flex items-center gap-[0.278vw]">
|
||||
<NewButton
|
||||
variant='primary'
|
||||
variant="primary"
|
||||
onClick={() => endSession()}
|
||||
className='flex gap-[0.556vw] items-center'
|
||||
className="flex gap-[0.556vw] items-center"
|
||||
>
|
||||
<span className='w-[0.972vw] h-[0.972vw] flex items-center justify-center'>
|
||||
<span className="w-[0.972vw] h-[0.972vw] flex items-center justify-center">
|
||||
<FlashIcon />
|
||||
</span>
|
||||
<p className='button-s font-medium'>Идёт сеанс</p>
|
||||
<span className='w-[0.972vw] h-[0.972vw] flex items-center justify-center'>
|
||||
<p className="button-s font-medium">Идёт сеанс</p>
|
||||
<span className="w-[0.972vw] h-[0.972vw] flex items-center justify-center">
|
||||
<ChevronLeftIcon />
|
||||
</span>
|
||||
</NewButton>
|
||||
</div>
|
||||
) : server.status === "offline" ? (
|
||||
<NewButton variant="critical">
|
||||
<span className="text-[#FF4517] size-[0.972vw]">
|
||||
<UnlinkIcon />
|
||||
</span>
|
||||
<span>Проверьте соединение</span>
|
||||
</NewButton>
|
||||
) : (
|
||||
<NewButton
|
||||
variant='cta'
|
||||
size='medium'
|
||||
className='self-center'
|
||||
variant="cta"
|
||||
size="medium"
|
||||
className="self-center"
|
||||
onClick={handleClickCreateSession}
|
||||
>
|
||||
<div className='flex gap-[0.556vw] items-center justify-center'>
|
||||
<span className='w-[0.972vw] h-[0.972vw] flex items-center justify-center'>
|
||||
<div className="flex gap-[0.556vw] items-center justify-center">
|
||||
<span className="w-[0.972vw] h-[0.972vw] flex items-center justify-center">
|
||||
<PlusIcon />
|
||||
</span>
|
||||
<p className='button-s'>Создать сеанс</p>
|
||||
<p className="button-s">Создать сеанс</p>
|
||||
</div>
|
||||
</NewButton>
|
||||
)}
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
function UnlinkIcon() {
|
||||
return (
|
||||
<svg viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M4.966 4.9A2.367 2.367 0 0 0 2.6 7.267v.166A2.367 2.367 0 0 0 4.966 9.8h1.426a2.4 2.4 0 0 1-.76-.98H5.05c-1.96 0-1.96-2.94 0-2.94h1.47q.055 0 .11.006L5.645 4.9zm3.641 0c.335.254.597.592.76.98h.583c1.557.001 2.043 2.107.644 2.79l.738.74A2.37 2.37 0 0 0 12.4 7.432v-.166A2.367 2.367 0 0 0 10.033 4.9zm-1.77.015 2.121 2.12a2.37 2.37 0 0 0-2.12-2.12M6.141 6.57c-.028.09-.072.289-.072.289-.022.134-.04.286-.04.407v.166A2.367 2.367 0 0 0 8.397 9.8h1.637q.233 0 .461-.046L9.56 8.82H8.48a1.47 1.47 0 0 1-1.382-1.96zm1.84.667a1.5 1.5 0 0 1-.08.602h.681z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path d="m3.197 2.1-.597.598 9.212 9.202.588-.598z" fill="currentColor" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default UnlinkIcon;
|
||||
Reference in New Issue
Block a user