Create Input & Button Wrappers. Also Beautify the Webpage.

frontend/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tailwindcss/forms": "^0.5.7",
     "@types/socket.io-client": "^3.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

frontend/src/components/Admin.tsx

@@ -4,6 +4,8 @@ import { io } from "socket.io-client";
 import { Socket } from "socket.io-client/debug";
 import { CreateProblem } from "./CreateProblem";
 import { QuizControls } from "./QuizControls";
+import QInput from "./Common/QInput";
+import QButton from "./Common/QButton";
 
 export const Admin = () => {
     const [socket, setSocket] = useState<null | any>(null);
@@ -24,18 +26,21 @@ export const Admin = () => {
     }, []);
 
     if (!quizId) {
-        return <div>    
-        <input type="text" onChange={(e) => {
-            setRoomId(e.target.value)
-        }} />
-        <br />
-        <button onClick={() => {
-            socket.emit("createQuiz", {
-                roomId
-            });
-            setQuizId(roomId);
-        }}>Create room</button>
-    </div>
+        return <div className='w-full h-full flex flex-col items-center justify-center'>
+            <div className='mt-20 mb-10 text-xl font-semibold'>100x Devs</div>
+            <div className='flex flex-col items-center gap-3'>
+                <QInput type="text" styleClass="w-[200px]" onChange={(e) => {
+                    setRoomId(e.target.value)
+                }} />
+                <br />
+                <QButton text="Create room" onClick={() => {
+                    socket.emit("createQuiz", {
+                        roomId
+                    });
+                    setQuizId(roomId);
+                }} />
+            </div>
+        </div>
     }
     return <div> 
         <CreateProblem roomId={quizId} socket={socket} />

frontend/src/components/Common/QButton.tsx

@@ -0,0 +1,41 @@
+type ButtonProps = {
+  text: string;
+  styleClass?: string;
+  disabled?: boolean;
+  variant?: 'primary' | 'danger' | 'success' | 'dark';
+  onClick?: (e: any) => void;
+};
+
+function classNames(...classes: any) {
+  return classes.filter(Boolean).join(' ');
+}
+
+const QButton = ({
+  text = '',
+  styleClass = '',
+  variant = 'primary',
+  disabled=false,
+  onClick,
+}: ButtonProps) => {
+  return (
+    <button
+      disabled={disabled}
+      type='button'
+      className={classNames(
+        variant === 'primary'
+          ? 'hover:bg-indigo-500 focus:ring-indigo-500 focus:border-indigo-500 focus:shadow-[0_0_0_0.3rem_#ede9fe] bg-indigo-600'
+          : variant === 'danger'
+          ? 'hover:bg-red-500 focus:ring-red-500 focus:border-red-500 focus:shadow-[0_0_0_0.3rem_#fee2e2] bg-red-600'
+          : variant === 'success'
+          ? 'hover:bg-green-500 focus:ring-green-500 focus:border-green-500 focus:shadow-[0_0_0_0.3rem_#dcfce7] bg-green-600'
+          : 'hover:bg-gray-600 focus:ring-gray-600 focus:border-gray-600 focus:shadow-[0_0_0_0.3rem_#f3f4f6] bg-gray-700',
+        `inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white ${styleClass}`
+      )}
+      onClick={onClick}
+    >
+      {text}
+    </button>
+  );
+};
+
+export default QButton;

frontend/src/components/Common/QInput.tsx

@@ -0,0 +1,72 @@
+type InputTextProps = {
+  type: 'text' | 'email' | 'number' | 'radio';
+  name?: string;
+  value?: string | number | boolean;
+  defaultValue?: string | number;
+  defaultChecked?: boolean;
+  checked?: boolean;
+  placeholder?: string;
+  styleClass?: string;
+  variant?: 'primary' | 'danger' | 'success' | 'dark';
+  onChange?: (e: any) => void;
+  onClick?: (e: any) => void;
+};
+
+function classNames(...classes: any) {
+  return classes.filter(Boolean).join(' ');
+}
+
+const QInput = ({
+  type = 'text',
+  name = '',
+  value,
+  defaultValue = '',
+  defaultChecked = false,
+  checked = false,
+  placeholder = '',
+  styleClass = '',
+  variant = 'primary',
+  onChange,
+  onClick,
+}: InputTextProps) => {
+  return type === 'radio' ? (
+    <input
+      name={name}
+      type='radio'
+      {...(checked ? { checked } : { defaultChecked: defaultChecked })}
+      className={classNames(
+        variant === 'primary'
+          ? 'focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 focus:shadow-[0_0_0_0.3rem_#ede9fe]'
+          : variant === 'danger'
+          ? 'focus:ring-red-500 h-4 w-4 text-red-600 border-gray-300 focus:shadow-[0_0_0_0.3rem_#fee2e2]'
+          : variant === 'success'
+          ? 'focus:ring-success-500 h-4 w-4 text-success-600 border-gray-300 focus:shadow-[0_0_0_0.3rem_#dcfce7]'
+          : 'focus:ring-gray-500 h-4 w-4 text-gray-600 border-gray-300 focus:shadow-[0_0_0_0.3rem_#f3f4f6]',
+        `shadow-sm block w-full sm:text-sm border-gray-300 rounded-md ${styleClass}`
+      )}
+      onClick={onClick}
+    />
+  ) : (
+    <input
+      name={name}
+      {...(value && (typeof value === 'string' || typeof value === 'number')
+        ? { value }
+        : { defaultValue: defaultValue })}
+      type={type}
+      className={classNames(
+        variant === 'primary'
+          ? 'focus:ring-indigo-500 focus:border-indigo-500 focus:shadow-[0_0_0_0.3rem_#ede9fe]'
+          : variant === 'danger'
+          ? 'focus:ring-red-500 focus:border-red-500 focus:shadow-[0_0_0_0.3rem_#fee2e2]'
+          : variant === 'success'
+          ? 'focus:ring-green-500 focus:border-green-500 focus:shadow-[0_0_0_0.3rem_#dcfce7]'
+          : 'focus:ring-gray-500 focus:border-gray-500 focus:shadow-[0_0_0_0.3rem_#f3f4f6]',
+        `shadow-sm block w-full sm:text-sm border-gray-300 rounded-md ${styleClass}`
+      )}
+      placeholder={placeholder}
+      onChange={onChange}
+    />
+  );
+};
+
+export default QInput;

