From 4c6b9f8362aef86791d227b8beab5c841e62fd33 Mon Sep 17 00:00:00 2001
From: shubhusion <shubham27.sharma03@gmail.com>
Date: Wed, 31 Jul 2024 18:30:39 +0530
Subject: [PATCH 1/4] Added Search Filter

Signed-off-by: shubhusion <shubham27.sharma03@gmail.com>
---
 _includes/partials/homePage-integrations.html | 251 +++++++++++++-----
 1 file changed, 184 insertions(+), 67 deletions(-)

diff --git a/_includes/partials/homePage-integrations.html b/_includes/partials/homePage-integrations.html
index ac882df3f2..2699ed782b 100644
--- a/_includes/partials/homePage-integrations.html
+++ b/_includes/partials/homePage-integrations.html
@@ -1,83 +1,200 @@
-<div class="integrations-heading" style="padding-top: 2rem;">
+<style>
+    .sorting-options {
+        margin: 0 auto;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        max-width: 600px;
+    }
+
+    #sort {
+        padding: 10px;
+        font-size: 16px;
+        border: 1px solid #ddd;
+        border-radius: 5px;
+        background-color: #f9f9f9;
+        appearance: none;
+        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M7 10l5 5 5-5z"/></svg>');
+        background-repeat: no-repeat;
+        background-position: right 10px top 50%;
+        margin-right: 10px;
+    }
+
+    #search-container {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        max-width: 500px;
+        background-color: #fff;
+        border: 1px solid #ddd;
+        border-radius: 5px;
+        margin-right: 10px;
+        overflow: hidden;
+    }
+
+    #search {
+        flex-grow: 1;
+        height: 40px;
+        padding: 10px 40px 10px 10px;
+        border: none;
+        font-size: 16px;
+        box-sizing: border-box;
+        outline: none;
+    }
+
+    #search-btn {
+        width: 80px;
+        height: 40px;
+        background-color: green;
+        border: none;
+        color: #fff;
+        cursor: pointer;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        text-transform: uppercase;
+        margin-left: 10px;
+    }
+
+    #search-btn svg {
+        fill: #fff;
+        width: 20px;
+        height: 20px;
+        margin-right: 5px;
+    }
+
+    #integContainer {
+        column-gap: max(2vh, 2vw); 
+        row-gap: 1.5rem; 
+        display: flex; 
+        flex-wrap: wrap; 
+        padding-bottom: 3.5rem;
+    }
+
+    @media (max-width: 506px) {
+        .sorting-options {
+            text-align: center;
+            flex-direction: column;
+        }
+
+        #sort, #search-container, #search-btn {
+            margin: 5px 0;
+        }
+
+        #search-container {
+            max-width: 100%;
+        }
+    }
+</style>
+
+<div class="integrations-heading">
     <div class="parallel-left"></div>
     <div class="parallel-right"></div>
     <h1 id="integration-heading"></h1>
-    <h2>
-        for your Cloud Native Infrastructure and Apps
-    </h2>
-    <p style="margin: auto 10vw;">
+    <h2>for your Cloud Native Infrastructure and Apps</h2>
+    <p>
         Meshery seamlessly integrates with every CNCF project, your existing tools, multiple Clouds and Kubernetes clusters.
     </p>
-</div>
-<div id="integContainer" class="integrations-container container"
-    style="column-gap: max(2vh, 2vw); row-gap: 1.5rem; display: flex; flex-wrap: wrap; padding-bottom: 3.5rem;">
-</div>
-<div class="integrations-3d-link">
-    <div class="button-container" style="display: flex; align-items: center; justify-content: center; row-gap: 18px; column-gap: 32px; flex-wrap: wrap;">
-        <a class="highlight show-all-button toggle-text"
-            style="display: inline-block; width: fit-content; cursor:pointer;">Show More
-            Integrations</a>
-        <a class="highlight show-all-button" href="/integrations"
-            style="display: inline-block; width: fit-content;">View
-            Integrations in 3D</a>
+
+    <div class="sorting-options">
+        <select id="sort">
+            <option disabled selected value>Sort by</option>
+            <option value="asc">Alphabetically (A-Z)</option>
+            <option value="desc">Alphabetically (Z-A)</option>
+        </select>
+
+        <div id="search-container">
+            <input type="text" id="search" placeholder="Search..." />
+        </div>
+
+        <button class="highlight" aria-label="Search">Next</button>
     </div>
