Feat: Add new design for search results page(no results found)

components/Button/Button.tsx

@@ -1,6 +1,6 @@
 import { FC, ReactNode } from 'react'
 import Link from 'next/link'
-import clsx from 'clsx'
+import { cn } from 'lib/utils'
 
 interface Props {
   label: string
@@ -20,13 +20,13 @@ const Button: FC<Props> = ({
   className,
 }) => {
   const styles = {
-    primary: '', // @todo: add styles when using these button types in ResourcesCards
+    primary: 'bg-primary-purple hover:bg-primary-purple/80 text-white rounded-[10px] duration-500',
     secondary: '',
     pale: 'bg-slate-100 hover:bg-violet-50 dark:bg-white dark:bg-opacity-10 dark:hover:bg-opacity-20 text-slate-500 dark:text-violet-50',
     text: 'text-slate-400 dark:text-gray-400 !gap-4',
   }[variant]
 
-  const cls = clsx(
+  const cls = cn(
     'flex justify-center items-center px-4 py-3 gap-1.5 rounded-lg transition-colors',
     styles,
     className

components/NotFound/NotFound.tsx

@@ -0,0 +1,30 @@
+import { FC } from 'react'
+import { IoIosArrowRoundForward } from "react-icons/io";
+import Button from 'components/Button';
+import Search from "assets/icons/svg/search-icon.svg"
+
+const NotFound: FC = () => {
+  return (
+    <div className="pt-6 md:p-0 text-xl w-full my-auto min-h-[calc(100vh-450px)] md:min-h-[calc(100vh-270px)]">
+      <h1 className='text-[32px] font-[600] dark:bg-text-light-silver mb-[8px]'>Resources</h1>
+      <span className='text-[16px] md:text-[18px]'>We&apos;ve curated a wealth of resources just for you. Go ahead and explore at your own pace.</span>
+
+      <div className='flex flex-col justify-center items-center gap-3 h-full'>
+        <Search />
+        <span className='text-center text-[16px] md:text-[18px]'>
+          Couldn&apos;t find what you&apos;re looking for? Feel free to seek <br className='hidden md:block' />
+          assistance in our Discord community.
+        </span>
+          <Button
+            label='Join Discord'
+            icon={<IoIosArrowRoundForward size={24} />}
+            variant='primary'
+            className='flex-row-reverse text-[16px] py-2'
+            link='https://discord.com/invite/NvK67YnJX5'
+          />
+      </div>
+    </div>
+  )
+}
+
+export default NotFound

lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs))
+}

package.json

@@ -37,6 +37,7 @@
     "react-spinners": "^0.13.8",
     "react-tooltip": "^5.20.0",
     "react-transition-state": "^2.1.0",
+    "tailwind-merge": "^2.2.0",
     "typescript": "5.0.3",
     "typewriter-effect": "^2.21.0",
     "uuid": "9.0.0"

pages/search.tsx

@@ -4,10 +4,10 @@ import { useEffect, memo, useMemo } from 'react'
 
 import CardsList from 'components/Cards/CardsList'
 import { TopBar } from 'components/TopBar/TopBar'
-import ComingSoon from 'components/NewIssue/NewIssue'
 import { useResults } from 'hooks/ResultsContext'
 
 import { database } from 'database/data'
+import NotFound from 'components/NotFound/NotFound'
 
 const MemoizedCardsList = memo(CardsList)
 
@@ -98,7 +98,7 @@ const Search = () => {
         {filteredCardsList.length > 0 ? (
           <MemoizedCardsList cards={filteredCardsList} />
         ) : (
-          <ComingSoon />
+          <NotFound />
         )}
       </div>
     </>