diff --git a/aeye/app/(nav)/home/SearchBar.tsx b/aeye/app/(nav)/home/SearchBar.tsx
new file mode 100644
index 0000000..e09bb76
--- /dev/null
+++ b/aeye/app/(nav)/home/SearchBar.tsx
@@ -0,0 +1,59 @@
+import { styled, alpha } from "@mui/material/styles";
+import SearchIcon from "@mui/icons-material/Search";
+import InputBase from "@mui/material/InputBase";
+
+const Search = styled("div")(({ theme }) => ({
+ position: "relative",
+ borderRadius: theme.shape.borderRadius,
+ backgroundColor: "#efefef",
+ "&:hover": {
+ backgroundColor: alpha(theme.palette.common.white, 0.25),
+ },
+ marginLeft: 0,
+ width: "100%",
+ [theme.breakpoints.up("sm")]: {
+ marginLeft: theme.spacing(1),
+ width: "auto",
+ },
+}));
+
+const SearchIconWrapper = styled("div")(({ theme }) => ({
+ padding: theme.spacing(0, 2),
+ height: "100%",
+ position: "absolute",
+ pointerEvents: "none",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+}));
+
+const StyledInputBase = styled(InputBase)(({ theme }) => ({
+ color: "inherit",
+ width: "100%",
+ "& .MuiInputBase-input": {
+ padding: theme.spacing(1, 1, 1, 0),
+ // vertical padding + font size from searchIcon
+ paddingLeft: `calc(1em + ${theme.spacing(4)})`,
+ transition: theme.transitions.create("width"),
+ [theme.breakpoints.up("sm")]: {
+ width: "12ch",
+ "&:focus": {
+ width: "20ch",
+ },
+ },
+ },
+}));
+
+export default function SearchBar() {
+ return (
+
+
+
+
+
+
+ );
+}
diff --git a/aeye/app/(nav)/home/page.tsx b/aeye/app/(nav)/home/page.tsx
index 16f87b7..df5ea0b 100644
--- a/aeye/app/(nav)/home/page.tsx
+++ b/aeye/app/(nav)/home/page.tsx
@@ -1,62 +1,7 @@
"use client";
-import * as React from "react";
-import { styled, alpha } from "@mui/material/styles";
-import SearchIcon from "@mui/icons-material/Search";
-import InputBase from "@mui/material/InputBase";
-
-const Search = styled("div")(({ theme }) => ({
- position: "relative",
- borderRadius: theme.shape.borderRadius,
- backgroundColor: "#efefef",
- "&:hover": {
- backgroundColor: alpha(theme.palette.common.white, 0.25),
- },
- marginLeft: 0,
- width: "100%",
- [theme.breakpoints.up("sm")]: {
- marginLeft: theme.spacing(1),
- width: "auto",
- },
-}));
-
-const SearchIconWrapper = styled("div")(({ theme }) => ({
- padding: theme.spacing(0, 2),
- height: "100%",
- position: "absolute",
- pointerEvents: "none",
- display: "flex",
- alignItems: "center",
- justifyContent: "center",
-}));
-
-const StyledInputBase = styled(InputBase)(({ theme }) => ({
- color: "inherit",
- width: "100%",
- "& .MuiInputBase-input": {
- padding: theme.spacing(1, 1, 1, 0),
- // vertical padding + font size from searchIcon
- paddingLeft: `calc(1em + ${theme.spacing(4)})`,
- transition: theme.transitions.create("width"),
- [theme.breakpoints.up("sm")]: {
- width: "12ch",
- "&:focus": {
- width: "20ch",
- },
- },
- },
-}));
+import SearchBar from "./SearchBar";
export default function Home() {
- return (
-
-
-
-
-
-
- );
+ return ;
}