From f9791b14376ed3a3d6492935f6d770a738d2859d Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Tue, 18 Jul 2023 20:12:40 +0100
Subject: [PATCH] feat: mobile link in qr code

---
 src/components/home/PromotionLinks.tsx | 24 +++++++++++++++++++-----
 src/components/ui/Tooltip.tsx          |  2 +-
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/components/home/PromotionLinks.tsx b/src/components/home/PromotionLinks.tsx
index a0cc8f74..a2189170 100644
--- a/src/components/home/PromotionLinks.tsx
+++ b/src/components/home/PromotionLinks.tsx
@@ -1,5 +1,8 @@
+import { QRCodeSVG } from "qrcode.react"
+
 import { DevicePhoneMobileIcon } from "@heroicons/react/24/solid"
 
+import { Tooltip } from "~/components/ui/Tooltip"
 import { UniLink } from "~/components/ui/UniLink"
 import { DISCORD_LINK, GITHUB_LINK, TWITTER_LINK } from "~/lib/env"
 import { getSiteLink } from "~/lib/helpers"
@@ -20,12 +23,23 @@ export default async function PromotionLinks({
       >
         <span className="inline-block icon-[mingcute--rss-2-fill] text-2xl"></span>
       </UniLink>
-      <UniLink
-        className="flex-1 flex justify-center text-sky-500"
-        href="https://oia.xlog.app"
+      <Tooltip
+        className="z-10 bg-white"
+        childrenClassName="flex-1 flex justify-center text-sky-500"
+        label={
+          <QRCodeSVG
+            value="https://oia.xlog.app"
+            className="aspect-square w-[200px] p-2"
+            height={200}
+            width={200}
+          />
+        }
+        placement="bottom"
       >
-        <DevicePhoneMobileIcon className="w-[23px] h-[23px]" />
-      </UniLink>
+        <UniLink href="https://oia.xlog.app">
+          <DevicePhoneMobileIcon className="w-[23px] h-[23px]" />
+        </UniLink>
+      </Tooltip>
       {GITHUB_LINK && (
         <UniLink
           className="flex-1 flex justify-center text-[#181717]"
diff --git a/src/components/ui/Tooltip.tsx b/src/components/ui/Tooltip.tsx
index 084a6318..82e52b5f 100644
--- a/src/components/ui/Tooltip.tsx
+++ b/src/components/ui/Tooltip.tsx
@@ -20,7 +20,7 @@ import {
 import { cn } from "~/lib/utils"
 
 interface Props {
-  label: string
+  label: string | JSX.Element
   placement?: Placement
   children: JSX.Element
   className?: string