裏面の大枠を作成

Author: nakaterm

web/app/home/components/PersonDetailedMenu.tsx

@@ -0,0 +1,62 @@
+import type { UserWithCoursesAndSubjects } from "common/types";
+import { MdClose } from "react-icons/md";
+
+type Props = {
+  onClose: () => void;
+  displayedUser: UserWithCoursesAndSubjects;
+};
+
+export default function PersonDetailedMenu({ onClose, displayedUser }: Props) {
+  return (
+    <dialog
+      id="dialog"
+      className="modal modal-open modal-bottom sm:modal-middle p-0"
+    >
+      <div className="modal-box p-0">
+        <div className="sticky top-0 bg-white p-2">
+          <form method="dialog">
+            <div className="relative flex items-center justify-center">
+              <button
+                type="button"
+                className="btn btn-sm btn-circle btn-ghost absolute top-0 left-0"
+                onClick={onClose}
+              >
+                <MdClose className="text-2xl" />
+              </button>
+              <h3 className="text-lg">{displayedUser.name}の詳細情報</h3>
+              <span />
+            </div>
+          </form>
+        </div>
+        <div className="p-4">
+          <div>
+            <span className="text-gray-500 text-xs">名前</span>
+            <p className="text-lg">{displayedUser.name}</p>
+          </div>
+          <div className="divider m-0" />
+          <div>
+            <span className="text-gray-500 text-xs">年齢・性別</span>
+            <p className="text-lg">{displayedUser.gender}</p>
+          </div>
+          <div className="divider m-0" />
+          <div>
+            <span className="text-gray-500 text-xs">自己紹介</span>
+            <p className="text-lg">{displayedUser.intro}</p>
+          </div>
+          <div className="divider m-0" />
+          <div>
+            <span className="text-gray-500 text-xs">講義</span>
+            <p className="text-lg">{displayedUser.courses.length}</p>
+            {/* TODO: */}
+          </div>
+          <div className="divider m-0" />
+          <div>
+            <span className="text-gray-500 text-xs">興味分野</span>
+            <p className="text-lg">{displayedUser.interestSubjects.length}</p>
+            {/* TODO: */}
+          </div>
+        </div>
+      </div>
+    </dialog>
+  );
+}

web/app/home/page.tsx

@@ -11,11 +11,13 @@ import { Card } from "~/components/Card";
 import { DraggableCard } from "~/components/DraggableCard";
 import FullScreenCircularProgress from "~/components/common/FullScreenCircularProgress";
 import { NavigateByAuthState } from "~/components/common/NavigateByAuthState";
+import PersonDetailedMenu from "./components/PersonDetailedMenu";
 
 export default function Home() {
   const { data, error } = useRecommended();
   const controls = useAnimation();
   const [clickedButton, setClickedButton] = useState<string>("");
+  const [openDetailedMenu, setOpenDetailedMenu] = useState(false);
   const {
     state: { data: currentUser },
   } = useAboutMe();
@@ -88,34 +90,53 @@ export default function Home() {
     <NavigateByAuthState type="toLoginForUnauthenticated">
       <div className="flex h-full flex-col items-center justify-center">
         {displayedUser && (
-          <div className="flex h-full flex-col items-center justify-center">
-            {nextUser && (
-              <div className="relative h-full w-full">
-                <div className="-translate-x-4 -translate-y-4 inset-0 z-0 mt-4 transform">
-                  <Card displayedUser={nextUser} currentUser={currentUser} />
+          <>
+            <div className="flex h-full flex-col items-center justify-center">
+              {nextUser && (
+                <div className="relative h-full w-full">
+                  <div className="-translate-x-4 -translate-y-4 inset-0 z-0 mt-4 transform">
+                    <Card displayedUser={nextUser} currentUser={currentUser} />
+                  </div>
+                  <motion.div
+                    animate={controls}
+                    className="absolute inset-0 z-10 mt-4 flex items-center justify-center"
+                  >
+                    <DraggableCard
+                      displayedUser={displayedUser}
+                      currentUser={currentUser}
+                      onSwipeLeft={reject}
+                      onSwipeRight={accept}
+                      clickedButton={clickedButton}
+                    />
+                  </motion.div>
                 </div>
-                <motion.div
-                  animate={controls}
-                  className="absolute inset-0 z-10 mt-4 flex items-center justify-center"
-                >
-                  <DraggableCard
-                    displayedUser={displayedUser}
-                    currentUser={currentUser}
-                    onSwipeLeft={reject}
-                    onSwipeRight={accept}
-                    clickedButton={clickedButton}
-                  />
-                </motion.div>
+              )}
+              <button
+                type="button"
+                onClick={() => setOpenDetailedMenu(!openDetailedMenu)}
+              >
+                てすと
+              </button>
+              <div className="button-container mt-4 mb-4 flex w-full justify-center space-x-8">
+                <CloseButton
+                  onclick={onClickClose}
+                  icon={<CloseIconStyled />}
+                />
+                <GoodButton
+                  onclick={onClickHeart}
+                  icon={<FavoriteIconStyled />}
+                />
               </div>
-            )}
-            <div className="button-container mt-4 mb-4 flex w-full justify-center space-x-8">
-              <CloseButton onclick={onClickClose} icon={<CloseIconStyled />} />
-              <GoodButton
-                onclick={onClickHeart}
-                icon={<FavoriteIconStyled />}
-              />
             </div>
-          </div>
+            {openDetailedMenu && (
+              <PersonDetailedMenu
+                onClose={() => {
+                  setOpenDetailedMenu(false);
+                }}
+                displayedUser={displayedUser}
+              />
+            )}
+          </>
         )}
       </div>
     </NavigateByAuthState>