-</div>
 
-<script type="module">
-    // integrations.js
-    import data from '../../integrations/data.js';
-
-    const integHeading = document.getElementById("integration-heading");
-    const roundedIntegNumber = Math.floor(data.length / 10) * 10;
-    integHeading.textContent = `${roundedIntegNumber}+ Built-In Integrations`;
-
-    const integContainer = document.getElementById("integContainer");
-
-    let allDataShown = false;
-
-    function renderIntegrationCards(data, showAll) {
-        const cardsToShow = showAll ? data.length : 40;
-        return data.slice(0, cardsToShow).map(item => {
-            const iconURL = item.color.split('/').slice(1).join('/');
-
-            return `
-                <a href="${item.permalink}" class="integrations-card">
-                <div class="integrations-card-inner">
-                <div class="card-front">
-                <img src="${iconURL}" loading="lazy" id="logo-dark-light"
-                data-logo-for-dark="${iconURL}"
-                data-logo-for-light="${iconURL}" />
-                </div>
-                <div class="card-back">
-                <p> ${item.name} </p>
-                </div>
-                </div>
-                </a>`;
-        }).join('');
-    }
+    <div id="integContainer" class="integrations-container container"></div>
 
-    const scrollOptions = { behavior: "smooth" };
+    <div class="integrations-3d-link">
+        <div class="button-container">
+            <a class="highlight show-all-button toggle-text">Show More Integrations</a>
+            <a class="highlight show-all-button" href="/integrations">View Integrations in 3D</a>
+        </div>
+    </div>
+
+    <script type="module">
+        // integrations.js
+        import data from '../../integrations/data.js';
+
+        const integHeading = document.getElementById("integration-heading");
+        const roundedIntegNumber = Math.floor(data.length / 10) * 10;
+        integHeading.textContent = `${roundedIntegNumber}+ Built-In Integrations`;
 
-    integContainer.innerHTML = renderIntegrationCards(data, allDataShown);
+        const integContainer = document.getElementById("integContainer");
 
