37 lines
2 KiB
TypeScript
37 lines
2 KiB
TypeScript
"use client";
|
|
import { useState } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
|
|
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
|
|
|
|
export function PlayDialog({ open, onOpenChange }: { open: boolean; onOpenChange: (v: boolean) => void }) {
|
|
const copy = async (v: string) => { await navigator.clipboard.writeText(v); };
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent className="gap-5">
|
|
<DialogHeader><DialogTitle>How to play</DialogTitle><DialogDescription>Join on Java or Bedrock — same world via Geyser.</DialogDescription></DialogHeader>
|
|
<Tabs defaultValue="java">
|
|
<TabsList className="w-full"><TabsTrigger value="java" className="flex-1">Java</TabsTrigger><TabsTrigger value="bedrock" className="flex-1">Bedrock</TabsTrigger></TabsList>
|
|
<TabsContent value="java" className="space-y-3 pt-2">
|
|
<p className="text-sm text-muted-foreground">Multiplayer → Add Server → <span className="font-mono font-semibold text-foreground">frg.network</span></p>
|
|
<Button size="sm" variant="secondary" onClick={() => copy("frg.network")}>Copy address</Button>
|
|
</TabsContent>
|
|
<TabsContent value="bedrock" className="space-y-3 pt-2">
|
|
<p className="text-sm text-muted-foreground">Add <span className="font-semibold text-foreground">FRG Servers</span> as an Xbox Live friend, then join via Friends.</p>
|
|
<Button size="sm" variant="secondary" onClick={() => copy("FRG Servers")}>Copy gamertag</Button>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|
|
export function PlayButton({ size = "sm" }: { size?: "sm" | "default" | "lg" }) {
|
|
const [open, setOpen] = useState(false);
|
|
return (
|
|
<>
|
|
<Button size={size} onClick={() => setOpen(true)}>Play</Button>
|
|
<PlayDialog open={open} onOpenChange={setOpen} />
|
|
</>
|
|
);
|
|
}
|