52 lines
1.7 KiB
TypeScript
52 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
import { useCallback, useState } from 'react';
|
|
import { Server } from '@/lib/schemas/server';
|
|
import { User, hasPermission } from '@/lib/schemas/user';
|
|
import { ServerCard } from './ServerCard';
|
|
import { CreateServerModal } from './CreateServerModal';
|
|
import RefreshButton from '@/components/ui/RefreshButton';
|
|
import { useSteamCMD } from '@/lib/context/SteamCMDContext';
|
|
|
|
interface ServerListWithActionsProps {
|
|
servers: Server[];
|
|
user: User;
|
|
}
|
|
|
|
export function ServerListWithActions({ servers, user }: ServerListWithActionsProps) {
|
|
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
|
|
const { isSteamCMDRunning } = useSteamCMD();
|
|
|
|
const handleOnClose = useCallback(() => setIsCreateModalOpen(false), []);
|
|
const canCreateServer = hasPermission(user, 'server.create');
|
|
|
|
return (
|
|
<>
|
|
<div className="mb-6 flex items-center justify-between">
|
|
<h2 className="text-xl font-semibold">Your Servers</h2>
|
|
<div className="flex items-center space-x-4">
|
|
{canCreateServer && (
|
|
<button
|
|
onClick={() => setIsCreateModalOpen(true)}
|
|
disabled={isSteamCMDRunning}
|
|
className="rounded-md bg-green-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50"
|
|
title={isSteamCMDRunning ? 'Server creation disabled while SteamCMD is running' : ''}
|
|
>
|
|
Create Server
|
|
</button>
|
|
)}
|
|
<RefreshButton />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
|
|
{servers.map((server) => (
|
|
<ServerCard key={server.id} server={server} />
|
|
))}
|
|
</div>
|
|
|
|
<CreateServerModal isOpen={isCreateModalOpen} onClose={handleOnClose} />
|
|
</>
|
|
);
|
|
}
|