Update packages

ixkaito · Jan 20, 2023 · 8d1d11f · 8d1d11f
1 parent c4eadb6
commit 8d1d11f
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 69 deletions.
diff --git a/components/ActiveLink.tsx b/components/ActiveLink.tsx
@@ -1,34 +1,33 @@
 import { useRouter } from 'next/router'
 import Link, { LinkProps } from 'next/link'
-import React, { Children, ReactElement } from 'react'
+import React, { ReactNode } from 'react'
+import clsx from 'clsx'
 
 type Props = {
-  children: ReactElement
+  children: ReactNode
+  className?: string
   activeClassName?: string
 } & LinkProps
 
 const ActiveLink: React.FC<Props> = ({
   children,
-  activeClassName,
+  className,
+  activeClassName = 'active',
   ...props
 }) => {
   const { asPath } = useRouter()
-  const child = Children.only(children)
-  const childClassName = child.props.className || ''
 
-  // pages/index.js will be matched via props.href
-  // pages/about.js will be matched via props.href
+  // pages/index.tsx or pages/about.tsx will be matched via props.href
   // pages/[slug].js will be matched via props.as
-  const className =
-    asPath === props.href || asPath === props.as
-      ? `${childClassName} ${activeClassName || 'active'}`.trim()
-      : childClassName
-
   return (
-    <Link {...props}>
-      {React.cloneElement(child, {
-        className: className || null,
-      })}
+    <Link
+      {...props}
+      className={clsx(
+        className,
+        (asPath === props.href || asPath === props.as) && activeClassName
+      )}
+    >
+      {children}
     </Link>
   )
 }

diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -1,6 +1,6 @@
 const Footer: React.FC = () => {
   return (
-    <footer className="p-4 bg-gray-50 border-t border-gray-200">
+    <footer className="border-t border-gray-200 bg-gray-50 p-4">
       <p className="text-center">© 2021 KITERETZ inc.</p>
     </footer>
   )

diff --git a/components/Header.tsx b/components/Header.tsx
@@ -2,29 +2,31 @@ import Link from './ActiveLink'
 
 const Header: React.FC = () => {
   return (
-    <header className="px-4 border-b border-gray-200">
+    <header className="border-b border-gray-200 px-4">
       <nav>
-        <style jsx>{`
-          a {
-            @apply text-gray-500 inline-block hover:text-black;
-            padding: 1em 0.1em 0.75em;
-          }
-
-          .active {
-            @apply text-black border-b-2 border-solid border-black;
-          }
-        `}</style>
-        <ul className="flex gap-8 justify-center">
-          <li>
-            <Link href="/">
-              <a>Home</a>
-            </Link>
-          </li>
-          <li>
-            <Link href="/about/">
-              <a>About</a>
-            </Link>
-          </li>
+        <ul className="flex justify-center gap-8">
+          {[
+            {
+              label: 'Home',
+              href: '/',
+            },
+            {
+              label: 'About',
+              href: '/about/',
+            },
+          ].map(({ href, label }) => {
+            return (
+              <li>
+                <Link
+                  className="text-gray-500 inline-block hover:text-black pt-[1em] px-[0.1em] pb-[0.75em]"
+                  activeClassName="text-black border-b-2 border-solid border-black"
+                  href={href}
+                >
+                  {label}
+                </Link>
+              </li>
+            )
+          })}
         </ul>
       </nav>
     </header>

diff --git a/components/Layout.tsx b/components/Layout.tsx
@@ -8,9 +8,11 @@ type Props = {
 
 const Layout: React.FC<Props> = ({ children }) => {
   return (
-    <div className="flex flex-col min-h-screen">
+    <div className="flex min-h-screen flex-col">
       <Header />
-      <main className="flex flex-col grow shrink-0 p-4 sm:p-6 md:p-8">{children}</main>
+      <main className="flex shrink-0 grow flex-col p-4 sm:p-6 md:p-8">
+        {children}
+      </main>
       <Footer />
     </div>
   )

diff --git a/package.json b/package.json
@@ -10,30 +10,30 @@
     "format": "prettier --write ."
   },
   "dependencies": {
-    "next": "12.0.9",
-    "next-seo": "^5.0.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "next": "13.1.3",
+    "next-seo": "^5.15.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@types/gtag.js": "^0.0.8",
-    "@types/node": "^17.0.13",
-    "@types/react": "17.0.38",
-    "@typescript-eslint/eslint-plugin": "^5.10.1",
-    "@typescript-eslint/parser": "^5.10.1",
-    "autoprefixer": "^10.4.2",
-    "clsx": "^1.1.1",
-    "eslint": "8.8.0",
-    "eslint-config-next": "12.0.9",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-react": "^7.28.0",
-    "eslint-plugin-tailwindcss": "^3.3.6",
-    "postcss": "^8.4.5",
-    "prettier": "^2.5.1",
-    "sass": "^1.49.0",
+    "@types/gtag.js": "^0.0.12",
+    "@types/node": "^18.11.18",
+    "@types/react": "18.0.27",
+    "@typescript-eslint/eslint-plugin": "^5.48.2",
+    "@typescript-eslint/parser": "^5.48.2",
+    "autoprefixer": "^10.4.13",
+    "clsx": "^1.2.1",
+    "eslint": "8.32.0",
+    "eslint-config-next": "13.1.3",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-react": "^7.32.1",
+    "eslint-plugin-tailwindcss": "^3.8.0",
+    "postcss": "^8.4.21",
+    "prettier": "^2.8.3",
+    "sass": "^1.57.1",
     "styled-jsx-plugin-postcss": "^4.0.1",
-    "tailwindcss": "^3.0.18",
-    "typescript": "4.5.5"
+    "tailwindcss": "^3.2.4",
+    "typescript": "4.9.4"
   },
   "license": "MIT"
 }
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,12 +1,14 @@
-/**
- * @type {import('tailwindcss/tailwind-config').TailwindConfig }
- **/
-const tailwindConfig = {
-  content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  future: {
+    hoverOnlyWhenSupported: true,
+  },
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx}',
+    './components/**/*.{js,ts,jsx,tsx}',
+  ],
   theme: {
     extend: {},
   },
   plugins: [],
 }
-
-module.exports = tailwindConfig