Merge pull request #9 from omnifed/8-docs-add-fonts-panda-css

8 docs add fonts panda css
omnifed · Apr 29, 2024 · 7af7af2 · 7af7af2
2 parents e552d9c + a06c921
commit 7af7af2
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 8 deletions.
diff --git a/docs/app/layout.tsx b/docs/app/layout.tsx
@@ -1,22 +1,25 @@
 import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
+import { Poppins } from 'next/font/google'
+import type { PropsWithChildren } from 'react'
 import './globals.css'
 
-const inter = Inter({ subsets: ['latin'] })
+const poppins = Poppins({
+  display: 'swap',
+  subsets: ['latin'],
+  weight: ['400', '600', '700', '800'],
+})
 
 export const metadata: Metadata = {
   title: 'Create Next App',
   description: 'Generated by create next app',
 }
 
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode
-}>) {
+interface RootProps {}
+
+export default function RootLayout(props: PropsWithChildren<RootProps>) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={poppins.className}>{props.children}</body>
     </html>
   )
 }
diff --git a/docs/package.json b/docs/package.json
@@ -17,6 +17,7 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@cerberus-design/panda-preset": "workspace:*",
     "eslint": "8.57.0",
     "eslint-config-next": "14.2.3"
   }

diff --git a/packages/panda-preset/README.md b/packages/panda-preset/README.md
@@ -37,6 +37,18 @@ export default defineConfig({
 - [Semantic Tokens](./src/theme/semanticTokens/index.ts)
 - [Recipes](./src/recipes/index.ts)
 
+## NextJS Font Features
+
+If you use NextJS, we recommend the font and settings mentioned below. Unfortunately, NextJS enforces a rule of `Font loader values must be explicitly written literals.` which means you cannot use a variable to define the font settings or else we would also provide that. :sob:
+
+```typescript
+const poppins = Poppins({
+  display: 'swap',
+  subsets: ['latin'],
+  weight: ['400', '600', '700', '800'],
+})
+```
+
 ---
 
 _Copyright (c) 2024 Digital University, All Rights Reserved_
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml