From 160b8442696c60bdb51bd840c6115dc350a2aa45 Mon Sep 17 00:00:00 2001
From: susumu tomita <oyster880@gmail.com>
Date: Thu, 23 May 2024 07:30:28 +0900
Subject: [PATCH] update user registrationpage

---
 src/app/dashboard/page.tsx | 38 ++++++++++++---------
 src/app/users/page.tsx     | 67 ++++++++++++++++++++++++++------------
 2 files changed, 70 insertions(+), 35 deletions(-)

diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index 62442aa4..366a8039 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -38,28 +38,30 @@ const Dashboard = () => {
   return (
     <div>
       <Navbar />
-      <div className="container">
+      <div className="container mx-auto p-4">
         <div className="flex items-center justify-between mb-8">
-          <h1 className="text-3xl font-bold">ダッシュボード</h1>
-          <button className="btn-primary">新しいメモを作成</button>
+          <h1 className="text-3xl font-bold">Dashboard</h1>
+          <button className="inline-block rounded-lg bg-indigo-500 px-8 py-3 text-center text-sm font-semibold text-white outline-none ring-indigo-300 transition duration-100 hover:bg-indigo-600 focus-visible:ring active:bg-indigo-700 md:text-base">
+            Create New Post
+          </button>
         </div>
         <div className="flex flex-col md:flex-row gap-4">
           <div className="w-full md:w-3/4">
-            <div className="card">
-              <h2 className="card-header">更新されたメモ</h2>
+            <div className="bg-white p-4 rounded-lg shadow-md">
+              <h2 className="text-lg font-bold">Recent Posts</h2>
               <ul>
                 {posts.map(post => (
                   <li
                     key={post.id}
-                    className="border-b border-gray-700 last:border-b-0 py-2 flex justify-between items-center"
+                    className="border-b last:border-b-0 py-2 flex justify-between items-center"
                   >
                     <div>
                       <h3 className="font-bold">{post.title}</h3>
-                      <p className="card-body">
+                      <p className="text-sm text-gray-500">
                         {post.category} - {post.author.name}
                       </p>
                     </div>
-                    <div className="text-sm text-gray-400">
+                    <div className="text-sm text-gray-500">
                       {new Date(post.createdAt).toLocaleString()}
                     </div>
                   </li>
@@ -68,18 +70,24 @@ const Dashboard = () => {
             </div>
           </div>
           <div className="w-full md:w-1/4">
-            <div className="card">
-              <h2 className="card-header">最近見たメモ</h2>
-              <p className="card-body">現在見ているメモはありません。</p>
+            <div className="bg-white p-4 rounded-lg shadow-md">
+              <h2 className="text-lg font-bold">Recently Viewed Posts</h2>
+              <p>No posts viewed recently.</p>
             </div>
           </div>
         </div>
         <div className="text-center mt-8">
-          <Link href="/users" className="btn-secondary mr-4">
-            ユーザーを作成
+          <Link
+            href="/users"
+            className="inline-block rounded-lg bg-gray-200 px-8 py-3 text-center text-sm font-semibold text-gray-500 outline-none ring-indigo-300 transition duration-100 hover:bg-gray-300 focus-visible:ring active:text-gray-700 md:text-base"
+          >
+            Create User
           </Link>
-          <Link href="/api-docs" className="btn-secondary">
-            APIドキュメント
+          <Link
+            href="/api-docs"
+            className="inline-block rounded-lg bg-gray-200 px-8 py-3 text-center text-sm font-semibold text-gray-500 outline-none ring-indigo-300 transition duration-100 hover:bg-gray-300 focus-visible:ring active:text-gray-700 md:text-base"
+          >
+            API Docs
           </Link>
         </div>
       </div>
diff --git a/src/app/users/page.tsx b/src/app/users/page.tsx
index 18cc248e..65bb86ca 100644
--- a/src/app/users/page.tsx
+++ b/src/app/users/page.tsx
@@ -2,6 +2,7 @@
 import axios from 'axios';
 import { useState } from 'react';
 import type { NextPage } from 'next';
+import Navbar from '../components/Navbar';
 
 const CreateUser: NextPage = () => {
   const [email, setEmail] = useState('');
@@ -25,27 +26,53 @@ const CreateUser: NextPage = () => {
   };
 
   return (
-    <form onSubmit={handleSubmit}>
-      <div>
-        <label htmlFor="email">Email:</label>
-        <input
-          type="email"
-          id="email"
-          value={email}
-          onChange={e => setEmail(e.target.value)}
-        />
+    <div>
+      <Navbar />
+      <div className="container mx-auto p-4">
+        <h1 className="text-3xl font-bold mb-8">Create User</h1>
+        <form
+          onSubmit={handleSubmit}
+          className="bg-white p-4 rounded-lg shadow-md"
+        >
+          <div className="mb-4">
+            <label
+              htmlFor="email"
+              className="block text-sm font-medium text-gray-700"
+            >
+              Email:
+            </label>
+            <input
+              type="email"
+              id="email"
+              value={email}
+              onChange={e => setEmail(e.target.value)}
+              className="mt-1 p-2 block w-full border rounded-md bg-black text-white"
+            />
+          </div>
+          <div className="mb-4">
+            <label
+              htmlFor="name"
+              className="block text-sm font-medium text-gray-700"
+            >
+              Name:
+            </label>
+            <input
+              type="text"
+              id="name"
+              value={name}
+              onChange={e => setName(e.target.value)}
+              className="mt-1 p-2 block w-full border rounded-md bg-black text-white"
+            />
+          </div>
+          <button
+            type="submit"
+            className="inline-block rounded-lg bg-indigo-500 px-8 py-3 text-center text-sm font-semibold text-white outline-none ring-indigo-300 transition duration-100 hover:bg-indigo-600 focus-visible:ring active:bg-indigo-700 md:text-base"
+          >
+            Submit
+          </button>
+        </form>
       </div>
-      <div>
-        <label htmlFor="name">Name:</label>
-        <input
-          type="text"
-          id="name"
-          value={name}
-          onChange={e => setName(e.target.value)}
-        />
-      </div>
-      <button type="submit">Submit</button>
-    </form>
+    </div>
   );
 };