This commit is contained in:
parent
cb91880caf
commit
08739a2e3d
@ -6,10 +6,13 @@ import Link from "next/link";
|
|||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { toast } from "react-toastify";
|
import { toast } from "react-toastify";
|
||||||
import { Button } from "./ui/button";
|
import { Button } from "./ui/button";
|
||||||
|
import { Card } from "./ui/card";
|
||||||
import { Input } from "./ui/input";
|
import { Input } from "./ui/input";
|
||||||
|
|
||||||
|
const defaultPlayerId = "Notch";
|
||||||
|
|
||||||
export default function PlayerSearch() {
|
export default function PlayerSearch() {
|
||||||
const [playerId, setPlayerId] = useState<string | null>(null);
|
const [playerId, setPlayerId] = useState<string>(defaultPlayerId);
|
||||||
const [player, setPlayer] = useState<any | null>(null);
|
const [player, setPlayer] = useState<any | null>(null);
|
||||||
|
|
||||||
const handleLookup = async () => {
|
const handleLookup = async () => {
|
||||||
@ -40,6 +43,7 @@ export default function PlayerSearch() {
|
|||||||
<Input
|
<Input
|
||||||
className="w-[200px]"
|
className="w-[200px]"
|
||||||
placeholder="Player ID"
|
placeholder="Player ID"
|
||||||
|
defaultValue={defaultPlayerId}
|
||||||
onChange={(e) => setPlayerId(e.target.value)}
|
onChange={(e) => setPlayerId(e.target.value)}
|
||||||
onKeyDown={handleKeyDown}
|
onKeyDown={handleKeyDown}
|
||||||
/>
|
/>
|
||||||
@ -47,7 +51,7 @@ export default function PlayerSearch() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{player && (
|
{player && (
|
||||||
<div className="bg-secondary rounded-lg p-4 min-w-[600px] max-w-full flex flex-row gap-2">
|
<Card>
|
||||||
<Image src={player.skin.parts.head} alt="The player's Head" width={150} height={150} />
|
<Image src={player.skin.parts.head} alt="The player's Head" width={150} height={150} />
|
||||||
<div className="flex flex-col gap-1 mt-2">
|
<div className="flex flex-col gap-1 mt-2">
|
||||||
<p>
|
<p>
|
||||||
@ -71,7 +75,7 @@ export default function PlayerSearch() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Card>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -8,10 +8,13 @@ import Image from "next/image";
|
|||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { toast } from "react-toastify";
|
import { toast } from "react-toastify";
|
||||||
import { Button } from "./ui/button";
|
import { Button } from "./ui/button";
|
||||||
|
import { Card } from "./ui/card";
|
||||||
import { Input } from "./ui/input";
|
import { Input } from "./ui/input";
|
||||||
|
|
||||||
|
const defaultServerHostname = "play.hypixel.net";
|
||||||
|
|
||||||
export default function ServerSearch() {
|
export default function ServerSearch() {
|
||||||
const [serverHostname, setServerHostname] = useState<string | null>(null);
|
const [serverHostname, setServerHostname] = useState<string>(defaultServerHostname);
|
||||||
const [server, setServer] = useState<JavaMinecraftServer | null>(null);
|
const [server, setServer] = useState<JavaMinecraftServer | null>(null);
|
||||||
|
|
||||||
const handleLookup = async () => {
|
const handleLookup = async () => {
|
||||||
@ -41,6 +44,7 @@ export default function ServerSearch() {
|
|||||||
<Input
|
<Input
|
||||||
className="w-[200px]"
|
className="w-[200px]"
|
||||||
placeholder="Server Domain or IP"
|
placeholder="Server Domain or IP"
|
||||||
|
defaultValue={defaultServerHostname}
|
||||||
onChange={(e) => setServerHostname(e.target.value)}
|
onChange={(e) => setServerHostname(e.target.value)}
|
||||||
onKeyDown={handleKeyDown}
|
onKeyDown={handleKeyDown}
|
||||||
/>
|
/>
|
||||||
@ -48,7 +52,7 @@ export default function ServerSearch() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{server && (
|
{server && (
|
||||||
<div className="bg-secondary rounded-lg p-4 min-w-[460px] max-w-full flex flex-col gap-2">
|
<Card>
|
||||||
<div className="flex flex-row gap-3 items-center">
|
<div className="flex flex-row gap-3 items-center">
|
||||||
<Image src={server.favicon.url} alt="The server's Icon" width={64} height={64} />
|
<Image src={server.favicon.url} alt="The server's Icon" width={64} height={64} />
|
||||||
|
|
||||||
@ -67,7 +71,7 @@ export default function ServerSearch() {
|
|||||||
<span className="font-bold">Players:</span> {server.players.online}/{server.players.max}
|
<span className="font-bold">Players:</span> {server.players.online}/{server.players.max}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Card>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
7
src/components/ui/card.tsx
Normal file
7
src/components/ui/card.tsx
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
export function Card({
|
||||||
|
children,
|
||||||
|
}: Readonly<{
|
||||||
|
children: React.ReactNode;
|
||||||
|
}>) {
|
||||||
|
return <div className="bg-secondary rounded-lg p-4 min-w-[600px] max-w-full flex flex-row gap-2">{children}</div>;
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user