formatting

src/components/CTFDescription.tsx

@@ -29,11 +29,11 @@ const CTFDescription = ({
           {author || 'Author'}
         </span>
       </div>
-      <div className="flex w-full flex-row justify-end flex-wrap">
+      <div className="flex w-full flex-row flex-wrap justify-end">
         {tags.map((tag) => (
           <span
             key={tag}
-            className="w-fit text-ellipsis border border-white px-8 py-4 text-right font-neuebit text-3xl uppercase text-enigma-yellow "
+            className="w-fit text-ellipsis border border-white px-8 py-4 text-right font-neuebit text-3xl uppercase text-enigma-yellow"
           >
             {tag}
           </span>

src/components/Speaker.jsx

@@ -49,42 +49,45 @@ function Speaker({
   }, [])
 
   return (
-    <div className="w-full px-4 md:px-10 pt-6 md:pt-10">
-      <div className="w-full flex flex-col md:flex-row md:flex-nowrap border-t-2 border-white md:gap-8 lg:gap-32">
+    <div className="w-full px-4 pt-6 md:px-10 md:pt-10">
+      <div className="flex w-full flex-col border-t-2 border-white md:flex-row md:flex-nowrap md:gap-8 lg:gap-32">
         {/* Left section - Speaker Info */}
-        <div className="w-full md:w-[40%] lg:w-[40vw] font-neubit text-left mb-8 md:mb-0">
+        <div className="font-neubit mb-8 w-full text-left md:mb-0 md:w-[40%] lg:w-[40vw]">
           <AnimatedText
             customText={ct}
             text={name}
             time={1}
-            className="text-3xl md:text-5xl lg:text-6xl text-white font-neuebit text-left uppercase"
+            className="text-left font-neuebit text-3xl uppercase text-white md:text-5xl lg:text-6xl"
             audioSrc={customaudio || '/sfx/type.wav'}
           />
           <AnimatedText
             customText={ct}
             text={subname}
             time={1}
-            className="text-2xl md:text-4xl lg:text-5xl text-white font-neuebit text-left uppercase"
+            className="text-left font-neuebit text-2xl uppercase text-white md:text-4xl lg:text-5xl"
           />
           <img
             src={image}
             alt="Speaker"
-            className="w-full h-[40vh] md:h-[50vh] lg:h-[60vh] object-cover rounded-lg shadow-lg"
+            className="h-[40vh] w-full rounded-lg object-cover shadow-lg md:h-[50vh] lg:h-[60vh]"
           />
         </div>
 
         {/* Right section - Values Table (Hidden on Small Screens) */}
-        <div ref={containerRef} className="hidden sm:block w-full text-white font-neubit mt-3">
+        <div
+          ref={containerRef}
+          className="font-neubit mt-3 hidden w-full text-white sm:block"
+        >
           {Object.entries(values).map(([key, value], index) => (
             <div key={key}>
-              <div className="flex flex-col md:flex-row md:flex-wrap justify-start items-start md:items-center">
+              <div className="flex flex-col items-start justify-start md:flex-row md:flex-wrap md:items-center">
                 {/* Key */}
-                <div className="overflow-hidden w-full md:w-auto">
+                <div className="w-full overflow-hidden md:w-auto">
                   <div ref={(el) => (rowRefs.current[index] = el)}>
                     <AnimatedText
                       text={key}
                       time={1}
-                      className="text-base md:text-lg text-green-500 tracking-wider uppercase font-neuebit w-full"
+                      className="w-full font-neuebit text-base uppercase tracking-wider text-green-500 md:text-lg"
                     />
                   </div>
                 </div>
@@ -96,14 +99,14 @@ function Speaker({
                       <AnimatedText
                         text={value}
                         time={0.2}
-                        className="text-base md:text-lg text-white tracking-wider uppercase font-neuebit w-full"
+                        className="w-full font-neuebit text-base uppercase tracking-wider text-white md:text-lg"
                       />
                     </div>
                   </div>
                 </div>
 
                 {/* Line */}
-                <div className="flex-grow w-full py-2 md:py-3">
+                <div className="w-full flex-grow py-2 md:py-3">
                   <div
                     ref={(el) => (lineRefs.current[index] = el)}
                     className="h-[1px] w-full bg-white"

src/components/content.jsx

@@ -46,9 +46,17 @@ function Content() {
             ref={wrapperRef}
             className="z-30 flex h-screen flex-row items-center gap-x-20 bg-enigma-green px-10 font-neuebit text-black"
           >
-            <img src="/images/content/20240917_110702.jpg" alt="participants for c0day3" className='h-full w-auto'/>
+            <img
+              src="/images/content/20240917_110702.jpg"
+              alt="participants for c0day3"
+              className="h-full w-auto"
+            />
             <h2 className="text-9xl">Participants</h2>
-            <img src="/images/content/IMG_20240917_103232440.jpg" alt="participants for c0day3" className='h-full w-auto'/>
+            <img
+              src="/images/content/IMG_20240917_103232440.jpg"
+              alt="participants for c0day3"
+              className="h-full w-auto"
+            />
             <h2 className="text-9xl">Placeholder</h2>
             <h2 className="text-9xl">Placeholder</h2>
             <h2 className="text-9xl">Placeholder</h2>

src/components/team/TeamCreation.tsx

@@ -1,59 +1,62 @@
-import React, { useState, FormEvent } from 'react';
-import AnimatedText from '../text';
-import axios from 'axios';
-import api from '../../utils/api';
+import React, { useState, FormEvent } from 'react'
+import AnimatedText from '../text'
+import axios from 'axios'
+import api from '../../utils/api'
 
 const TeamCreation = () => {
-  const [teamName, setTeamName] = useState('');
-  const [teamCode, setTeamCode] = useState('');
-  const [showCode, setShowCode] = useState(false);
-  const [joinCode, setJoinCode] = useState('');
-  const [error, setError] = useState("");
-  const [mode, setMode] = useState<'create' | 'join'>('create');
+  const [teamName, setTeamName] = useState('')
+  const [teamCode, setTeamCode] = useState('')
+  const [showCode, setShowCode] = useState(false)
+  const [joinCode, setJoinCode] = useState('')
+  const [error, setError] = useState('')
+  const [mode, setMode] = useState<'create' | 'join'>('create')
 
   const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
+    e.preventDefault()
     if (teamName.trim()) {
-      console.log('Team name submitted:', teamName);
-      const generatedCode = Math.random().toString(36).substring(2, 8).toUpperCase();
-      setTeamCode(generatedCode);
-      setShowCode(true);
+      console.log('Team name submitted:', teamName)
+      const generatedCode = Math.random()
+        .toString(36)
+        .substring(2, 8)
+        .toUpperCase()
+      setTeamCode(generatedCode)
+      setShowCode(true)
     }
-  };
+  }
 
   const handleJoinSubmit = async (e: FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
+    e.preventDefault()
     if (joinCode.trim()) {
-      console.log('Joining team with code:', joinCode);
+      console.log('Joining team with code:', joinCode)
     }
 
     try {
-      const response = await api.post('/auth/login',{
-        "name":"NIGGESH123",
-        "password": "NIGGA!@#"
+      const response = await api.post('/auth/login', {
+        name: 'NIGGESH123',
+        password: 'NIGGA!@#'
       })
 
       console.log(response)
 
       if (response.status === 200) {
-        if (typeof window !== "undefined") {
-          localStorage.setItem("token", response.data.access_token);
-          window.location.href = `${window.location.origin}/team-login`;
+        if (typeof window !== 'undefined') {
+          localStorage.setItem('token', response.data.access_token)
+          window.location.href = `${window.location.origin}/team-login`
         }
       }
     } catch (err: unknown) {
       if (axios.isAxiosError(err)) {
         if (err.response) {
-          setError(err.response.data.msg_code.toString());
+          setError(err.response.data.msg_code.toString())
         }
       }
     }
-  };
+  }
 
   const switchMode = () => {
-    setMode(mode === 'create' ? 'join' : 'create');
-    setShowCode(false);
-  };
+    setMode(mode === 'create' ? 'join' : 'create')
+    setShowCode(false)
+  }
 
   return (
     <div className="flex h-screen w-screen flex-col items-center justify-center font-neuebit">
@@ -63,8 +66,8 @@ const TeamCreation = () => {
         </div>
       </div>
 
-      {!showCode && (
-        mode === 'create' ? (
+      {!showCode &&
+        (mode === 'create' ? (
           <>
             <form
               onSubmit={handleSubmit}
@@ -86,13 +89,16 @@ const TeamCreation = () => {
                   type="submit"
                   className="rounded-none bg-white px-8 py-3 text-2xl font-semibold text-black transition-colors hover:bg-enigma-green"
                 >
-                  <AnimatedText text={'CREATE TEAM'} className='cursor-pointer' />
+                  <AnimatedText
+                    text={'CREATE TEAM'}
+                    className="cursor-pointer"
+                  />
                 </button>
                 <button
                   onClick={switchMode}
                   className="rounded-none bg-white px-8 py-3 text-2xl font-semibold text-black transition-colors hover:bg-enigma-green"
                 >
-                  <AnimatedText text={'JOIN TEAM'} className='cursor-pointer' />
+                  <AnimatedText text={'JOIN TEAM'} className="cursor-pointer" />
                 </button>
               </div>
             </form>
@@ -116,20 +122,19 @@ const TeamCreation = () => {
             <div className="mt-4 flex gap-4">
               <button
                 type="submit"
-                className="rounded-none bg-white px-8 py-3 text-2xl font-semibold text-black transition-colors hover:bg-enigma-green hover:border-none"
+                className="rounded-none bg-white px-8 py-3 text-2xl font-semibold text-black transition-colors hover:border-none hover:bg-enigma-green"
               >
-                <AnimatedText text="JOIN TEAM" className='cursor-pointer' />
+                <AnimatedText text="JOIN TEAM" className="cursor-pointer" />
               </button>
               <button
                 onClick={switchMode}
-                className="rounded-none bg-white px-8 py-3 text-2xl font-semibold text-black transition-colors hover:bg-enigma-green hover:border-none"
+                className="rounded-none bg-white px-8 py-3 text-2xl font-semibold text-black transition-colors hover:border-none hover:bg-enigma-green"
               >
-                <AnimatedText text="CREATE TEAM" className='cursor-pointer' />
+                <AnimatedText text="CREATE TEAM" className="cursor-pointer" />
               </button>
             </div>
           </form>
-        )
-      )}
+        ))}
 
       {showCode && (
         <div className="mt-8 text-white">
@@ -142,7 +147,7 @@ const TeamCreation = () => {
         </div>
       )}
     </div>
-  );
-};
+  )
+}
 
-export default TeamCreation;
+export default TeamCreation

src/questions/page.tsx

@@ -23,8 +23,8 @@ const CTFs = () => {
   const [selectedQuestionType, setSelectedQuestionType] =
     React.useState<string>('')
 
-  const [error, setError] = useState("");
-  const [questions, setQuestions] = useState<Question[]>([]);
+  const [error, setError] = useState('')
+  const [questions, setQuestions] = useState<Question[]>([])
 
   // So this selected question ID contains whatever you click, I will create a function below that logs the current selected question ID in the console so that during backend integration, it will be easy for you. Everything else happens on its own in the individual components.
   const [selectedQuestionId, setSelectedQuestionId] = React.useState<string>('')
@@ -42,20 +42,20 @@ const CTFs = () => {
       try {
         const response = await api.get('/ctf/list')
         if (response.status === 200) {
-          setQuestions(response.data);
+          setQuestions(response.data)
         }
       } catch (err: unknown) {
         if (axios.isAxiosError(err)) {
           if (err.response) {
-            setError(err.response.data.msg_code.toString());
+            setError(err.response.data.msg_code.toString())
           }
         }
       }
-    };
-  
-    getData();
-  }, []);
-  
+    }
+
+    getData()
+  }, [])
+
   return (
     <div className="flex h-screen w-screen flex-col font-neuebit">
       <Header
@@ -97,35 +97,29 @@ const CTFs = () => {
         <CTFList
           ctfList={questions.filter((question) =>
             selectedQuestionType
-              ? getTypesFromMask(question.tags).includes(
-                  selectedQuestionType
-                )
+              ? getTypesFromMask(question.tags).includes(selectedQuestionType)
               : true
           )}
           onHover={setHoveredQuestionId}
           onClick={setSelectedQuestionId}
         />
         <CTFDescription
           description={
-            questions.find(
-              (question) => question.id === hoveredQuestionId
-            )?.description || ''
+            questions.find((question) => question.id === hoveredQuestionId)
+              ?.description || ''
           }
           points={
-            questions.find(
-              (question) => question.id === hoveredQuestionId
-            )?.points || 0
+            questions.find((question) => question.id === hoveredQuestionId)
+              ?.points || 0
           }
           author={
-            questions.find(
-              (question) => question.id === hoveredQuestionId
-            )?.author || ''
+            questions.find((question) => question.id === hoveredQuestionId)
+              ?.author || ''
           }
           tags={
             getTypesFromMask(
-              questions.find(
-                (question) => question.id === hoveredQuestionId
-              )?.tags || 0
+              questions.find((question) => question.id === hoveredQuestionId)
+                ?.tags || 0
             ) || []
           }
         />