-    document.querySelector('.show-all-button').addEventListener('click', () => {
-        allDataShown = !allDataShown;
+        let allDataShown = false;
 
-        const button = document.querySelector('.toggle-text');  
-    
-        if (allDataShown) {
-            button.textContent = 'See Less Integrations'; // Change button text when allDataShown is true
-        } else {
-            button.textContent = 'See All Integrations'; // Change button text when allDataShown is false
+        function renderIntegrationCards(data, showAll) {
+            const cardsToShow = showAll ? data.length : 40;
+            return data.slice(0, cardsToShow).map(item => {
+                const iconURL = item.color.split('/').slice(1).join('/');
+
+                return `
+                    <a href="${item.permalink}" class="integrations-card">
+                    <div class="integrations-card-inner">
+                    <div class="card-front">
+                    <img src="${iconURL}" loading="lazy" id="logo-dark-light"
+                    data-logo-for-dark="${iconURL}"
+                    data-logo-for-light="${iconURL}" />
+                    </div>
+                    <div class="card-back">
+                    <p> ${item.name} </p>
+                    </div>
+                    </div>
+                    </a>`;
+            }).join('');
         }
 
+        const scrollOptions = { behavior: "smooth" };
 
         integContainer.innerHTML = renderIntegrationCards(data, allDataShown);
 
-        // Scroll to the <h2> tag
-        if (!allDataShown) {
-            const h2Tag = document.querySelector('h2');
-            h2Tag.scrollIntoView(scrollOptions);
-        }
-    });
-</script>
+        document.querySelector(".show-all-button").addEventListener("click", () => {
+            allDataShown = !allDataShown;
+
+            const button = document.querySelector(".toggle-text");
+
+            if (allDataShown) {
+                button.textContent = "See Less Integrations";
+            } else {
+                button.textContent = "Show More Integrations";
+            }
+
+            integContainer.innerHTML = renderIntegrationCards(data, allDataShown);
+
+            if (!allDataShown) {
+                const h2Tag = document.querySelector("h2");
+                h2Tag.scrollIntoView(scrollOptions);
+            }
+        });
+
+        document.getElementById("sort").addEventListener("change", function () {
+            var sortValue = this.value;
+            var sortedData = [...data];
+
+            if (sortValue === "asc") {
+                sortedData.sort((a, b) => a.name.localeCompare(b.name));
+            } else if (sortValue === "desc") {
+                sortedData.sort((a, b) => b.name.localeCompare(a.name));
+            }
+
+            integContainer.innerHTML = renderIntegrationCards(sortedData, allDataShown);
+        });
+
+        document.getElementById("search").addEventListener("input", function () {
+            var searchValue = this.value.toLowerCase();
+            var filteredData = data.filter((item) =>
+                item.name.toLowerCase().includes(searchValue)
+            );
+
+            integContainer.innerHTML = renderIntegrationCards(filteredData, allDataShown);
+        });
+    </script>
+</div>

From 1ca5a55020f4f19dd5d66c233e554d564592d067 Mon Sep 17 00:00:00 2001
From: shubhusion <shubham27.sharma03@gmail.com>
Date: Mon, 5 Aug 2024 21:34:34 +0530
Subject: [PATCH 2/4] Updated Search Bar

Signed-off-by: shubhusion <shubham27.sharma03@gmail.com>
---
 _includes/partials/homePage-integrations.html | 163 ++++++------------
 1 file changed, 57 insertions(+), 106 deletions(-)

diff --git a/_includes/partials/homePage-integrations.html b/_includes/partials/homePage-integrations.html
index 2699ed782b..958d51f875 100644
--- a/_includes/partials/homePage-integrations.html
+++ b/_includes/partials/homePage-integrations.html
@@ -1,92 +1,63 @@
 <style>
-    .sorting-options {
-        margin: 0 auto;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        max-width: 600px;
-    }
-
-    #sort {
-        padding: 10px;
-        font-size: 16px;
-        border: 1px solid #ddd;
-        border-radius: 5px;
-        background-color: #f9f9f9;
-        appearance: none;
-        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M7 10l5 5 5-5z"/></svg>');
-        background-repeat: no-repeat;
-        background-position: right 10px top 50%;
-        margin-right: 10px;
-    }
-
+    .search-container-wrapper {
+    display: flex;
+    justify-content: center;
+    margin: 20px 0;
+}
+
+#search-container {
+    display: flex;
+    align-items: center;
+    position: relative; 
+    width: 100%;
+    max-width: 500px;
+    background-color: #fff;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    overflow: hidden;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.search-icon {
+    right: 10px;
+    padding: 0 10px;
+    font-size: 20px;
+    color: #000; 
+    pointer-events: none; 
+}
+
+#search {
+    flex-grow: 1;
+    height: 40px;
+    padding: 10px 40px 10px 10px; 
+    border: none;
+    font-size: 16px;
+    box-sizing: border-box;
+    outline: none;
+    border-radius: 5px 0 0 5px;
+    background-color: #fff; 
+}
+
+#search:focus {
+    background-color: #f0f0f0;
+}
+
+@media (max-width: 506px) {
     #search-container {
-        display: flex;
-        align-items: center;
-        width: 100%;
-        max-width: 500px;
-        background-color: #fff;
-        border: 1px solid #ddd;
-        border-radius: 5px;
-        margin-right: 10px;
-        overflow: hidden;
-    }
-
-    #search {
-        flex-grow: 1;
-        height: 40px;
-        padding: 10px 40px 10px 10px;
-        border: none;
-        font-size: 16px;
-        box-sizing: border-box;
-        outline: none;
-    }
-
-    #search-btn {
-        width: 80px;
-        height: 40px;
-        background-color: green;
-        border: none;
-        color: #fff;
-        cursor: pointer;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        text-transform: uppercase;
-        margin-left: 10px;
-    }
-
-    #search-btn svg {
-        fill: #fff;
-        width: 20px;
-        height: 20px;
-        margin-right: 5px;
-    }
-
-    #integContainer {
-        column-gap: max(2vh, 2vw); 
-        row-gap: 1.5rem; 
-        display: flex; 
-        flex-wrap: wrap; 
-        padding-bottom: 3.5rem;
-    }
-
-    @media (max-width: 506px) {
-        .sorting-options {
-            text-align: center;
-            flex-direction: column;
-        }
-
-        #sort, #search-container, #search-btn {
-            margin: 5px 0;
-        }
-
-        #search-container {
-            max-width: 100%;
-        }
+        max-width: 100%;
     }
