Remove join room button (#275)

frontend/app/pong/JoinRoomForm.tsx

@@ -8,28 +8,20 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
 import { Separator } from "@/components/ui/separator";
 import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
 import { v4 } from "uuid";
 import MatchButton from "./MatchButton";
 
 export default function JoinRoomForm({}) {
   return (
     <Card className="basis-1/3">
       <CardHeader>
-        <CardTitle>Join room</CardTitle>
-        <CardDescription>
-          Join a room to play pong with your friend
-        </CardDescription>
+        <CardTitle>Play Pong</CardTitle>
+        <CardDescription>Lets play pong with your friend</CardDescription>
       </CardHeader>
       <CardContent>
         <div className="flex flex-col gap-4">
-          <Form />
-          <OrSeparator />
           <CreateRoomButton />
           <OrSeparator />
           <MatchButton />
@@ -57,27 +49,3 @@ function CreateRoomButton() {
     </Button>
   );
 }
-
-function Form() {
-  const router = useRouter();
-  const [inputValue, setInputValue] = useState("");
-  const handleSubmit = (event: React.SyntheticEvent) => {
-    event.preventDefault();
-    router.push(`/pong/${inputValue}?mode=player`);
-  };
-  return (
-    <form onSubmit={handleSubmit}>
-      <div className="grid w-full items-center gap-4">
-        <div className="flex flex-col space-y-1.5">
-          <Label htmlFor="id">ID</Label>
-          <Input
-            id="id"
-            placeholder="ID of pong room you friend told you"
-            onChange={(e) => setInputValue(e.target.value)}
-          />
-        </div>
-        <Button>Join</Button>
-      </div>
-    </form>
-  );
-}