Make the playground mobile friendly (#66)

vercel · Nov 10, 2022 · 8387f91 · 8387f91 · vercel · Nov 10, 2022
1 parent 3035b1a
commit 8387f91
Show file tree

Hide file tree

Showing 77 changed files with 872 additions and 844 deletions.
diff --git a/app/GlobalNav.tsx b/app/GlobalNav.tsx
diff --git a/app/context/CategoryNav.tsx b/app/context/CategoryNav.tsx
diff --git a/app/context/SubCategoryNav.tsx b/app/context/SubCategoryNav.tsx
diff --git a/app/context/[categorySlug]/layout.tsx b/app/context/[categorySlug]/layout.tsx
@@ -1,7 +1,7 @@
 import { fetchCategoryBySlug, PageProps } from '#/lib/getCategories';
 import { Boundary } from '#/ui/Boundary';
+import { TabGroup } from '#/ui/TabGroup';
 import { Counter } from '../ClickCounter';
-import SubCategoryNav from '../SubCategoryNav';
 
 export default async function Layout({ children, params }: PageProps) {
   const category = await fetchCategoryBySlug(params.categorySlug);
@@ -10,7 +10,18 @@ export default async function Layout({ children, params }: PageProps) {
   return (
     <Boundary labels={['Layout [Server Component]']} animateRerendering={false}>
       <div className="space-y-9">
-        <SubCategoryNav category={category} />
+        <TabGroup
+          path={`/context/${category.slug}`}
+          items={[
+            {
+              text: 'All',
+            },
+            ...category.items.map((x) => ({
+              text: x.name,
+              slug: x.slug,
+            })),
+          ]}
+        />
         <Counter />
         <div>{children}</div>
       </div>

diff --git a/app/context/layout.tsx b/app/context/layout.tsx
@@ -1,8 +1,8 @@
 import { fetchCategories } from '#/lib/getCategories';
 import { Boundary } from '#/ui/Boundary';
+import { TabGroup } from '#/ui/TabGroup';
 import { CounterProvider } from 'app/context/CounterContext';
 import React from 'react';
-import CategoryNav from './CategoryNav';
 import ClickCounter from './ClickCounter';
 
 export default async function Layout({
@@ -30,8 +30,19 @@ export default async function Layout({
             animateRerendering={false}
           >
             <div className="space-y-9">
-              <div className="flex items-center justify-between">
-                <CategoryNav categories={categories} />
+              <div className="flex justify-between">
+                <TabGroup
+                  path="/context"
+                  items={[
+                    {
+                      text: 'Home',
+                    },
+                    ...categories.map((x) => ({
+                      text: x.name,
+                      slug: x.slug,
+                    })),
+                  ]}
+                />
               </div>
 
               <ClickCounter />

diff --git a/app/context/page.tsx b/app/context/page.tsx
@@ -1,3 +1,5 @@
+import { ExternalLink } from '#/ui/ExternalLink';
+
 export default function Page() {
   return (
     <div className="space-y-4">
@@ -18,12 +20,9 @@ export default function Page() {
       </div>
 
       <div>
-        <a
-          className="font-medium text-gray-300 hover:text-white"
-          href="https://beta.nextjs.org/docs/rendering/server-and-client-components#using-context"
-        >
-          Learn more
-        </a>
+        <ExternalLink href="https://beta.nextjs.org/docs/rendering/server-and-client-components#using-context">
+          Docs
+        </ExternalLink>
       </div>
     </div>
   );

diff --git a/app/error-handling/CategoryNav.tsx b/app/error-handling/CategoryNav.tsx
diff --git a/app/error-handling/[categorySlug]/SubCategoryNav.tsx b/app/error-handling/[categorySlug]/SubCategoryNav.tsx
diff --git a/app/error-handling/[categorySlug]/[subCategorySlug]/page.tsx b/app/error-handling/[categorySlug]/[subCategorySlug]/page.tsx
@@ -17,7 +17,7 @@ export default async function Page({ params }: PageProps) {
         <BuggyButton />
       </div>
 
-      <div className="grid grid-cols-3 gap-6">
+      <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
         {Array.from({ length: category.count }).map((_, i) => (
           <SkeletonCard key={i} />
         ))}

diff --git a/app/error-handling/[categorySlug]/layout.tsx b/app/error-handling/[categorySlug]/layout.tsx
@@ -1,16 +1,30 @@
 import { fetchCategoryBySlug, type PageProps } from '#/lib/getCategories';
-import ClickCounter from '#/ui/ClickCounter';
-import SubCategoryNav from './SubCategoryNav';
+import { ClickCounter } from '#/ui/ClickCounter';
+import { TabGroup } from '#/ui/TabGroup';
 
 export default async function Layout({ children, params }: PageProps) {
   const category = await fetchCategoryBySlug(params.categorySlug);
   if (!category) return null;
   return (
     <div className="space-y-9">
       <div>
-        <div className="flex items-center justify-between">
-          <SubCategoryNav category={category} />
-          <ClickCounter />
+        <div className="flex justify-between">
+          <TabGroup
+            path={`/error-handling/${category.slug}`}
+            items={[
+              {
+                text: 'All',
+              },
+              ...category.items.map((x) => ({
+                text: x.name,
+                slug: x.slug,
+              })),
+            ]}
+          />
+
+          <div className="self-start">
+            <ClickCounter />
+          </div>
         </div>
       </div>
 

diff --git a/app/error-handling/[categorySlug]/page.tsx b/app/error-handling/[categorySlug]/page.tsx
@@ -16,7 +16,7 @@ export default async function Page({ params }: PageProps) {
         <BuggyButton />
       </div>
 
-      <div className="grid grid-cols-3 gap-6">
+      <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
         {Array.from({ length: 9 }).map((_, i) => (
           <SkeletonCard key={i} />
         ))}

diff --git a/app/error-handling/layout.tsx b/app/error-handling/layout.tsx
@@ -1,7 +1,7 @@
 import { fetchCategories } from '#/lib/getCategories';
-import ClickCounter from '#/ui/ClickCounter';
+import { ClickCounter } from '#/ui/ClickCounter';
+import { TabGroup } from '#/ui/TabGroup';
 import React from 'react';
-import CategoryNav from './CategoryNav';
 
 export default async function Layout({
   children,
@@ -11,9 +11,23 @@ export default async function Layout({
   const categories = await fetchCategories();
   return (
     <div className="space-y-9">
-      <div className="flex items-center justify-between">
-        <CategoryNav categories={categories} />
-        <ClickCounter />
+      <div className="flex justify-between">
+        <TabGroup
+          path="/error-handling"
+          items={[
+            {
+              text: 'Home',
+            },
+            ...categories.map((x) => ({
+              text: x.name,
+              slug: x.slug,
+            })),
+          ]}
+        />
+
+        <div className="self-start">
+          <ClickCounter />
+        </div>
       </div>
 
       <div>{children}</div>

diff --git a/app/error-handling/page.tsx b/app/error-handling/page.tsx
@@ -1,4 +1,5 @@
 import BuggyButton from '#/ui/BuggyButton';
+import { ExternalLink } from '#/ui/ExternalLink';
 
 export default function Page() {
   return (
@@ -27,12 +28,9 @@ export default function Page() {
       </ul>
 
       <div>
-        <a
-          className="font-medium text-gray-300 hover:text-white"
-          href="https://beta.nextjs.org/docs/routing/error-handling"
-        >
-          Learn more
-        </a>
+        <ExternalLink href="https://beta.nextjs.org/docs/routing/error-handling">
+          Docs
+        </ExternalLink>
       </div>
     </div>
   );

diff --git a/app/head.tsx b/app/head.tsx
@@ -0,0 +1,12 @@
+export default function Head() {
+  return (
+    <>
+      <meta name="viewport" content="width=device-width, initial-scale=1" />
+      <title>Next.js 13: App Directory Playground</title>
+      <meta
+        name="description"
+        content="A playground to explore new Next.js 13 app directory features such as nested layouts, instant loading states, streaming, and component level data fetching."
+      />
+    </>
+  );
+}