+}
+
+#integContainer {
+    column-gap: max(2vh, 2vw);
+    row-gap: 1.5rem;
+    display: flex;
+    flex-wrap: wrap;
+    padding-bottom: 3.5rem;
+}
 </style>
 
+
 <div class="integrations-heading">
     <div class="parallel-left"></div>
     <div class="parallel-right"></div>
@@ -96,18 +67,11 @@ <h2>for your Cloud Native Infrastructure and Apps</h2>
         Meshery seamlessly integrates with every CNCF project, your existing tools, multiple Clouds and Kubernetes clusters.
     </p>
 
-    <div class="sorting-options">
-        <select id="sort">
-            <option disabled selected value>Sort by</option>
-            <option value="asc">Alphabetically (A-Z)</option>
-            <option value="desc">Alphabetically (Z-A)</option>
-        </select>
-
+    <div class="search-container-wrapper">
         <div id="search-container">
             <input type="text" id="search" placeholder="Search..." />
+            <span class="search-icon"><i class="fas fa-search"></i></span>
         </div>
-
-        <button class="highlight" aria-label="Search">Next</button>
     </div>
 
     <div id="integContainer" class="integrations-container container"></div>
@@ -175,19 +139,6 @@ <h2>for your Cloud Native Infrastructure and Apps</h2>
             }
         });
 
