From ec0e90665bc89eff467c7420064d85d5cd7f7d38 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Thu, 3 Dec 2020 13:29:10 +0800
Subject: [PATCH] Prettier lint

---
 www/components/Footer/index.tsx | 172 +++++++++++++++++---------------
 www/components/Hero.tsx         |   5 +-
 www/pages/beta.tsx              |  43 ++++----
 3 files changed, 118 insertions(+), 102 deletions(-)

diff --git a/www/components/Footer/index.tsx b/www/components/Footer/index.tsx
index 12663885bfe..ce9cd1a14e9 100644
--- a/www/components/Footer/index.tsx
+++ b/www/components/Footer/index.tsx
@@ -59,101 +59,111 @@ const Footer = (props: Props) => {
         Footer
       </h2>
       <div className="container mx-auto px-8 sm:px-16 xl:px-20 py-12 lg:pt-16 lg:pb-32">
-      <div className="mx-auto max-w-7xl">
-        <div className="xl:grid xl:grid-cols-3 xl:gap-8">
-          <div className="space-y-8 xl:col-span-1">
-            <img
-              className="h-10 w-auto"
-              src={darkMode ? 'images/logo-dark.png' : 'images/logo-light.png'}
-              alt="Supabase"
-            />
-            <div className="flex space-x-6">
-              <a
-                href="https://twitter.com/supabase_io"
-                className="text-gray-300 hover:text-gray-400"
-              >
-                <span className="sr-only">Twitter</span>
-                <svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                  <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
-                </svg>
-              </a>
+        <div className="mx-auto max-w-7xl">
+          <div className="xl:grid xl:grid-cols-3 xl:gap-8">
+            <div className="space-y-8 xl:col-span-1">
+              <img
+                className="h-10 w-auto"
+                src={darkMode ? 'images/logo-dark.png' : 'images/logo-light.png'}
+                alt="Supabase"
+              />
+              <div className="flex space-x-6">
+                <a
+                  href="https://twitter.com/supabase_io"
+                  className="text-gray-300 hover:text-gray-400"
+                >
+                  <span className="sr-only">Twitter</span>
+                  <svg
+                    className="h-6 w-6"
+                    fill="currentColor"
+                    viewBox="0 0 24 24"
+                    aria-hidden="true"
+                  >
+                    <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
+                  </svg>
+                </a>
 
-              <a href="https://github.com/supabase" className="text-gray-300 hover:text-gray-400">
-                <span className="sr-only">GitHub</span>
-                <svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                  <path
-                    fillRule="evenodd"
-                    d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
-                    clipRule="evenodd"
-                  />
-                </svg>
-              </a>
+                <a href="https://github.com/supabase" className="text-gray-300 hover:text-gray-400">
+                  <span className="sr-only">GitHub</span>
+                  <svg
+                    className="h-6 w-6"
+                    fill="currentColor"
+                    viewBox="0 0 24 24"
+                    aria-hidden="true"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                </a>
+              </div>
+            </div>
+            <div className="mt-12 grid grid-cols-1 gap-8 xl:mt-0 xl:col-span-2">
+              <div className="grid grid-cols-2 gap-8 md:grid-cols-4">
+                {FooterLinks.map((segment: any) => {
+                  return (
+                    <div key={`footer_${segment.title}`}>
+                      <h3 className="text-sm font-semibold text-gray-400 dark:text-dark-400 tracking-wider uppercase">
+                        {segment.title}
+                      </h3>
+                      <ul className="mt-4 space-y-4">
+                        {segment.links.map((link: any, idx: number) => (
+                          <li key={`${segment.title}_link_${idx}`}>
+                            <a
+                              href={link.url}
+                              className={`text-base ${
+                                link.url
+                                  ? 'text-gray-500 dark:text-dark-100'
+                                  : 'text-gray-400 dark:text-dark-200'
+                              } hover:text-gray-900 dark:hover:text-gray-300`}
+                            >
+                              {link.text}
+                              {!link.url && (
+                                <span className="block text-sm text-gray-300 dark:text-dark-300">
+                                  Coming soon
+                                </span>
+                              )}
+                            </a>
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+                  )
+                })}
+              </div>
             </div>
           </div>
-          <div className="mt-12 grid grid-cols-1 gap-8 xl:mt-0 xl:col-span-2">
-            <div className="grid grid-cols-2 gap-8 md:grid-cols-4">
-              {FooterLinks.map((segment: any) => {
-                return (
-                  <div key={`footer_${segment.title}`}>
-                    <h3 className="text-sm font-semibold text-gray-400 dark:text-dark-400 tracking-wider uppercase">
-                      {segment.title}
-                    </h3>
-                    <ul className="mt-4 space-y-4">
-                      {segment.links.map((link: any, idx: number) => (
-                        <li key={`${segment.title}_link_${idx}`}>
-                          <a
-                            href={link.url}
-                            className={`text-base ${
-                              link.url
-                                ? 'text-gray-500 dark:text-dark-100'
-                                : 'text-gray-400 dark:text-dark-200'
-                            } hover:text-gray-900 dark:hover:text-gray-300`}
-                          >
-                            {link.text}
-                            {!link.url && (
-                              <span className="block text-sm text-gray-300 dark:text-dark-300">
-                                Coming soon
-                              </span>
-                            )}
-                          </a>
-                        </li>
-                      ))}
-                    </ul>
-                  </div>
-                )
-              })}
-            </div>
-          </div>
-        </div>
-        <div className="mt-12 border-t border-gray-200 dark:border-dark-600 pt-8 flex justify-between">
-          <p className="text-base text-gray-400 dark:text-dark-400">&copy; Supabase Inc</p>
-          <div className="flex items-center">
-            <SunEmoji />
-            <button
-              type="button"
-              aria-pressed="false"
-              className={`
+          <div className="mt-12 border-t border-gray-200 dark:border-dark-600 pt-8 flex justify-between">
+            <p className="text-base text-gray-400 dark:text-dark-400">&copy; Supabase Inc</p>
+            <div className="flex items-center">
+              <SunEmoji />
+              <button
+                type="button"
+                aria-pressed="false"
+                className={`
                 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer 
                 transition-colors ease-in-out duration-200 focus:outline-none ${
                   darkMode ? 'bg-dark-500' : 'bg-gray-200'
                 } mx-5
               `}
-              onClick={() => toggleDarkMode()}
-            >
-              <span className="sr-only">Toggle Themes</span>
-              <span
-                aria-hidden="true"
-                className={`
+                onClick={() => toggleDarkMode()}
+              >
+                <span className="sr-only">Toggle Themes</span>
+                <span
+                  aria-hidden="true"
+                  className={`
                   ${darkMode ? 'translate-x-5' : 'translate-x-0'} inline-block h-5 w-5 rounded-full
                   bg-white dark:bg-dark-700 shadow-lg transform ring-0 transition ease-in-out duration-200
                 `}
-              />
-            </button>
-            <MoonEmoji />
+                />
+              </button>
+              <MoonEmoji />
+            </div>
           </div>
         </div>
       </div>
-      </div>
     </footer>
   )
 }
diff --git a/www/components/Hero.tsx b/www/components/Hero.tsx
index efd69e79a78..b601e736d9b 100644
--- a/www/components/Hero.tsx
+++ b/www/components/Hero.tsx
@@ -80,7 +80,10 @@ const Hero = () => {
                         <div className="h-2 w-2 mr-2 rounded-full bg-dark-500" />
                         <div className="h-2 w-2 mr-2 rounded-full bg-dark-500" />
                       </div>
-                      <div className="w-full relative bg-dark-900 pointer-events-none" style={{ padding: '56.25% 0 0 0' }}>
+                      <div
+                        className="w-full relative bg-dark-900 pointer-events-none"
+                        style={{ padding: '56.25% 0 0 0' }}
+                      >
                         <iframe
                           className="absolute w-full h-full rounded-b-md"
                           src="https://www.youtube.com/embed/dBOSUER_5T4?playlist=dBOSUER_5T4&autoplay=1&loop=1&controls=0&modestbranding=1&rel=0&disablekb=1&mute=1&muted=1"
diff --git a/www/pages/beta.tsx b/www/pages/beta.tsx
index e0b227d423c..0c53122f236 100644
--- a/www/pages/beta.tsx
+++ b/www/pages/beta.tsx
@@ -20,13 +20,7 @@ const VideoShot = (props: any) => {
         <div className="h-2 w-2 mr-2 rounded-full bg-dark-500" />
         <div className="h-2 w-2 mr-2 rounded-full bg-dark-500" />
       </div>
-      <video
-        className="rounded-b-md"
-        src={src}
-        autoPlay
-        loop
-        muted
-      >
+      <video className="rounded-b-md" src={src} autoPlay loop muted>
         Your browser does not support the video tag
       </video>
     </div>
@@ -107,9 +101,9 @@ const Introduction = (props: any) => {
           </p>
         </div>
         <div className="col-span-12 sm:col-span-9 xl:col-span-6 text-base mb-20">
-          <p>            
-            we've been fortunate to work with thousands of early adopters on
-            improving both our Open Source, and Hosted offerings.
+          <p>
+            we've been fortunate to work with thousands of early adopters on improving both our Open
+            Source, and Hosted offerings.
           </p>
         </div>
 
@@ -157,10 +151,10 @@ const Introduction = (props: any) => {
                     className="flex items-center mb-5 cursor-pointer"
                     onClick={() => scrollTo(chapter.key)}
                   >
-                    <p className="font-mono text-xs text-dark-300 dark:text-dark-400">{`0${
-                      chapter.no
-                    }`}</p>
-                    <p className="ml-4 transition text-base border-b border-gray-400 hover:text-black">{chapter.name}</p>
+                    <p className="font-mono text-xs text-dark-300 dark:text-dark-400">{`0${chapter.no}`}</p>
+                    <p className="ml-4 transition text-base border-b border-gray-400 hover:text-black">
+                      {chapter.name}
+                    </p>
                   </div>
                 ))}
               </div>
@@ -173,7 +167,6 @@ const Introduction = (props: any) => {
 }
 
 const Performance = () => {
-
   const ComparisonChart = () => {
     return (
       <div className="grid grid-cols-12 text-dark-400 dark:text-dark-300 items-center">
@@ -190,7 +183,9 @@ const Performance = () => {
                 className="bg-brand-600 dark:bg-brand-700 transition-all flex items-center justify-center group rounded-full h-3 hover:h-6"
                 style={{ width: '100%' }}
               >
-                <p className="transition text-dark-700 opacity-0 group-hover:opacity-100">1167 requests/s</p>
+                <p className="transition text-dark-700 opacity-0 group-hover:opacity-100">
+                  1167 requests/s
+                </p>
               </div>
             </div>
             <div className="hidden col-span-1 sm:block" />
@@ -204,7 +199,9 @@ const Performance = () => {
                 className="bg-dark-300 dark:bg-dark-400 transition-all flex items-center justify-center group rounded-full h-3 hover:h-6"
                 style={{ width: '31.36%' }}
               >
-                <p className="transition text-dark-700 opacity-0 group-hover:opacity-100">366 requests/s</p>
+                <p className="transition text-dark-700 opacity-0 group-hover:opacity-100">
+                  366 requests/s
+                </p>
               </div>
             </div>
           </div>
@@ -229,7 +226,9 @@ const Performance = () => {
                 className="bg-brand-600 dark:bg-brand-700 transition-all flex items-center justify-center group rounded-full h-3 hover:h-6"
                 style={{ width: '74.55%' }}
               >
-                <p className="transition text-dark-700 opacity-0 group-hover:opacity-100">870 requests/s</p>
+                <p className="transition text-dark-700 opacity-0 group-hover:opacity-100">
+                  870 requests/s
+                </p>
               </div>
             </div>
             <div className="hidden col-span-1 sm:block" />
@@ -243,7 +242,9 @@ const Performance = () => {
                 className="bg-dark-300 dark:bg-dark-400 transition-all flex items-center justify-center group rounded-full h-3 hover:h-6"
                 style={{ width: '23.99%' }}
               >
-                <p className="transition text-dark-700 opacity-0 group-hover:opacity-100">280 requests/s</p>
+                <p className="transition text-dark-700 opacity-0 group-hover:opacity-100">
+                  280 requests/s
+                </p>
               </div>
             </div>
           </div>
@@ -430,7 +431,9 @@ const Reliability = () => (
             </a>{' '}
             to keep track of uptime across all of our services and critical infrastructure.
           </p>
-          <div className="mb-10"><VideoShot src="videos/statusPage.mp4" /></div>
+          <div className="mb-10">
+            <VideoShot src="videos/statusPage.mp4" />
+          </div>
           <p>
             For our Alpha & Beta Users we take daily backups of your Database free of charge up to
             20GB and store them in an encrypted format. They are available to download at any time