✨ feat(ad): Advertise

apps/admin/app/dashboard/payment/page.tsx

@@ -1,13 +1,23 @@
+import { PinContainer } from '@shadcn/ui/3d-pin';
+import { Label } from '@shadcn/ui/label';
+import { Separator } from '@shadcn/ui/separator';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@shadcn/ui/tabs';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@shadcn/ui/tooltip';
+import { getTranslations } from 'next-intl/server';
+import Image from 'next/legacy/image';
+import Link from 'next/link';
 import AlipayF2F from './alipayf2f';
 import Epay from './epay';
 import StripeAlipay from './stripe-alipay';
 import StripeWeChatPay from './stripe-wechat-pay';
 
-export default function Page() {
+export default async function Page() {
+  const response = await (await fetch('https://pay.ppanel.dev/')).json();
+  const t = await getTranslations('payment');
   return (
+    <>
       <Tabs defaultValue='Epay'>
-      <TabsList>
+        <TabsList className='h-full flex-wrap'>
           <TabsTrigger value='Epay'>Epay</TabsTrigger>
           <TabsTrigger value='Stripe-Alipay'>Stripe(AliPay)</TabsTrigger>
           <TabsTrigger value='Strip-WeChatPay'>Stripe(WeChatPay)</TabsTrigger>
@@ -26,5 +36,46 @@ export default function Page() {
           <AlipayF2F />
         </TabsContent>
       </Tabs>
+      {response?.list?.length > 0 && (
+        <TooltipProvider>
+          <Separator />
+          <div className='ml-2 mt-4 flex flex-wrap items-center gap-4'>
+            <Label className='w-full'>{t('payForRecommendations')}</Label>
+            {response.list?.map((item) => {
+              return (
+                <Tooltip key={item.id}>
+                  <TooltipTrigger asChild>
+                    <Link href={item.href} className='flex flex-col flex-wrap items-center gap-2'>
+                      <Image src={item.logo} width={40} height={40} className='rounded-full' />
+                      {item.name}
+                    </Link>
+                  </TooltipTrigger>
+                  <TooltipContent className='bg-transparent pb-10'>
+                    <PinContainer title={item.name} href={item.href}>
+                      <div className='flex h-[20rem] w-[20rem] basis-full flex-col p-4 tracking-tight sm:basis-1/2'>
+                        <h3 className='text-foreground max-w-xs pb-2 text-base font-bold'>
+                          {item.name}
+                        </h3>
+                        <div className='mb-4 !p-0 text-base font-normal'>
+                          <span className='text-muted-foreground'>{item.description}</span>
+                        </div>
+                        <div className='mt-4 flex w-full flex-1 rounded-lg'>
+                          <Image
+                            src={item.image}
+                            width={288}
+                            height={200}
+                            className='h-auto w-full'
+                          />
+                        </div>
+                      </div>
+                    </PinContainer>
+                  </TooltipContent>
+                </Tooltip>
+              );
+            })}
+          </div>
+        </TooltipProvider>
+      )}
+    </>
   );
 }

apps/admin/locales/en-US/payment.json

@@ -27,6 +27,7 @@
   "key": "KEY",
   "notifyUrl": "Custom Notification Domain (optional)",
   "notifyUrlDescription": "Gateway notifications will be sent to this domain",
+  "payForRecommendations": "Pay for Recommendations",
   "pid": "PID",
   "saveSuccess": "Save Successful",
   "showName": "Display Name",

apps/admin/locales/zh-CN/payment.json

@@ -27,6 +27,7 @@
   "key": "KEY",
   "notifyUrl": "自定义通知域（可选）",
   "notifyUrlDescription": "网关通知将发送到此域",
+  "payForRecommendations": "支付推荐",
   "pid": "PID",
   "saveSuccess": "保存成功",
   "showName": "显示名称",

packages/shadcn/src/components/ui/floating-dock.tsx

@@ -1,4 +1,5 @@
 // @ts-nocheck
+'use client';
 /**
  * Note: Use position fixed according to your needs
  * Desktop navbar is better positioned at the bottom