Superminaren
/
kvm
mirror of https://github.com/jetkvm/kvm.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: Update PeerConnectionDisconnectedOverlay to use Card component for better UI structure

This commit is contained in:
Adam Shiervani 2025-04-08 13:40:23 +02:00 committed by Siyuan Miao
parent eccc2c5a43
commit d91ac1ace7
1 changed files with 12 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
ui/src/components/VideoOverlay.tsx
View File

@ -6,7 +6,7 @@ import { LuPlay } from "react-icons/lu";
import { Button, LinkButton } from "@components/Button"; import { Button, LinkButton } from "@components/Button";
import LoadingSpinner from "@components/LoadingSpinner"; import LoadingSpinner from "@components/LoadingSpinner";
import { GridCard } from "@components/Card"; import Card, { GridCard } from "@components/Card";
interface OverlayContentProps { interface OverlayContentProps {
children: React.ReactNode; children: React.ReactNode;
@ -153,10 +153,11 @@ export function ConnectionFailedOverlay({
interface PeerConnectionDisconnectedOverlay { interface PeerConnectionDisconnectedOverlay {
show: boolean; show: boolean;
setupPeerConnection: () => Promise<void>;
} }
export function PeerConnectionDisconnectedOverlay({ show }: ConnectionErrorOverlayProps) { export function PeerConnectionDisconnectedOverlay({
show,
}: PeerConnectionDisconnectedOverlay) {
return ( return (
<AnimatePresence> <AnimatePresence>
{show && ( {show && (
@ -185,12 +186,14 @@ export function PeerConnectionDisconnectedOverlay({ show }: ConnectionErrorOverl
</ul> </ul>
</div> </div>
<div className="flex items-center gap-x-2"> <div className="flex items-center gap-x-2">
<div className="flex flex-col items-center gap-y-2"> <Card>
<div className="flex items-center gap-x-2 p-4">
<LoadingSpinner className="h-4 w-4 text-blue-800 dark:text-blue-200" /> <LoadingSpinner className="h-4 w-4 text-blue-800 dark:text-blue-200" />
<p className="text-sm text-slate-700 dark:text-slate-300"> <p className="text-sm text-slate-700 dark:text-slate-300">
Retrying connection... Retrying connection...
</p> </p>
</div> </div>
</Card>
</div> </div>
</div> </div>
</div> </div>