Merge pull request #5 from ma-ray/add-routing

Add routing

package.json

@@ -22,6 +22,7 @@
     "moment": "^2.29.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.20.1",
     "tailwind-merge": "^2.0.0",
     "tailwindcss-animate": "^1.0.7"
   },

src/components/Calendar.tsx

@@ -1,5 +1,6 @@
 import { Calendar as CalendarBase, CalendarDate } from 'calendar-base'
 import moment from 'moment'
+import { Link } from 'react-router-dom'
 
 type DayProps = {
   date: CalendarDate
@@ -27,9 +28,11 @@ const Day: React.FC<DayProps> = ({ date }) => {
       className={`flex items-center justify-center border border-black h-24 w-24 col ${bg}
       }`}
     >
-      <h4 className="scroll-m-20 text-2xl font-bold tracking-tight">
-        {date.day}
-      </h4>
+      <Link to={`/diary/${date.year}/${date.month}/${date.day}`}>
+        <h4 className="scroll-m-20 text-2xl font-bold tracking-tight">
+          {date.day}
+        </h4>
+      </Link>
     </div>
   )
 }

src/main.tsx

@@ -1,11 +1,24 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
 import './index.css'
+import { createBrowserRouter, RouterProvider } from 'react-router-dom'
+import HomePage from './pages/HomePage.tsx'
+import DiaryPage from './pages/DiaryPage.tsx'
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <HomePage />,
+  },
+  {
+    path: '/diary/:year/:month/:day',
+    element: <DiaryPage />,
+  },
+])
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+    <RouterProvider router={router} />
   </React.StrictMode>
 )
 

src/pages/DiaryPage.tsx

@@ -0,0 +1,14 @@
+import { useParams } from 'react-router-dom'
+
+const DiaryPage = () => {
+  const { year, month, day } = useParams()
+
+  return (
+    <div>
+      <p>this is the diary page</p>
+      <p>{`the day is ${year} ${month} ${day}`}</p>
+    </div>
+  )
+}
+
+export default DiaryPage

src/pages/HomePage.tsx

@@ -0,0 +1,12 @@
+import Calendar from '../components/Calendar'
+
+const HomePage = () => {
+  return (
+    <div className="flex flex-col justify-center items-center">
+      <p>home page</p>
+      <Calendar month={11} year={2023} />
+    </div>
+  )
+}
+
+export default HomePage

yarn.lock

@@ -527,6 +527,11 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@remix-run/[email protected]":
+  version "1.13.1"
+  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.13.1.tgz#07e2a8006f23a3bc898b3f317e0a58cc8076b86e"
+  integrity sha512-so+DHzZKsoOcoXrILB4rqDkMDy7NLMErRdOxvzvOKb507YINKUP4Di+shbTZDhSE/pBZ+vr7XGIpcOO0VLSA+Q==
+
 "@sindresorhus/is@^4.0.0":
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-4.6.0.tgz#3c7c9c46e678feefe7a2e5bb609d3dbd665ffb3f"
@@ -2649,6 +2654,21 @@ react-refresh@^0.14.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e"
   integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==
 
+react-router-dom@^6.20.1:
+  version "6.20.1"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.20.1.tgz#e34f8075b9304221420de3609e072bb349824984"
+  integrity sha512-npzfPWcxfQN35psS7rJgi/EW0Gx6EsNjfdJSAk73U/HqMEJZ2k/8puxfwHFgDQhBGmS3+sjnGbMdMSV45axPQw==
+  dependencies:
+    "@remix-run/router" "1.13.1"
+    react-router "6.20.1"
+
+[email protected]:
+  version "6.20.1"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.20.1.tgz#e8cc326031d235aaeec405bb234af77cf0fe75ef"
+  integrity sha512-ccvLrB4QeT5DlaxSFFYi/KR8UMQ4fcD8zBcR71Zp1kaYTC5oJKYAp1cbavzGrogwxca+ubjkd7XjFZKBW8CxPA==
+  dependencies:
+    "@remix-run/router" "1.13.1"
+
 react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"