add gist details page

app/g/[id]/page.tsx

@@ -0,0 +1,66 @@
+import GistsCode from 'app/gists/gists-code';
+import LinkAnchor from 'components/mdx/link-anchor';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import { getSignalGist } from 'lib/fetcher';
+import Image from 'next/image';
+import Link from 'next/link';
+import { notFound } from 'next/navigation';
+import avatar from 'public/images/img/avatar.svg';
+
+export const revalidate = 600;
+
+dayjs.extend(relativeTime);
+
+export default async function Page({
+  params,
+}: {
+  params: {
+    id: string;
+  };
+}) {
+  if (typeof params.id !== 'string') notFound();
+  const gist = await getSignalGist(params.id);
+  if (!gist || !gist.files) notFound();
+
+  return (
+    <>
+      <main className="max-w-5xl px-4 mx-auto lg:px-0">
+        <div className="pb-4 text-sm">
+          <div className="flex items-center py-1 ">
+            <Image
+              src={avatar}
+              alt="Avatar"
+              priority
+              width={32}
+              height={32}
+              className="rounded-full "
+            />
+            <h1 className="ml-2 overflow-hidden text-xl whitespace-nowrap overflow-ellipsis">
+              <Link href="/gists">
+                <LinkAnchor external={false}>{gist.login}</LinkAnchor>
+              </Link>
+              /{Object.keys(gist.files)[0]}
+            </h1>
+          </div>
+
+          <p className="pl-10 text-gray-400 ">
+            Last active: {dayjs(gist.updated_at).fromNow()}
+          </p>
+
+          <div className="py-4">
+            <p className="pb-2 text-lg text-gray-500">{gist.description}</p>
+
+            {Object.keys(gist.files).map((f) => (
+              <GistsCode
+                key={gist.files[f].raw_url}
+                file={gist.files[f]}
+                showFileName
+              />
+            ))}
+          </div>
+        </div>
+      </main>
+    </>
+  );
+}

app/g/layout.tsx

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+
+export const revalidate = 600;
+
+export default async function PageLayout({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  return <>{children}</>;
+}

app/gists/layout.tsx

@@ -1,7 +1,7 @@
-import UserInfo from './user-info';
-import { ReactNode, Suspense } from 'react';
-import UserInfoLoading from './user-info-skeleton';
 import { Metadata } from 'next';
+import { ReactNode, Suspense } from 'react';
+import UserInfo from './user-info';
+import UserInfoLoading from './user-info-skeleton';
 
 export const revalidate = 600;
 export const metadata: Metadata = {
@@ -29,4 +29,4 @@ export default async function PageLayout({
       </main>
     </>
   );
-}
+}