BI-9: Make a simple search bar

package.json

@@ -15,7 +15,9 @@
   "dependencies": {
     "autoprefixer": "10.4.16",
     "next": "13.5.2",
+    "path": "^0.12.7",
     "postcss": "8.4.30",
+    "promises": "^0.2.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "tailwindcss": "3.3.3"

src/app/college/page.js

@@ -0,0 +1,19 @@
+// The "use client" is used to declare a boundary between a Server and Client Component modules.
+// This means that by defining a "use client" in a file, all other modules imported into it, including child components, are considered part of the client bundle - and will be rendered by React on the client.
+// In this file useSearchParams is a client component.
+'use client'
+
+import jsonData from '../../../data/university_data'
+import { useSearchParams } from 'next/navigation'
+
+export default function Home() {
+  const router = useSearchParams()
+  const collegeList = jsonData
+  const id = router.get('id')
+  const selectedCollege = collegeList.find((item) => item.id === id)
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-center p-24">
+      <h1 className="text-5xl font-bold z-10">{selectedCollege?.name}</h1>
+    </main>
+  )
+}