59 lines
1.7 KiB
TypeScript
59 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 {usePathname, useRouter, useSearchParams} from 'next/navigation'
|
|
export type TabType = 'short' | 'long' | 'fixed' | 'custom'
|
|
|
|
export default function Purchase() {
|
|
const router = useRouter()
|
|
const path = usePathname()
|
|
const params = useSearchParams()
|
|
|
|
const tab = params.get('type') as TabType || 'short'
|
|
|
|
const updateTab = async (tab: string) => {
|
|
const newParams = new URLSearchParams(params)
|
|
newParams.set('type', tab)
|
|
router.push(`${path}?${newParams.toString()}`)
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col gap-4">
|
|
<Tabs value={tab} onValueChange={updateTab} 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 (
|
|
<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>
|
|
)
|
|
}
|