✨feat: add navbar

OpenUp-LabTakizawa · Feb 27, 2024 · df61c2f · df61c2f
1 parent 62790c6
commit df61c2f
Show file tree

Hide file tree

Showing 8 changed files with 224 additions and 76 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,3 +1,4 @@
+import { Navbar } from '@/components/navbar'
 import type { Metadata } from 'next'
 import { Sawarabi_Gothic } from 'next/font/google'
 import type React from 'react'
@@ -20,7 +21,10 @@ export default function RootLayout({
 }) {
   return (
     <html lang="ja">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <Navbar />
+        {children}
+      </body>
     </html>
   )
 }
diff --git a/app/page.test.tsx b/app/page.test.tsx
@@ -6,15 +6,14 @@ render(<Home />)
 
 test('p test', () => {
   const p = document.querySelectorAll('p')
-  expect(p[0]?.innerText).toEqual('Get started by editing\u00A0app/page.tsx')
-  expect(p[1]?.innerText).toEqual(
+  expect(p[0]?.innerText).toEqual(
     'Find in-depth information about Next.js features and API.',
   )
-  expect(p[2]?.innerText).toEqual(
+  expect(p[1]?.innerText).toEqual(
     'Learn about Next.js in an interactive course with\u00A0quizzes!',
   )
-  expect(p[3]?.innerText).toEqual('Explore starter templates for Next.js.')
-  expect(p[4]?.innerText).toEqual(
+  expect(p[2]?.innerText).toEqual('Explore starter templates for Next.js.')
+  expect(p[3]?.innerText).toEqual(
     'Instantly deploy your Next.js site to a shareable URL with Vercel.',
   )
 })

diff --git a/app/page.tsx b/app/page.tsx
@@ -4,10 +4,6 @@ export default function Home() {
   return (
     <main className="flex min-h-screen flex-col items-center justify-between p-24">
       <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
-        <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
-          Get started by editing&nbsp;
-          <code className="font-mono font-bold">app/page.tsx</code>
-        </p>
         <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
           <a
             className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"

diff --git a/bun.lockb b/bun.lockb
diff --git a/components/navbar.tsx b/components/navbar.tsx
@@ -0,0 +1,122 @@
+'use client'
+
+import favicon from '@/public/favicon.png'
+import { Dialog } from '@headlessui/react'
+import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
+import Image from 'next/image'
+import Link from 'next/link'
+import { useState } from 'react'
+
+export function Navbar() {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+
+  return (
+    <>
+      <nav
+        className="mx-auto flex max-w-2xl items-center justify-between p-6 lg:px-8"
+        aria-label="Global"
+      >
+        <div className="flex lg:flex-1">
+          <Link href="/" className="-m-1.5 p-1.5">
+            <span className="sr-only">Your Company</span>
+            <Image className="h-8 w-auto" src={favicon} alt="" />
+          </Link>
+        </div>
+        <div className="flex lg:hidden">
+          <button
+            type="button"
+            className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
+            onClick={() => setMobileMenuOpen(true)}
+          >
+            <span className="sr-only">Open main menu</span>
+            <Bars3Icon className="h-6 w-6" aria-hidden="true" />
+          </button>
+        </div>
+        <div className="hidden lg:flex lg:gap-x-12">
+          <Link
+            href="/"
+            className="text-sm font-semibold leading-6 text-gray-900"
+          >
+            Product
+          </Link>
+          <Link
+            href="/"
+            className="text-sm font-semibold leading-6 text-gray-900"
+          >
+            Features
+          </Link>
+          <Link
+            href="/"
+            className="text-sm font-semibold leading-6 text-gray-900"
+          >
+            Marketplace
+          </Link>
+          <Link
+            href="/"
+            className="text-sm font-semibold leading-6 text-gray-900"
+          >
+            Company
+          </Link>
+        </div>
+      </nav>
+      <Dialog
+        as="div"
+        className="lg:hidden"
+        open={mobileMenuOpen}
+        onClose={setMobileMenuOpen}
+      >
+        <div className="fixed inset-0 z-10" />
+        <Dialog.Panel className="fixed inset-y-0 right-0 z-10 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
+          <div className="flex items-center justify-between">
+            <Link href="/" className="-m-1.5 p-1.5">
+              <span className="sr-only">Your Company</span>
+              <img
+                className="h-8 w-auto"
+                src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
+                alt=""
+              />
+            </Link>
+            <button
+              type="button"
+              className="-m-2.5 rounded-md p-2.5 text-gray-700"
+              onClick={() => setMobileMenuOpen(false)}
+            >
+              <span className="sr-only">Close menu</span>
+              <XMarkIcon className="h-6 w-6" aria-hidden="true" />
+            </button>
+          </div>
+          <div className="mt-6 flow-root">
+            <div className="-my-6 divide-y divide-gray-500/10">
+              <div className="space-y-2 py-6">
+                <Link
+                  href="/"
+                  className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
+                >
+                  Product
+                </Link>
+                <Link
+                  href="/"
+                  className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
+                >
+                  Features
+                </Link>
+                <Link
+                  href="/"
+                  className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
+                >
+                  Marketplace
+                </Link>
+                <Link
+                  href="/"
+                  className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
+                >
+                  Company
+                </Link>
+              </div>
+            </div>
+          </div>
+        </Dialog.Panel>
+      </Dialog>
+    </>
+  )
+}
diff --git a/package.json b/package.json
@@ -10,6 +10,8 @@
     "lint": "bunx @biomejs/biome check --apply ."
   },
   "dependencies": {
+    "@headlessui/react": "^1.7.18",
+    "@heroicons/react": "^2.1.1",
     "next": "canary",
     "react": "canary",
     "react-dom": "canary"

diff --git a/public/favicon.png b/public/favicon.png
diff --git a/yarn.lock b/yarn.lock
@@ -1,6 +1,6 @@
 # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
 # yarn lockfile v1
-# bun ./bun.lockb --hash: 44A51E48B03767D7-62cc2ce941833873-ADABB4F81C8689A4-5a71cab9c355ced4
+# bun ./bun.lockb --hash: 5588BA308481B8AD-7ab2d1f434fdff23-23125F6ED0B2FDA4-a8e42dee1294bbf6
 
 
 "@alloc/quick-lru@^5.2.0":
@@ -98,6 +98,19 @@
   dependencies:
     happy-dom "^13.6.2"
 
+"@headlessui/react@^1.7.18":
+  version "1.7.18"
+  resolved "https://registry.npmjs.org/@headlessui/react/-/react-1.7.18.tgz"
+  integrity sha512-4i5DOrzwN4qSgNsL4Si61VMkUcWbcSKueUV7sFhpHzQcSShdlHENE5+QBntMSRvHt8NyoFO2AGG8si9lq+w4zQ==
+  dependencies:
+    "@tanstack/react-virtual" "^3.0.0-beta.60"
+    client-only "^0.0.1"
+
+"@heroicons/react@^2.1.1":
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/@heroicons/react/-/react-2.1.1.tgz"
+  integrity sha512-JyyN9Lo66kirbCMuMMRPtJxtKJoIsXKS569ebHGGRKbl8s4CtUfLnyKJxteA+vIKySocO4s1SkTkGS4xtG/yEA==
+
 "@isaacs/cliui@^8.0.2":
   version "8.0.2"
   resolved "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz"
@@ -142,55 +155,55 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
-"@next/[email protected].73":
-  version "14.1.1-canary.73"
-  resolved "https://registry.npmjs.org/@next/env/-/env-14.1.1-canary.73.tgz"
-  integrity sha512-jHjdxAZlaTvHGu5LqF53nmhHbGaCzXkyv9QjZwWyIfToqkSJVJ+q49ICoOhJQ/1YCIGdHmWi07CKo2EZVAyIGg==
-
-"@next/[email protected].73":
-  version "14.1.1-canary.73"
-  resolved "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.1.1-canary.73.tgz"
-  integrity sha512-H6yhID3Jj5XBN+6Tc6T9XZSFjPxIvqk90hVKgq++lUCGCvknEOwucNrY8KO6uGzDB20GpL9jbFkNQ7r77yem2Q==
-
-"@next/[email protected].73":
-  version "14.1.1-canary.73"
-  resolved "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.1.1-canary.73.tgz"
-  integrity sha512-TIqBR6e/b5RF94ctthCJcxzUchybYs9n1DV/ykcBeslwplJq1AxfJMCAFlhJNtGh5Kd5DzNUz/pwVBhYNuDi3g==
-
-"@next/[email protected].73":
-  version "14.1.1-canary.73"
-  resolved "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.1.1-canary.73.tgz"
-  integrity sha512-LsuBszrhcUwapCF4sjzxMJvQMmrh63Hb69E5oMvfQpMGRBM+aVaXBkNoYvNH5AoF+HhRTOZbYK46HYhbvvmiOg==
-
-"@next/[email protected].73":
-  version "14.1.1-canary.73"
-  resolved "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.1.1-canary.73.tgz"
-  integrity sha512-smCsf8B1mPh0Vh5gT9vysMac0G0W+ZQ2jP6tkJrDTHka6cA4bzv9jkCbfUi9yV7nTQdLaPNuzQMOnfF8YylG3w==
-
-"@next/[email protected].73":
-  version "14.1.1-canary.73"
-  resolved "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.1.1-canary.73.tgz"
-  integrity sha512-56m3z4K7KtfBv4nE0p5zTrvkGoKkCNd4xLZ2df5/fm2PgAD5dtX/x7v9VOiViLkWdMlRFMlcE+JD9q9jYlQAFA==
-
-"@next/[email protected].73":
-  version "14.1.1-canary.73"
-  resolved "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.1.1-canary.73.tgz"
-  integrity sha512-zgNYR1VQ03Nd0IX6nuet/3wB/wk4/ALZ6BJmcleLwZqRAFobh9qphz7BfhQEMhhWLtn0esVRCzPHLvnxxZunBg==
-
-"@next/[email protected].73":
-  version "14.1.1-canary.73"
-  resolved "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.1.1-canary.73.tgz"
-  integrity sha512-Y5/13cyNw5EJlXTrEWIqSEFSZtHIDFhwK71gfyK0Dz/Uq8XzFkcV5Am7O9cl+OUM2jgOl+Iv5kuZmhlfMKX2QA==
-
-"@next/[email protected].73":
-  version "14.1.1-canary.73"
-  resolved "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.1.1-canary.73.tgz"
-  integrity sha512-2qKzl4Ng6BRK0osakOUTgnHb9Hm9M9IaS4BYJOwmWtFcsz0Wzczqi49vY0vw9BqKCzcmetlTuybvdTU7gS8fyw==
-
-"@next/[email protected].73":
-  version "14.1.1-canary.73"
-  resolved "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.1.1-canary.73.tgz"
-  integrity sha512-T9/BGnoVBbn9ClyWbW/jToUL4u9ZVX/LMlOlMygi9O/yjWQ7G+2LRnI/PrwtT+bbt0NwN4f62g1pZdUR8I1pHw==
+"@next/[email protected].74":
+  version "14.1.1-canary.74"
+  resolved "https://registry.npmjs.org/@next/env/-/env-14.1.1-canary.74.tgz"
+  integrity sha512-0VTqjCwjkzC1ItMykqSQ6L6W38Zr3SlppVsU1A87Pju16LFo1FCZALOed19m+5mi9MHtvOaKbFTsQaV64W+66A==
+
+"@next/[email protected].74":
+  version "14.1.1-canary.74"
+  resolved "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.1.1-canary.74.tgz"
+  integrity sha512-aIh/IVbESK+wcFiirzgb/KYPQOKozrcZItcbTsV0rP6VnLu9hek9rjSsnf9ulNUWz1pqd+5THE/n5xuqth0tJQ==
+
+"@next/[email protected].74":
+  version "14.1.1-canary.74"
+  resolved "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.1.1-canary.74.tgz"
+  integrity sha512-tl4Nea9habOkCrvFufR+6Zt0mXWkh6pN/vgHz8dnEXAkefiuVWbC54YwOf2/MBQ/b31cL4P3WUDnjd9IXLdSEg==
+
+"@next/[email protected].74":
+  version "14.1.1-canary.74"
+  resolved "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.1.1-canary.74.tgz"
+  integrity sha512-JGmww0WdAlqDCAB1Ak71Al6U0lwLcjZ8FfI39ELLhZS+NTcu1peJwXSZr9ePIg0D1aQasU/XGdyF3SwaUpl0RQ==
+
+"@next/[email protected].74":
+  version "14.1.1-canary.74"
+  resolved "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.1.1-canary.74.tgz"
+  integrity sha512-0zEFqCmoLBxaZ4rlRUtOL1/vD0Tvt+ntyTRTKCXAjGkd7v3luuiD2w6yNUmOAg3g9xKzwCcxjeoS29gAut5ZWQ==
+
+"@next/[email protected].74":
+  version "14.1.1-canary.74"
+  resolved "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.1.1-canary.74.tgz"
+  integrity sha512-WjvlImMQ8SPTtXh+5MaoLNMUfy0NGzIDpV8AblSCZPbnULiChvICea/QgDgRkoFH9IyB4UbnWJPZaIYadDW7ug==
+
+"@next/[email protected].74":
+  version "14.1.1-canary.74"
+  resolved "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.1.1-canary.74.tgz"
+  integrity sha512-3CKVBRg65e9hKtwKgiyCNshqDR6j1DmVSdRvBrC6mnvYAPEYdsJ2FmTqDcs6mfQXQkw5V8pzCPbYNoA2OD29RQ==
+
+"@next/[email protected].74":
+  version "14.1.1-canary.74"
+  resolved "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.1.1-canary.74.tgz"
+  integrity sha512-xSG5YNhNvh4EqaYz5paqF+7yFxtKrtulsYrASSijPsZ5CSwlgyEeoaQWbK0Zir7SlfveqnpgZGkfCnnEC7VtrQ==
+
+"@next/[email protected].74":
+  version "14.1.1-canary.74"
+  resolved "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.1.1-canary.74.tgz"
+  integrity sha512-7YQuz7277ghHFHlD4Al6AYdcnULPcAVqMbE7FIzuwov99K6HrnusWSZ9chhf307YSQX3GYxlMpvXoAW0Pv2tNQ==
+
+"@next/[email protected].74":
+  version "14.1.1-canary.74"
+  resolved "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.1.1-canary.74.tgz"
+  integrity sha512-Uvti2G7hvnIK/yH+opavHwRm1z8fiY/73qXijuCnFUiqLzjGtm9QdCUrntwWIEw0UshZgJANueyiTzIdre9QwA==
 
 "@nodelib/[email protected]":
   version "2.1.5"
@@ -231,6 +244,18 @@
     "@swc/counter" "^0.1.3"
     tslib "^2.4.0"
 
+"@tanstack/react-virtual@^3.0.0-beta.60":
+  version "3.1.2"
+  resolved "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.1.2.tgz"
+  integrity sha512-qibmxtctgOZo2I+3Rw5GR9kXgaa15U5r3/idDY1ItUKW15UK7GhCfyIfE6qYuJ1fxQF6dJDsD8SbpPyuJgpxuA==
+  dependencies:
+    "@tanstack/virtual-core" "3.1.2"
+
+"@tanstack/[email protected]":
+  version "3.1.2"
+  resolved "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.1.2.tgz"
+  integrity sha512-DATZJs8iejkIUqXZe6ruDAnjFo78BKnIIgqQZrc7CmEFqfLEN/TPD91n4hRfo6hpRB6xC00bwKxv7vdjFNEmOg==
+
 "@testing-library/dom@^9.0.0":
   version "9.3.4"
   resolved "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.4.tgz"
@@ -472,7 +497,7 @@ chokidar@^3.5.3:
   optionalDependencies:
     fsevents "~2.3.2"
 
-[email protected]:
+[email protected], client-only@^0.0.1:
   version "0.0.1"
   resolved "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz"
   integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
@@ -1040,27 +1065,27 @@ nanoid@^3.3.6, nanoid@^3.3.7:
   integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
 
 next@canary:
-  version "14.1.1-canary.73"
-  resolved "https://registry.npmjs.org/next/-/next-14.1.1-canary.73.tgz"
-  integrity sha512-uQ5e+o7LnoSKrVHz5FqElD00LoV0LqcuCZ9wL6w3MZmtmp67TyweTVVdAziTsgP97vUgl6LqWm/oGzRe0dMwFA==
+  version "14.1.1-canary.74"
+  resolved "https://registry.npmjs.org/next/-/next-14.1.1-canary.74.tgz"
+  integrity sha512-e+p6eRT9QC/YAt1cTDqJER7DjJj0fg7jV9t2h13I4ctce4wAkvvsENcnCyBW/RnR4ohHk+bEsnN5Mg+jQMK+Iw==
   dependencies:
-    "@next/env" "14.1.1-canary.73"
+    "@next/env" "14.1.1-canary.74"
     "@swc/helpers" "0.5.5"
     busboy "1.6.0"
     caniuse-lite "^1.0.30001579"
     graceful-fs "^4.2.11"
     postcss "8.4.31"
     styled-jsx "5.1.1"
   optionalDependencies:
-    "@next/swc-darwin-arm64" "14.1.1-canary.73"
-    "@next/swc-darwin-x64" "14.1.1-canary.73"
-    "@next/swc-linux-arm64-gnu" "14.1.1-canary.73"
-    "@next/swc-linux-arm64-musl" "14.1.1-canary.73"
-    "@next/swc-linux-x64-gnu" "14.1.1-canary.73"
-    "@next/swc-linux-x64-musl" "14.1.1-canary.73"
-    "@next/swc-win32-arm64-msvc" "14.1.1-canary.73"
-    "@next/swc-win32-ia32-msvc" "14.1.1-canary.73"
-    "@next/swc-win32-x64-msvc" "14.1.1-canary.73"
+    "@next/swc-darwin-arm64" "14.1.1-canary.74"
+    "@next/swc-darwin-x64" "14.1.1-canary.74"
+    "@next/swc-linux-arm64-gnu" "14.1.1-canary.74"
+    "@next/swc-linux-arm64-musl" "14.1.1-canary.74"
+    "@next/swc-linux-x64-gnu" "14.1.1-canary.74"
+    "@next/swc-linux-x64-musl" "14.1.1-canary.74"
+    "@next/swc-win32-arm64-msvc" "14.1.1-canary.74"
+    "@next/swc-win32-ia32-msvc" "14.1.1-canary.74"
+    "@next/swc-win32-x64-msvc" "14.1.1-canary.74"
 
 normalize-path@^3.0.0, normalize-path@~3.0.0:
   version "3.0.0"
@@ -1224,14 +1249,14 @@ queue-microtask@^1.2.2:
   resolved "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
-"[email protected]", "react@>= 16.8.0 || 17.x.x || ^18.0.0-0", react@^18.0.0, react@^18.2.0, react@canary:
+"[email protected]", "react@>= 16", "react@>= 16.8.0 || 17.x.x || ^18.0.0-0", "react@^16 || ^17 || ^18", "react@^16.8.0 || ^17.0.0 || ^18.0.0", react@^18.0.0, react@^18.2.0, react@canary:
   version "18.3.0-canary-6c3b8dbfe-20240226"
   resolved "https://registry.npmjs.org/react/-/react-18.3.0-canary-6c3b8dbfe-20240226.tgz"
   integrity sha512-3lqR1QguxZql/iOp0VLk+AGHS/fs6xs797znqrzR+XGXrDrP3599eXXGuPtTAVX+47uBJ9IPIEFnKEMu1SCsHA==
   dependencies:
     loose-envify "^1.1.0"
 
-react-dom@^18.0.0, react-dom@^18.2.0, react-dom@canary:
+"react-dom@^16 || ^17 || ^18", "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0", react-dom@^18.0.0, react-dom@^18.2.0, react-dom@canary:
   version "18.3.0-canary-6c3b8dbfe-20240226"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.3.0-canary-6c3b8dbfe-20240226.tgz"
   integrity sha512-q022ainNEHVMYwH3jFdH5SUDaU1xfY9YyezlXeSlki4+d91by8ecDbWUILvIoGCzBaptetb7763K5VhLwDoK8A==