added searchbar - no functionality as state management is next

package.json

@@ -31,13 +31,17 @@
     "react-dom": "^19.0.0-rc-935180c7e0-20240524",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
-    "zod": "^3.23.8"
+    "zod": "^3.23.8",
+    "@types/react": "npm:types-react@rc",
+    "@types/react-dom": "npm:types-react-dom@rc"
+  },
+  "overrides": {
+    "@types/react": "npm:types-react@rc",
+    "@types/react-dom": "npm:types-react-dom@rc"
   },
   "devDependencies": {
     "@types/eslint": "^8.56.2",
     "@types/node": "^20.11.20",
-    "@types/react": "^18.2.57",
-    "@types/react-dom": "^18.2.19",
     "@typescript-eslint/eslint-plugin": "^7.1.1",
     "@typescript-eslint/parser": "^7.1.1",
     "drizzle-kit": "^0.21.0",
@@ -49,7 +53,9 @@
     "prettier": "^3.2.5",
     "prettier-plugin-tailwindcss": "^0.5.11",
     "tailwindcss": "^3.4.1",
-    "typescript": "^5.4.2"
+    "typescript": "^5.4.2",
+    "@types/react": "npm:types-react@rc",
+    "@types/react-dom": "npm:types-react-dom@rc"
   },
   "ct3aMetadata": {
     "initVersion": "7.33.1"

src/app/_components/SearchBar.tsx

@@ -0,0 +1,5 @@
+import { Input } from "~/components/ui/input";
+
+export default function SearchBar() {
+  return <Input className="mx-auto max-w-xl focus-visible:ring-0" />;
+}

src/app/layout.tsx

@@ -4,6 +4,7 @@ import { Inter as FontSans } from "next/font/google";
 import { cn } from "~/lib/utils";
 import TopNav from "./_components/FilterMenu";
 import Filtermenu from "./_components/FilterMenu";
+import SearchBar from "./_components/SearchBar";
 
 const fontSans = FontSans({
   subsets: ["latin"],
@@ -29,7 +30,10 @@ export default function RootLayout({
           fontSans.variable,
         )}
       >
-        <Filtermenu />
+        <div className="container pt-12">
+          <SearchBar />
+          <Filtermenu />
+        </div>
         {children}
       </body>
     </html>