feat: 修改代码结构

apps/user/components/subscribe/renewal.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import PaymentMethods from '@/components/subscribe/payment-methods';
+import PlanTabs from '@/components/SubscribePlan/PlanTabs/PlanTabs';
 import useGlobalStore from '@/config/use-global';
 import { preCreateOrder, renewal } from '@/services/user/order';
 import { useQuery } from '@tanstack/react-query';
@@ -14,7 +15,6 @@ import {
   DialogTrigger,
 } from '@workspace/airo-ui/components/dialog';
 import { Separator } from '@workspace/airo-ui/components/separator';
-import { Tabs, TabsList, TabsTrigger } from '@workspace/airo-ui/components/tabs';
 import { LoaderCircle } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useRouter } from 'next/navigation';
@@ -115,11 +115,9 @@ export default function Renewal({ id, subscribe, className }: Readonly<RenewalPr
           {t('renewSubscription')}
         </div>
         <div>
-          <Tabs
-            defaultValue='year'
-            className='mt-8 text-center sm:mt-6'
-            value={tabValue}
-            onValueChange={(val) => {
+          <PlanTabs
+            tabValue={tabValue}
+            setTabValue={(val) => {
               if (val === 'year') {
                 handleChange('quantity', 12);
               } else if (val === 'month') {
@@ -127,32 +125,8 @@ export default function Renewal({ id, subscribe, className }: Readonly<RenewalPr
               }
               setTabValue(val);
             }}
-          >
-            <TabsList className='relative mb-8 h-[74px] flex-wrap rounded-full bg-[#EAEAEA] p-2.5'>
-              {tabValue === 'year' ? (
-                <span className='absolute -top-8 left-16 z-10 rounded-md bg-[#E22C2E] px-2 py-0.5 text-[10px] font-bold leading-none text-white shadow sm:text-xs'>
-                  {t('discount20')}
-                  {/* 小三角箭头 */}
-                  <span
-                    className='absolute right-0 top-[80%] h-10 w-2 bg-[#E22C2E]'
-                    style={{ clipPath: 'polygon(100% 0, 100% 100%, 0 0)' }}
-                  />
-                </span>
-              ) : null}
-              <TabsTrigger
-                className='rounded-full px-8 py-3.5 text-xl data-[state=active]:bg-[#0F2C53] data-[state=active]:text-white md:px-12'
-                value='year'
-              >
-                {t('yearlyPlan')}
-              </TabsTrigger>
-              <TabsTrigger
-                className='rounded-full px-8 py-3.5 text-xl data-[state=active]:bg-[#0F2C53] data-[state=active]:text-white md:px-12'
-                value='month'
-              >
-                {t('monthlyPlan')}
-              </TabsTrigger>
-            </TabsList>
-          </Tabs>
+            discount={20}
+          />
         </div>
 
         <div className='w-full'>