61 lines
1.9 KiB
TypeScript
61 lines
1.9 KiB
TypeScript
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-sm 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-[75%] 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;
|