feat: add tutorials page

apps/docs/src/pages/docs/tutorials/[slug].tsx

@@ -0,0 +1,43 @@
+import { ParsedUrlQuery } from 'querystring'
+import { useMDXComponent } from 'next-contentlayer/hooks'
+import { GetStaticProps } from 'next'
+import { allTutorials } from 'contentlayer/generated'
+import type { Tutorials } from 'contentlayer/generated'
+import { DocsLayout, mdxComponents } from '../../../component/common'
+import { DocHeader } from '../../../component/core'
+
+interface Params extends ParsedUrlQuery {
+  slug: string
+}
+
+export const getStaticProps: GetStaticProps = async ({ params }) => {
+  const { slug } = params as Params
+
+  const post = allTutorials.find((component) => slug === component.slug)
+
+  return { props: { post } }
+}
+
+export function getStaticPaths() {
+  return {
+    paths: allTutorials.map(({ slug }) => ({
+      params: {
+        slug,
+      },
+    })),
+
+    fallback: false,
+  }
+}
+
+export default function Components({ post }: { post: Tutorials }) {
+  const { body, ...rest } = post
+  const Component = useMDXComponent(body.code)
+
+  return (
+    <DocsLayout {...rest}>
+      <DocHeader {...rest} />
+      <Component components={mdxComponents} />
+    </DocsLayout>
+  )
+}

apps/docs/src/pages/docs/tutorials/index.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { allTutorials } from 'contentlayer/generated'
+import type { Tutorials } from 'contentlayer/generated'
+import { Paper, Grid, Text } from '@pillar-ui/core'
+import { Layout } from '../../../component/common'
+import Link from 'next/link'
+
+export async function getStaticProps() {
+  return { props: { tutorials: allTutorials } }
+}
+
+export default function Blog({ tutorials }: { tutorials: Tutorials[] }) {
+  // components.forEach((com) => console.log(com.slug, com.title))
+  return (
+    <Layout>
+      <Paper as={Grid} m="md" grid="repeat(4, 1fr)" gap="sm">
+        {tutorials.map((tutorial) => (
+          <Link href={`utils/${tutorial.slug}`} key={tutorial.slug}>
+            <Paper height="5rem" corner="sm" background="surface-3" padding="xl" className="u_center">
+              <Text size="lg" weight="medium" color="surface">
+                {tutorial.title}
+              </Text>
+            </Paper>
+          </Link>
+        ))}
+      </Paper>
+    </Layout>
+  )
+}

apps/docs/src/pages/docs/utils/index.tsx

@@ -1,15 +1,15 @@
 import React from 'react'
-import { allUtils } from 'contentlayer/generated'
-import type { Utils } from 'contentlayer/generated'
+import { allTutorials } from 'contentlayer/generated'
+import type { Tutorials } from 'contentlayer/generated'
 import { Paper, Grid, Text } from '@pillar-ui/core'
 import Link from 'next/link'
 import { Layout } from '../../../component/common'
 
 export async function getStaticProps() {
-  return { props: { utils: allUtils } }
+  return { props: { utils: allTutorials } }
 }
 
-export default function utils({ utils }: { utils: Utils[] }) {
+export default function utils({ utils }: { utils: Tutorials[] }) {
   return (
     <Layout>
       <Paper as={Grid} m="md" grid="repeat(4, 1fr)" gap="sm">