direct-online/vito
2
0
Fork 0
mirror of https://github.com/vitodeploy/vito.git synced 2025-07-03 15:02:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

dashboard layout (#597)

Browse Source
This commit is contained in:
Saeed Vaziry
2025-05-13 23:42:22 +03:00
committed by GitHub
parent 38bafd7654
commit a81e9b18b7
57 changed files with 1011 additions and 843 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
resources/js/pages/servers/partials/header.tsx Normal file
View File

@ -0,0 +1,73 @@
import { Server } from '@/types/server';
import { CloudIcon, IdCardIcon, LoaderCircleIcon, MapPinIcon, SlashIcon } from 'lucide-react';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import ServerStatus from '@/pages/servers/partials/status';
import ServerActions from '@/pages/servers/partials/actions';
import { cn } from '@/lib/utils';
export default function ServerHeader({ server }: { server: Server }) {
return (
<div className="flex items-center justify-between border-b px-4 py-2">
<div className="space-y-2">
<div className="text-accent-foreground/50 flex items-center space-x-2 text-xs">
<Tooltip>
<TooltipTrigger asChild>
<div className="flex items-center space-x-1">
<IdCardIcon className="size-4" />
<div className="hidden lg:inline-flex">{server.name}</div>
</div>
</TooltipTrigger>
<TooltipContent>
<span className="lg:hidden">{server.name}</span>
<span className="hidden lg:inline-flex">Server Name</span>
</TooltipContent>
</Tooltip>
<SlashIcon className="size-3" />
<Tooltip>
<TooltipTrigger asChild>
<div className="flex items-center space-x-1">
<CloudIcon className="size-4" />
<div className="hidden lg:inline-flex">{server.provider}</div>
</div>
</TooltipTrigger>
<TooltipContent>
<span className="lg:hidden">{server.provider}</span>
<span className="hidden lg:inline-flex">Server Provider</span>
</TooltipContent>
</Tooltip>
<SlashIcon className="size-3" />
<Tooltip>
<TooltipTrigger asChild>
<div className="flex items-center space-x-1">
<MapPinIcon className="size-4" />
<div className="hidden lg:inline-flex">{server.ip}</div>
</div>
</TooltipTrigger>
<TooltipContent>
<span className="lg:hidden">{server.ip}</span>
<span className="hidden lg:inline-flex">Server IP</span>
</TooltipContent>
</Tooltip>
{['installing', 'installation_failed'].includes(server.status) && (
<>
<SlashIcon className="size-3" />
<Tooltip>
<TooltipTrigger asChild>
<div className="flex items-center space-x-1">
<LoaderCircleIcon className={cn('size-4', server.status === 'installing' ? 'animate-spin' : '')} />
<div>%{server.progress}</div>
</div>
</TooltipTrigger>
<TooltipContent>Installation Progress</TooltipContent>
</Tooltip>
</>
)}
</div>
</div>
<div className="flex items-center space-x-1">
<ServerStatus server={server} />
<ServerActions server={server} />
</div>
</div>
);
}