63 lines
1.9 KiB
TypeScript
63 lines
1.9 KiB
TypeScript
import { Server } from '@/api/server/getServer'
|
|
import { formatBytes, getInitials } from '@/util/helpers'
|
|
import styled from '@emotion/styled'
|
|
import { Avatar, Badge } from '@mantine/core'
|
|
import { useMemo } from 'react'
|
|
import { Link } from 'react-router-dom'
|
|
import tw from 'twin.macro'
|
|
|
|
interface Props {
|
|
server: Server
|
|
}
|
|
|
|
export const Dt = styled.dt`
|
|
${tw`text-accent-500 font-medium text-xs`}
|
|
`
|
|
|
|
export const Dd = styled.dt`
|
|
${tw`text-sm text-foreground font-medium`}
|
|
`
|
|
|
|
const ServerCard = ({ server }: Props) => {
|
|
const memory = useMemo(() => formatBytes(server.limits.memory, 0), [server])
|
|
|
|
const disk = useMemo(() => formatBytes(server.limits.disk, 0), [server])
|
|
|
|
return (
|
|
<Link to={`/servers/${server.id}`} className='bg-background p-6 shadow-light hover:shadow-lg border border-accent-200 dark:hover:border-foreground dark:shadow-none dark:hover:shadow-none transition-shadow rounded-lg'>
|
|
<div className='flex items-center space-x-3'>
|
|
<Avatar color='blue' size='md' radius='xl'>
|
|
{getInitials(server.name, ' ', 2)}
|
|
</Avatar>
|
|
<div>
|
|
<div className='flex items-center space-x-3'>
|
|
<p className='font-medium text-foreground text-ellipsis overflow-hidden whitespace-nowrap'>{server.name}</p>{' '}
|
|
{server.status === 'suspended' && (
|
|
<Badge color='orange' radius='sm'>
|
|
Suspended
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
<p className='text-sm description text-ellipsis overflow-hidden whitespace-nowrap'>{server.hostname}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className='grid grid-cols-3 gap-3 mt-3'>
|
|
<dl>
|
|
<Dt>CPU</Dt>
|
|
<Dd>{ server.limits.cpu }</Dd>
|
|
</dl>
|
|
<dl>
|
|
<Dt>Memory</Dt>
|
|
<Dd>{memory.size} {memory.unit}</Dd>
|
|
</dl>
|
|
<dl>
|
|
<Dt>Disk</Dt>
|
|
<Dd>{disk.size} {disk.unit}</Dd>
|
|
</dl>
|
|
</div>
|
|
</Link>
|
|
)
|
|
}
|
|
|
|
export default ServerCard
|