fix server-ui card
Hee Sung Son committed
Nov 19, 2025 at 10:18 UTC
c49686b223b3468d8d09a70a6a46c35a309859d3
1 file changed
+48
-49
cmd/relay-server/frontend/src/components/ServerCard.tsx
+48
-49
@@ -1,5 +1,3 @@
1
-import { Button } from "@/components/ui/button";
2
-
1
interface ServerCardProps {
2
name: string;
3
description: string;
@@ -27,55 +25,56 @@ export function ServerCard({
25
window.location.href = serverUrl;
26
};
27
return (
30
- <div className="flex flex-col gap-4 rounded-xl bg-card-dark p-4 shadow-sm hover:shadow-lg transition-shadow duration-300">
31
- <div
32
- className="w-full bg-center bg-no-repeat aspect-video bg-cover rounded-lg"
33
- style={{ backgroundImage: `url(${thumbnail || defaultThumbnail})` }}
34
- />
35
- <div className="flex flex-1 flex-col justify-between gap-4">
36
- <div className="flex flex-col gap-2">
37
- <div className="flex items-center gap-2">
38
- <div
39
- className={`w-2.5 h-2.5 rounded-full ${
40
- online ? "bg-green-status" : "bg-red-500"
41
- }`}
42
- />
43
- <p
44
- className={`text-sm font-medium leading-normal ${
45
- online ? "text-green-status" : "text-red-500"
46
- }`}
47
- >
48
- {online ? "Online" : "Offline"}
49
- </p>
50
- </div>
51
- <p className="text-white text-lg font-bold leading-tight">{name}</p>
52
- {description && (
53
- <p className="text-text-muted text-sm font-normal leading-normal line-clamp-2">
54
- {description}
55
- </p>
56
- )}
57
- {tags && tags.length > 0 && (
58
- <div className="flex flex-wrap gap-1.5 mt-1">
59
- {tags.map((tag, index) => (
60
- <span
61
- key={index}
62
- className="px-2 py-1 bg-border-dark text-primary text-xs font-medium rounded"
63
- >
64
- {tag}
65
- </span>
66
- ))}
28
+ <button
29
+ type="button"
30
+ onClick={goServer}
31
+ bg-card-dark
32
+ className="bg-center bg-no-repeat bg-cover rounded-xl shadow-sm hover:shadow-lg hover:scale-105 transition-all duration-300 cursor-pointer"
33
+ style={{ backgroundImage: `url(${thumbnail || defaultThumbnail})` }}
34
+ >
35
+ <div className="h-full w-full bg-black/70 rounded-xl z-1 flex flex-col gap-4 p-4 items-start text-start">
36
+ <div className="flex flex-1 flex-col justify-between gap-4">
37
+ <div className="flex flex-col gap-2">
38
+ <div className="flex items-center gap-2">
39
+ <div
40
+ className={`w-2.5 h-2.5 rounded-full ${
41
+ online ? "bg-green-status" : "bg-red-500"
42
+ }`}
43
+ />
44
+ <p
45
+ className={`text-sm font-medium leading-normal ${
46
+ online ? "text-green-status" : "text-red-500"
47
+ }`}
48
+ >
49
+ {online ? "Online" : "Offline"}
50
+ </p>
51
</div>
68
- )}
69
- {owner && (
70
- <p className="text-text-muted text-xs font-normal leading-normal">
71
- by {owner}
72
- </p>
73
- )}
52
+ <p className="text-white text-lg font-bold leading-tight">{name}</p>
53
+ {description && (
54
+ <p className="text-text-muted text-sm font-normal leading-normal line-clamp-2">
55
+ {description}
56
+ </p>
57
+ )}
58
+ {tags && tags.length > 0 && (
59
+ <div className="flex flex-wrap gap-1.5 mt-1">
60
+ {tags.map((tag, index) => (
61
+ <span
62
+ key={index}
63
+ className="px-2 py-1 bg-border-dark text-primary text-xs font-medium rounded"
64
+ >
65
+ {tag}
66
+ </span>
67
+ ))}
68
+ </div>
69
+ )}
70
+ {owner && (
71
+ <p className="text-text-muted text-xs font-normal leading-normal">
72
+ by {owner}
73
+ </p>
74
+ )}
75
+ </div>
76
</div>
75
- <Button variant="secondary" className="w-full" onClick={goServer}>
76
- <span className="truncate">Connect</span>
77
- </Button>
77
</div>
79
- </div>
78
+ </button>
79
);
80
}