frontend/src/components/CreateProblem.tsx

@@ -1,4 +1,6 @@
 import { useState } from "react"
+import QInput from "./Common/QInput";
+import QButton from "./Common/QButton";
 
 export const CreateProblem = ({socket, roomId}: {socket: any; roomId: string;}) => {
     const [title, setTitle] = useState("");
@@ -18,23 +20,22 @@ export const CreateProblem = ({socket, roomId}: {socket: any; roomId: string;})
         title: ""
     }])
 
-    return <div>
-        Create problem
-        Title = <input type="text" onChange={(e) => {
+    return <div className='w-[80vw] mx-auto h-full flex flex-col items-center justify-center my-10'>
+        Create problem Title <QInput type="text" onChange={(e) => {
             setTitle(e.target.value)
-        }}></input>
+        }} />
         <br /><br />
-        Description - <input type="text" onChange={(e) => {
+        Description <QInput type="text" onChange={(e) => {
             setDescription(e.target.value)
-        }}></input>
+        }}/>
         <br />
 
-        {[0, 1, 2, 3].map(optionId => <div> 
+        {[0, 1, 2, 3].map(optionId => <div className="w-full flex gap-4 space-y-2 items-center justify-between"> 
             <input type="radio" checked={optionId === answer} onChange={() => {
                 setAnswer(optionId)
-            }}></input>
-            Option {optionId}
-            <input type="text" onChange={(e) => {
+            }} />
+            <p>Option {optionId}</p>
+            <QInput type="text" styleClass="max-w-[80%]" onChange={(e) => {
                 setOptions(options => options.map(x => {
                     if (x.id === optionId) {
                         return {
@@ -44,11 +45,11 @@ export const CreateProblem = ({socket, roomId}: {socket: any; roomId: string;})
                     }
                     return x;
                 }))
-            }}></input>
+            }} />
         <br />
         </div>)}
 
-        <button onClick={() => {
+        <QButton text="Add problem" styleClass='rounded-lg mt-10' onClick={() => {
             socket.emit("createProblem", {
                 roomId,
                 problem: {
@@ -58,7 +59,7 @@ export const CreateProblem = ({socket, roomId}: {socket: any; roomId: string;})
                     answer,
                 }
             });
-        }}>Add problem</button>       
+        }} />
 
     </div>
 }

frontend/src/components/Leaderboard.tsx

@@ -1,7 +1,11 @@
 
 export const LeaderBoard = ({leaderboard}: {leaderboard: any}) => {
-    return <div>
-        Leaderboard 
+    return (
+      <div
+        className='text-[rgba(255_255_255_0.87)] bg-[#242424]'
+      >
+        Leaderboard
         {JSON.stringify(leaderboard)}
-    </div>
+      </div>
+    );
 }

frontend/src/components/Quiz.tsx

@@ -1,4 +1,6 @@
 import { useState } from 'react';
+import QInput from './Common/QInput';
+import QButton from './Common/QButton';
 
 /**
  Simple View with title and answers - $25
@@ -25,14 +27,15 @@ export function Quiz({quizData, socket, userId, problemId, roomId}: {
       <div className="flex w-full justify-center">
         <div className="">
             <SingleQuiz
-                choices={quizData.options.map(x => x.title)}
+                choices={quizData.options.map(x => x?.title)}
                 title={quizData.title}
                 imageURL={""}
                 setSelected={setSubmission}
             />
           <div className="flex justify-between w-full mt-4 text-white">
-            <button
-              className="py-3 px-10 bg-indigo-600 rounded-lg mx-8"
+            <QButton
+              text="Submit"
+              styleClass="py-3 px-10 rounded-lg mx-8"
               disabled={submitted}
               onClick={() => {
                 setSubmitted(true);
@@ -43,9 +46,7 @@ export function Quiz({quizData, socket, userId, problemId, roomId}: {
                     roomId,
                 })
               }}
-            >
-              Submit
-            </button>
+            />
           </div>
 
         </div>
@@ -80,11 +81,11 @@ function SingleQuiz({
               key={index}
               className="flex items-center w-full py-4 pl-5 m-2 ml-0 space-x-2 border-2 cursor-pointer border-white/10 rounded-xl bg-white/5"
             >
-              <input
+              <QInput
                 type="radio"
                 name="option"
                 value={choice}
-                className="w-6 h-6 bg-black"
+                // styleClass="w-6 h-6 bg-black"
                 onClick={() => {
                     setSelected(index)
                 }}

frontend/src/components/QuizControls.tsx

@@ -1,11 +1,12 @@
+import QButton from "./Common/QButton"
 
 export const QuizControls = ({socket, roomId}: {socket: any, roomId: string}) => {
-    return <div>
+    return <div className='w-[80vw] mx-auto h-full gap-4 flex items-center justify-center my-20'>
         Quiz controls
-        <button onClick={() => {
+        <QButton text="Next problem" variant="dark" onClick={() => {
             socket.emit("next", {
                 roomId
             })
-        }}>Next problem</button>
+        }} />
     </div>
 }