Modularize integration sections in frontend

frontend/components/integrations/CloudIntegration.tsx

@@ -6,7 +6,7 @@ import {
     faX,
   } from "@fortawesome/free-solid-svg-icons";
 
-interface CloudIntegration {
+interface Props {
     integration: IntegrationOption;
     setSelectedIntegrationOption: () => void;
     integrationOptionPress: () => void;
@@ -27,7 +27,7 @@ const CloudIntegration = ({
     integrationOptionPress,
     deleteIntegrationAuth,
     authorizations
-}: CloudIntegration) => {
+}: Props) => {
     return (
         <div
         className={`relative ${

frontend/components/integrations/CloudIntegrationSection.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import CloudIntegration from "./CloudIntegration";
+
+interface IntegrationOption {
+    name: string;
+    type: string;
+    clientId: string;
+    docsLink: string;
+}
+
+interface Props {
+    projectIntegrations: any;
+    integrations: IntegrationOption[];
+    setSelectedIntegrationOption: () => void;
+    integrationOptionPress: () => void;
+    deleteIntegrationAuth: () => void;
+    authorizations: any;
+}
+
+const CloudIntegrationSection = ({ 
+    projectIntegrations,
+    integrations,
+    setSelectedIntegrationOption,
+    integrationOptionPress,
+    deleteIntegrationAuth,
+    authorizations
+}: Props) => {
+    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>
+            </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}
+                />
+            ))}
+            </div>
+        </>
+    );
+}
+
+export default CloudIntegrationSection;

frontend/components/integrations/FrameworkIntegrationSection.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import FrameworkIntegration from "./FrameworkIntegration";
+
+interface Framework {
+    name: string;
+    image: string;
+    link: string;
+}
+
+interface Props {
+    framework: Framework
+}
+
+const FrameworkIntegrationSection = ({ frameworks }: Props) => {
+    return (
+      <>
+        <div className="flex flex-col justify-between items-start mx-4 mt-12 mb-4 text-xl max-w-5xl px-2">
+          <h1 className="font-semibold text-3xl">Framework Integrations</h1>
+          <p className="text-base text-gray-400">
+            Click on a framework to get the setup instructions.
+          </p>
+        </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} />
+          ))}
+        </div>
+      </>
+    );
+}
+
+export default FrameworkIntegrationSection;
+

frontend/components/integrations/ProjectIntegrationSection.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import Integration from "./Integration";
+import guidGenerator from "~/utilities/randomId";
+
+interface Props {
+    projectIntegrations: any
+}
+
+const ProjectIntegrationSection = ({
+    projectIntegrations
+}: Props) => {
+    return (
+        <>
+        <div className="flex flex-col justify-between items-start mx-4 mb-4 mt-6 text-xl max-w-5xl px-2">
+          <h1 className="font-semibold text-3xl">Current Project Integrations</h1>
+          <p className="text-base text-gray-400">
+            Manage your integrations of Infisical with third-party services.
+          </p>
+        </div>
+        {projectIntegrations.map((projectIntegration) => (
+          <Integration
+            key={guidGenerator()}
+            projectIntegration={projectIntegration}
+          />
+        ))}
+      </>
+    );
+}
+
+export default ProjectIntegrationSection;