omnifed · caseybaggz · May 9, 2024 · May 9, 2024 · May 9, 2024 · May 9, 2024
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -6,7 +6,10 @@
     "oxlint",
     "Positionals",
     "rehype",
-    "tseslint"
+    "Shiki",
+    "shikijs",
+    "tseslint",
+    "Twoslash"
   ],
   "prettier.configPath": ".prettierrc",
   "prettier.prettierPath": "./node_modules/prettier",

diff --git a/docs/app/components/Admonition.tsx b/docs/app/components/Admonition.tsx
@@ -0,0 +1,43 @@
+import { css } from '@/styled-system/css'
+import { hstack } from '@/styled-system/patterns'
+import { Information } from '@cerberus-design/icons'
+import type { PropsWithChildren } from 'react'
+
+// TODO: Replace with React version when available
+
+interface AdmonitionProps {
+  heading: string
+  description: string
+}
+
+export function Admonition(props: PropsWithChildren<AdmonitionProps>) {
+  return (
+    <div
+      className={css({
+        borderColor: 'info.border.initial',
+        bgColor: 'info.surface.initial',
+        color: 'info.text.initial',
+        mb: '6',
+        p: '4',
+        rounded: 'xl',
+      })}
+    >
+      <div
+        className={hstack({
+          pb: '2',
+        })}
+      >
+        <Information aria-hidden size="1.25rem" />
+        <p
+          className={css({
+            pb: 'initial !important',
+            textStyle: 'h5 !important',
+          })}
+        >
+          {props.heading}
+        </p>
+      </div>
+      <p>{props.description}</p>
+    </div>
+  )
+}
diff --git a/docs/app/icons/layout.tsx b/docs/app/icons/layout.tsx
@@ -0,0 +1,21 @@
+import type { PropsWithChildren } from 'react'
+import { cx } from '@/styled-system/css'
+import { container } from '@/styled-system/patterns'
+import { markdown } from '../styles/markdown'
+
+interface IconsProps {}
+
+export default function IconsLayout(props: PropsWithChildren<IconsProps>) {
+  return (
+    <div
+      className={cx(
+        container({
+          pt: '12',
+        }),
+        markdown,
+      )}
+    >
+      {props.children}
+    </div>
+  )
+}
diff --git a/docs/app/icons/overview.mdx b/docs/app/icons/overview.mdx
@@ -0,0 +1,17 @@
+import {
+  Admonition,
+  AdmonitionHeading,
+  AdmonitionText,
+} from '@/app/components/Admonition'
+
+# Overview
+
+The Cerberus Icons library is a optional library to add visual elements to your React app.
+
+## Installation
+
+Install the Cerberus Icons library, with the package manager of your choice:
+
+```bash
+pnpm install '@cerberus-design/icons'
+```
diff --git a/docs/app/icons/page.tsx b/docs/app/icons/page.tsx
@@ -1,7 +1,14 @@
-export default function LearnPage() {
+import { css } from '@/styled-system/css'
+import Overview from './overview.mdx'
+
+export default function IconsPage() {
   return (
-    <main>
-      <h1>Learn</h1>
+    <main
+      className={css({
+        py: '6',
+      })}
+    >
+      <Overview />
     </main>
   )
 }
diff --git a/docs/app/layout.tsx b/docs/app/layout.tsx
@@ -2,9 +2,10 @@ import type { Metadata } from 'next'
 import { Poppins } from 'next/font/google'
 import type { PropsWithChildren } from 'react'
 import { ThemeProvider } from '@cerberus-design/react'
+import { css, cx } from '@/styled-system/css'
 import { Nav } from './components/Nav'
 
-import './night-owl.css'
+import './two-slash.css'
 import './globals.css'
 
 const poppins = Poppins({
@@ -24,7 +25,14 @@ interface RootProps {}
 export default function RootLayout(props: PropsWithChildren<RootProps>) {
   return (
     <html lang="en" data-theme="cerberus" data-color-mode="light">
-      <body className={poppins.className}>
+      <body
+        className={cx(
+          poppins.className,
+          css({
+            minW: '18.75rem',
+          }),
+        )}
+      >
         <ThemeProvider>
           <Nav />
           {props.children}

diff --git a/docs/app/night-owl.css b/docs/app/night-owl.css
diff --git a/docs/app/preset/layout.tsx b/docs/app/preset/layout.tsx
@@ -0,0 +1,21 @@
+import type { PropsWithChildren } from 'react'
+import { cx } from '@/styled-system/css'
+import { container } from '@/styled-system/patterns'
+import { markdown } from '../styles/markdown'
+
+interface PresetProps {}
+
+export default function PresetLayout(props: PropsWithChildren<PresetProps>) {
+  return (
+    <div
+      className={cx(
+        container({
+          pt: '12',
+        }),
+        markdown,
+      )}
+    >
+      {props.children}
+    </div>
+  )
+}
diff --git a/docs/app/preset/overview.mdx b/docs/app/preset/overview.mdx
@@ -0,0 +1,17 @@
+import {
+  Admonition,
+  AdmonitionHeading,
+  AdmonitionText,
+} from '@/app/components/Admonition'
+
+# Overview
+
+The Cerberus Panda CSS Preset adds a set of core features to the Cerberus Design System.
+
+## Installation
+
+Install the Cerberus Panda Preset library, with the package manager of your choice:
+
+```bash
+pnpm install '@cerberus-design/panda-preset'
+```
diff --git a/docs/app/preset/page.tsx b/docs/app/preset/page.tsx
@@ -1,7 +1,14 @@
-export default function BlogPage() {
+import { css } from '@/styled-system/css'
+import Overview from './overview.mdx'
+
+export default function PresetPage() {
   return (
-    <main>
-      <h1>Blog</h1>
+    <main
+      className={css({
+        py: '6',
+      })}
+    >
+      <Overview />
     </main>
   )
 }
diff --git a/docs/app/react/layout.tsx b/docs/app/react/layout.tsx
@@ -1,18 +1,20 @@
-import type { Metadata } from 'next'
 import type { PropsWithChildren } from 'react'
+import { cx } from '@/styled-system/css'
+import { container } from '@/styled-system/patterns'
 import { markdown } from '../styles/markdown'
 
-export const metadata: Metadata = {
-  title: 'Cerberus Design System | React',
-  description:
-    'The Cerberus Design System React library provides a set of components and utilities to help you build your application.',
-}
-
 interface ReactProps {}
 
 export default function ReactLayout(props: PropsWithChildren<ReactProps>) {
   return (
-    <div className={markdown}>
+    <div
+      className={cx(
+        container({
+          pt: '12',
+        }),
+        markdown,
+      )}
+    >
       <header>Nav sidebar</header>
       {props.children}
     </div>