Store Registration into store list

Yoii-Inc · Aug 24, 2024 · 1e27cce · 1e27cce
1 parent 5ad1cd9
commit 1e27cce
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 45 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -5,13 +5,13 @@ export default function Home() {
   return (
     <main className="min-h-screen bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
       <div className="bg-white p-8 rounded-xl shadow-2xl max-w-2xl w-full">
-        <h1 className="text-4xl font-bold mb-6 text-center text-gray-800">予約システム</h1>
+        <h1 className="text-4xl font-bold mb-6 text-center text-gray-800">Reservation System</h1>
         <div className="flex flex-col space-y-6">
           <Link href="/customer" className="bg-blue-500 hover:bg-blue-600 text-white font-bold py-4 px-6 rounded-lg text-center transition duration-300 ease-in-out transform hover:scale-105">
-            お客様ページ
+            Customer Page
           </Link>
           <Link href="/store" className="bg-purple-500 hover:bg-purple-600 text-white font-bold py-4 px-6 rounded-lg text-center transition duration-300 ease-in-out transform hover:scale-105">
-            ストア管理ページ
+            Store Management Page
           </Link>
         </div>
         <div className="mt-12 text-center">

diff --git a/src/app/store/StoreList.tsx b/src/app/store/StoreList.tsx
@@ -3,6 +3,7 @@ import { useEffect, useState } from "react";
 import { Store } from "@/utils/type";
 import { listStores } from "@/utils/store/management";
 import { useActiveAccount } from "thirdweb/react";
+import RegisterStorePopup from "@/components/RegisterStore";
 
 export default function StoreList({ setStore }: { setStore: (store: Store) => void }) {
   const [stores, setStores] = useState<Store[]>([]);
@@ -17,25 +18,28 @@ export default function StoreList({ setStore }: { setStore: (store: Store) => vo
   }, [account]);
 
   return (
-    <div className="p-4 bg-white rounded-lg shadow">
-      <h2 className="text-xl font-semibold mb-4 text-black">ストア一覧</h2>
+    <div className="p-6 bg-white rounded-lg shadow-md">
+      <h2 className="text-2xl font-semibold mb-6 text-gray-800">ストア一覧</h2>
       {stores.length > 0 ? (
-        <ul className="space-y-2">
+        <ul className="space-y-4">
           {stores.map((store, index) => (
             <li
               key={index}
-              className="p-4 bg-gray-100 rounded-lg shadow-sm text-black cursor-pointer hover:bg-gray-200 transition-colors"
+              className="p-4 bg-blue-50 rounded-lg shadow-sm text-gray-800 cursor-pointer hover:bg-blue-100 transition-colors"
               onClick={() => setStore(store)}
             >
-              <div className="font-bold">{store.storeName}</div>
-              <div>ストアID: {store.storeId.toString()}</div>
-              <div>ストア管理者: {store.storeAdmin}</div>
+              <div className="font-bold text-lg mb-2">{store.storeName}</div>
+              <div className="text-sm text-gray-600">ストアID: {store.storeId.toString()}</div>
+              <div className="text-sm text-gray-600">ストア管理者: {store.storeAdmin}</div>
             </li>
           ))}
         </ul>
       ) : (
-        <p className="text-black">管理しているストアがありません。</p>
+        <p className="text-gray-600">管理しているストアがありません。</p>
       )}
+      <div className="mt-6">
+        <RegisterStorePopup />
+      </div>
     </div>
   );
 }
diff --git a/src/app/store/page.tsx b/src/app/store/page.tsx
@@ -1,11 +1,8 @@
 "use client";
 
-import QRCodeGenerator from "@/components/QRCodeGenerator";
 import Link from "next/link";
-import { ConnectButton, TransactionButton } from "thirdweb/react";
+import { ConnectButton } from "thirdweb/react";
 import { client } from "../client";
-import { registerReservationSlot } from "@/utils/store/service";
-import RegisterStorePopup from "@/components/RegisterStore";
 import { useState } from "react";
 import NewService from "./new-service";
 import ServiceList from "./service-list";
@@ -73,49 +70,43 @@ export default function StorePage() {
         />
       </div>
 
-      <div className="mb-8">
-        <RegisterStorePopup />
-      </div>
-
       <div className="mb-8">
         <div className="tabs flex justify-around border-b-2">
           <button
             onClick={() => setActiveTab("storeList")}
-            className={`py-3 px-6 focus:outline-none text-lg ${
-              activeTab === "storeList"
-                ? "border-b-4 border-blue-500 text-blue-500 font-semibold"
-                : "text-gray-500 hover:text-gray-700"
-            }`}
+            className={`py-3 px-6 focus:outline-none text-lg ${activeTab === "storeList"
+              ? "border-b-4 border-blue-500 text-blue-500 font-semibold"
+              : "text-gray-500 hover:text-gray-700"
+              }`}
           >
             所有ストア一覧
           </button>
           <button
             onClick={() => setActiveTab("newService")}
-            className={`py-3 px-6 focus:outline-none text-lg ${
-              activeTab === "newService"
-                ? "border-b-4 border-blue-500 text-blue-500 font-semibold"
-                : "text-gray-500 hover:text-gray-700"
-            }`}
+            disabled={!selectedStore}
+            className={`py-3 px-6 focus:outline-none text-lg ${activeTab === "newService"
+              ? "border-b-4 border-blue-500 text-blue-500 font-semibold"
+              : "text-gray-500 hover:text-gray-700"
+              }`}
           >
-            新規サービス登録
+            新規予約枠作成
           </button>
           <button
             onClick={() => setActiveTab("serviceList")}
-            className={`py-3 px-6 focus:outline-none text-lg ${
-              activeTab === "serviceList"
-                ? "border-b-4 border-blue-500 text-blue-500 font-semibold"
-                : "text-gray-500 hover:text-gray-700"
-            }`}
+            disabled={!selectedStore}
+            className={`py-3 px-6 focus:outline-none text-lg ${activeTab === "serviceList"
+              ? "border-b-4 border-blue-500 text-blue-500 font-semibold"
+              : "text-gray-500 hover:text-gray-700"
+              }`}
           >
-            サービス一覧
+            予約枠一覧
           </button>
           <button
             onClick={() => setActiveTab("loyaltyProgram")}
-            className={`py-3 px-6 focus:outline-none text-lg ${
-              activeTab === "loyaltyProgram"
-                ? "border-b-4 border-blue-500 text-blue-500 font-semibold"
-                : "text-gray-500 hover:text-gray-700"
-            }`}
+            className={`py-3 px-6 focus:outline-none text-lg ${activeTab === "loyaltyProgram"
+              ? "border-b-4 border-blue-500 text-blue-500 font-semibold"
+              : "text-gray-500 hover:text-gray-700"
+              }`}
           >
             ロイヤリティプログラム設定
           </button>

diff --git a/src/components/RegisterStore.tsx b/src/components/RegisterStore.tsx
@@ -19,16 +19,16 @@ function RegisterStorePopup() {
         }}
         className="px-4 py-2 rounded bg-blue-500 text-white"
       >
-        ストア登録
+        Store Registration
       </button>
 
       {showPopup && (
         <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
           <div className="bg-white p-6 rounded shadow-lg">
-            <h2 className="font-bold mb-4 text-black">ストア登録</h2>
+            <h2 className="font-bold mb-4 text-black">Store Registration</h2>
 
             <div className="mb-4">
-              <label className="block mb-2 text-black">ストア名</label>
+              <label className="block mb-2 text-black">Store Name</label>
               <input
                 type="text"
                 value={storeName}
@@ -39,7 +39,7 @@ function RegisterStorePopup() {
 
             <div className="mb-4">
               <label className="block mb-2 text-black">
-                ウォレットアドレス
+                Your Address
               </label>
               <input
                 type="text"