refactor: remove extra closing tags

Components without children can be self-closed to avoid the unnecessary extra closing tag. In JSX, closing tags are required when the component has children example `<MyComponent>...</MyComponent>` and if there are no child component between these tags, then this component can be self closed using `<MyComponent />`. It is recommended as it improves readability, and it is more compact to use self-closing for these types of components.

components/codeday.tsx

@@ -88,7 +88,7 @@ const CodeDay = () => {
                     alumni through 515 events conducted worldwide. 💫 💻
                   </p>
                   <p>
-                    So, how much does this event cost to enter ?<br></br>-
+                    So, how much does this event cost to enter ?<br />-
                     It&apos;s <span className="font-bold">free</span> of cost.
                   </p>
                   <p>

components/community.tsx

@@ -20,7 +20,7 @@ const Community = () => (
             setting. And hey, the CodeDay Discord server? It's like a cozy
             online hangout where you can keep the fun going, get help, and
             connect with awesome folks.
-            <br></br>
+            <br />
             Share what you&apos;ve made in{' '}
             <span className="channel-name">#magic-happening</span>, chat about
             rainbows in <span className="channel-name">#lounge</span>, get a

components/email.tsx

@@ -276,7 +276,7 @@ const Email = () => {
                     setStatusColor(StatusColor.Editing);
                   }}
                   required
-                ></textarea>
+                 />
                 <div className="flex items-center justify-between p-2 border-t-2 border-black bg-gray-100">
                   <button
                     className="email-btn bg-pink-300"
@@ -354,7 +354,7 @@ const Email = () => {
                   <div className="flex justify-between">
                     <div className="flex items-center">
                       {!read[i] && (
-                        <div className="bg-blue-400 w-2 h-2 rounded ml-1 mr-4"></div>
+                        <div className="bg-blue-400 w-2 h-2 rounded ml-1 mr-4" />
                       )}
                       {open[i] && (
                         <FontAwesomeIcon
@@ -552,7 +552,7 @@ const Email = () => {
                       <div className="flex flex-col gap-y-4 text-mxs overflow-x-hidden">
                         <p
                           dangerouslySetInnerHTML={{ __html: email.content }}
-                        ></p>
+                         />
                       </div>
                     </div>
                   </div>

components/workshop-card.tsx

@@ -13,7 +13,7 @@ const WorkshopCard = (props: IEvent) => {
         {props.name}
         <p className="text-slate-500">{date.toDateString()}</p>
         <div className="mt-2 h-[168px] overflow-scroll text-base text-gray-700">
-          <div dangerouslySetInnerHTML={{ __html: parsedDescription }}></div>
+          <div dangerouslySetInnerHTML={{ __html: parsedDescription }} />
         </div>
       </div>
       <div className="relative mx-6">

components/workshops.tsx

@@ -35,7 +35,7 @@ const Workshops = ({
                     alt="CodeDay Kolkata Logo"
                     layout="fill"
                     objectFit="contain"
-                  ></Image>
+                   />
                 </div>
               </div>
             </div>
@@ -51,14 +51,14 @@ const Workshops = ({
                   alt="mysterious barcode"
                   width={200}
                   height={40}
-                ></Image>
+                 />
                 <p className="overflow-hidden text-sm tracking-widest text-center">
                   {randomBarCode}
                 </p>
               </div>
             </div>
           </div>
-          <div className="w-full h-0.5 mt-3 bg-slate-700"></div>
+          <div className="w-full h-0.5 mt-3 bg-slate-700" />
           <div className="grid grid-cols-5 items-center sm:text-lg">
             {/* mayber link price to send us a coffee? */}
             <div className="text-sm text-center uppercase">Price %10</div>
@@ -67,11 +67,11 @@ const Workshops = ({
             </div>
             <div className="text-sm text-center uppercase">Issue #∞</div>
           </div>
-          <div className="w-full h-0.5 bg-slate-700"></div>
+          <div className="w-full h-0.5 bg-slate-700" />
           <div className="flex flex-col-reverse sm:flex-col">
             <div className="max-w-7xl mx-auto">
               <div className="flex flex-row items-center gap-1 mt-6 ml-4">
-                <div className="w-3.5 h-3.5 rounded-full bg-emerald-500 animate-pulse"></div>
+                <div className="w-3.5 h-3.5 rounded-full bg-emerald-500 animate-pulse" />
                 <p className="font-bold">
                   Past workshops from{' '}
                   <span className="underline hover:text-amber-500">

pages/_document.tsx

@@ -37,7 +37,7 @@ export default function Document() {
         <meta name="robots" content="index, follow" />
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <meta name="language" content="English" />
-        <meta name="revisit-after" content="2 days"></meta>
+        <meta name="revisit-after" content="2 days" />
       </Head>
       <body>
         <Main />

pages/volunteer.tsx

@@ -3,8 +3,8 @@ import Script from 'next/script';
 const form = () => {
   return (
     <>
-      <div data-tf-live="01HTWVTBEQG5WYACTK5YE8MX8G"></div>
-      <Script src="//embed.typeform.com/next/embed.js"></Script>
+      <div data-tf-live="01HTWVTBEQG5WYACTK5YE8MX8G" />
+      <Script src="//embed.typeform.com/next/embed.js" />
     </>
   );
 };