From cc86acbac119c3a13244d544e7d2c8742b94ef76 Mon Sep 17 00:00:00 2001
From: shinobu <shinobu@occ.co.jp>
Date: Fri, 29 Mar 2024 17:51:36 +0900
Subject: [PATCH] add datetime.

---
 .env                                         |  4 ++++
 app/_components/Menu.tsx                     |  8 +++++++
 app/datetime/_components/ClientComponent.tsx | 15 ++++++++++++
 app/datetime/page.tsx                        | 24 ++++++++++++++++++++
 4 files changed, 51 insertions(+)
 create mode 100644 app/datetime/_components/ClientComponent.tsx
 create mode 100644 app/datetime/page.tsx

diff --git a/.env b/.env
index 94a168b..c60753a 100644
--- a/.env
+++ b/.env
@@ -6,5 +6,9 @@
 
 DATABASE_URL="postgresql://johndoe:randompassword@localhost:5432/mydb?schema=public"
 
+#TZ=Asia/Tokyo
+TZ=Asia/Rangoon
+#TZ=UTC
+
 # generated command: $ openssl rand -base64 32
 NEXTAUTH_SECRET=akaCCoY3Gc2jTsid7Ofsl2nxbIdkzoGk3HEW/QM0PV0=
\ No newline at end of file
diff --git a/app/_components/Menu.tsx b/app/_components/Menu.tsx
index 12aa847..0c9c93c 100644
--- a/app/_components/Menu.tsx
+++ b/app/_components/Menu.tsx
@@ -105,6 +105,14 @@ export const mainMenu = (
         <ListItemText primary='LeaderLine' />
       </ListItemButton>
     </Link>
+    <Link href='/datetime' passHref>
+      <ListItemButton>
+        <ListItemIcon>
+          <LineAxisIcon />
+        </ListItemIcon>
+        <ListItemText primary='datetime' />
+      </ListItemButton>
+    </Link>
   </React.Fragment>
 );
 
diff --git a/app/datetime/_components/ClientComponent.tsx b/app/datetime/_components/ClientComponent.tsx
new file mode 100644
index 0000000..160e7c7
--- /dev/null
+++ b/app/datetime/_components/ClientComponent.tsx
@@ -0,0 +1,15 @@
+'use client';
+
+import dayjs from 'dayjs';
+
+export default function ClientComponent() {
+  const date = new Date();
+  const dayjsDate = dayjs();
+
+  return (
+    <>
+      <p>Client Component(Date): {date.toLocaleString()}</p>
+      <p>Client Component(Dayjs): {dayjs().toDate().toLocaleString()}</p>
+    </>
+  );
+}
diff --git a/app/datetime/page.tsx b/app/datetime/page.tsx
new file mode 100644
index 0000000..2d066b7
--- /dev/null
+++ b/app/datetime/page.tsx
@@ -0,0 +1,24 @@
+import styles from '../page.module.css';
+
+import dayjs from 'dayjs';
+import 'dayjs/locale/my';
+
+import ClientComponent from '@/app/datetime/_components/ClientComponent';
+
+export default function DateTimePage() {
+  const date = new Date();
+
+  return (
+    <main className={styles.main}>
+      <div className={styles.description}>
+        <div>
+          <p>Server Component(Date): {date.toLocaleString()}</p>
+          <p>Server Component(Dayjs): {dayjs().toDate().toLocaleString()}</p>
+        </div>
+        <div>
+          <ClientComponent />
+        </div>
+      </div>
+    </main>
+  );
+}