update plugin components

amplication · Sep 7, 2023 · 5fa6a14 · 5fa6a14
1 parent d43690c
commit 5fa6a14
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 8 deletions.
diff --git a/components/Plugins/Plugin/index.jsx → components/Plugins/plugin-card.jsx b/components/Plugins/Plugin/index.jsx → components/Plugins/plugin-card.jsx
@@ -1,8 +1,8 @@
 import Image from 'next/image';
 import PropTypes from 'prop-types';
 import { useCallback } from 'react';
-import * as analytics from '../../../lib/analytics';
-import Button from '../../Common/Button';
+import * as analytics from '../../lib/analytics';
+import Button from '../Common/Button';
 import PluginLogo from './plugin-logo';
 
 const Plugin = ({ plugin }) => {

diff --git a/components/Plugins/Plugin/plugin-logo.jsx → components/Plugins/plugin-logo.jsx b/components/Plugins/Plugin/plugin-logo.jsx → components/Plugins/plugin-logo.jsx
@@ -6,7 +6,7 @@ const PLUGIN_LOGO_BASE_URL =
 
 const PluginLogo = ({ plugin }) => {
   return (
-    <span className="min-w-[60px] max-w-[60px] pr-4">
+    <span className="min-w-[60px] max-w-[60px] pr-4 flex flex-row justify-center items-center">
       {plugin?.icon ? (
         <Image
           width={44}

diff --git a/components/Plugins/plugins-panel.jsx b/components/Plugins/plugins-panel.jsx
@@ -0,0 +1,43 @@
+import PropTypes from 'prop-types';
+import PluginLogo from './plugin-logo';
+import Link from 'next/link';
+
+const PluginsPanel = ({ plugins }) => {
+  return (
+    <>
+      <h2 className="roadmap-heading tablet:text-center">Plugins</h2>
+      <div className="text-center">
+        Extend and customize your services by using plugins for various
+        technologies and integrations.
+      </div>
+      <div className="mt-6 flex flex-wrap align-items-center justify-center text-sm">
+        {plugins.map((plugin) => (
+          <div
+            key={plugin.pluginId}
+            className="flex flex-row justify-center items-center overflow-hidden border border-solid border-dark-black-70 bg-purple-light   hover:shadow-hover-post rounded-lg p-2   m-2 font-normal "
+          >
+            <PluginLogo plugin={plugin} />
+            <span>{plugin.name}</span>
+          </div>
+        ))}
+      </div>
+      <div className="text-center mt-8">
+        <Link href="/plugins" passHref={true}>
+          <a className="btn btn-outline-light btn-lg mb-4 text-black80 btn-sm !h-[34px] !font-normal !text-sm">
+            Show all plugins
+          </a>
+        </Link>
+      </div>
+    </>
+  );
+};
+
+PluginsPanel.propTypes = {
+  plugins: PropTypes.array,
+};
+
+PluginsPanel.defaultProps = {
+  plugins: [],
+};
+
+export default PluginsPanel;
diff --git a/pages/index.js b/pages/index.js
@@ -4,6 +4,7 @@ import Facts from '../components/Sections/Enterprise/Facts';
 import Testimonials from '../components/Sections/Enterprise/Testimonials';
 import Features from '../components/Sections/MainPage/Features';
 import GetList from '../components/Sections/MainPage/GetList';
+import PluginsPanel from '../components/Plugins/Plugin/plugins-panel';
 import Tabs from '../components/Sections/MainPage/Tabs';
 import Roadmap from '../components/Sections/MainPage/Roadmap';
 import LogoList from '../components/Sections/About/LogoList';
@@ -12,7 +13,10 @@ import { MainLayout } from '../layouts';
 import PageSection from '../components/Common/PageSection';
 import Soc2Banner from '../components/Common/SOC2';
 
-const Home = () => {
+import { gql } from '@apollo/client';
+import client from '../services/plugin-api';
+
+const Home = ({ plugins }) => {
   return (
     <>
       <NextSeo
@@ -46,6 +50,9 @@ const Home = () => {
         <PageSection innerClassName={"flex-grow"} className={"!pt-5 !pb-4 laptop:!px-14 laptop:!pt-24 laptop:!pb-20"} >
           <Testimonials />
         </PageSection>
+        <PageSection alternate>
+          <PluginsPanel plugins={plugins} />
+        </PageSection>
         <PageSection className={"!py-10"} alternate>
           <Facts />
         </PageSection>
@@ -70,6 +77,43 @@ const Home = () => {
     </>
   );
 };
+
+export const getServerSideProps = async (context) => {
+  try {
+    const { data } = await client.query({
+      query: gql`
+        query {
+          plugins {
+            id
+            pluginId
+            name
+            icon
+            description
+            taggedVersions
+            npm
+            github
+            website
+          }
+        }
+      `,
+    });
+    return {
+      props: {
+        plugins: data?.plugins
+      },
+    };
+  } catch (e) {
+    console.error(e);
+  }
+
+  return {
+    props: {
+      plugins: null,
+    },
+  };
+};
+
+
 Home.getLayout = function getLayout(page) {
   return (
     <MainLayout

diff --git a/pages/plugins.js b/pages/plugins.js
@@ -1,7 +1,7 @@
 import { gql } from '@apollo/client';
 import { NextSeo } from 'next-seo';
 import PropTypes from 'prop-types';
-import Plugin from "../components/Plugins/Plugin";
+import Plugin from "../components/Plugins/plugin-card";
 import helpers from '../helpers';
 import { MainLayout } from '../layouts';
 import client from '../services/plugin-api';
@@ -103,17 +103,17 @@ export const getServerSideProps = async (context) => {
 
   return {
     props: {
-      posts: null,
+      plugins: null,
     },
   };
 };
 
 Plugins.propTypes = {
-  posts: PropTypes.array
+  plugins: PropTypes.array
 };
 
 Plugins.defaultProps = {
-  posts: []
+  plugins: []
 };
 
 Plugins.getLayout = function getLayout(page) {