feat: add alert to reminder user

JimmyLv · Mar 6, 2023 · 4a1c52c · 4a1c52c · vercel · Mar 6, 2023
1 parent 51e5b50
commit 4a1c52c
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 47 deletions.
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -3,6 +3,11 @@ import clsx from "clsx";
 import Image from "next/image";
 import React from "react";
 import SignIn from "~/components/SignIn";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "~/components/ui/tooltip";
 import { BASE_DOMAIN } from "~/utils/constants";
 import Github from "../components/GitHub";
 const poppins = Poppins({ weight: "800", subsets: ["latin"] });
@@ -31,37 +36,42 @@ export default function Header() {
         </a>
       </div>
       <div className="flex items-center space-x-2 sm:space-x-5">
-        <div
-          id="tooltip-light"
-          role="tooltip"
-          className="tooltip invisible absolute z-10 inline-block rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm font-medium text-gray-900 opacity-0 shadow-sm"
-        >
-          那可太感谢了！
-          <div className="tooltip-arrow" data-popper-arrow></div>
-        </div>
-        <a
-          data-tooltip-target="tooltip-feedback"
-          data-tooltip-style="light"
-          href="https://jimmylv.feishu.cn/share/base/form/shrcn9PwPzGGGiJCnH0JNfM1P3b"
-          rel="noreferrer noopener"
-          target="_blank"
-          className="flex items-center space-x-2"
-        >
-          🔥<span className="hidden pl-1 sm:block">提</span>反馈
-        </a>
-        <a
-          href="javascript:(function(){if(!window.location.hostname
-  .includes('bilibili.com')){alert('🔖请拖至书签栏，进入B站视频页面再点击书签哦！')};location.href=location.href.replace('bilibili.com','bilibili.jimmylv.cn')}())"
-          rel="noreferrer noopener"
-          target="_blank"
-          className="flex hidden items-center space-x-2 sm:block"
-          aria-label="书签版"
-        >
-          🔖
-          <span className="relin-paragraph-target pl-1 text-slate-500">
-            (书签版)
-          </span>
-        </a>
+        <Tooltip>
+          <TooltipTrigger>
+            <a
+              href="https://jimmylv.feishu.cn/share/base/form/shrcn9PwPzGGGiJCnH0JNfM1P3b"
+              rel="noreferrer noopener"
+              target="_blank"
+              className="flex items-center space-x-2"
+            >
+              🔥<span className="hidden pl-1 sm:block">提</span>反馈
+            </a>
+          </TooltipTrigger>
+          <TooltipContent>那可太感谢啦！</TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger>
+            <a
+              href="javascript:(function(){if(!window.location.hostname
+  .includes('bilibili.com')){alert('🔖请进入B站视频页面再点击书签哦！')};location.href=location.href.replace('bilibili.com','bilibili.jimmylv.cn')}())"
+              rel="noreferrer noopener"
+              target="_blank"
+              className="flex hidden items-center space-x-2 sm:block"
+              aria-label="书签版"
+              onClick={() =>
+                alert("🔖请拖至书签栏，进入B站视频页面再点击书签哦！")
+              }
+            >
+              🔖
+              <span className="relin-paragraph-target pl-1 text-slate-500">
+                (书签版)
+              </span>
+            </a>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>🔖请拖至书签栏，进入B站视频页面再点击书签哦！</p>
+          </TooltipContent>
+        </Tooltip>
         <a
           href={BASE_DOMAIN + "/ios"}
           rel="noreferrer noopener"

diff --git a/components/ui/tooltip.tsx b/components/ui/tooltip.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = ({ ...props }) => <TooltipPrimitive.Root {...props} />
+Tooltip.displayName = TooltipPrimitive.Tooltip.displayName
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border border-slate-100 bg-white px-3 py-1.5 text-sm text-slate-700 shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=top]:slide-in-from-bottom-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 dark:border-slate-800 dark:bg-slate-800 dark:text-slate-400",
+      className
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
     "@radix-ui/react-dialog": "^1.0.2",
     "@radix-ui/react-popover": "^1.0.4",
     "@radix-ui/react-toast": "^1.1.2",
+    "@radix-ui/react-tooltip": "^1.0.4",
     "@supabase/auth-helpers-nextjs": "^0.5.5",
     "@supabase/auth-ui-react": "^0.3.3",
     "@supabase/auth-ui-shared": "^0.1.2",

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -16,6 +16,7 @@ import Footer from "../components/Footer";
 import Header from "../components/Header";
 import "../styles/globals.css";
 import { ThemeProvider } from "next-themes";
+import { TooltipProvider } from "~/components/ui/tooltip";
 
 const fontSans = FontSans({
   subsets: ["latin"],
@@ -36,22 +37,24 @@ function MyApp({
       initialSession={pageProps.initialSession}
     >
       <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-        <div className="mx-auto flex min-h-screen max-w-5xl flex-col px-2 pt-8 sm:pt-10">
-          <Header />
-          <main
-            className={cn(
-              "mx-auto flex max-w-5xl flex-1 flex-col justify-center bg-white font-sans text-slate-900 antialiased dark:bg-slate-900 dark:text-slate-50",
-              fontSans.variable
-            )}
-          >
-            <Component {...pageProps} />
-            <Analytics />
-            <CommandMenu />
-          </main>
-          <Footer />
-        </div>
-        <TailwindIndicator />
-        <Toaster />
+        <TooltipProvider>
+          <div className="mx-auto flex min-h-screen max-w-5xl flex-col px-2 pt-8 sm:pt-10">
+            <Header />
+            <main
+              className={cn(
+                "mx-auto flex max-w-5xl flex-1 flex-col justify-center bg-white font-sans text-slate-900 antialiased dark:bg-slate-900 dark:text-slate-50",
+                fontSans.variable
+              )}
+            >
+              <Component {...pageProps} />
+              <Analytics />
+              <CommandMenu />
+            </main>
+            <Footer />
+          </div>
+          <TailwindIndicator />
+          <Toaster />
+        </TooltipProvider>
       </ThemeProvider>
     </SessionContextProvider>
   );