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) => (