feat: alert when no search results found (#90)

* Added the alert when no results found * updated the details of the alert
EddieHubCommunity · Jun 26, 2024 · 24c2730 · 24c2730
1 parent 4f5761a
commit 24c2730
Showing 1 changed file with 41 additions and 29 deletions.
diff --git a/src/app/search/page.js b/src/app/search/page.js
@@ -4,6 +4,7 @@ import prisma from "@/models/db";
 import Items from "@/components/list/Items";
 import REACH from "@/config/reach";
 import Form from "./form";
+import Alert from "@/components/Alert";
 
 export default async function Page({ searchParams }) {
   const query = {
@@ -57,35 +58,46 @@ export default async function Page({ searchParams }) {
             </h2>
             <div className="overflow-hidden rounded-lg bg-white shadow">
               <div className="p-6">
-                <Items
-                  data={users.map((user) => ({
-                    id: user.username,
-                    image: user.image,
-                    url: `/${user.username}`,
-                    urlText: user.name,
-                    description: user.bio,
-                    socials: user.platforms.map((platform) => ({
-                      icon: platform.name,
-                    })),
-                    meta: [
-                      // biggest reach
-                      {
-                        icon: WifiIcon,
-                        text: `Reach ${
-                          REACH().data[
-                            REACH().sortByLargest(user.platforms)[0].reach
-                          ].group
-                        }`,
-                      },
-                      // lowest price
-                      {
-                        icon: ArrowUpIcon,
-                        text: `From $${user.platforms[0].price}`,
-                      },
-                    ],
-                    tags: user.tags?.split(","),
-                  }))}
-                />
+                {users.length > 0 ? (
+                  <Items
+                    data={users.map((user) => ({
+                      id: user.username,
+                      image: user.image,
+                      url: `/${user.username}`,
+                      urlText: user.name,
+                      description: user.bio,
+                      socials: user.platforms.map((platform) => ({
+                        icon: platform.name,
+                      })),
+                      meta: [
+                        // biggest reach
+                        {
+                          icon: WifiIcon,
+                          text: `Reach ${
+                            REACH().data[
+                              REACH().sortByLargest(user.platforms)[0].reach
+                            ].group
+                          }`,
+                        },
+                        // lowest price
+                        {
+                          icon: ArrowUpIcon,
+                          text: `From $${user.platforms[0].price}`,
+                        },
+                      ],
+                      tags: user.tags?.split(","),
+                    }))}
+                  />
+                ) : (
+                  <Alert
+                    type="info"
+                    message="No results found"
+                    details={[
+                      "Try adjusting your search parameters.",
+                      "Try to broaden your search criteria.",
+                    ]}
+                  />
+                )}
               </div>
             </div>
           </section>