Merge pull request #38 from coderKrysio/dev-1

updated components

Author: coderKrysio

components/Form.tsx

@@ -27,7 +27,7 @@ const Form = ({ setFormData }: any) => {
     const renderForm = () => {
         return (
             <form
-                className="w-[350px] min-h-[350px] text-xl flex flex-col justify-start items-center"
+                className="w-[350px] min-h-[350px] text-xl flex flex-col justify-start items-center max-[500px]:w-[300px]"
                 onSubmit={(e) => {
                     e.preventDefault()
                 }}

components/GetForm.tsx

@@ -3,6 +3,7 @@ import Form from './Form'
 import Navbar from './Navbar'
 import { svgSrc, timeIntervals } from '@/lib/utils'
 import Link from 'next/link'
+import { useRouter } from 'next/navigation'
 interface RoomCode {
     roomCode: string
 }
@@ -14,44 +15,58 @@ interface FormData {
 }
 
 const GetForm = ({ roomCode }: RoomCode) => {
+    const router = useRouter()
+    const [showError, setShowError] = useState<boolean>(false);
     const [formData, setFormData] = useState<FormData>({
         name: '',
         roomCode: roomCode,
         intervals: [timeIntervals]
     })
 
+    const checkFields = () => {
+        if(formData.name === '') setShowError(true);
+        else {
+            setShowError(false)
+            router.push(`/${roomCode}/result`)
+        }
+    }
+
     console.log(formData)
 
     return (
-        <div className="w-screen min-h-screen flex flex-col justify-center items-center text-white py-[70px]">
+        <div className="w-screen min-h-screen flex flex-col justify-center items-center text-white pb-[70px] pt-[90px]">
             <Navbar />
 
-            <div className="relative w-fit border-2 border-white ml-6 p-8 rounded-2xl flex justify-start items-start bg-[#16161a]">
+            <div className="relative w-fit border-2 border-white ml-6 p-8 rounded-2xl flex justify-start items-start bg-[#16161a] max-[985px]:flex-col max-[500px]:p-4 max-[500px]:ml-0 max-[500px]:py-8">
                 <div>
                     <p className="text-2xl text-[#d4d4d4] mb-[20px]">Room Code: {roomCode}</p>
 
                     <Form setFormData={setFormData} />
                 </div>
 
-                <div className="mt-[20px] ml-[20px]">
+                <div className="mt-[20px] ml-[20px] max-[985px]:hidden">
                     <iframe
                         className="border-none w-[450px] h-[275px] z-[-1]"
                         src={svgSrc}
                     ></iframe>
                 </div>
 
-                <div className="absolute bottom-0 right-0 m-8 mb-[42px] flex gap-6">
-                    <Link className="py-2 px-5 border-[3px] border-white rounded-lg text-xl font-medium hover:font-semibold hover:border-[#48d399] hover:text-[#48d399]"
-                    href={`/${roomCode}/result`}
+                <div className="absolute bottom-0 right-0 m-8 mb-[42px] flex gap-6 max-[985px]:relative max-[985px]:my-0 max-[985px]:mx-auto">
+                    <button className="py-2 px-5 border-[3px] border-white rounded-lg text-xl font-medium hover:font-semibold hover:border-[#48d399] hover:text-[#48d399]"
+                    onClick={() => checkFields()}
                     >
                         Submit
-                    </Link>
+                    </button>
 
                     <Link className="py-2 px-5 border-[3px] border-white rounded-lg text-xl font-medium hover:font-semibold hover:border-[#48d399] hover:text-[#48d399]"
                     href={`/${roomCode}/result`}
                     >
                         Result
                     </Link>
+
+                    {showError && <p
+                    className='text-xl text-[#db696d] font-semibold tracking-wide w-max absolute -bottom-[35px] left-1/2 -translate-x-1/2'
+                    >Name field is empty !</p>}
                 </div>
             </div>
         </div>

components/LandingPage.tsx

@@ -13,7 +13,7 @@ const LandingPage = () => {
                     Get Intervals
                 </h1>
 
-                <p className="text-xl">
+                <p className="text-xl text-center">
                     Unite Your Free Time: Find Common Slots Together!
                 </p>
 

components/ListIntervals.tsx

@@ -49,7 +49,7 @@ const ListIntervals = ({ addInterval, removeInterval, setFormData }: any) => {
 
                     <div
                         id="interval"
-                        className="flex justify-center items-center gap-[10px]"
+                        className="relative flex justify-center items-center gap-[10px] max-[500px]:mb-[40px]"
                     >
                         <input
                             type="time"
@@ -69,7 +69,9 @@ const ListIntervals = ({ addInterval, removeInterval, setFormData }: any) => {
                             className={`border-2 border-white text-black text-[24px] font-semibold rounded-lg py-[3px] px-4 m-1 focus:outline focus:outline-2 focus:outline-[#48d399] focus:border-[#48d399] focus:bg-transparent focus:text-white ${rajdhani.className}`}
                         />
 
-                        <div>
+                        <div
+                        className='flex max-[500px]:absolute max-[500px]:-bottom-full'
+                        >
                             <button
                                 className="w-[35px] h-[35px] rounded-[25px] ml-[20px]"
                                 onClick={() => addInterval()}
@@ -101,7 +103,7 @@ const ListIntervals = ({ addInterval, removeInterval, setFormData }: any) => {
                     </div>
 
                     {errorMsg != '' ? (
-                        <p className="font-medium text-[#db696d]">{errorMsg}</p>
+                        <p className="text-center font-medium text-[#db696d] max-[500px]:mt-[20px]">{errorMsg}</p>
                     ) : (
                         <></>
                     )}

components/Results.tsx

@@ -47,11 +47,16 @@ const Results = ({ roomCode }: RoomCode) => {
 
             <Timeline />
 
+            <button
+            className='min-[1470px]:hidden text-2xl tracking-wide font-medium py-2 px-5 border-2 border-white rounded-lg outline outline-2 outline-transparent hover:outline-white'
+            
+            >Show Timeline</button>
+
             <p className="text-3xl text-[#d4d4d4] font-medium pb-3 my-4">
                 Members Info
             </p>
 
-            <div className="max-w[1200px] grid grid-flow-row grid-cols-3 justify-center items-start gap-[70px]">
+            <div className="max-w[1200px] grid grid-flow-row grid-cols-1 md:grid-cols-2 lg:grid-cols-3 justify-center items-start gap-[70px]">
                 {membersData.map((values: MemberData, id: number) => (
                     <MemberInfo
                         name={values.name}

components/Timeline.tsx

@@ -36,7 +36,7 @@ const Timeline = () => {
     }
 
     return (
-        <div className="my-[50px] flex p-0 text-center">
+        <div className="my-[50px] flex p-0 text-center max-[1470px]:scale-[0.253]">
             {timeline.map((time: number, index: number) => (
                 <div
                     key={index}