style: prettier formatting

SeanCassiere · SeanCassiere · commit a0e2b8ad3c6f · 2025-05-04T02:13:45.000+12:00
diff --git a/app/components/CountdownTimer.tsx b/app/components/CountdownTimer.tsx
@@ -1,76 +1,78 @@
-import { Fragment, useEffect, useState } from "react";
+import { Fragment, useEffect, useState } from 'react'
 
 interface CountdownProps {
-  targetDate: string; // YYYY-MM-DD format
+  targetDate: string // YYYY-MM-DD format
 }
 
 interface TimeLeft {
-  days: number;
-  hours: number;
-  minutes: number;
-  seconds: number;
+  days: number
+  hours: number
+  minutes: number
+  seconds: number
 }
 
 function calculateTimeLeft(targetDate: string): TimeLeft {
-  const target = new Date(`${targetDate}T00:00:00-08:00`);
-  const now = new Date();
-  const difference = +target - +now;
+  const target = new Date(`${targetDate}T00:00:00-08:00`)
+  const now = new Date()
+  const difference = +target - +now
 
   if (difference <= 0) {
     return {
       days: 0,
       hours: 0,
       minutes: 0,
       seconds: 0,
-    };
+    }
   }
 
   return {
     days: Math.floor(difference / (1000 * 60 * 60 * 24)),
     hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
     minutes: Math.floor((difference / 1000 / 60) % 60),
     seconds: Math.floor((difference / 1000) % 60),
-  };
+  }
 }
 
-const formatNumber = (number: number) => number.toString().padStart(2, "0");
+const formatNumber = (number: number) => number.toString().padStart(2, '0')
 
 const Countdown: React.FC<CountdownProps> = ({ targetDate }) => {
   const [timeLeft, setTimeLeft] = useState<TimeLeft>(
-    calculateTimeLeft(targetDate),
-  );
+    calculateTimeLeft(targetDate)
+  )
 
   useEffect(() => {
     const timer = setInterval(() => {
-      const newTimeLeft = calculateTimeLeft(targetDate);
-      setTimeLeft(newTimeLeft);
+      const newTimeLeft = calculateTimeLeft(targetDate)
+      setTimeLeft(newTimeLeft)
       if (
         newTimeLeft.days === 0 &&
         newTimeLeft.hours === 0 &&
         newTimeLeft.minutes === 0 &&
         newTimeLeft.seconds === 0
       ) {
-        clearInterval(timer);
+        clearInterval(timer)
       }
-    }, 1000);
+    }, 1000)
 
-    return () => clearInterval(timer);
-  }, [targetDate]);
+    return () => clearInterval(timer)
+  }, [targetDate])
 
   if (
     timeLeft.days === 0 &&
     timeLeft.hours === 0 &&
     timeLeft.minutes === 0 &&
     timeLeft.seconds === 0
   ) {
-    return null;
+    return null
   }
 
   return (
     <div className="flex gap-2 justify-center">
-      {["days", "hours", "minutes", "seconds"].map((unit, index) => (
+      {['days', 'hours', 'minutes', 'seconds'].map((unit, index) => (
         <Fragment key={unit}>
-          {index > 0 && <span className="h-[2rem] grid place-content-center">:</span>}
+          {index > 0 && (
+            <span className="h-[2rem] grid place-content-center">:</span>
+          )}
 
           <div className={`${unit} grid grid-cols-2 gap-x-1 gap-y-1.5`}>
             <span className="h-[2.3rem] aspect-[6/7] grid place-content-center rounded-sm bg-[#f9f4da] bg-opacity-10 font-semibold">
@@ -84,7 +86,7 @@ const Countdown: React.FC<CountdownProps> = ({ targetDate }) => {
         </Fragment>
       ))}
     </div>
-  );
-};
+  )
+}
 
-export default Countdown;
+export default Countdown
diff --git a/app/components/CountdownTimerSmall.tsx b/app/components/CountdownTimerSmall.tsx
@@ -1,71 +1,69 @@
-import { Fragment, useEffect, useState } from "react";
+import { Fragment, useEffect, useState } from 'react'
 
 interface CountdownProps {
-  targetDate: string; // YYYY-MM-DD format
+  targetDate: string // YYYY-MM-DD format
 }
 
 interface TimeLeft {
-  days: number;
-  hours: number;
-  minutes: number;
+  days: number
+  hours: number
+  minutes: number
 }
 
 function calculateTimeLeft(targetDate: string): TimeLeft {
-  const target = new Date(`${targetDate}T00:00:00-08:00`);
-  const now = new Date();
-  const difference = +target - +now;
+  const target = new Date(`${targetDate}T00:00:00-08:00`)
+  const now = new Date()
+  const difference = +target - +now
 
   if (difference <= 0) {
     return {
       days: 0,
       hours: 0,
       minutes: 0,
-    };
+    }
   }
 
   return {
     days: Math.floor(difference / (1000 * 60 * 60 * 24)),
     hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
     minutes: Math.floor((difference / 1000 / 60) % 60),
-  };
+  }
 }
 
