merge main to pagefind-implementation

Author: aniketkatkar97

components/ConnectorDetailsHeader/ConnectorDetailsHeader.module.css

@@ -2,7 +2,7 @@
     margin: 32px 0px;
     display:flex;
     flex-direction: column;
-    gap: 12px
+    gap: 6px
 }
 
 .Heading{
@@ -39,7 +39,18 @@
     border-radius: 28px;
 }
 
+.FeaturesHeading{
+    font-size: 14px;
+    color: var(--gray-text-color);
+}
+
 .SubHeading{
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.FeaturesList{
     display: flex;
     flex-wrap: wrap;
     gap: 12px;
@@ -50,6 +61,9 @@
     font-size: 12px;
     border-radius: 14px;
     width: fit-content;
+    display: flex;
+    align-items: center;
+    gap: 4px
 }
 
 .AvailableFeature{

components/ConnectorDetailsHeader/ConnectorDetailsHeader.tsx

@@ -1,4 +1,8 @@
 import classNames from "classnames";
+import { isEmpty } from "lodash";
+import { useMemo } from "react";
+import { ReactComponent as CheckIcon } from "../../images/icons/check.svg";
+import { ReactComponent as CrossIcon } from "../../images/icons/cross.svg";
 import {
   getConnectorImage,
   getConnectorPlatformIcon,
@@ -14,6 +18,11 @@ function ConnectorDetailsHeader({
   availableFeatures,
   unavailableFeatures,
 }: Readonly<ConnectorDetailsHeaderProps>) {
+  const showSubHeading = useMemo(
+    () => !isEmpty(availableFeatures) || !isEmpty(unavailableFeatures),
+    [availableFeatures, unavailableFeatures]
+  );
+
   return (
     <div className={styles.Container}>
       <div className={styles.Heading}>
@@ -29,24 +38,37 @@ function ConnectorDetailsHeader({
           </div>
         </div>
       </div>
-      <div className={styles.SubHeading}>
-        {availableFeatures.map((feature) => (
-          <div
-            className={classNames(styles.FeatureTag, styles.AvailableFeature)}
-            key={feature}
-          >
-            {feature}
-          </div>
-        ))}
-        {unavailableFeatures.map((feature) => (
-          <div
-            className={classNames(styles.FeatureTag, styles.UnavailableFeature)}
-            key={feature}
-          >
-            {feature}
+      {showSubHeading && (
+        <div className={styles.SubHeading}>
+          <div className={styles.FeaturesHeading}>Feature List</div>
+          <div className={styles.FeaturesList}>
+            {availableFeatures.map((feature) => (
+              <div
+                className={classNames(
+                  styles.FeatureTag,
+                  styles.AvailableFeature
+                )}
+                key={feature}
+              >
+                {feature}
+                <CheckIcon height={12} />
+              </div>
+            ))}
+            {unavailableFeatures.map((feature) => (
+              <div
+                className={classNames(
+                  styles.FeatureTag,
+                  styles.UnavailableFeature
+                )}
+                key={feature}
+              >
+                {feature}
+                <CrossIcon height={14} />
+              </div>
+            ))}
           </div>
-        ))}
-      </div>
+        </div>
+      )}
     </div>
   );
 }

components/ConnectorsInfo/ConnectorsInfo.constants.ts

@@ -24,6 +24,12 @@ export const CONNECTORS: Array<ConnectorCategory> = [
         icon: "./images/connectors/bigquery.png",
         name: "BigQuery",
       },
+      {
+        url: "/connectors/database/bigtable",
+        icon: "./images/connectors/big-table.png",
+        name: "BigTable",
+        supportedVersion: "v1.3.x",
+      },
       {
         url: "/connectors/database/clickhouse",
         icon: "./images/connectors/clickhouse.png",

components/ConnectorsListContainer/ConnectorsListContainer.module.css

@@ -1,5 +1,5 @@
 .Container{
-    margin-top: 24px;
+    margin: 24px 0px;
     display: grid;
     gap: 24px
 }

components/common/Icon/Icon.tsx

@@ -1,22 +1,23 @@
-import React from "react";
 import { ReactComponent as CheckIcon } from "../../../images/icons/check.svg";
 import { ReactComponent as CrossIcon } from "../../../images/icons/cross.svg";
 
 function Icon({ iconName }: { iconName: string }) {
   let IconComponent: SvgComponent;
+  let iconColor = "currentColor";
 
   switch (iconName) {
     case "check":
       IconComponent = CheckIcon;
       break;
     case "cross":
       IconComponent = CrossIcon;
+      iconColor = "#CB2431";
       break;
     default:
       return <></>;
   }
 
-  return <IconComponent />;
+  return <IconComponent height={16} color={iconColor} />;
 }
 
 export default Icon;

components/common/Youtube/Youtube.interface.ts

@@ -0,0 +1,8 @@
+export interface YouTubeProps {
+  className?: string;
+  videoId: string;
+  start?: string;
+  end?: string;
+  height?: string;
+  width?: string;
+}

components/common/Youtube/Youtube.module.css

@@ -1,6 +1,7 @@
-.IframeContainer {
-  position: relative;
-  margin-top: 16px;
+.Container{
+  display: flex;
+  justify-content: center;
+  margin: 32px 0px;
 }
 
 .Iframe {

components/common/Youtube/Youtube.tsx

@@ -1,59 +1,28 @@
+import classNames from "classnames";
+import { YouTubeProps } from "./Youtube.interface";
 import styles from "./Youtube.module.css";
 
-interface YouTubeProps {
-  videoId: string;
-  start?: string;
-  end?: string;
-  caption?: string;
-  height?: string;
-  width?: string;
-}
-
 const YouTube = ({
-  caption = "",
+  className = "",
   videoId,
   start = "",
   end = "",
   height,
   width,
 }: YouTubeProps) => {
-  let YouTubeBlock;
-
-  if (caption) {
-    YouTubeBlock = (
-      <section className={styles.Container}>
-        <section className={styles.IframeContainer}>
-          <iframe
-            allowFullScreen
-            src={`https://www.youtube-nocookie.com/embed/${videoId}?rel=0&start=${start}&end=${end}&rel=0`}
-            className={styles.Iframe}
-            title="YouTube video player"
-            frameBorder="0"
-            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-            style={{ height, width }}
-          ></iframe>
-        </section>
-        <section className={styles.CaptionContainer}>
-          <p className={styles.Caption}>{caption}</p>
-        </section>
-      </section>
-    );
-  } else {
-    YouTubeBlock = (
-      <section className={styles.IframeContainer} style={{ height, width }}>
-        <iframe
-          allowFullScreen
-          src={`https://www.youtube-nocookie.com/embed/${videoId}?rel=0&start=${start}&end=${end}&rel=0`}
-          className={styles.Iframe}
-          title="YouTube video player"
-          frameBorder="0"
-          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-          style={{ height, width }}
-        ></iframe>
-      </section>
-    );
-  }
-  return YouTubeBlock;
+  return (
+    <div className={classNames(styles.Container, className)}>
+      <iframe
+        allowFullScreen
+        src={`https://www.youtube-nocookie.com/embed/${videoId}?rel=0&start=${start}&end=${end}&rel=0`}
+        className={styles.Iframe}
+        title="YouTube video player"
+        frameBorder="0"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+        style={{ height, width }}
+      ></iframe>
+    </div>
+  );
 };
 
 export default YouTube;