From 5fa6a1424d6d1f42a4975ed03773e79a85b77b5f Mon Sep 17 00:00:00 2001
From: yuval-hazaz <hazaz.yuval@gmail.com>
Date: Thu, 7 Sep 2023 09:09:17 +0300
Subject: [PATCH] update plugin components

---
 .../{Plugin/index.jsx => plugin-card.jsx}     |  4 +-
 .../Plugins/{Plugin => }/plugin-logo.jsx      |  2 +-
 components/Plugins/plugins-panel.jsx          | 43 +++++++++++++++++
 pages/index.js                                | 46 ++++++++++++++++++-
 pages/plugins.js                              |  8 ++--
 5 files changed, 95 insertions(+), 8 deletions(-)
 rename components/Plugins/{Plugin/index.jsx => plugin-card.jsx} (95%)
 rename components/Plugins/{Plugin => }/plugin-logo.jsx (86%)
 create mode 100644 components/Plugins/plugins-panel.jsx

diff --git a/components/Plugins/Plugin/index.jsx b/components/Plugins/plugin-card.jsx
similarity index 95%
rename from components/Plugins/Plugin/index.jsx
rename to components/Plugins/plugin-card.jsx
index ff2d0db6..293c293c 100644
--- a/components/Plugins/Plugin/index.jsx
+++ b/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 b/components/Plugins/plugin-logo.jsx
similarity index 86%
rename from components/Plugins/Plugin/plugin-logo.jsx
rename to components/Plugins/plugin-logo.jsx
index 1cee6fd3..b7e4cbc8 100644
--- a/components/Plugins/Plugin/plugin-logo.jsx
+++ b/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
new file mode 100644
index 00000000..00b83336
--- /dev/null
+++ 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
index f17aea7e..810065ef 100644
--- 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
index 4dbed954..2ae130bf 100644
--- 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) {