web/src/components/composites/purchase/index.tsx

import PurchaseForm from '@/components/composites/purchase/_client/form'
import {Tabs, TabsContent, TabsList, TabsTrigger} from '@/components/ui/tabs'
import {ReactNode} from 'react'
import {merge} from '@/lib/utils'

export type PurchaseProps = {}

export default async function Purchase(props: PurchaseProps) {

  return (
    <div className="flex flex-col gap-4">
      <Tabs defaultValue={`short`} className={`gap-4`}>
        <TabsList className={`w-full p-2 bg-white rounded-lg justify-center`}>
          <Tab value={`short`}>短效动态</Tab>
          <Tab value={`long`}>长效静态</Tab>
          <Tab value={`fixed`}>固定套餐</Tab>
          <Tab value={`custom`}>定制套餐</Tab>
        </TabsList>
        <TabsContent value={`short`}>
          <PurchaseForm/>
        </TabsContent>
        <TabsContent value={`long`}>
          <PurchaseForm/>
        </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>
  )
}