diff --git a/pages/items/search/[query].tsx b/pages/items/search/[query].tsx
new file mode 100644
index 0000000..b329361
--- /dev/null
+++ b/pages/items/search/[query].tsx
@@ -0,0 +1,5 @@
+// Both of these routes are the same page! The query parameter is effectively
+// optional: this is the route if you have it, and the other is the route if
+// you don't.
+import ItemSearchPageWrapper from "./index";
+export default ItemSearchPageWrapper;
diff --git a/pages/items/search/index.tsx b/pages/items/search/index.tsx
new file mode 100644
index 0000000..7acc2ed
--- /dev/null
+++ b/pages/items/search/index.tsx
@@ -0,0 +1,19 @@
+import ItemSearchPageToolbar from "../../../src/app/components/ItemSearchPageToolbar";
+import ItemSearchPage from "../../../src/app/ItemSearchPage";
+import PageLayout from "../../../src/app/PageLayout";
+import type { NextPageWithLayout } from "../../_app";
+
+const ItemSearchPageWrapper: NextPageWithLayout = () => {
+ return ;
+};
+
+ItemSearchPageWrapper.layoutComponent = ({ children }) => {
+ return (
+
+
+ {children}
+
+ );
+};
+
+export default ItemSearchPageWrapper;
diff --git a/src/app/App.js b/src/app/App.js
index 1c43968..57fa4e3 100644
--- a/src/app/App.js
+++ b/src/app/App.js
@@ -1,5 +1,4 @@
import React from "react";
-import { Box } from "@chakra-ui/react";
import {
BrowserRouter as Router,
Switch,
@@ -12,7 +11,6 @@ import WardrobePageLayout from "./WardrobePage/WardrobePageLayout";
import { loadable } from "./util";
const HomePage = loadable(() => import("./HomePage"));
-const ItemSearchPage = loadable(() => import("./ItemSearchPage"));
const ItemTradesOfferingPage = loadable(() =>
import("./ItemTradesPage").then((m) => m.ItemTradesOfferingPage)
);
@@ -27,17 +25,6 @@ const WardrobePage = loadable(() => import("./WardrobePage"), {
fallback: ,
});
-// ItemPage and ItemSearchPage need to share a search toolbar, so here it is!
-// It'll load in dynamically like the page elements, with a hacky fallback to
-// take up 40px of height until it loads.
-//
-// There very well be a better way to encapsulate this! It's not *great* to
-// have this here. I just don't wanna over abstract it just yet 😅
-const ItemSearchPageToolbar = loadable(
- () => import("./components/ItemSearchPageToolbar"),
- { fallback: }
-);
-
/**
* App is the entry point of our application. There's not a ton of exciting
* stuff happening here, mostly just setting up some globals and theming!
@@ -50,12 +37,6 @@ function App() {
-
-
-
-
-
-
diff --git a/src/app/components/SquareItemCard.js b/src/app/components/SquareItemCard.js
index c7eb6a5..09df265 100644
--- a/src/app/components/SquareItemCard.js
+++ b/src/app/components/SquareItemCard.js
@@ -8,7 +8,7 @@ import {
useToken,
} from "@chakra-ui/react";
import { ClassNames } from "@emotion/react";
-import { Link } from "react-router-dom";
+import Link from "next/link";
import { safeImageUrl, useCommonStyles } from "../util";
import { CheckIcon, CloseIcon, StarIcon } from "@chakra-ui/icons";
@@ -57,38 +57,40 @@ function SquareItemCard({
`}
role="group"
>
-
-
- }
- removeButton={
- showRemoveButton ? (
-
- ) : null
- }
- boxShadow={tradeMatchShadow}
- footer={footer}
- />
+
+
+
+ }
+ removeButton={
+ showRemoveButton ? (
+
+ ) : null
+ }
+ boxShadow={tradeMatchShadow}
+ footer={footer}
+ />
+
{showRemoveButton && (