fixed back button, updated packages, made adjustements

app/(content)/(gaming)/games/[gameid]/page.tsx

 import AddGameDropdown from "@/components/add-game-dropdown";
-import AddGameToFinishedList from "@/components/add-game-to-finished-list";
-import AddGameToPlanList from "@/components/add-game-to-plan-list";
-import AddGameToPlayingList from "@/components/add-game-to-playing-list";
 import AddGameToFavList from "@/components/addGameToFavList";
+import { BackHeader } from "@/components/back-header";
 import { AspectRatio } from "@/components/ui/aspect-ratio";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
@@ -36,6 +34,12 @@ export default async function GameDetail({ params }: { params: { gameid: string
     return (
         <div className="main-content h-full">
             <Card className="w-full h-full overflow-hidden">
+                <div className="p-3">
+                    <BackHeader>
+                        <h1 className="font-bold">Game</h1>
+                    </BackHeader>
+                </div>
+
                 <div className="h-64 overflow-hidden">
                     <AspectRatio ratio={889 / 500}>
                         <Image

app/(content)/(gaming)/games/page.tsx

@@ -7,7 +7,7 @@ export default async function GamesPage() {
     return (
         <main className="main-content">
             <div className="flex justify-center">
-                <div className="fixed top-30 z-50">
+                <div className="fixed top-30 z-40">
                     <ScrollToTop />
                 </div>
                 <InfiniteScrollGames />

app/(content)/(home)/home/[postid]/page.tsx

-// import { PostCommentForm } from "@/components/comment-gweets";
-
-export default async function PostDetail({ params }: { params: { postid: string } }) {
-    const postid = params.postid
-
-    return (
-        <div className="main-content px-3 pb-3">
-            <div className="lg:col-span-1">
-                {/* <PostCommentForm postid={postid} /> */}
-            </div>
-
-            <div className="side-content">
-                <div className="flex-col">
-
-                </div>
-            </div>
-        </div>
-    )
-}
\ No newline at end of file

app/(content)/(user)/[userid]/status/[id]/page.tsx

+import { BackHeader } from "@/components/back-header";
 import { GweetDetails } from "@/components/gweets/components/gweet-details";
-import { GweetHeader } from "@/components/layout";
+import { Card } from "@/components/ui/card";
 
 export default async function GweetDetailPage() {
     return (
-        <div>
-            <GweetHeader />
+        <Card className="w-full h-full p-3 xl:p-6 ">
+            <BackHeader>
+                <h1 className="font-bold">Gweet</h1>
+            </BackHeader>
+
             <GweetDetails />
-        </div>
+        </Card>
     );
 };
\ No newline at end of file

app/(content)/layout.tsx

@@ -16,7 +16,7 @@ export default async function ContentLayout({
 
     return (
         <div className="flex min-h-screen flex-col space-y-6">
-            <header className="sticky top-0 z-40 border-b bg-background">
+            <header className="sticky top-0 z-50 border-b bg-background">
                 <div className="container flex h-16 items-center justify-between py-4">
                     <MainNav />
                     <SearchInput className="p-3 md:w-2/3 2xl:w-1/3" />

app/layout.tsx

 import { Inter } from 'next/font/google'
 import './globals.css'
 
-import Providers from '@/components/react-query/provider'
 import { ThemeProvider } from '@/components/ui/theme-provider'
 import { Toaster } from '@/components/ui/toaster'
+import Providers from '@/lib/react-query/provider'
 
 const inter = Inter({ subsets: ['latin'] })
 

components/back-button.tsx

@@ -10,7 +10,7 @@ export const BackButton = () => {
     return (
         <Button
             variant="ghost"
-            size="lg"
+            size="icon"
             onClick={() => router.back()}
             title="Go Back"
         >

components/layout/components/gweet-header.tsx → components/back-header.tsx

 import { BackButton } from "@/components/back-button";
 
-
-export const GweetHeader = () => {
+export const BackHeader = ({ children }: { children: React.ReactNode }) => {
   return (
-    <div className="">
+    <div className="flex items-center space-x-3">
       <BackButton />
-      <h2 className="">Gweet</h2>
+      {children}
     </div>
   );
-};
+}
\ No newline at end of file

components/create-gweet/components/create-gweet.tsx

@@ -226,7 +226,7 @@ export const CreateGweet = ({
                             type="button"
                             size="icon"
                             variant="secondary"
-                            className="rounded-full absolute top-1 right-1 z-50"
+                            className="rounded-full absolute top-1 right-1 z-40"
                             onClick={() => {
                               setChosenImages(
                                 chosenImages.filter((img, j) => j !== i),
@@ -251,7 +251,7 @@ export const CreateGweet = ({
             </Card>
 
             <div className="flex justify-end">
-              <Button type="submit" size="lg" className=" w-20" disabled={isLoading || !session.user}>
+              <Button type="submit" size="lg" className="w-20" disabled={isLoading || !session.user}>
                 {isLoading ? (
                   <Icons.spinner className="h-4 w-4 animate-spin" />
                 ) : (

components/gweets/components/actions/comment-button.tsx

@@ -6,7 +6,7 @@ import { Icons } from "@/components/icons";
 export const CommentButton = ({ gweet }: { gweet: IGweet }) => {
   return (
     <div className="relative inline-flex items-center">
-      <Button variant="ghost" size="icon" className="hover:bg-sky-800 z-50">
+      <Button variant="ghost" size="icon" className="hover:bg-sky-800 z-40">
         <Icons.messagecircle className="w-6 h-6" />
       </Button>
 

components/gweets/components/actions/regweet-button.tsx

@@ -24,7 +24,7 @@ export const RegweetButton = ({ gweet }: { gweet: IGweet }) => {
             });
           }
         }}
-        variant="ghost" size="icon" className="hover:bg-green-800 z-50"
+        variant="ghost" size="icon" className="hover:bg-green-800 z-40"
       >
         {hasRegweeted ?
           <Icons.regweet className="w-6 h-6 text-green-600" />

components/gweets/components/comments.tsx

 import { TryAgain } from "@/components/try-again";
 
+import LoadingItem from "@/components/loading-item";
 import { useGweets } from "../hooks/use-gweets";
-
-import { Icons } from "@/components/icons";
 import { InfiniteGweets } from "./infinite-gweets";
 
 export const Comments = ({ gweetId }: { gweetId: string }) => {
@@ -21,7 +20,7 @@ export const Comments = ({ gweetId }: { gweetId: string }) => {
   });
 
   if (isLoading) {
-    return <Icons.spinner className="mt-3 h-4 w-4 animate-spin align-middle" />;
+    return <LoadingItem />;
   }
 
   if (isError) {

components/gweets/components/gweet-details.tsx

 "use client"
 
 import { CreateGweetWrapper } from "@/components/create-gweet/components/create-gweet-wrapper";
-import { Icons } from "@/components/icons";
+import LoadingItem from "@/components/loading-item";
 import { TryAgain } from "@/components/try-again";
 import { Card } from "@/components/ui/card";
 import { Separator } from "@/components/ui/separator";
@@ -21,7 +21,7 @@ export const GweetDetails = () => {
     const { data: gweet, isLoading, isError } = useGweet(id);
 
     if (isLoading) {
-        return <Icons.spinner className="h-4 w-4 animate-spin" />;
+        return <LoadingItem />;
     }
 
     if (isError) {
@@ -33,7 +33,7 @@ export const GweetDetails = () => {
     }
 
     return (
-        <Card className="w-full h-full mt-12 p-3 xl:p-6 ">
+        <>
             <div className="flex flex-col space-y-3 px-3 pt-3">
                 <GweetAuthor gweet={gweet} />
 
@@ -83,6 +83,6 @@ export const GweetDetails = () => {
             </div>
             <Separator className="h-1 mb-3" />
             <Comments gweetId={gweet?.id} />
-        </Card>
+        </>
     );
 };
\ No newline at end of file

components/gweets/components/gweets.tsx

 "use client";
 
+import LoadingItem from "@/components/loading-item";
 import { TryAgain } from "@/components/try-again";
-
-import { useGweets } from "../hooks/use-gweets";
-
-import { Icons } from "@/components/icons";
 import { Card } from "@/components/ui/card";
+import { useGweets } from "../hooks/use-gweets";
 import { InfiniteGweets } from "./infinite-gweets";
 
 export const Gweets = () => {
@@ -20,7 +18,7 @@ export const Gweets = () => {
   } = useGweets({});
 
   if (isLoading) {
-    return <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />;
+    return <LoadingItem />;
   }
 
   if (isError) {

components/gweets/components/infinite-gweets.tsx

 "use client"
 
+import LoadingItem from "@/components/loading-item";
+import { Separator } from "@/components/ui/separator";
 import { useEffect } from "react";
 import { useInView } from "react-intersection-observer";
-
 import { IInfiniteGweets } from "../types";
-
-import { Icons } from "@/components/icons";
-import { Separator } from "@/components/ui/separator";
 import { Gweet } from "./gweet";
 
 export const InfiniteGweets = ({
@@ -47,7 +45,7 @@ export const InfiniteGweets = ({
           ));
         })}
 
-      {isFetchingNextPage && <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />}
+      {isFetchingNextPage && <LoadingItem />}
     </div>
   );
-};
+};
\ No newline at end of file

components/layout/index.ts

-export * from "./components/gweet-header";

components/loading-item.tsx

+import { Icons } from "./icons"
+
+export default function LoadingItem() {
+    return (
+        <div className="w-full m-6 flex items-center justify-center">
+            <Icons.spinner className="h-6 w-6 animate-spin" />
+        </div>
+    )
+}
\ No newline at end of file