Merge pull request #5299 from supabase/chore/clean-code

Clean up auth images

www/data/auth.json

@@ -0,0 +1,41 @@
+[
+  {
+    "name": "apple"
+  },
+  {
+    "name": "bitbucket"
+  },
+  {
+    "name": "discord"
+  },
+  {
+    "name": "facebook"
+  },
+  {
+    "name": "gitlab"
+  },
+  {
+    "name": "google"
+  },
+  {
+    "name": "messagebird"
+  },
+  {
+    "name": "microsoft"
+  },
+  {
+    "name": "slack"
+  },
+  {
+    "name": "spotify"
+  },
+  {
+    "name": "twitch"
+  },
+  {
+    "name": "twitter"
+  },
+  {
+    "name": "twilio"
+  }
+]

www/pages/auth/Auth.tsx

@@ -28,6 +28,7 @@ import SectionContainer from '~/components/Layouts/SectionContainer'
 import APISection from '~/components/Sections/APISection'
 import GithubExamples from '~/components/Sections/GithubExamples'
 import ProductHeader from '~/components/Sections/ProductHeader'
+import AuthProviders from '~/data/auth.json'
 
 type Props = {
   darkMode: boolean
@@ -107,18 +108,6 @@ function AuthPage(props: Props) {
             <div className="mb-10 lg:mb-0 col-span-12 lg:col-span-3">
               <p className="mb-4">
                 <div className="flex items-center flex-wrap xl:w-64">
-                  <img
-                    className="mb-2 mr-2"
-                    src={`${basePath}/images/product/auth/google-icon.svg`}
-                    width={21}
-                    alt="google auth login icon"
-                  />
-                  <img
-                    className="mb-2 mr-2"
-                    src={`${basePath}/images/product/auth/facebook-icon.svg`}
-                    width={21}
-                    alt="facebook auth login icon"
-                  />
                   <div className="mb-2 mr-2">
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
@@ -132,72 +121,16 @@ function AuthPage(props: Props) {
                       />
                     </svg>
                   </div>
-                  <img
-                    className="mb-2 mr-2"
-                    src={`${basePath}/images/product/auth/gitlab-icon.svg`}
-                    width={21}
-                    alt="gitlab auth login icon"
-                  />
-                  <img
-                    className="mb-2 mr-2"
-                    src={`${basePath}/images/product/auth/bitbucket-icon.svg`}
-                    width={21}
-                    alt="bitbucket auth login icon"
-                  />
-                  <img
-                    className="mb-2 mr-2"
-                    src={`${basePath}/images/product/auth/twitter-icon.svg`}
-                    width={21}
-                    alt="twitter auth login icon"
-                  />
-                  <img
-                    className="mb-2 mr-2"
-                    src={`${basePath}/images/product/auth/apple-icon.svg`}
-                    width={21}
-                    alt="apple auth login icon"
-                  />
-                  <img
-                    className="mb-2 mr-2"
-                    src={`${basePath}/images/product/auth/discord-icon.svg`}
-                    width={21}
-                    alt="discord auth login icon"
-                  />
-                  <img
-                    className="mb-2 mr-2"
-                    src={`${basePath}/images/product/auth/microsoft-icon.svg`}
-                    width={21}
-                    alt="microsoft auth login icon"
-                  />
-                  <img
-                    className="mb-2 mr-2"
-                    src={`${basePath}/images/product/auth/messagebird-icon.svg`}
-                    width={21}
-                    alt="messagebird auth login icon"
-                  />
-                  <img
-                    className="mb-2 mr-2"
-                    src={`${basePath}/images/product/auth/twilio-icon.svg`}
-                    width={21}
-                    alt="twilio auth login icon"
-                  />
-                  <img
-                    className="mb-2 mr-2"
-                    src={`${basePath}/images/product/auth/twitch-icon.svg`}
-                    width={21}
-                    alt="twitch auth login icon"
-                  />
-                  <img
-                    className="mb-2 mr-2"
-                    src={`${basePath}/images/product/auth/spotify-icon.svg`}
-                    width={21}
-                    alt="spotify auth login icon"
-                  />
-                  <img
-                    className="mb-2 mr-2"
-                    src={`${basePath}/images/product/auth/slack-icon.svg`}
-                    width={21}
-                    alt="slack auth login icon"
-                  />
+                  {AuthProviders.map((auth) => {
+                    return (
+                      <img
+                        className="mb-2 mr-2"
+                        src={`${basePath}/images/product/auth/${auth.name}-icon.svg`}
+                        width={21}
+                        alt={`${auth.name} auth login icon`}
+                      />
+                    )
+                  })}
                 </div>
               </p>
               <Typography.Title level={4}>All the social providers</Typography.Title>