Implemented filter distribution functionality

react-frontend/src/App.css

@@ -541,7 +541,7 @@ input:focus {
 @media (min-width: 640px) {
   .pagination-and-scroll-wrapper {
     flex-direction: row;
-    justify-content: flex-start;
+    justify-content: flex-end;
     align-items: center;
   }
 
@@ -574,6 +574,7 @@ input:focus {
   border-radius: 4px;
   cursor: pointer;
   height: 38px; 
+  margin-left: 5px;
 }
 
 .scroll-to-top:hover {

react-frontend/src/components/Navbar/Navbar.jsx

@@ -23,8 +23,6 @@ function NavBar() {
         <nav className={`navbar-links ${isOpen ? 'active' : ''}`}>
           <Link to="/" className="navbar-link poppins-bold-black-20px hover:text-[#044FC0]">Home</Link>
           <Link to="/faq" className="navbar-link poppins-bold-black-20px hover:text-[#044FC0]">FAQ</Link>
-          <Link to="/blog" className="navbar-link poppins-bold-black-20px hover:text-[#044FC0]">Blog</Link>
-          <Link to="/contact" className="navbar-link poppins-bold-black-20px hover:text-[#044FC0]">Contact</Link>
           <a href="https://software-discovery-tool.readthedocs.io/en/latest/index.html" className="navbar-link poppins-bold-black-20px hover:text-[#044FC0]" target="_blank" rel="noopener noreferrer">Documentation</a>
         </nav>
       </div>

react-frontend/src/components/SearchResults.jsx

@@ -7,26 +7,92 @@ function SearchResults({ results = [], showDesc, itemsPerPage, searchPerformed }
   const [currentPage, setCurrentPage] = useState(0);
   const [paginatedResults, setPaginatedResults] = useState([]);
   const [refinePackageName, setRefinePackageName] = useState('');
+  const [selectedDistribution, setSelectedDistribution] = useState('All');
+  const [distributions, setDistributions] = useState([]);
+  const [distributionCounts, setDistributionCounts] = useState({});
+  const [matchingCounts, setMatchingCounts] = useState({});
+
+  useEffect(() => {
+    fetchDistributions();
+  }, []);
+
+  useEffect(() => {
+    calculatePackageCounts();
+    calculateMatchingCounts();
+    if (searchPerformed) {
+      setSelectedDistribution('All'); 
+    }
+  }, [results, refinePackageName, searchPerformed]);
+
+  const fetchDistributions = async () => {
+    try {
+      const response = await fetch('https://sdt.openmainframeproject.org/sdt/getSupportedDistros');
+      const data = await response.json();
+
+      const childDistributions = Object.keys(data).flatMap(parent => 
+        Object.keys(data[parent])
+      );
+
+      setDistributions(['All', ...childDistributions]);
+    } catch (error) {
+      console.error('Error fetching distributions:', error);
+    }
+  };
+
+  const calculatePackageCounts = () => {
+    const counts = results.reduce((acc, result) => {
+      const ostag = result.ostag || 'Unknown';
+      if (!acc[ostag]) acc[ostag] = 0;
+      acc[ostag]++;
+      return acc;
+    }, {});
+
+    counts['All'] = results.length;
+
+    setDistributionCounts(counts);
+  };
+
+  const calculateMatchingCounts = () => {
+    const filteredByName = results.filter((result) => {
+      const nameMatch = result.packageName.toLowerCase().includes(refinePackageName.toLowerCase());
+      const versionMatch = result.version.toLowerCase().includes(refinePackageName.toLowerCase());
+      return nameMatch || versionMatch;
+    });
+
+    const counts = filteredByName.reduce((acc, result) => {
+      const ostag = result.ostag || 'Unknown';
+      if (!acc[ostag]) acc[ostag] = 0;
+      acc[ostag]++;
+      return acc;
+    }, {});
+
+    counts['All'] = filteredByName.length;
+
+    setMatchingCounts(counts);
+  };
 
   const filterResults = () => {
     if (!Array.isArray(results)) return [];
-    return results.filter((result) => {
+
+    const filteredByName = results.filter((result) => {
       const nameMatch = result.packageName.toLowerCase().includes(refinePackageName.toLowerCase());
       const versionMatch = result.version.toLowerCase().includes(refinePackageName.toLowerCase());
       return nameMatch || versionMatch;
     });
+
+    if (selectedDistribution === 'All') {
+      return filteredByName;
+    } else {
+      return filteredByName.filter(result => result.ostag === selectedDistribution);
+    }
   };
 
   useEffect(() => {
     const filteredResults = filterResults();
     const start = currentPage * itemsPerPage;
     const end = start + itemsPerPage;
     setPaginatedResults(filteredResults.slice(start, end));
-  }, [currentPage, itemsPerPage, refinePackageName, results]);
-
-  useEffect(() => {
-    setCurrentPage(0);
-  }, [itemsPerPage, results]);
+  }, [currentPage, itemsPerPage, refinePackageName, results, selectedDistribution]);
 
   const handlePageChange = (selectedPage) => {
     setCurrentPage(selectedPage.selected);
@@ -39,6 +105,10 @@ function SearchResults({ results = [], showDesc, itemsPerPage, searchPerformed }
     });
   };
 
+  const handleDistributionChange = (e) => {
+    setSelectedDistribution(e.target.value);
+  };
+
   const shouldShowPagination = filterResults().length > itemsPerPage;
 
   return (
@@ -56,6 +126,22 @@ function SearchResults({ results = [], showDesc, itemsPerPage, searchPerformed }
               />
             </label>
           </div>
+          <div className="refine-filters">
+            <label>
+              Distribution:
+              <select
+                value={selectedDistribution}
+                onChange={handleDistributionChange}
+                style={{ marginLeft: '10px', borderRadius: '15px' }}
+              >
+                {distributions.map((dist, index) => (
+                  <option key={index} value={dist}>
+                    {dist} ({matchingCounts[dist] || 0}/{distributionCounts[dist] || 0})
+                  </option>
+                ))}
+              </select>
+            </label>
+          </div>
         </div>
       )}
 

react-frontend/src/screens/Faq/faq.css

@@ -7,6 +7,8 @@
   box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px,
     rgba(17, 17, 26, 0.1) 0px 8px 8px;
   margin: auto;
+  margin-top: 20px;
+  margin-bottom: 20px;
 }
 
 .faq-heading {