From 73ce98553651b3272332134ead10b0855ccf2952 Mon Sep 17 00:00:00 2001
From: jayson237 <jng277270@gmail.com>
Date: Mon, 18 Nov 2024 23:36:11 +0800
Subject: [PATCH] fix: buggy search bar

---
 app/wiki/heroes/layout.tsx                  | 15 +++++++++++++++
 app/wiki/heroes/page.tsx                    | 18 ++++++++++++------
 components/wiki/heroes/heroes-container.tsx | 15 ++-------------
 3 files changed, 29 insertions(+), 19 deletions(-)
 create mode 100644 app/wiki/heroes/layout.tsx

diff --git a/app/wiki/heroes/layout.tsx b/app/wiki/heroes/layout.tsx
new file mode 100644
index 00000000..2c468d53
--- /dev/null
+++ b/app/wiki/heroes/layout.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import { TabsContent } from "@/components/shared/tabs";
+
+async function HeroesPage({ children }: { children: React.ReactNode }) {
+  return (
+    <TabsContent
+      value="heroes"
+      className="flex w-full flex-col gap-4 md:flex-row"
+    >
+      {children}
+    </TabsContent>
+  );
+}
+
+export default HeroesPage;
diff --git a/app/wiki/heroes/page.tsx b/app/wiki/heroes/page.tsx
index a62e721b..fa9cba49 100644
--- a/app/wiki/heroes/page.tsx
+++ b/app/wiki/heroes/page.tsx
@@ -1,5 +1,7 @@
 import getHeroes from "@/lib/actions/getHeroes";
-import { TabsContent } from "@/components/shared/tabs";
+import { GradiantCard } from "@/components/shared/gradiant-card";
+import HeroFilter from "@/components/hero-filter";
+import HeroSearch from "@/components/hero-search";
 import HeroesContainer from "@/components/wiki/heroes/heroes-container";
 import { Metadata } from "next";
 import { defaultOpenGraphMD, defaultTwitterMD } from "@/lib/configs/metadata";
@@ -34,12 +36,16 @@ async function HeroesPage({
   });
 
   return (
-    <TabsContent
-      value="heroes"
-      className="flex w-full flex-col gap-5 md:flex-row"
-    >
+    <>
+      <GradiantCard
+        className="flex h-fit w-full flex-col-reverse gap-4 px-6 md:sticky md:top-20 md:w-[220px] md:flex-col md:gap-0"
+        variant="clean"
+      >
+        <HeroSearch />
+        <HeroFilter orientation="vertical" />
+      </GradiantCard>
       <HeroesContainer heroes={heroes} query={searchParams} />
-    </TabsContent>
+    </>
   );
 }
 
diff --git a/components/wiki/heroes/heroes-container.tsx b/components/wiki/heroes/heroes-container.tsx
index f35388be..2d0737f0 100644
--- a/components/wiki/heroes/heroes-container.tsx
+++ b/components/wiki/heroes/heroes-container.tsx
@@ -1,12 +1,9 @@
 "use client";
 
-import { useMemo } from "react";
+import React, { useMemo } from "react";
 import { useRouter } from "next/navigation";
 import { HeroesDocument } from "@/lib/mongoose/schema/heroes";
-import HeroFilter from "@/components/hero-filter";
-import HeroSearch from "@/components/hero-search";
 import HeroCard from "./hero-card";
-import { GradiantCard } from "@/components/shared/gradiant-card";
 import { Query } from "@/lib/types";
 
 interface IHeroesContainer {
@@ -17,7 +14,7 @@ interface IHeroesContainer {
 const HeroesContainer = ({ heroes, query }: IHeroesContainer) => {
   const router = useRouter();
 
-  const filteredHeroes = useMemo(() => {
+  const filteredHeroes = React.useMemo(() => {
     if (!query) return heroes;
 
     const { q, type, lane } = query;
@@ -52,14 +49,6 @@ const HeroesContainer = ({ heroes, query }: IHeroesContainer) => {
 
   return (
     <>
-      <GradiantCard
-        className="flex h-fit w-full flex-col-reverse gap-4 px-6 md:sticky md:top-20 md:w-[220px] md:flex-col md:gap-0"
-        variant="clean"
-      >
-        <HeroSearch />
-        <HeroFilter orientation="vertical" />
-      </GradiantCard>
-
       {filteredHeroes.length > 0 ? (
         <div className="grid grid-cols-3 gap-2 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-7">
           {filteredHeroes.map((hero) => (