feat: 修改代码结构

2025-08-14 09:00:22 -07:00
parent 4606412e68
commit f9de5fcb4f
21 changed files with 559 additions and 613 deletions
@@ -0,0 +1,60 @@
+import { Tabs, TabsList, TabsTrigger } from '@workspace/airo-ui/components/tabs';
+import { cn } from '@workspace/airo-ui/lib/utils';
+import { useTranslations } from 'next-intl';
+import React from 'react';
+
+export type TabValueType = 'year' | 'month';
+interface PlanTabProps {
+  tabValue: TabValueType;
+  setTabValue: (val: TabValueType) => void;
+  discount: number;
+  className?: string;
+}
+
+const PlanTabs: React.FC<PlanTabProps> = (props) => {
+  const t = useTranslations('components.offerDialog');
+  const { tabValue, className } = props;
+  const TAB_LIST: { label: string; value: TabValueType }[] = [
+    {
+      label: t('yearlyPlan'),
+      value: 'year',
+    },
+    {
+      label: t('monthlyPlan'),
+      value: 'month',
+    },
+  ];
+
+  return (
+    <Tabs
+      defaultValue='year'
+      className={cn('mt-8 w-full text-center md:mt-16', className)}
+      value={tabValue}
+      onValueChange={(value) => props.setTabValue(value as 'year' | 'month')}
+    >
+      <TabsList className='relative mb-8 grid h-[74px] grid-cols-2 flex-wrap rounded-full bg-[#EAEAEA] p-2.5 md:mb-16'>
+        {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'>
+            -{props.discount}%{/* 小三角箭头 */}
+            <span
+              className='absolute right-0 top-[80%] h-10 w-2 bg-[#E22C2E]'
+              style={{ clipPath: 'polygon(100% 0, 100% 100%, 0 0)' }}
+            />
+          </span>
+        ) : null}
+        {TAB_LIST.map((val, key) => (
+          <TabsTrigger
+            key={val.value}
+            className={
+              'rounded-full py-3.5 text-xl data-[state=active]:bg-[#0F2C53] data-[state=active]:text-white md:px-12'
+            }
+            value={val.value}
+          >
+            {val.label}
+          </TabsTrigger>
+        ))}
+      </TabsList>
+    </Tabs>
+  );
+};
+export default PlanTabs;