chore: better Prettier config for easier reviews

components/design/Loader.tsx

@@ -1,4 +1,4 @@
-import classNames from 'clsx'
+import classNames from "clsx"
 
 export interface LoaderProps {
   width?: number
@@ -13,16 +13,16 @@ export const Loader = (props: LoaderProps): JSX.Element => {
     <div
       style={{
         width,
-        height
+        height,
       }}
       className={classNames(
-        'animate-spin inline-block border-[3px] border-current border-t-transparent text-yellow dark:text-yellow-dark rounded-full',
-        className
+        "animate-spin inline-block border-[3px] border-current border-t-transparent text-yellow dark:text-yellow-dark rounded-full",
+        className,
       )}
-      role='status'
-      aria-label='loading'
+      role="status"
+      aria-label="loading"
     >
-      <span className='sr-only'>Loading...</span>
+      <span className="sr-only">Loading...</span>
     </div>
   )
 }

components/design/RevealFade.tsx

@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { useEffect, useRef } from 'react'
+import { useEffect, useRef } from "react"
 
 export type RevealFadeProps = React.PropsWithChildren
 
@@ -15,22 +15,22 @@ export const RevealFade = (props: RevealFadeProps): JSX.Element => {
         for (const entry of entries) {
           if (entry.isIntersecting) {
             entry.target.className =
-              'opacity-100 visible translate-y-0 transition-all duration-700 ease-in-out'
+              "opacity-100 visible translate-y-0 transition-all duration-700 ease-in-out"
             observer.unobserve(entry.target)
           }
         }
       },
       {
         root: null,
-        rootMargin: '0px',
-        threshold: 0.28
-      }
+        rootMargin: "0px",
+        threshold: 0.28,
+      },
     )
     observer.observe(htmlElement.current as HTMLDivElement)
   }, [])
 
   return (
-    <div ref={htmlElement} className='invisible -translate-y-7 opacity-0'>
+    <div ref={htmlElement} className="invisible -translate-y-7 opacity-0">
       {children}
     </div>
   )

components/design/Section/SectionHeading.tsx

@@ -1,10 +1,10 @@
-type SectionHeadingProps = React.ComponentPropsWithRef<'h2'>
+type SectionHeadingProps = React.ComponentPropsWithRef<"h2">
 
 export const SectionHeading = (props: SectionHeadingProps): JSX.Element => {
   const { children, ...rest } = props
 
   return (
-    <h2 {...rest} className='mb-3 mt-1 text-center text-4xl font-semibold'>
+    <h2 {...rest} className="mb-3 mt-1 text-center text-4xl font-semibold">
       {children}
     </h2>
   )

components/design/Section/index.tsx

@@ -1,7 +1,7 @@
-import { ShadowContainer } from '@/components/design/ShadowContainer'
-import { SectionHeading } from '@/components/design/Section/SectionHeading'
+import { ShadowContainer } from "@/components/design/ShadowContainer"
+import { SectionHeading } from "@/components/design/Section/SectionHeading"
 
-type SectionProps = React.ComponentPropsWithRef<'section'> & {
+type SectionProps = React.ComponentPropsWithRef<"section"> & {
   heading?: string
   description?: string
   isMain?: boolean
@@ -20,13 +20,13 @@ export const Section = (props: SectionProps): JSX.Element => {
 
   if (isMain) {
     return (
-      <div className='w-full px-3'>
+      <div className="w-full px-3">
         <ShadowContainer style={{ marginTop: 50 }}>
           <section {...rest}>
             {heading != null ? (
               <SectionHeading>{heading}</SectionHeading>
             ) : null}
-            <div className='w-full px-3'>{children}</div>
+            <div className="w-full px-3">{children}</div>
           </section>
         </ShadowContainer>
       </div>
@@ -37,7 +37,7 @@ export const Section = (props: SectionProps): JSX.Element => {
     return (
       <section {...rest}>
         {heading != null ? <SectionHeading>{heading}</SectionHeading> : null}
-        <div className='w-full px-3'>{children}</div>
+        <div className="w-full px-3">{children}</div>
       </section>
     )
   }
@@ -52,13 +52,13 @@ export const Section = (props: SectionProps): JSX.Element => {
         </SectionHeading>
       ) : null}
       {description != null ? (
-        <p style={{ marginTop: 7 }} className='text-center'>
+        <p style={{ marginTop: 7 }} className="text-center">
           {description}
         </p>
       ) : null}
-      <div className='w-full px-3'>
+      <div className="w-full px-3">
         <ShadowContainer>
-          <div className='w-full px-16 py-4 leading-8'>{children}</div>
+          <div className="w-full px-16 py-4 leading-8">{children}</div>
         </ShadowContainer>
       </div>
     </section>

components/design/ShadowContainer.tsx

@@ -1,6 +1,6 @@
-import classNames from 'clsx'
+import classNames from "clsx"
 
-type ShadowContainerProps = React.ComponentPropsWithRef<'div'>
+type ShadowContainerProps = React.ComponentPropsWithRef<"div">
 
 export const ShadowContainer = (props: ShadowContainerProps): JSX.Element => {
   const { children, className, ...rest } = props
@@ -8,8 +8,8 @@ export const ShadowContainer = (props: ShadowContainerProps): JSX.Element => {
   return (
     <div
       className={classNames(
-        'mb-12 h-full max-w-full break-words rounded-2xl border border-solid border-[#000] shadow-light dark:shadow-dark ',
-        className
+        "mb-12 h-full max-w-full break-words rounded-2xl border border-solid border-[#000] shadow-light dark:shadow-dark ",
+        className,
       )}
       {...rest}
     >