run prettier

Winter-Seminar-Series · Jan 2, 2024 · 3a92976 · 3a92976
1 parent 1499816
commit 3a92976
Show file tree

Hide file tree

Showing 15 changed files with 192 additions and 116 deletions.
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
@@ -1,5 +1,5 @@
-@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');
 
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
diff --git a/frontend/src/app/seminar/NextPreButton.tsx b/frontend/src/app/seminar/NextPreButton.tsx
@@ -1,10 +1,23 @@
-import React from "react";
+import React from 'react';
 import Image from 'next/image';
 
-export default function NextPreButton({src, direction, className}: {src: string, direction: 'next' | 'pre', className?: string}) {
+export default function NextPreButton({
+  src,
+  direction,
+  className,
+}: {
+  src: string;
+  direction: 'next' | 'pre';
+  className?: string;
+}) {
   return (
-    <button className={'flex justify-center items-center bg-white rounded-full w-12 h-12 ' + className}>
-      <Image src={src} alt={direction + ' arrow'} className={'w-7 h-7'}/>
+    <button
+      className={
+        'flex h-12 w-12 items-center justify-center rounded-full bg-white ' +
+        className
+      }
+    >
+      <Image src={src} alt={direction + ' arrow'} className={'h-7 w-7'} />
     </button>
-  )
-}
+  );
+}
diff --git a/frontend/src/app/seminar/Seminar.tsx b/frontend/src/app/seminar/Seminar.tsx
@@ -5,22 +5,27 @@ import SeminarLine from './SeminarLine';
 import ViewAllButton from './ViewAllButton';
 
 export type Person = {
-  name: string,
-  surname: string,
-  linkedin: string,
-  instagram: string,
-  facebook: string,
-  image: string,
-  position: string,
-  university: string,
-}
+  name: string;
+  surname: string;
+  linkedin: string;
+  instagram: string;
+  facebook: string;
+  image: string;
+  position: string;
+  university: string;
+};
 
 export default function Seminar() {
   return (
-    <div style={{ backgroundImage: `url(${Background.src})` }} className={'flex-col justify-center items-center bg-no-repeat bg-cover bg-center pb-14'}>
+    <div
+      style={{ backgroundImage: `url(${Background.src})` }}
+      className={
+        'flex-col items-center justify-center bg-cover bg-center bg-no-repeat pb-14'
+      }
+    >
       <SeminarHeader />
-      <SeminarLine/>
-      <ViewAllButton text={'View All Seminars'} width={20}/>
+      <SeminarLine />
+      <ViewAllButton text={'View All Seminars'} width={20} />
     </div>
   );
 }
diff --git a/frontend/src/app/seminar/SeminarCard.tsx b/frontend/src/app/seminar/SeminarCard.tsx
@@ -6,28 +6,43 @@ import { Person } from './Seminar';
 import Image from 'next/image';
 import SeminarLogo from './SeminarLogo';
 
