up headless UI to V.2

PxlSyl · Jun 17, 2024 · 6005b77 · 6005b77
1 parent a48c924
commit 6005b77
Show file tree

Hide file tree

Showing 6 changed files with 288 additions and 72 deletions.
diff --git a/app/[locale]/tag-data.json b/app/[locale]/tag-data.json
@@ -1 +1,43 @@
-{"en":{"markdown":1,"code":1,"features":2,"next-js":7,"math":1,"ols":1,"github":1,"guide":6,"tailwind":4,"i18n":1,"hello":1,"holiday":1,"canada":1,"images":1,"feature":2,"writings":1,"book":1,"reflection":1,"multi-author":1},"fr":{"markdown":1,"code":1,"fonctionnalites":4,"next-js":7,"math":1,"ols":1,"github":1,"guide":6,"tailwind":4,"i18n":1,"salut":1,"vacance":1,"canada":1,"images":1,"ecriture":1,"livre":1,"reflexion":1,"multi-auteurs":1}}
+{
+  "en": {
+    "markdown": 1,
+    "code": 1,
+    "features": 2,
+    "next-js": 7,
+    "math": 1,
+    "ols": 1,
+    "github": 1,
+    "guide": 6,
+    "tailwind": 4,
+    "i18n": 1,
+    "hello": 1,
+    "holiday": 1,
+    "canada": 1,
+    "images": 1,
+    "feature": 2,
+    "writings": 1,
+    "book": 1,
+    "reflection": 1,
+    "multi-author": 1
+  },
+  "fr": {
+    "markdown": 1,
+    "code": 1,
+    "fonctionnalites": 4,
+    "next-js": 7,
+    "math": 1,
+    "ols": 1,
+    "github": 1,
+    "guide": 6,
+    "tailwind": 4,
+    "i18n": 1,
+    "salut": 1,
+    "vacance": 1,
+    "canada": 1,
+    "images": 1,
+    "ecriture": 1,
+    "livre": 1,
+    "reflexion": 1,
+    "multi-auteurs": 1
+  }
+}
diff --git a/components/AuthorsMenu.tsx b/components/AuthorsMenu.tsx
@@ -5,7 +5,15 @@ import Link from 'next/link'
 import siteMetadata from '@/data/siteMetadata'
 import { Authors, allAuthors } from 'contentlayer/generated'
 import { Fragment, useRef, useState, useMemo } from 'react'
-import { Menu, RadioGroup, Transition } from '@headlessui/react'
+import {
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuItems,
+  Radio,
+  RadioGroup,
+  Transition,
+} from '@headlessui/react'
 import { useOuterClick } from './util/useOuterClick'
 import { useParams, usePathname } from 'next/navigation'
 import { LocaleTypes } from 'app/[locale]/i18n/settings'
