From 61426a81cb5500afb3203bf1a7570ad7b1a34c3b Mon Sep 17 00:00:00 2001
From: RedBeardEth <90423049+RedBeardEth@users.noreply.github.com>
Date: Mon, 7 Oct 2024 22:55:16 +1100
Subject: [PATCH] fix game page and cleanup

---
 .../src/app/(app)/account/assets/page.tsx     |  6 --
 .../app/(app)/account/assets/realms/page.tsx  | 10 ---
 apps/nextjs/src/app/(app)/blogs/BlogGrid.tsx  | 27 ++++---
 .../src/app/(app)/blogs/[slug]/page.tsx       | 18 ++---
 .../src/app/(app)/games/[slug]/page.tsx       | 76 +++++++++++++------
 5 files changed, 73 insertions(+), 64 deletions(-)

diff --git a/apps/nextjs/src/app/(app)/account/assets/page.tsx b/apps/nextjs/src/app/(app)/account/assets/page.tsx
index c893cd93..7a88857c 100644
--- a/apps/nextjs/src/app/(app)/account/assets/page.tsx
+++ b/apps/nextjs/src/app/(app)/account/assets/page.tsx
@@ -1,5 +1,4 @@
 import type { Metadata } from "next";
-import AssetL2CollectionPreview from "@/app/(app)/account/assets/AssetL2CollectionPreview";
 
 import { Collections } from "@realms-world/constants";
 
@@ -18,11 +17,6 @@ export default function Page() {
     <>
       <div className="h-full w-full space-y-20">
         <Portfolio />
-        {/*<BridgeNftWrapper collection={Collections.REALMS} />
-        <AssetL2CollectionPreview collectionName={Collections.GOLDEN_TOKEN} />
-        <AssetL2CollectionPreview collectionName={Collections.BEASTS} />
-        <AssetL2CollectionPreview collectionName={Collections.BLOBERT} />
-        <AssetL2CollectionPreview collectionName={Collections.BANNERS} />*/}
       </div>
     </>
   );
diff --git a/apps/nextjs/src/app/(app)/account/assets/realms/page.tsx b/apps/nextjs/src/app/(app)/account/assets/realms/page.tsx
index 54dbb705..edd79a95 100644
--- a/apps/nextjs/src/app/(app)/account/assets/realms/page.tsx
+++ b/apps/nextjs/src/app/(app)/account/assets/realms/page.tsx
@@ -1,11 +1,6 @@
 import type { Metadata } from "next";
-import AssetL2CollectionPreview from "@/app/(app)/account/assets/AssetL2CollectionPreview";
-
-import { Collections, CollectionAddresses } from "@realms-world/constants";
 
 import { BridgeNftWrapper } from "../BridgeNftWrapper";
