Modularize integrations into json files, continue refactoring integrations frontend

frontend/components/integrations/CloudIntegration.tsx

@@ -28,7 +28,7 @@ const CloudIntegration = ({
     deleteIntegrationAuth,
     authorizations
 }: Props) => {
-    return (
+    return authorizations ? (
         <div
         className={`relative ${
             ["Heroku"].includes(integration.name)
@@ -106,7 +106,7 @@ const CloudIntegration = ({
             </div>
         )}
         </div>
-    );
+    ) : <div></div>
 } 
 
 export default CloudIntegration;

frontend/components/integrations/CloudIntegrationSection.tsx

@@ -28,21 +28,22 @@ const CloudIntegrationSection = ({
     return (
         <>
             <div className={`flex flex-col justify-between items-start m-4 ${projectIntegrations.length > 0 ? 'mt-12' : 'mt-6'} text-xl max-w-5xl px-2`}>
-            <h1 className="font-semibold text-3xl">Cloud Integrations</h1>
-            <p className="text-base text-gray-400">
-                Click on an integration to begin syncing secrets to it.
-            </p>
+                <h1 className="font-semibold text-3xl">Cloud Integrations</h1>
+                <p className="text-base text-gray-400">
+                    Click on an integration to begin syncing secrets to it.
+                </p>
             </div>
             <div className="grid gap-4 grid-cols-4 grid-rows-2 mx-6 max-w-5xl">
-            {integrations.map((integration) => (
-                <CloudIntegration 
-                integration={integration}
-                setSelectedIntegrationOption={setSelectedIntegrationOption}
-                integrationOptionPress={integrationOptionPress}
-                deleteIntegrationAuth={deleteIntegrationAuth}
-                authorizations={authorizations}
-                />
-            ))}
+                {integrations.map((integration) => (
+                    <CloudIntegration 
+                        integration={integration}
+                        setSelectedIntegrationOption={setSelectedIntegrationOption}
+                        integrationOptionPress={integrationOptionPress}
+                        deleteIntegrationAuth={deleteIntegrationAuth}
+                        authorizations={authorizations}
+                        key={`cloud-integration-${integration.slug}`}
+                    />
+                ))}
             </div>
         </>
     );

frontend/components/integrations/FrameworkIntegration.tsx

@@ -3,8 +3,9 @@ import Image from "next/image";
 
 interface Framework {
   name: string;
-  link: string;
+  slug: string;
   image: string;
+  docsLink: string;
 }
 
 const FrameworkIntegration = ({
@@ -13,13 +14,12 @@ const FrameworkIntegration = ({
   framework: Framework;
 }) => {
   return (
-    <div key={framework.name}>
       <a
-        href={framework.link}
+        href={framework.docsLink}
         rel="noopener"
-        className={`relative flex flex-row items-center justify-center bg-bunker-500 hover:bg-gradient-to-tr hover:from-sky-400 hover:to-primary duration-200 h-32 rounded-md p-0.5 items-center cursor-pointer`}
+        className={`relative flex flex-row items-center justify-center bg-bunker-500 hover:bg-gradient-to-tr  duration-200 h-32 rounded-md p-0.5 items-center cursor-pointer`}
       >
-        <div className={`font-semibold bg-bunker-500 flex flex-col items-center justify-center h-full w-full rounded-md text-gray-300 group-hover:text-gray-200 duration-200 ${framework?.name?.split(" ").length > 1 ? "text-sm px-1" : "text-xl px-2"} text-center w-full max-w-xs`}>
+        <div className={`hover:bg-white/10 duration-200 cursor-pointer font-semibold bg-bunker-500 flex flex-col items-center justify-center h-full w-full rounded-md text-gray-300 group-hover:text-gray-200 duration-200 ${framework?.name?.split(" ").length > 1 ? "text-sm px-1" : "text-xl px-2"} text-center w-full max-w-xs`}>
           {framework?.image && <Image
             src={`/images/integrations/${framework.image}.png`}
             height={framework?.name ? 60 : 90}
@@ -30,7 +30,6 @@ const FrameworkIntegration = ({
           {framework?.name && framework.name}
         </div>
       </a>
-    </div>
   );
 }
 

frontend/components/integrations/FrameworkIntegrationSection.tsx

@@ -22,7 +22,10 @@ const FrameworkIntegrationSection = ({ frameworks }: Props) => {
         </div>
         <div className="grid gap-4 grid-cols-7 grid-rows-2 mx-6 mt-4 max-w-5xl">
           {frameworks.map((framework) => (
-            <FrameworkIntegration framework={framework} />
+            <FrameworkIntegration 
+              framework={framework}
+              key={`framework-integration-${framework.slug}`}
+            />
           ))}
         </div>
       </>