-        document.getElementById("sort").addEventListener("change", function () {
-            var sortValue = this.value;
-            var sortedData = [...data];
-
-            if (sortValue === "asc") {
-                sortedData.sort((a, b) => a.name.localeCompare(b.name));
-            } else if (sortValue === "desc") {
-                sortedData.sort((a, b) => b.name.localeCompare(a.name));
-            }
-
-            integContainer.innerHTML = renderIntegrationCards(sortedData, allDataShown);
-        });
-
         document.getElementById("search").addEventListener("input", function () {
             var searchValue = this.value.toLowerCase();
             var filteredData = data.filter((item) =>

From 87de2b10a87d84219109a469abad4a57c43dcf23 Mon Sep 17 00:00:00 2001
From: shubhusion <shubham27.sharma03@gmail.com>
Date: Mon, 12 Aug 2024 11:21:28 +0530
Subject: [PATCH 3/4] Rectified style issues

Signed-off-by: shubhusion <shubham27.sharma03@gmail.com>
---
 _includes/partials/homePage-integrations.html | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/_includes/partials/homePage-integrations.html b/_includes/partials/homePage-integrations.html
index 958d51f875..37a7d6c846 100644
--- a/_includes/partials/homePage-integrations.html
+++ b/_includes/partials/homePage-integrations.html
@@ -55,15 +55,20 @@
     flex-wrap: wrap;
     padding-bottom: 3.5rem;
 }
+
+.button-wrapper {
+    padding: 5px; /* Adjust as needed */
+}
+
 </style>
 
 
-<div class="integrations-heading">
+<div class="integrations-heading" style="padding-top: 2rem;">
     <div class="parallel-left"></div>
     <div class="parallel-right"></div>
     <h1 id="integration-heading"></h1>
     <h2>for your Cloud Native Infrastructure and Apps</h2>
-    <p>
+    <p style="margin: auto 10vw;">
         Meshery seamlessly integrates with every CNCF project, your existing tools, multiple Clouds and Kubernetes clusters.
     </p>
 
@@ -77,11 +82,16 @@ <h2>for your Cloud Native Infrastructure and Apps</h2>
     <div id="integContainer" class="integrations-container container"></div>
 
     <div class="integrations-3d-link">
-        <div class="button-container">
-            <a class="highlight show-all-button toggle-text">Show More Integrations</a>
-            <a class="highlight show-all-button" href="/integrations">View Integrations in 3D</a>
+        <div class="button-container" style="display: flex; align-items: center; justify-content: center; row-gap: 18px; column-gap: 32px; flex-wrap: wrap; gap: 16px;">
+            <div class="button-wrapper">
+                <a class="highlight show-all-button toggle-text" style="display: inline-block; width: fit-content; cursor:pointer;">Show More Integrations</a>
+            </div>
+            <div class="button-wrapper">
+                <a class="highlight show-all-button" href="/integrations" style="display: inline-block; width: fit-content;">View Integrations in 3D</a>
+            </div>
         </div>
     </div>
+    
 
     <script type="module">
         // integrations.js

From 1011f0897202dff5afc04aabdebdaaf265046f4f Mon Sep 17 00:00:00 2001
From: shubhusion <shubham27.sharma03@gmail.com>
Date: Mon, 12 Aug 2024 12:05:02 +0530
Subject: [PATCH 4/4] Rectified search related issues

Signed-off-by: shubhusion <shubham27.sharma03@gmail.com>
---
 _includes/partials/homePage-integrations.html | 143 +++++++++---------
 1 file changed, 74 insertions(+), 69 deletions(-)

diff --git a/_includes/partials/homePage-integrations.html b/_includes/partials/homePage-integrations.html
index 37a7d6c846..5555dba516 100644
--- a/_includes/partials/homePage-integrations.html
+++ b/_includes/partials/homePage-integrations.html
@@ -1,65 +1,65 @@
 <style>
     .search-container-wrapper {
-    display: flex;
-    justify-content: center;
-    margin: 20px 0;
-}
-
-#search-container {
-    display: flex;
-    align-items: center;
-    position: relative; 
-    width: 100%;
-    max-width: 500px;
-    background-color: #fff;
-    border: 1px solid #ddd;
-    border-radius: 5px;
-    overflow: hidden;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.search-icon {
-    right: 10px;
-    padding: 0 10px;
-    font-size: 20px;
-    color: #000; 
-    pointer-events: none; 
-}
-
-#search {
-    flex-grow: 1;
-    height: 40px;
-    padding: 10px 40px 10px 10px; 
-    border: none;
-    font-size: 16px;
-    box-sizing: border-box;
-    outline: none;
-    border-radius: 5px 0 0 5px;
-    background-color: #fff; 
-}
-
-#search:focus {
-    background-color: #f0f0f0;
-}
-
-@media (max-width: 506px) {
+        display: flex;
+        justify-content: center;
+        margin: 20px 0;
+    }
+
     #search-container {
-        max-width: 100%;
+        display: flex;
+        align-items: center;
+        position: relative;
+        width: 100%;
+        max-width: 500px;
+        background-color: #fff;
+        border: 1px solid #ddd;
+        border-radius: 5px;
+        overflow: hidden;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+
+    .search-icon {
+        right: 10px;
+        padding: 0 10px;
+        font-size: 20px;
+        color: #000;
+        pointer-events: none;
     }
-}
 
-#integContainer {
-    column-gap: max(2vh, 2vw);
-    row-gap: 1.5rem;
-    display: flex;
-    flex-wrap: wrap;
-    padding-bottom: 3.5rem;
-}
+    #search {
+        flex-grow: 1;
+        height: 40px;
+        padding: 10px 40px 10px 10px;
+        border: none;
+        font-size: 16px;
+        box-sizing: border-box;
+        outline: none;
+        border-radius: 5px 0 0 5px;
+        background-color: #fff;
+    }
 
-.button-wrapper {
-    padding: 5px; /* Adjust as needed */
-}
+    #search:focus {
+        background-color: #f0f0f0;
+    }
 
+    @media (max-width: 506px) {
+        #search-container {
+            max-width: 100%;
+        }
+    }
+
+    #integContainer {
+        column-gap: max(2vh, 2vw);
+        row-gap: 1.5rem;
+        display: flex;
+        flex-wrap: wrap;
+        padding-bottom: 3.5rem;
+    }
+
+    .button-wrapper {
+        padding: 5px;
+        /* Adjust as needed */
+    }
 </style>
 
 
