feature Detail block use Dialog

sitcon-tw · Feb 27, 2024 · 508c578 · 508c578
1 parent e3afe79
commit 508c578
Showing 1 changed file with 21 additions and 36 deletions.
diff --git a/src/components/Detail.tsx b/src/components/Detail.tsx
@@ -6,6 +6,7 @@ import { text } from "@/varients/text";
 import Link from "next/link";
 import { useState } from "react";
 import { twMerge } from "tailwind-merge";
+import Dialog from "./Dialog";
 
 export function useDetail() {
   const [open, setOpen] = useState(false);
@@ -14,44 +15,28 @@ export function useDetail() {
   return [
     function Detail() {
       return (
-        <>
-          <div
-            className={twMerge(
-              "fixed left-0 top-0 z-20 h-screen w-screen flex-col justify-end bg-sitcon-black/50",
-              open ? "flex" : "hidden",
+        <Dialog open={open} setOpen={setOpen}>
+          <div className="flex flex-col gap-4 break-all p-6">
+            <h1 className="font-bold text-[#B1884C]">
+              {activity?.name}
+            </h1>
+            {Array.isArray(activity?.description) &&
+              activity.description.map((desc, index) => (
+                <p key={index} className={text({ level: 1 })}>
+                  {desc}
+                </p>
+              ))}
+            {activity?.link && (
+              <Link
+                href={activity.link}
+                target="_blank"
+                className="underline underline-offset-1"
+              >
+                {activity.link}
+              </Link>
             )}
-            onClick={() => setOpen(false)}
-          >
-            <div
-              className={twMerge(
-                "absolute left-0 min-h-[40%] w-screen rounded-t-3xl bg-sitcon-white p-10",
-                open ? "bottom-0" : "bottom-[100vh]",
-              )}
-            >
-              <div className="mb-10 flex w-full justify-center">
-                <div className="w-10 border-2 border-[#BDBDBD]" />
-              </div>
-              <h4 className={twMerge(heading({ level: 4 }), "m-2")}>
-                {activity?.name}
-              </h4>
-              {Array.isArray(activity?.description) &&
-                activity.description.map((desc, index) => (
-                  <p key={index} className={text({ level: 1 })}>
-                    {desc}
-                  </p>
-                ))}
-              {activity?.link && (
-                <Link
-                  href={activity.link}
-                  target="_blank"
-                  className="underline underline-offset-1"
-                >
-                  {activity.link}
-                </Link>
-              )}
-            </div>
           </div>
-        </>
+        </Dialog>
       );
     },
     (activity: ActivityType) => {