-export default function SeminarCard({ key, person }: { key: number, person: Person }) {
+export default function SeminarCard({
+  key,
+  person,
+}: {
+  key: number;
+  person: Person;
+}) {
   return (
-    <div key={key} className={'flex-col justify-between items-center w-fit px-5 pt-20'}>
-      <div className={'flex w-fit justify-end relative mx-auto z-10'}>
-        <div className={'absolute flex-col z-10 mt-1 mr-2'}>
+    <div
+      key={key}
+      className={'w-fit flex-col items-center justify-between px-5 pt-20'}
+    >
+      <div className={'relative z-10 mx-auto flex w-fit justify-end'}>
+        <div className={'absolute z-10 mr-2 mt-1 flex-col'}>
           <SeminarLogo logo={linkedin.src} alt={'linkedin'} />
           <SeminarLogo logo={instagram.src} alt={'instagram'} />
           <SeminarLogo logo={facebook.src} alt={'facebook'} />
         </div>
-        <Image src={person.image} alt={person.name + ' ' + person.surname} width={200} height={200} className={'relative z-0'}/>
+        <Image
+          src={person.image}
+          alt={person.name + ' ' + person.surname}
+          width={200}
+          height={200}
+          className={'relative z-0'}
+        />
       </div>
-      <div className={'bg-white rounded-lg font-manrope font-normal text-sm text-[#8A8998] w-[230px] pl-4 pt-[40%] pb-5 -translate-y-[50%] z-0'}>
-        <div className={'font-semibold text-xl text-black pb-1 pt-3.5'}>
+      <div
+        className={
+          'z-0 w-[230px] -translate-y-[50%] rounded-lg bg-white pb-5 pl-4 pt-[40%] font-manrope text-sm font-normal text-[#8A8998]'
+        }
+      >
+        <div className={'pb-1 pt-3.5 text-xl font-semibold text-black'}>
           {person.name} {person.surname}
         </div>
-        <div>
-          • {person.position}
-        </div>
-        <div>
-          • {person.university}
-        </div>
+        <div>• {person.position}</div>
+        <div>• {person.university}</div>
       </div>
     </div>
   );
-}
+}
diff --git a/frontend/src/app/seminar/SeminarLine.tsx b/frontend/src/app/seminar/SeminarLine.tsx
@@ -105,15 +105,13 @@ export default function SeminarLine() {
     //   position: 'PhD, Assistant Professor',
     //   university: 'University of Waterloo',
     // },
-  ]
+  ];
 
   return (
-    <div className={'flex flex-wrap justify-center items-center'}>
-      {
-        people.map((person, index) => (
-          <SeminarCard key={index} person={person}/>
-        ))
-      }
+    <div className={'flex flex-wrap items-center justify-center'}>
+      {people.map((person, index) => (
+        <SeminarCard key={index} person={person} />
+      ))}
     </div>
-  )
-}
+  );
+}
diff --git a/frontend/src/app/seminar/SeminarLogo.tsx b/frontend/src/app/seminar/SeminarLogo.tsx
@@ -1,10 +1,20 @@
 import React from 'react';
 import Image from 'next/image';
 
-export default function SeminarLogo({logo, alt}: {logo: string, alt: string}) {
+export default function SeminarLogo({
+  logo,
+  alt,
+}: {
+  logo: string;
+  alt: string;
+}) {
   return (
-    <button className={'flex justify-center items-center bg-white bg-opacity-40 rounded-full mt-2 w-7 h-7'}>
-      <Image src={logo} alt={alt} width={13} height={13}/>
+    <button
+      className={
+        'mt-2 flex h-7 w-7 items-center justify-center rounded-full bg-white bg-opacity-40'
+      }
+    >
+      <Image src={logo} alt={alt} width={13} height={13} />
     </button>
-  )
-}
+  );
+}
diff --git a/frontend/src/app/seminar/SminarHeader.tsx b/frontend/src/app/seminar/SminarHeader.tsx
@@ -1,23 +1,25 @@
-import React from "react";
-import PreArrow from "./assets/pre arrow.svg";
-import NextArrow from "./assets/next arrow.svg";
-import NextPreButton from "./NextPreButton";
+import React from 'react';
+import PreArrow from './assets/pre arrow.svg';
+import NextArrow from './assets/next arrow.svg';
+import NextPreButton from './NextPreButton';
 
 export default function SeminarHeader() {
   return (
-    <div className={'flex justify-between items-center px-32 pt-20'}>
+    <div className={'flex items-center justify-between px-32 pt-20'}>
       <div>
-        <div className={'font-manrope font-medium text-lg text-white opacity-60'}>
+        <div
+          className={'font-manrope text-lg font-medium text-white opacity-60'}
+        >
           Overline Goes Here
         </div>
-        <div className={'font-manrope font-bold text-[64px] text-white -mt-2'}>
+        <div className={'-mt-2 font-manrope text-[64px] font-bold text-white'}>
           Seminars
         </div>
       </div>
       <div className={'flex'}>
-        <NextPreButton src={PreArrow} direction={'pre'}/>
-        <NextPreButton src={NextArrow} direction={'next'} className={'ml-4'}/>
+        <NextPreButton src={PreArrow} direction={'pre'} />
+        <NextPreButton src={NextArrow} direction={'next'} className={'ml-4'} />
       </div>
     </div>
-  )
-}
+  );
+}
diff --git a/frontend/src/app/seminar/ViewAllButton.tsx b/frontend/src/app/seminar/ViewAllButton.tsx
@@ -2,13 +2,27 @@ import React from 'react';
 import Arrow from './assets/view all arrow.svg';
 import Image from 'next/image';
 
