updated source for showcase cards

src/components/Community/Connectors/ConnectorList.tsx

@@ -7,7 +7,7 @@ const ConnectorList = () => {
   const history = useHistory();
 
   useEffect(() => {
-    fetch('https://raw.githubusercontent.com/saviynt/developer-portal/main/static/community/connector/connectorList.json', { cache: "no-cache" })
+    fetch('/community/connector/connectorList.json', { cache: "no-cache" })
       .then(response => {
         if (!response.ok) {
           throw new Error('Network response was not ok');

src/components/Showcase/ShowcaseCard.tsx

@@ -1,12 +1,22 @@
 // ShowcaseCard.tsx
 
 import React from 'react';
-import { ShowcaseItem } from './ShowcaseItems';
 
 interface ShowcaseCardProps {
   item: ShowcaseItem;
 }
 
+export interface ShowcaseItem {
+  title: string;
+  description: string;
+  imageUrl: string;
+  link: string;
+  tags: string[];
+  readmeLink: string;
+  githubLink: string;
+  resourceLink: string;
+}
+
 const ShowcaseCard: React.FC<ShowcaseCardProps> = ({ item }) => {
   return (
     <a href={item.link} className="demo-showcase-card" aria-label={`Learn more about ${item.title}`} target="_blank" rel="noopener noreferrer">

src/components/Showcase/ShowcaseCards.tsx

@@ -1,21 +1,46 @@
-// ShowcaseCards.tsx
+import React, { useState, useEffect } from 'react';
+import ShowcaseCard,{ ShowcaseItem } from './ShowcaseCard';
 
-import React from 'react';
-import ShowcaseCard from './ShowcaseCard';
-import { showcaseItems } from './ShowcaseItems';
 
 const ShowcaseCards: React.FC = () => {
-  return (
-    <div className="container">
-      <div className="row">
-        {showcaseItems.map((item, index) => (
-          <div key={index} className="col col--4">
-            <ShowcaseCard item={item} />
-          </div>
-        ))}
-      </div>
-    </div>
-  );
+    const [items, setItems] = useState<ShowcaseItem[]>([]);
+    const [isLoading, setLoading] = useState(true);
+
+    // Fetch the JSON data when the component mounts
+    useEffect(() => {
+        fetch('/community/showcase/showcaseList.json') // Adjust the path as necessary
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error('Network response was not ok');
+                }
+                return response.json();
+            })
+            .then(data => {
+                setItems(data);
+                setLoading(false);
+            })
+            .catch(error => {
+                console.error('Error loading the showcase items:', error);
+                setLoading(false);
+            });
+    }, []);
+
+    // Optionally handle loading state
+    if (isLoading) {
+        return <div>Loading...</div>;
+    }
+
+    return (
+        <div className="container">
+            <div className="row">
+                {items.map((item, index) => (
+                    <div key={index} className="col col--4">
+                        <ShowcaseCard item={item} />
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
 };
 
 export default ShowcaseCards;