enhance index page

Ciwqq3 · Dec 13, 2022 · 4ebdf18 · 4ebdf18
1 parent 8a32b53
commit 4ebdf18
Show file tree

Hide file tree

Showing 6 changed files with 155 additions and 61 deletions.
diff --git a/apps/deno-vless/src/app/app.tsx b/apps/deno-vless/src/app/app.tsx
@@ -1,22 +1,105 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { ExclamationTriangleIcon } from '@heroicons/react/20/solid';
+import { Transition } from '@headlessui/react';
+import { ExclamationTriangleIcon, XMarkIcon } from '@heroicons/react/20/solid';
 import QRCode from 'qrcode';
-import { useEffect, useState } from 'react';
+import { Fragment, useEffect, useState } from 'react';
 import { validate as uuidValidate } from 'uuid';
 export function App() {
   const [text, setText] = useState('');
+  const [show, setShow] = useState(false);
   function handleShare(text: string) {
     setText(text);
+    setShow(true);
   }
+
+  useEffect(() => {
+    if (show) {
+      console.log('useEffect---setShow');
+      const timeoutID = setTimeout(() => {
+        setShow(false);
+      }, 1500);
+      return () => {
+        clearTimeout(timeoutID);
+      };
+    }
+  }, [show]);
   return (
-    <div className="flex flex-col items-center h-screen">
-      <Warning></Warning>
-      <div className="flex flex-col h-full ite">
-        <QRcodeImg text={text}></QRcodeImg>
-        <Actions handleShare={handleShare}></Actions>
-        <Anything handleShare={handleShare}></Anything>
+    <>
+      <div className="flex flex-col items-center h-screen">
+        <Warning></Warning>
+        <div className="flex flex-col h-full ite">
+          <QRcodeImg text={text}></QRcodeImg>
+          <ShareActions handleShare={handleShare}></ShareActions>
+          <ShareAnything handleShare={handleShare}></ShareAnything>
+        </div>
       </div>
-    </div>
+      <ShareNotifications show={show} setShow={setShow}></ShareNotifications>
+    </>
+  );
+}
+
+function ShareNotifications({
+  show,
+  setShow,
+}: {
+  show: boolean;
+  setShow: (show: boolean) => void;
+}) {
+  return (
+    <>
+      {/* Global notification live region, render this permanently at the end of the document */}
+      <div
+        aria-live="assertive"
+        className="fixed inset-0 flex items-end px-4 py-6 pointer-events-none sm:items-start sm:p-6"
+      >
+        <div className="flex flex-col items-center w-full space-y-4 sm:items-end">
+          {/* Notification panel, dynamically insert this into the live region when it needs to be displayed */}
+          <Transition
+            show={show}
+            as={Fragment}
+            enter="transform ease-out duration-300 transition"
+            enterFrom="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
+            enterTo="translate-y-0 opacity-100 sm:translate-x-0"
+            leave="transition ease-in duration-100"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <div className="w-full max-w-sm overflow-hidden bg-white rounded-lg shadow-lg pointer-events-auto ring-1 ring-black ring-opacity-5">
+              <div className="p-4">
+                <div className="flex items-start">
+                  <div className="flex-shrink-0">
+                    <ExclamationTriangleIcon
+                      className="w-6 h-6 text-red-700"
+                      aria-hidden="true"
+                    />
+                  </div>
+                  <div className="ml-3 w-0 flex-1 pt-0.5">
+                    <p className="text-sm font-medium text-gray-900">
+                      分享成功！
+                    </p>
+                    <p className="mt-1 text-sm text-red-500">
+                      请不要随意泄露分享链接！！
+                    </p>
+                  </div>
+                  <div className="flex flex-shrink-0 ml-4">
+                    <button
+                      type="button"
+                      className="inline-flex text-gray-400 bg-white rounded-md hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                      onClick={() => {
+                        setShow(false);
+                      }}
+                    >
+                      <span className="sr-only">Close</span>
+                      <XMarkIcon className="w-5 h-5" aria-hidden="true" />
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </Transition>
+        </div>
+      </div>
+    </>
   );
 }
 
@@ -88,7 +171,11 @@ function QRcodeImg({ text }: { text: string }) {
     </div>
   );
 }
-function Anything({ handleShare }: { handleShare: (text: string) => void }) {
+function ShareAnything({
+  handleShare,
+}: {
+  handleShare: (text: string) => void;
+}) {
   const [text, setText] = useState('');
   return (
     <div className="mt-4">
@@ -121,7 +208,11 @@ function Anything({ handleShare }: { handleShare: (text: string) => void }) {
   );
 }
 
-function Actions({ handleShare }: { handleShare: (text: string) => void }) {
+function ShareActions({
+  handleShare,
+}: {
+  handleShare: (text: string) => void;
+}) {
   function getPageURL() {
     return window.location.href;
   }