@@ -24,12 +32,18 @@ const AuthorsMenu = ({ className }: AuthorsMenuProps) => {
   const lastSection = sections[sections.length - 1]
   const filterSections = pathname !== `/${locale}` && pathname !== '/'
 
-  const authors = useMemo(() => allAuthors
-    .filter((a) => a.language === locale)
-    .sort((a, b) => (a.default === b.default ? 0 : a.default ? -1 : 1)), [locale]) as Authors[]
+  const authors = useMemo(
+    () =>
+      allAuthors
+        .filter((a) => a.language === locale)
+        .sort((a, b) => (a.default === b.default ? 0 : a.default ? -1 : 1)),
+    [locale]
+  ) as Authors[]
 
-  const mainAuthor = useMemo(() => allAuthors
-    .filter((a) => a.default === true && a.language === locale), [locale]) as Authors[]
+  const mainAuthor = useMemo(
+    () => allAuthors.filter((a) => a.default === true && a.language === locale),
+    [locale]
+  ) as Authors[]
 
   const [isOpen, setIsOpen] = useState(false)
 
@@ -49,14 +63,12 @@ const AuthorsMenu = ({ className }: AuthorsMenuProps) => {
   const renderAuthorLink = (author: Authors) => {
     const { name, avatar, slug } = author
     return (
-      <RadioGroup.Option key={name} value={name}>
-        {({ active }) => (
-          <Menu.Item>
+      <Radio key={name} value={name}>
+        <MenuItem>
+          {({ active }) => (
             <div
               className={`${
-                active
-                  ? 'bg-gray-100 dark:bg-gray-600'
-                  : 'hover:bg-gray-100 dark:hover:bg-gray-600'
+                active ? 'bg-gray-100 dark:bg-gray-600' : 'hover:bg-gray-100 dark:hover:bg-gray-600'
               } group flex w-full items-center rounded-md px-2 py-2 text-sm hover:text-primary-500 dark:hover:text-primary-500`}
             >
               <div className="mr-2">
@@ -73,9 +85,9 @@ const AuthorsMenu = ({ className }: AuthorsMenuProps) => {
                 {name}
               </Link>
             </div>
-          </Menu.Item>
-        )}
-      </RadioGroup.Option>
+          )}
+        </MenuItem>
+      </Radio>
     )
   }
 
@@ -85,7 +97,7 @@ const AuthorsMenu = ({ className }: AuthorsMenuProps) => {
         <div ref={menubarRef} className={className}>
           <Menu as="div" className="relative inline-block text-left font-medium leading-5">
             <div>
-              <Menu.Button
+              <MenuButton
                 className="flex transform-gpu items-center space-x-1 transition-transform duration-300"
                 onClick={toggleMenu}
               >
@@ -105,7 +117,7 @@ const AuthorsMenu = ({ className }: AuthorsMenuProps) => {
                     ></motion.span>
                   )}
                 </div>
-              </Menu.Button>
+              </MenuButton>
             </div>
             <Transition
               as={Fragment}
@@ -117,16 +129,18 @@ const AuthorsMenu = ({ className }: AuthorsMenuProps) => {
               leaveFrom="opacity-100 scale-100 translate-y-0"
               leaveTo="opacity-0 scale-95 translate-y-[10px]"
             >
-              <Menu.Items
+              <MenuItems
                 className="absolute right-0 z-50 mt-2 w-40 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800"
                 as="div"
               >
                 <RadioGroup>
                   <div className="p-1">
-                    {authors.map((author) => author.language === locale && renderAuthorLink(author))}
+                    {authors.map(
+                      (author) => author.language === locale && renderAuthorLink(author)
+                    )}
                   </div>
                 </RadioGroup>
-              </Menu.Items>
+              </MenuItems>
             </Transition>
           </Menu>
         </div>

diff --git a/components/Header.tsx b/components/Header.tsx
@@ -52,20 +52,20 @@ const Header = () => {
                   className="flex transform-gpu items-center space-x-1 transition-transform duration-300"
                 >
                   <div
-                  className={`hidden font-medium ${
-                    isSelected
-                      ? 'text-heading-500'
-                      : 'text-gray-500 hover:text-gray-900 dark:hover:text-gray-100'
-                  } relative rounded-md px-2 py-1 font-medium transition-colors sm:block`}
-                >
-                  <span className="relative z-10">{t(`${link.title.toLowerCase()}`)}</span>
-                  {isSelected && (
-                    <motion.span
-                      layoutId="tab"
-                      transition={{ type: 'spring', duration: 0.4 }}
-                      className="absolute inset-0 z-0 rounded-md bg-gray-100 dark:bg-gray-600"
-                    ></motion.span>
-                  )}
+                    className={`hidden font-medium ${
+                      isSelected
+                        ? 'text-heading-500'
+                        : 'text-gray-500 hover:text-gray-900 dark:hover:text-gray-100'
+                    } relative rounded-md px-2 py-1 font-medium transition-colors sm:block`}
+                  >
+                    <span className="relative z-10">{t(`${link.title.toLowerCase()}`)}</span>
+                    {isSelected && (
+                      <motion.span
+                        layoutId="tab"
+                        transition={{ type: 'spring', duration: 0.4 }}
+                        className="absolute inset-0 z-0 rounded-md bg-gray-100 dark:bg-gray-600"
+                      ></motion.span>
+                    )}
                   </div>
                 </Link>
               )

diff --git a/components/theme/ThemeSwitch.tsx b/components/theme/ThemeSwitch.tsx
@@ -2,7 +2,15 @@
 
 import * as React from 'react'
 import { Fragment } from 'react'
-import { Menu, RadioGroup, Transition } from '@headlessui/react'
+import {
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuItems,
+  Radio,
+  RadioGroup,
+  Transition,
+} from '@headlessui/react'
 import { DarkModeSwitch } from './DarkModeSwitch'
 import { Monitor, Moon, Sun } from './icons'
 import { useTheme } from './ThemeContext'
@@ -35,14 +43,14 @@ const ThemeSwitch = () => {
   return (
     <div ref={menubarRef} className="mr-5">
       <Menu as="div" className="relative mt-1 inline-block text-left">
-        <Menu.Button aria-label={t('theme')}>
+        <MenuButton aria-label={t('theme')}>
           <DarkModeSwitch
             checked={darkModeChecked}
             onChange={(isChecked) => setDarkModeChecked(isChecked)}
             onClick={() => setMenuOpen(!menuOpen)}
             size={24}
           />
-        </Menu.Button>
+        </MenuButton>
         <Transition
           show={menuOpen}
           as={Fragment}
@@ -53,11 +61,11 @@ const ThemeSwitch = () => {
           leaveFrom="opacity-100 scale-100 translate-y-0"
           leaveTo="opacity-0 scale-95 translate-y-[10px]"
         >
-          <Menu.Items className="absolute right-0 z-50 mt-2 w-32 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800">
+          <MenuItems className="absolute right-0 z-50 mt-2 w-32 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800">
             <RadioGroup value={theme} onChange={handleThemeChange}>
               <div className="p-1">
-                <RadioGroup.Option value="light">
-                  <Menu.Item>
+                <Radio value="light">
+                  <MenuItem>
                     {({ active }) => (
                       <button
                         onClick={() => handleThemeChange('light')}
@@ -71,10 +79,10 @@ const ThemeSwitch = () => {
                         <span className="ml-2">{t('light')}</span>
                       </button>
                     )}
-                  </Menu.Item>
-                </RadioGroup.Option>
-                <RadioGroup.Option value="dark">
-                  <Menu.Item>
+                  </MenuItem>
+                </Radio>
+                <Radio value="dark">
+                  <MenuItem>
                     {({ active }) => (
                       <button
                         onClick={() => handleThemeChange('dark')}
@@ -88,10 +96,10 @@ const ThemeSwitch = () => {
                         <span className="ml-2">{t('dark')}</span>
                       </button>
                     )}
-                  </Menu.Item>
-                </RadioGroup.Option>
-                <RadioGroup.Option value="system">
-                  <Menu.Item>
+                  </MenuItem>
+                </Radio>
+                <Radio value="system">
+                  <MenuItem>
                     {({ active }) => (
                       <button
                         onClick={() => handleThemeChange('system')}
@@ -105,11 +113,11 @@ const ThemeSwitch = () => {
                         <span className="ml-2">{t('system')}</span>
                       </button>
                     )}
-                  </Menu.Item>
-                </RadioGroup.Option>
+                  </MenuItem>
+                </Radio>
               </div>
             </RadioGroup>
-          </Menu.Items>
+          </MenuItems>
         </Transition>
       </Menu>
     </div>

diff --git a/package.json b/package.json
@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@formspree/react": "^2.5.1",
-    "@headlessui/react": "^1.7.19",
+    "@headlessui/react": "v2.0.4",
     "@next/bundle-analyzer": "14.2.3",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.12",