-const formatNumber = (number: number) => number.toString().padStart(2, "0");
+const formatNumber = (number: number) => number.toString().padStart(2, '0')
 
 const Countdown: React.FC<CountdownProps> = ({ targetDate }) => {
   const [timeLeft, setTimeLeft] = useState<TimeLeft>(
-    calculateTimeLeft(targetDate),
-  );
+    calculateTimeLeft(targetDate)
+  )
 
   useEffect(() => {
     const timer = setInterval(() => {
-      const newTimeLeft = calculateTimeLeft(targetDate);
-      setTimeLeft(newTimeLeft);
+      const newTimeLeft = calculateTimeLeft(targetDate)
+      setTimeLeft(newTimeLeft)
       if (
         newTimeLeft.days === 0 &&
         newTimeLeft.hours === 0 &&
         newTimeLeft.minutes === 0
       ) {
-        clearInterval(timer);
+        clearInterval(timer)
       }
-    }, 1000);
+    }, 1000)
 
-    return () => clearInterval(timer);
-  }, [targetDate]);
+    return () => clearInterval(timer)
+  }, [targetDate])
 
-  if (
-    timeLeft.days === 0 &&
-    timeLeft.hours === 0 &&
-    timeLeft.minutes === 0
-  ) {
-    return null;
+  if (timeLeft.days === 0 && timeLeft.hours === 0 && timeLeft.minutes === 0) {
+    return null
   }
 
   return (
     <div className="countdown flex gap-1.5 justify-center">
-      {["days", "hours", "minutes"].map((unit, index) => (
+      {['days', 'hours', 'minutes'].map((unit, index) => (
         <Fragment key={unit}>
-          {index > 0 && <span className="h-[1.4em] grid place-content-center">:</span>}
+          {index > 0 && (
+            <span className="h-[1.4em] grid place-content-center">:</span>
+          )}
 
           <div className={`${unit} grid grid-cols-2 gap-x-1 gap-y-1.5`}>
             <span className="h-[1.8em] w-[1.7em] grid place-content-center rounded-sm bg-gray-200 bg-opacity-75 dark:bg-gray-600 dark:bg-opacity-50 text-sm font-semibold">
@@ -79,7 +77,7 @@ const Countdown: React.FC<CountdownProps> = ({ targetDate }) => {
         </Fragment>
       ))}
     </div>
-  );
-};
+  )
+}
 
-export default Countdown;
+export default Countdown
diff --git a/app/components/DocsCalloutQueryGG.tsx b/app/components/DocsCalloutQueryGG.tsx
@@ -29,7 +29,9 @@ export function DocsCalloutQueryGG() {
           <h2 className="mt-1 mb-1 px-2 text-md font-semibold">
             Launch week sale
           </h2>
-          <p className="normal-case mb-4 text-sm text-balance">Up to 25% off through May 10th</p>
+          <p className="normal-case mb-4 text-sm text-balance">
+            Up to 25% off through May 10th
+          </p>
           <CountdownTimerSmall targetDate="2025-05-10" />
         </div>
 
diff --git a/app/components/QueryGGBannerSale.tsx b/app/components/QueryGGBannerSale.tsx
@@ -1,40 +1,43 @@
-import headerCourse from '~/images/query-header-course.svg';
-import cornerTopLeft from '~/images/query-corner-top-left.svg';
-import cornerTopRight from '~/images/query-corner-top-right.svg';
-import cornerFishBottomRight from '~/images/query-corner-fish-bottom-right.svg';
+import headerCourse from '~/images/query-header-course.svg'
+import cornerTopLeft from '~/images/query-corner-top-left.svg'
+import cornerTopRight from '~/images/query-corner-top-right.svg'
+import cornerFishBottomRight from '~/images/query-corner-fish-bottom-right.svg'
 import CountdownTimer from '~/components/CountdownTimer'
 
 export function QueryGGBannerSale(props: React.HTMLProps<HTMLDivElement>) {
   return (
-    <aside {...props} className="mx-auto w-full max-w-[1200px] p-8 -mt-32 flex justify-between items-center">
+    <aside
+      {...props}
+      className="mx-auto w-full max-w-[1200px] p-8 -mt-32 flex justify-between items-center"
+    >
       <div className="w-full xl:flex xl:gap-6 bg-[#f9f4da] border-4 border-[#231f20]">
-        <a href="https://query.gg?s=tanstack" className="xl:w-[50%] pb-4 grid grid-cols-[70px_1fr_70px] sm:grid-cols-[100px_1fr_100px] md:grid-cols-[140px_1fr_140px] xl:grid-cols-[110px_1fr] 2xl:grid-cols-[150px_1fr]">
-          <img
-            src={cornerTopLeft}
-            alt="sun"
-            className=""
-          />
+        <a
+          href="https://query.gg?s=tanstack"
+          className="xl:w-[50%] pb-4 grid grid-cols-[70px_1fr_70px] sm:grid-cols-[100px_1fr_100px] md:grid-cols-[140px_1fr_140px] xl:grid-cols-[110px_1fr] 2xl:grid-cols-[150px_1fr]"
+        >
+          <img src={cornerTopLeft} alt="sun" className="" />
           <img
             src={headerCourse}
             alt="Query.gg - The Official React Query Course"
             className="-mt-[1px] w-10/12 max-w-[400px] justify-self-center"
           />
-          <img
-            src={cornerTopRight}
-            alt="moon"
-            className="xl:hidden"
-          />
+          <img src={cornerTopRight} alt="moon" className="xl:hidden" />
         </a>
         <div className="hidden xl:block w-[80px] mr-[-60px] bg-[#231f20] border-4 border-r-0 border-[#f9f4da] border-s-[#f9f4da] shadow-[-4px_0_0_#231f20] -skew-x-[15deg] z-0"></div>
         <div className="xl:w-[50%] py-2 xl:pb-0 grid xl:grid-cols-[1fr_90px] 2xl:grid-cols-[1fr_120px] justify-center bg-[#231f20] border-2 xl:border-4 xl:border-l-0 border-[#f9f4da] text-[#f9f4da] z-10">
           <div className="my-2 uppercase text-center place-self-center">
             {/* <h2 className="mt-1 mb-3 px-2 text-sm font-semibold">Launch sale happening now</h2> */}
             <h2 className="mb-1 text-lg lg:text-2xl xl:text-3xl font-semibold">
-                Launch week sale
+              Launch week sale
             </h2>
             <p className="normal-case mb-4">Up to 25% off through May 10th</p>
             <CountdownTimer targetDate="2025-05-10" />
-            <a href="https://query.gg?s=tanstack" className="mt-4 mb-1 xl:mb-2 px-6 py-2 inline-block bg-[#fcba28] text-[#231f20] rounded-full uppercase border border-black cursor-pointer font-black">Join now</a>
+            <a
+              href="https://query.gg?s=tanstack"
+              className="mt-4 mb-1 xl:mb-2 px-6 py-2 inline-block bg-[#fcba28] text-[#231f20] rounded-full uppercase border border-black cursor-pointer font-black"
+            >
+              Join now
+            </a>
           </div>
           <img
             src={cornerFishBottomRight}
diff --git a/app/routes/_libraries/query.$version.index.tsx b/app/routes/_libraries/query.$version.index.tsx
@@ -85,7 +85,16 @@ export default function VersionIndex() {
               >
                 Read the Docs
               </Link>
-              <p>(or <a href="https://query.gg?s=tanstack" className="font-semibold underline">check out our official course</a>. It’s on sale!)</p>
+              <p>
+                (or{' '}
+                <a
+                  href="https://query.gg?s=tanstack"
+                  className="font-semibold underline"
+                >
+                  check out our official course
+                </a>
+                . It’s on sale!)
+              </p>
             </div>
             {/* <QueryGGBanner /> */}
           </div>
