feat: add Minecraft server page with copyable address, map integration, and supporting UI components

2026-06-26 18:44:02 +07:00
parent 5121229b93
commit 91e9d9c54e
9 changed files with 225 additions and 1 deletions
@@ -0,0 +1,47 @@
+import { CopyButton } from "@/components/copybutton";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { MapIframe } from "./client";
+import { Kbd } from "@/components/ui/kbd"
+
+export default function MinecraftJoinPage() {
+  return (
+    <div className="container max-w-4xl py-10 mx-auto">
+      <Card className="mb-8">
+        <CardHeader>
+          <CardTitle>Erika's SMP</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex items-center justify-between p-4 border rounded-lg bg-muted/50">
+            <div>
+              <p className="text-sm font-medium text-muted-foreground">Server Address</p>
+              <p className="font-mono text-lg">erique.sudloh.com</p>
+            </div>
+            <CopyButton text="erique.sudloh.com" iconOnly={false} variant="outline">
+              คัดลอง Ip
+            </CopyButton>
+          </div>
+          <div className="flex items-center justify-between p-4 border rounded-lg bg-muted/50">
+            <div>
+              <p className="text-sm font-medium text-muted-foreground">Port</p> <Kbd> ใช้แค่ Bedrock </Kbd>
+              <p className="font-mono text-lg">30652</p>
+            </div>
+            <CopyButton text="30652" iconOnly={false} variant="outline">
+              คัดลอง Port
+            </CopyButton>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>หลังเข้าเซิร์ฟต้องทำยังไง?</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="overflow-hidden rounded-lg border aspect-video bg-muted">
+            <MapIframe />
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}