-export default function ViewAllButton({ text, width }: { text: string, width?: number }) {
+export default function ViewAllButton({
+  text,
+  width,
+}: {
+  text: string;
+  width?: number;
+}) {
   return (
-    <button className={'flex justify-center items-center rounded-md m-auto bg-white py-5 px-8 mb-3 font-manrope font-bold text-lg'}>
-      <div>
-        {text}
-      </div>
-      <Image src={Arrow} alt={'view all arrow'} width={width} height={width} className={'ml-3'} />
+    <button
+      className={
+        'm-auto mb-3 flex items-center justify-center rounded-md bg-white px-8 py-5 font-manrope text-lg font-bold'
+      }
+    >
+      <div>{text}</div>
+      <Image
+        src={Arrow}
+        alt={'view all arrow'}
+        width={width}
+        height={width}
+        className={'ml-3'}
+      />
     </button>
   );
-}
+}
diff --git a/frontend/src/app/staff/Staff.tsx b/frontend/src/app/staff/Staff.tsx
@@ -3,15 +3,19 @@ import StaffHeader from './StaffHeader';
 import StaffLine from './StaffLine';
 
 export type Staff = {
-  name: string,
-  surname: string,
-  team: string,
-  image: string,
-}
+  name: string;
+  surname: string;
+  team: string;
+  image: string;
+};
 
 export default function Staff() {
   return (
-    <div className={'flex-col justify-center items-center bg-no-repeat bg-cover bg-center pb-14'}>
+    <div
+      className={
+        'flex-col items-center justify-center bg-cover bg-center bg-no-repeat pb-14'
+      }
+    >
       <StaffHeader />
       <StaffLine />
     </div>

diff --git a/frontend/src/app/staff/StaffCard.tsx b/frontend/src/app/staff/StaffCard.tsx
@@ -2,17 +2,29 @@ import React from 'react';
 import { Staff } from './Staff';
 import Image from 'next/image';
 
-export default function StaffCard({ key, person }: { key: number, person: Staff }) {
+export default function StaffCard({
+  key,
+  person,
+}: {
+  key: number;
+  person: Staff;
+}) {
   return (
-    <div key={key} className={'flex flex-col justify-center items-center px-5 font-manrope'}>
-      <Image src={person.image} alt={person.name + ' ' + person.surname} width={200} height={200}
-             className={'rounded-full'} />
-      <div className={'font-semibold text-base text-black pt-3'}>
+    <div
+      key={key}
+      className={'flex flex-col items-center justify-center px-5 font-manrope'}
+    >
+      <Image
+        src={person.image}
+        alt={person.name + ' ' + person.surname}
+        width={200}
+        height={200}
+        className={'rounded-full'}
+      />
+      <div className={'pt-3 text-base font-semibold text-black'}>
         {person.name} {person.surname}
       </div>
-      <div className={'font-normal text-xs text-[#8A8998]'}>
-        {person.team}
-      </div>
+      <div className={'text-xs font-normal text-[#8A8998]'}>{person.team}</div>
     </div>
   );
-}
+}
diff --git a/frontend/src/app/staff/StaffHeader.tsx b/frontend/src/app/staff/StaffHeader.tsx
@@ -1,18 +1,20 @@
-import React from "react";
+import React from 'react';
 import ViewAllButton from './ViewAllButton';
 
 export default function StaffHeader() {
   return (
-    <div className={'flex justify-between items-center px-32 pt-20'}>
+    <div className={'flex items-center justify-between px-32 pt-20'}>
       <div>
-        <div className={'font-manrope font-medium text-lg text-[#8A8998]'}>
+        <div className={'font-manrope text-lg font-medium text-[#8A8998]'}>
           Overline Goes Here
         </div>
-        <div className={'font-manrope font-bold text-[64px] text-[#1F2B3D] -mt-2'}>
+        <div
+          className={'-mt-2 font-manrope text-[64px] font-bold text-[#1F2B3D]'}
+        >
           Staff Members
         </div>
       </div>
       <ViewAllButton text={'View All'} width={20} />
     </div>
-  )
-}
+  );
+}
diff --git a/frontend/src/app/staff/StaffLine.tsx b/frontend/src/app/staff/StaffLine.tsx
@@ -44,12 +44,10 @@ export default function StaffLine() {
   ];
 
   return (
-    <div className={'flex flex-wrap justify-center items-center pt-10'}>
-      {
-        staff.map((person, index) => (
-          <StaffCard key={index} person={person} />
-        ))
-      }
+    <div className={'flex flex-wrap items-center justify-center pt-10'}>
+      {staff.map((person, index) => (
+        <StaffCard key={index} person={person} />
+      ))}
     </div>
   );
-}
+}