Align site with React 18 & Tailwind 3

timolins · Jul 8, 2022 · 8b716de · 8b716de
1 parent 8fd03db
commit 8b716de
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 60 deletions.
diff --git a/site/components/docs-layout.tsx b/site/components/docs-layout.tsx
@@ -7,6 +7,7 @@ import Logo from '../assets/logo-small.svg';
 
 const TableItem: React.FC<{
   href: string;
+  children?: React.ReactNode;
 }> = ({ children, href }) => (
   <Link href={href}>
     <a className="rounded px-3 py-1.5 transition-colors duration-200 relative block hover:text-toast-500 text-toast-700">
@@ -15,7 +16,9 @@ const TableItem: React.FC<{
   </Link>
 );
 
-const TableHeader: React.FC = ({ children }) => (
+const TableHeader: React.FC<{
+  children?: React.ReactNode;
+}> = ({ children }) => (
   <span className="px-3 mt-3 mb-1 text-sm font-semibold tracking-wide text-toast-900 uppercase">
     {children}
   </span>

diff --git a/site/components/emoji-button.tsx b/site/components/emoji-button.tsx
@@ -1,6 +1,7 @@
 export const EmojiButton: React.FC<{
   onClick: () => void;
   emoji: string | JSX.Element;
+  children?: React.ReactNode;
 }> = ({ onClick, children, emoji }) => (
   <button
     className="rounded bg-white text-sm font-semibold py-2 px-2 shadow-small-button flex items-center"

diff --git a/site/components/sections/toaster-example.tsx b/site/components/sections/toaster-example.tsx
@@ -4,7 +4,6 @@ import Arrow from '../../assets/arrow.svg';
 import { Code } from '../code';
 
 import { EmojiButton } from '../emoji-button';
-import { SplitbeeCounter } from './splitbee-counter';
 
 export const positions: Array<ToastPosition> = [
   'top-left',

diff --git a/site/package.json b/site/package.json
@@ -8,12 +8,12 @@
   "dependencies": {
     "@mdx-js/loader": "^2.1.2",
     "@mdx-js/react": "^2.1.2",
-    "@next/mdx": "^12.2.0",
+    "@next/mdx": "^12.2.1",
     "@svgr/webpack": "^6.2.1",
     "@tailwindcss/typography": "^0.5.2",
     "@types/prismjs": "^1.26.0",
     "clsx": "^1.1.1",
-    "next": "^12.2.0",
+    "next": "^12.2.1",
     "next-seo": "^5.4.0",
     "postcss": "^8.4.14",
     "prism-react-renderer": "^1.3.5",

diff --git a/site/pages/index.tsx b/site/pages/index.tsx
@@ -21,7 +21,7 @@ import Link from 'next/link';
 
 const version = packageInfo.version;
 
-const Feature: React.FC = ({ children }) => (
+const Feature: React.FC<{ children?: React.ReactNode }> = ({ children }) => (
   <div className="flex gap-1 items-center">
     <Checkmark />
     <span className="font-bold">{children}</span>

diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml
diff --git a/site/tailwind.config.js b/site/tailwind.config.js
@@ -1,14 +1,13 @@
 module.exports = {
   mode: 'jit',
-  purge: [
+  content: [
     './pages/*.tsx',
     './pages/**/*.tsx',
     './pages/*.mdx',
     './pages/**/*.mdx',
     './components/*.tsx',
     './components/**/*.tsx',
   ],
-  darkMode: false, // or 'media' or 'class'
   theme: {
     extend: {
       boxShadow: {