feat: popular icons (#4712)

* Update icons.js

Added recommended icons feature
 issue #3707

* feat. Popular Icons

Added Popular Icons feature

* fix: number of popular icons

* fix: Popular icons

* fix: Icon search test

pages/icons.js

@@ -12,6 +12,7 @@ export default function Icons() {
   const [notFound, setNotFound] = useState();
   const [threeOrMore, setThreeOrMore] = useState();
 
+  const popularIcons = ["FaGithub", "FaTwitter", "FaLinkedin", "FaGit"];
   const icons = {};
 
   Object.keys(FaIcons).forEach((key) => {
@@ -43,7 +44,7 @@ export default function Icons() {
 
     setSearchedIconNames(filteredIconNames);
   };
-
+  
   return (
     <>
       <PageHead
@@ -69,11 +70,13 @@ export default function Icons() {
           />
         )}
         <ul className="flex flex-wrap gap-4 mt-4">
-          {searchedIconNames.map((iconName, index) => (
-            <li key={index}>
-              <IconCard iconName={iconName} />
-            </li>
-          ))}
+          {(searchedIconNames.length ? searchedIconNames : popularIcons).map(
+            (iconName, index) => (
+              <li key={index}>
+                <IconCard iconName={iconName} />
+              </li>
+            )
+          )}
         </ul>
       </Page>
     </>

tests/icon.spec.js

@@ -11,7 +11,7 @@ test("Icon search works correctly", async ({ page }) => {
   await page.goto("/icons");
 
   // 2. show no users are listed
-  await expect(page.locator("li")).toHaveCount(0);
+  await expect(page.locator("li")).toHaveCount(4);
 
   // 3. type in search and check that user with the name exist and check a name doesn't exist
   const input = page.locator("[name='keyword']");