Formatting with prettier

HackRU · Jan 27, 2024 · ba8dd2f · ba8dd2f
1 parent ab83455
commit ba8dd2f
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 82 deletions.
diff --git a/app/(landing)/sections/About.tsx b/app/(landing)/sections/About.tsx
@@ -1,7 +1,13 @@
-import Image from "next/image";
-import clsx from "clsx";
+import Image from 'next/image';
+import clsx from 'clsx';
 
-function AboutInfo({ children, title, imageSrc, alt, reverse }: {
+function AboutInfo({
+  children,
+  title,
+  imageSrc,
+  alt,
+  reverse,
+}: {
   children: React.ReactNode;
   title: string;
   imageSrc: string;
@@ -12,15 +18,13 @@ function AboutInfo({ children, title, imageSrc, alt, reverse }: {
     return (
       <div
         className={clsx(
-          "bg-red-100 w-full md:w-1/2 md:grow md:justify-end h-fit p-20",
+          'h-fit w-full bg-red-100 p-20 md:w-1/2 md:grow md:justify-end',
           {
-            "text-end": reverse,
+            'text-end': reverse,
           },
         )}
       >
-        <h1 className="font-extrabold bg-red-100 text-5xl">
-          {title}
-        </h1>
+        <h1 className="bg-red-100 text-5xl font-extrabold">{title}</h1>
         {children}
       </div>
     );
@@ -30,20 +34,14 @@ function AboutInfo({ children, title, imageSrc, alt, reverse }: {
     return (
       <div
         className={clsx(
-          "bg-red-200 w-full md:w-1/2 h-fit flex justify-center",
+          'flex h-fit w-full justify-center bg-red-200 md:w-1/2',
           {
-            "md:justify-start": !reverse,
-            "md:justify-end": reverse,
+            'md:justify-start': !reverse,
+            'md:justify-end': reverse,
           },
         )}
       >
-        <Image
-          src={imageSrc}
-          width="400"
-          height="400"
-          alt={alt}
-          priority
-        />
+        <Image src={imageSrc} width="400" height="400" alt={alt} priority />
       </div>
     );
   }
@@ -67,8 +65,10 @@ function AboutInfo({ children, title, imageSrc, alt, reverse }: {
 
 export default function About() {
   return (
-    <div className="bg-gray-200 w-full h-fit
-      flex flex-col md:flex-row flex-wrap">
+    <div
+      className="flex h-fit w-full
+      flex-col flex-wrap bg-gray-200 md:flex-row"
+    >
       <AboutInfo title="WHAT" imageSrc="/landing/python.png" alt="Python">
         <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed

diff --git a/app/(landing)/sections/FAQ/FAQ.tsx b/app/(landing)/sections/FAQ/FAQ.tsx
@@ -1,9 +1,9 @@
-"use client";
+'use client';
 
-import React from "react";
-import { Disclosure } from "@headlessui/react";
-import { GoChevronDown } from "react-icons/go";
-import { hackRUFAQ } from "@/app/lib/constants";
+import React from 'react';
+import { Disclosure } from '@headlessui/react';
+import { GoChevronDown } from 'react-icons/go';
+import { hackRUFAQ } from '@/app/lib/constants';
 
 /**
  * TODO: make it so that only one question can be open at a time.
@@ -14,19 +14,21 @@ function Question(props: { question: string; answer: string }) {
   return (
     <Disclosure>
       {({ open }) => (
-        <div className="flex flex-col border-b-white border-b-2 hover:bg-f23-mediumGreen rounded-t-lg">
-          <Disclosure.Button className="flex w-full justify-between
-            p-4 text-left text-md text-textSubtitle
+        <div className="hover:bg-f23-mediumGreen flex flex-col rounded-t-lg border-b-2 border-b-white">
+          <Disclosure.Button
+            className="text-md text-textSubtitle flex
+            w-full justify-between p-4 text-left
             focus:outline-none focus-visible:ring
-            focus-visible:ring-opacity-75">
+            focus-visible:ring-opacity-75"
+          >
             <span>{question}</span>
             <GoChevronDown
               className={`${
-                open ? "rotate-180 transform" : ""
-              } h-5 w-5 text-text`}
+                open ? 'rotate-180 transform' : ''
+              } text-text h-5 w-5`}
             />
           </Disclosure.Button>
-          <Disclosure.Panel className="px-4 pt-4 pb-2 text-sm text-white w-full">
+          <Disclosure.Panel className="w-full px-4 pb-2 pt-4 text-sm text-white">
             {answer}
           </Disclosure.Panel>
         </div>
@@ -49,21 +51,15 @@ function QuestionContainer() {
   } = hackRUFAQ;
 
   return (
-    <div className="pt-16 ml-22 z-40">
-      <div className="max-w-3xl rounded-2xl transparent-black-background p-10 sm:grid sm:grid-cols-2">
+    <div className="ml-22 z-40 pt-16">
+      <div className="transparent-black-background max-w-3xl rounded-2xl p-10 sm:grid sm:grid-cols-2">
         <div>
-          <Question
-            question="What is HackRU?"
-            answer={whatIsHackRUAnswer}
-          />
+          <Question question="What is HackRU?" answer={whatIsHackRUAnswer} />
           <Question
             question="What is the application process like?"
             answer={whatIsApplicationAnswer}
           />
-          <Question
-            question="Can I win anything?"
-            answer={winAnythingAnswer}
-          />
+          <Question question="Can I win anything?" answer={winAnythingAnswer} />
           <Question
             question="Will there be a mask mandate?"
             answer={maskMandateAnswer}
@@ -74,14 +70,8 @@ function QuestionContainer() {
           />
         </div>
         <div>
-          <Question
-            question="Who can come?"
-            answer={whoCanComeAnswer}
-          />
-          <Question
-            question="I'm new. What should I do? "
-            answer={newAnswer}
-          />
+          <Question question="Who can come?" answer={whoCanComeAnswer} />
+          <Question question="I'm new. What should I do? " answer={newAnswer} />
           <Question
             question="How much does it cost to attend?"
             answer={costAnswer}
@@ -100,11 +90,11 @@ export default function FAQ() {
   return (
     <div
       id="FAQ"
-      className="w-full flex h-fit
-relative overflow-visible items-center 
-flex-col justify-start min-h-[600px]"
+      className="relative flex h-fit
+min-h-[600px] w-full flex-col 
+items-center justify-start overflow-visible"
     >
-      <div className="w-full h-full max-w-7xl relative flex flex-col items-center pb-[24rem]">
+      <div className="relative flex h-full w-full max-w-7xl flex-col items-center pb-[24rem]">
         <QuestionContainer />
       </div>
     </div>

diff --git a/app/(landing)/sections/GenericSection.tsx b/app/(landing)/sections/GenericSection.tsx
@@ -1,18 +1,17 @@
-import { type } from "os";
-import SectionTitle from "./SectionTitle";
-import { ReactNode } from "react";
+import SectionTitle from './SectionTitle';
+import { ReactNode } from 'react';
 
 type GenericSectionProps = {
   children: ReactNode;
   title: string;
   color: string;
 };
 
-export default async function GenericSection(props: GenericSectionProps) {
+export default function GenericSection(props: GenericSectionProps) {
   return (
     <div
       id={props.title}
-      className={`w-full flex flex-col items-center bg-${props.color}`}
+      className={`flex w-full flex-col items-center bg-${props.color}`}
     >
       <SectionTitle title={props.title} />
       {props.children}

diff --git a/app/(landing)/sections/Hero/Hero.tsx b/app/(landing)/sections/Hero/Hero.tsx
@@ -8,21 +8,21 @@ export default function Hero() {
       <div
         className="flex w-full
         flex-col items-center justify-center bg-gray-100
-        md:flex md:flex-row-reverse md:h-[100vh]
+        md:flex md:h-[100vh] md:flex-row-reverse
         "
       >
-
-
         {/* <div className="w-full h-[75vh] bg-red-100" />
         <div className="w-full h-10 bg-red-500" /> */}
 
-        <div className="w-full lg:w-2/5 h-[40vh] text-center pt-10 md:pt-0 relative">
+        <div className="relative h-[40vh] w-full pt-10 text-center md:pt-0 lg:w-2/5">
           <div
             className="flex h-[40vh] w-full flex-col justify-center space-y-4 text-5xl
-                       md:text-4xl md:space-y-7 md:absolute md:-left-20 md:min-w-fit
-                       lg:text-5xl lg:-left-10 xl:text-6xl xl:space-y-8"
+                       md:absolute md:-left-20 md:min-w-fit md:space-y-7 md:text-4xl
+                       lg:-left-10 lg:text-5xl xl:space-y-8 xl:text-6xl"
           >
-            <div className="mb-2 text-xl md:mb-0 lg:text-3xl xl:text-4xl">WELCOME TO OUR</div>
+            <div className="mb-2 text-xl md:mb-0 lg:text-3xl xl:text-4xl">
+              WELCOME TO OUR
+            </div>
             <div>SCHOOL OF</div>
             <div>CODECRAFT&nbsp;&</div>
             <div>CIRCUITRY!</div>

diff --git a/app/(landing)/sections/Schedule.tsx b/app/(landing)/sections/Schedule.tsx
@@ -1,5 +1,5 @@
-import { getSchedule } from "@/app/lib/data";
-import SectionTitle from "./SectionTitle";
+import { getSchedule } from '@/app/lib/data';
+import SectionTitle from './SectionTitle';
 
 function ScheduleOfTheDay(props: { dayInfo: DayInfo }) {
   const { dayInfo } = props;
@@ -35,11 +35,13 @@ export default async function Schedule() {
       id="Schedule"
     >
       <div className="flex h-fit w-full max-w-7xl flex-col items-center">
-        <div className="transparent-black-background text-text relative flex
-                              w-full flex-col items-center rounded-3xl md:flex-row md:items-start">
-          <ScheduleOfTheDay dayInfo={schedule["Saturday"]} />
+        <div
+          className="transparent-black-background text-text relative flex
+                              w-full flex-col items-center rounded-3xl md:flex-row md:items-start"
+        >
+          <ScheduleOfTheDay dayInfo={schedule['Saturday']} />
           <div className="bg-text h-2 w-20 rounded-sm md:invisible md:absolute" />
-          <ScheduleOfTheDay dayInfo={schedule["Sunday"]} />
+          <ScheduleOfTheDay dayInfo={schedule['Sunday']} />
         </div>
       </div>
     </div>

diff --git a/app/(landing)/sections/SectionTitle.tsx b/app/(landing)/sections/SectionTitle.tsx
@@ -1,19 +1,19 @@
 export default function SectionTitle(props: { title: string }) {
   return (
-    <div className="flex items-center w-full">
+    <div className="flex w-full items-center">
       <div className="w-[7.5vw]" />
-      <div className="w-1/4 flex items-center">
-        <div className="flex-1 h-[0px] border-4 border-dashed border-black" />
+      <div className="flex w-1/4 items-center">
+        <div className="h-[0px] flex-1 border-4 border-dashed border-black" />
         <div className="w-[5px]" />
-        <div className="w-[17px] h-[17px] rotate-45 bg-black" />
+        <div className="h-[17px] w-[17px] rotate-45 bg-black" />
       </div>
-      <div className="flex-grow text-black-500 text-8xl justify-content text-center">
+      <div className="text-black-500 justify-content flex-grow text-center text-8xl">
         {props.title}
       </div>
-      <div className="w-1/4 flex items-center">
-        <div className="w-[17px] h-[17px] rotate-45 bg-black" />
+      <div className="flex w-1/4 items-center">
+        <div className="h-[17px] w-[17px] rotate-45 bg-black" />
         <div className="w-[5px]" />
-        <div className="flex-1 h-[0px] border-4 border-dashed border-black" />
+        <div className="h-[0px] flex-1 border-4 border-dashed border-black" />
       </div>
       <div className="w-[7.5vw]" />
     </div>

diff --git a/app/(landing)/sections/Sponsors.tsx b/app/(landing)/sections/Sponsors.tsx
@@ -1,7 +1,9 @@
 export default function Sponsors() {
   return (
-    <div className="flex h-[100vh] max-h-[1300px] w-full
-      flex-col items-center justify-center">
+    <div
+      className="flex h-[100vh] max-h-[1300px] w-full
+      flex-col items-center justify-center"
+    >
       <h1 className="text-5xl font-extrabold">Sponsors</h1>
     </div>
   );