-import { Portfolio } from "../Portfolio";
-import { SUPPORTED_L2_CHAIN_ID } from "@/constants/env";
 
 export function generateMetadata(): Metadata {
   return {
@@ -19,11 +14,6 @@ export default function Page() {
     <>
       <div className="h-full w-full space-y-20">
         <BridgeNftWrapper />
-        {/*<BridgeNftWrapper collection={Collections.REALMS} />
-        <AssetL2CollectionPreview collectionName={Collections.GOLDEN_TOKEN} />
-        <AssetL2CollectionPreview collectionName={Collections.BEASTS} />
-        <AssetL2CollectionPreview collectionName={Collections.BLOBERT} />
-        <AssetL2CollectionPreview collectionName={Collections.BANNERS} />*/}
       </div>
     </>
   );
diff --git a/apps/nextjs/src/app/(app)/blogs/BlogGrid.tsx b/apps/nextjs/src/app/(app)/blogs/BlogGrid.tsx
index 13b47b99..34ae7db7 100644
--- a/apps/nextjs/src/app/(app)/blogs/BlogGrid.tsx
+++ b/apps/nextjs/src/app/(app)/blogs/BlogGrid.tsx
@@ -2,19 +2,18 @@ import { BlogCard } from "./BlogCard";
 import { reader } from "@/utils/keystatic";
 
 export const BlogGrid = async () => {
-    const blogs = await reader.collections.blogs.all();
-    const blogsSortedByDate = blogs.sort(function (a, b) {
-        // Turn your strings into dates, and then subtract them
-        // to get a value that is either negative, positive, or zero.
-        return new Date(b?.entry.publishDate) - new Date(a?.entry.publishDate);
-    });
+  const blogs = await reader.collections.blogs.all();
+  const blogsSortedByDate = blogs.sort(function (a, b) {
+    // Turn your strings into dates, and then subtract them
+    // to get a value that is either negative, positive, or zero.
+    return new Date(b?.entry.publishDate) - new Date(a?.entry.publishDate);
+  });
 
-
-    return (
-        <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
-            {blogsSortedByDate.map((blog, index) => (
-                <BlogCard key={index} blog={blog.entry} slug={blog.slug} />
-            ))}
-        </div>
-    );
+  return (
+    <div className="sm:p4-4 grid grid-cols-1 gap-4 px-8 md:grid-cols-3">
+      {blogsSortedByDate.map((blog, index) => (
+        <BlogCard key={index} blog={blog.entry} slug={blog.slug} />
+      ))}
+    </div>
+  );
 };
diff --git a/apps/nextjs/src/app/(app)/blogs/[slug]/page.tsx b/apps/nextjs/src/app/(app)/blogs/[slug]/page.tsx
index 9a02f23f..d803b6da 100644
--- a/apps/nextjs/src/app/(app)/blogs/[slug]/page.tsx
+++ b/apps/nextjs/src/app/(app)/blogs/[slug]/page.tsx
@@ -54,13 +54,13 @@ export default async function Page({ params }: { params: { slug: string } }) {
   const errors = Markdoc.validate(node);
   if (errors.length) {
     console.error(errors);
-    throw new Error('Invalid content');
+    throw new Error("Invalid content");
   }
   const renderable = Markdoc.transform(node);
 
   return (
     <>
-      <div>
+      <div className="container mx-auto">
         <Breadcrumb>
           <BreadcrumbList>
             <BreadcrumbItem>
@@ -77,8 +77,8 @@ export default async function Page({ params }: { params: { slug: string } }) {
           <p className="mt-2 text-xl">{blog?.subtitle}</p>
           <div className="mt-8 text-xl font-bold">
             <span>Posted on </span>
-            <time dateTime={blog?.publishDate || ''}>
-              {new Date(blog?.publishDate || '').toLocaleDateString()}
+            <time dateTime={blog?.publishDate || ""}>
+              {new Date(blog?.publishDate || "").toLocaleDateString()}
             </time>
             <span> by </span>
             <span>{blog?.author}</span>
@@ -91,7 +91,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
           className="w-full object-cover"
           height={600}
         />
-        <article className="prose prose-lg mx-auto mt-6 max-w-5xl px-6 pb-6 text-xl prose-headings:text-bright-yellow prose-p:font-thin prose-p:text-bright-yellow prose-a:text-flamingo prose-strong:text-bright-yellow prose-ul:text-bright-yellow prose-ol:text-bright-yellow md:mt-12">
+        <article className="prose prose-lg mx-auto mt-6 max-w-5xl px-6 pb-6 text-xl prose-headings:text-bright-yellow prose-p:font-thin prose-p:text-bright-yellow prose-a:text-flamingo prose-strong:text-bright-yellow prose-ol:text-bright-yellow prose-ul:text-bright-yellow md:mt-12">
           <div className="article-container">
             {Markdoc.renderers.react(renderable, React)}
           </div>
@@ -110,9 +110,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
   );
 }
 
-
-
 export async function generateStaticParams() {
-  const blogSlugs = await reader.collections.blogs.list()
-  return blogSlugs.map((blogSlug) => ({ slug: blogSlug }))
-}
\ No newline at end of file
+  const blogSlugs = await reader.collections.blogs.list();
+  return blogSlugs.map((blogSlug) => ({ slug: blogSlug }));
+}
diff --git a/apps/nextjs/src/app/(app)/games/[slug]/page.tsx b/apps/nextjs/src/app/(app)/games/[slug]/page.tsx
index 6042a19e..9240c4ea 100644
--- a/apps/nextjs/src/app/(app)/games/[slug]/page.tsx
+++ b/apps/nextjs/src/app/(app)/games/[slug]/page.tsx
@@ -5,14 +5,30 @@ import { StatusDot } from "@/app/_components/StatusDot";
 import { reader } from "@/utils/keystatic";
 import Markdoc from "@markdoc/markdoc";
 import React from "react";
-import { CHAIN_IDS_TO_NAMES, games } from "@realms-world/constants";
+import { CHAIN_IDS_TO_NAMES } from "@realms-world/constants";
 
 import { Button } from "@realms-world/ui/components/ui/button";
 import { Badge } from "@realms-world/ui/components/ui/badge";
-import { Tabs } from "@mui/material";
-import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator } from "@realms-world/ui/components/ui/breadcrumb";
-import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext } from "@realms-world/ui/components/ui/carousel";
-import { TabsList, TabsTrigger, TabsContent } from "@realms-world/ui/components/ui/tabs";
+import {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbSeparator,
+} from "@realms-world/ui/components/ui/breadcrumb";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+} from "@realms-world/ui/components/ui/carousel";
+import {
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+} from "@realms-world/ui/components/ui/tabs";
 
 export async function generateMetadata({
   params,
@@ -30,12 +46,11 @@ export default async function Page({ params }: { params: { slug: string } }) {
   const keyStaticGame = await reader.collections.games.read(params.slug);
 
   if (!keyStaticGame) return;
-  console.log(keyStaticGame)
-  const { node } = await keyStaticGame.content()
+  const { node } = await keyStaticGame.content();
   const errors = Markdoc.validate(node);
   if (errors.length) {
     console.error(errors);
-    throw new Error('Invalid content');
+    throw new Error("Invalid content");
   }
   const renderable = Markdoc.transform(node);
   const screenshotList = keyStaticGame?.screenshots;
@@ -45,14 +60,18 @@ export default async function Page({ params }: { params: { slug: string } }) {
   }));
 
   // grab studio via developer slug from game so we can spit out the studio's title instead of its slug
-  const studio = await reader.collections.studios.read(keyStaticGame?.developer || '')
-
-
+  const studio = await reader.collections.studios.read(
+    keyStaticGame?.developer || "",
+  );
 
   const tabs = [
     {
       name: "Details",
-      content: <div className="leading-relaxed">{Markdoc.renderers.react(renderable, React)}</div>,
+      content: (
+        <div className="leading-relaxed">
+          {Markdoc.renderers.react(renderable, React)}
+        </div>
+      ),
     },
 
     {
@@ -85,7 +104,6 @@ export default async function Page({ params }: { params: { slug: string } }) {
     },
   ];
 
-
   const tableData = [
     {
       key: "Studio",
@@ -178,7 +196,10 @@ export default async function Page({ params }: { params: { slug: string } }) {
         <>
           {keyStaticGame?.links.homepage && (
             <Button size={"xs"} variant={"outline"} asChild className="w-full">
-              <Link href={`${keyStaticGame?.links.homepage}`}> {keyStaticGame?.title}</Link>
+              <Link href={`${keyStaticGame?.links.homepage}`}>
+                {" "}
+                {keyStaticGame?.title}
+              </Link>
             </Button>
           )}
         </>
@@ -187,7 +208,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
   ];
 
   return (
-    <main className="container mx-auto px-8">
+    <main className="container mx-auto">
       <Breadcrumb>
         <BreadcrumbList>
           <BreadcrumbItem>
@@ -214,9 +235,9 @@ export default async function Page({ params }: { params: { slug: string } }) {
 
         {keyStaticGame && (
           <>
-            <div className="w-full sm:w-9/12 sm:pr-8 px-12">
+            <div className="w-full px-12 sm:w-9/12 sm:pr-8">
               {keyStaticGame.screenshots.length && (
-                <Carousel className="sm:h-96 w-full sm:max-h-[750px] sm:min-h-[750px]">
+                <Carousel className="w-full sm:h-96 sm:max-h-[750px] sm:min-h-[750px]">
                   <CarouselContent>
                     {list.map((image, index) => (
                       <CarouselItem key={index}>
@@ -225,7 +246,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
                           alt={image.alt}
                           width={1096}
                           height={750}
-                          className="h-full w-full object-cover rounded border"
+                          className="h-full w-full rounded border object-cover"
                         />
                       </CarouselItem>
                     ))}
@@ -238,7 +259,12 @@ export default async function Page({ params }: { params: { slug: string } }) {
 
             <div className="pl-4 sm:w-3/12">
               <div className="flex justify-center py-8">
-                <Image alt="" src={`/content/games/${params.slug}/${keyStaticGame?.icon}`} width={250} height={100} />
+                <Image
+                  alt=""
+                  src={`/content/games/${params.slug}/${keyStaticGame?.icon}`}
+                  width={250}
+                  height={100}
+                />
               </div>
 
               <div className="flex-col space-y-2">
@@ -249,7 +275,10 @@ export default async function Page({ params }: { params: { slug: string } }) {
                     asChild
                     className="w-full"
                   >
-                    <Link href={`${keyStaticGame?.links.homepage}`}> Play {keyStaticGame?.title}</Link>
+                    <Link href={`${keyStaticGame?.links.homepage}`}>
+                      {" "}
+                      Play {keyStaticGame?.title}
+                    </Link>
                   </Button>
                 )}
 
@@ -294,8 +323,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
   );
 }
 
-
 export async function generateStaticParams() {
-  const gameSlugs = await reader.collections.games.list()
-  return gameSlugs.map((gameSlug) => ({ slug: gameSlug }))
-}
\ No newline at end of file
+  const gameSlugs = await reader.collections.games.list();
+  return gameSlugs.map((gameSlug) => ({ slug: gameSlug }));
+}