BI-9: Make a simple search bar

package.json

@@ -13,7 +13,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,17 @@
+//useSearchParams only works in Client Components.So, Add we need  "use client" directive at the top of the file to use it
+'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>
+  )
+}