61 lines
1.7 KiB
TypeScript
61 lines
1.7 KiB
TypeScript
'use client'
|
|
import {ReactNode} from 'react'
|
|
import {merge} from '@/lib/utils'
|
|
import {Tabs, TabsContent, TabsList, TabsTrigger} from '@/components/ui/tabs'
|
|
import LongForm from '@/components/composites/purchase/long/form'
|
|
import ShortForm from '@/components/composites/purchase/short/form'
|
|
import Link from 'next/link'
|
|
import {useSearchParams} from 'next/navigation'
|
|
|
|
export type TabType = 'short' | 'long' | 'fixed' | 'custom'
|
|
|
|
export default function Purchase() {
|
|
const searchParams = useSearchParams()
|
|
const defaultTab = searchParams?.get('type') as TabType || 'short'
|
|
return (
|
|
<>
|
|
<div className="flex flex-col gap-4">
|
|
<Tabs value={defaultTab} className="gap-4">
|
|
<TabsList className="w-full p-2 bg-white rounded-lg justify-start md:justify-center overflow-auto">
|
|
<Tab value="short">短效动态</Tab>
|
|
<Tab value="long">长效静态</Tab>
|
|
<Tab value="fixed">固定套餐</Tab>
|
|
<Tab value="custom">定制套餐</Tab>
|
|
</TabsList>
|
|
<TabsContent value="short">
|
|
<ShortForm/>
|
|
</TabsContent>
|
|
<TabsContent value="long">
|
|
<LongForm/>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
function Tab(props: {
|
|
value: string
|
|
children: ReactNode
|
|
}) {
|
|
return (
|
|
<Link
|
|
href={{
|
|
pathname: '/product',
|
|
query: {type: props.value},
|
|
}}
|
|
passHref
|
|
legacyBehavior // 如果需要兼容旧版行为
|
|
>
|
|
<TabsTrigger
|
|
className={merge(
|
|
`w-36 h-12 text-base font-normal flex-none`,
|
|
`data-[state=active]:text-primary data-[state=active]:bg-primary-muted`,
|
|
)}
|
|
value={props.value}>
|
|
{props.children}
|
|
</TabsTrigger>
|
|
</Link>
|
|
)
|
|
}
|