cleanup

src/components/player-search.tsx

@@ -6,10 +6,13 @@ import Link from "next/link";
 import { useState } from "react";
 import { toast } from "react-toastify";
 import { Button } from "./ui/button";
+import { Card } from "./ui/card";
 import { Input } from "./ui/input";
 
+const defaultPlayerId = "Notch";
+
 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 handleLookup = async () => {
@@ -40,6 +43,7 @@ export default function PlayerSearch() {
         <Input
           className="w-[200px]"
           placeholder="Player ID"
+          defaultValue={defaultPlayerId}
           onChange={(e) => setPlayerId(e.target.value)}
           onKeyDown={handleKeyDown}
         />
@@ -47,7 +51,7 @@ export default function PlayerSearch() {
       </div>
 
       {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} />
           <div className="flex flex-col gap-1 mt-2">
             <p>
@@ -71,7 +75,7 @@ export default function PlayerSearch() {
               </div>
             </div>
           </div>
-        </div>
+        </Card>
       )}
     </div>
   );

src/components/server-search.tsx

@@ -8,10 +8,13 @@ import Image from "next/image";
 import { useState } from "react";
 import { toast } from "react-toastify";
 import { Button } from "./ui/button";
+import { Card } from "./ui/card";
 import { Input } from "./ui/input";
 
+const defaultServerHostname = "play.hypixel.net";
+
 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 handleLookup = async () => {
@@ -41,6 +44,7 @@ export default function ServerSearch() {
         <Input
           className="w-[200px]"
           placeholder="Server Domain or IP"
+          defaultValue={defaultServerHostname}
           onChange={(e) => setServerHostname(e.target.value)}
           onKeyDown={handleKeyDown}
         />
@@ -48,7 +52,7 @@ export default function ServerSearch() {
       </div>
 
       {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">
             <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}
             </div>
           </div>
-        </div>
+        </Card>
       )}
     </div>
   );

src/components/ui/card.tsx

@@ -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>;
+}