feat: mobile link in qr code

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]"

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