@@ -69,7 +69,8 @@
     <h1 id="integration-heading"></h1>
     <h2>for your Cloud Native Infrastructure and Apps</h2>
     <p style="margin: auto 10vw;">
-        Meshery seamlessly integrates with every CNCF project, your existing tools, multiple Clouds and Kubernetes clusters.
+        Meshery seamlessly integrates with every CNCF project, your existing tools, multiple Clouds and Kubernetes
+        clusters.
     </p>
 
     <div class="search-container-wrapper">
@@ -82,19 +83,21 @@ <h2>for your Cloud Native Infrastructure and Apps</h2>
     <div id="integContainer" class="integrations-container container"></div>
 
     <div class="integrations-3d-link">
-        <div class="button-container" style="display: flex; align-items: center; justify-content: center; row-gap: 18px; column-gap: 32px; flex-wrap: wrap; gap: 16px;">
+        <div class="button-container"
+            style="display: flex; align-items: center; justify-content: center; row-gap: 18px; column-gap: 32px; flex-wrap: wrap; gap: 16px;">
             <div class="button-wrapper">
-                <a class="highlight show-all-button toggle-text" style="display: inline-block; width: fit-content; cursor:pointer;">Show More Integrations</a>
+                <a class="highlight show-all-button toggle-text"
+                    style="display: inline-block; width: fit-content; cursor:pointer;">Show More Integrations</a>
             </div>
             <div class="button-wrapper">
-                <a class="highlight show-all-button" href="/integrations" style="display: inline-block; width: fit-content;">View Integrations in 3D</a>
+                <a class="highlight show-all-button" href="/integrations"
+                    style="display: inline-block; width: fit-content;">View Integrations in 3D</a>
             </div>
         </div>
     </div>
-    
+
 
     <script type="module">
-        // integrations.js
         import data from '../../integrations/data.js';
 
         const integHeading = document.getElementById("integration-heading");
@@ -104,10 +107,11 @@ <h2>for your Cloud Native Infrastructure and Apps</h2>
         const integContainer = document.getElementById("integContainer");
 
         let allDataShown = false;
+        let filteredData = data; // Initialize with full data
 
-        function renderIntegrationCards(data, showAll) {
-            const cardsToShow = showAll ? data.length : 40;
-            return data.slice(0, cardsToShow).map(item => {
+        function renderIntegrationCards(dataToRender, showAll) {
+            const cardsToShow = showAll ? dataToRender.length : 40;
+            return dataToRender.slice(0, cardsToShow).map(item => {
                 const iconURL = item.color.split('/').slice(1).join('/');
 
                 return `
@@ -128,7 +132,7 @@ <h2>for your Cloud Native Infrastructure and Apps</h2>
 
         const scrollOptions = { behavior: "smooth" };
 
-        integContainer.innerHTML = renderIntegrationCards(data, allDataShown);
+        integContainer.innerHTML = renderIntegrationCards(filteredData, allDataShown);
 
         document.querySelector(".show-all-button").addEventListener("click", () => {
             allDataShown = !allDataShown;
@@ -141,7 +145,7 @@ <h2>for your Cloud Native Infrastructure and Apps</h2>
                 button.textContent = "Show More Integrations";
             }
 
-            integContainer.innerHTML = renderIntegrationCards(data, allDataShown);
+            integContainer.innerHTML = renderIntegrationCards(filteredData, allDataShown);
 
             if (!allDataShown) {
                 const h2Tag = document.querySelector("h2");
@@ -150,12 +154,13 @@ <h2>for your Cloud Native Infrastructure and Apps</h2>
         });
 
         document.getElementById("search").addEventListener("input", function () {
-            var searchValue = this.value.toLowerCase();
-            var filteredData = data.filter((item) =>
+            const searchValue = this.value.toLowerCase();
+            filteredData = data.filter((item) =>
                 item.name.toLowerCase().includes(searchValue)
             );
 
             integContainer.innerHTML = renderIntegrationCards(filteredData, allDataShown);
         });
     </script>
-</div>
+
+</div>
\ No newline at end of file