refactor InfoWindow & Scanner

sitcon-tw · Mar 2, 2024 · ee5121c · ee5121c
1 parent c22f45d
commit ee5121c
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 14 deletions.
diff --git a/src/app/(game)/scanner/page.tsx b/src/app/(game)/scanner/page.tsx
@@ -15,6 +15,7 @@ export default function Page() {
   const playerToken: string | null = useReadLocalStorage("token");
   useEffect(() => {
     async function handleResult() {
+      if (showInfo) return;
       if (typeof result !== "string") return;
       let boothToken = await getBoothToken(result);
       setResult(null);

diff --git a/src/components/InfoWindow.tsx b/src/components/InfoWindow.tsx
@@ -1,5 +1,5 @@
-import React, { useState } from "react";
-
+import { motion, AnimatePresence } from "framer-motion";
+import { Info } from "lucide-react";
 interface Props {
   title: string;
   msg: string;
@@ -8,17 +8,28 @@ interface Props {
 
 export function InfoWindow({ title, msg, onClose }: Props) {
   return (
-    <div className="fixed left-0 top-0 z-50 flex h-full w-full items-center justify-center">
-      <div
-        className="fixed left-0 top-0 h-full w-full bg-black bg-opacity-50"
-        onClick={onClose}
-      />
-      <div className="z-50 rounded-lg bg-white p-6 shadow-md">
-        <div className="mb-4 flex items-center justify-between text-lg font-semibold text-gray-800">
-          {title}
-        </div>
-        <p className="text-gray-700">{msg}</p>
-      </div>
-    </div>
+    <motion.div
+      className="flex h-full items-center justify-center bg-sitcon-color8"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+    >
+      <motion.div
+        className="w-[396px] max-w-full rounded-lg bg-white p-6 text-center text-gray-800 shadow-md"
+        initial={{ y: 100 }}
+        animate={{ y: 0 }}
+        exit={{ y: 100 }}
+      >
+        <Info size={48} className="mx-auto" />
+        <div className="my-2 text-2xl font-semibold">{title}</div>
+        <p>{msg}</p>
+        <button
+          onClick={onClose}
+          className="mt-4 w-full rounded-md bg-sitcon-primary py-2 text-white"
+        >
+          關閉
+        </button>
+      </motion.div>
+    </motion.div>
   );
 }