38 lines
1.9 KiB
TypeScript
38 lines
1.9 KiB
TypeScript
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
|
import TabsUsageContent from "./usage-content"
|
|
import PricePlanDetailViewModel from "../../view-model"
|
|
|
|
interface Props {
|
|
vm: PricePlanDetailViewModel
|
|
}
|
|
|
|
const PricePlanTab = ({vm}: Props) => {
|
|
|
|
return (
|
|
<section className="px-4 mt-4">
|
|
<Tabs defaultValue="usage" className="w-full border border-primary">
|
|
<TabsList className="bg-[#e6f6f8] justify-start w-full">
|
|
{["usage", "recurring", "subscription", "discount", "trigger", "total", "param", "param-version"].map(tab => (
|
|
<TabsTrigger
|
|
key={tab}
|
|
value={tab}
|
|
className="data-[state=active]:bg-[#00879E] data-[state=active]:text-white text-[#00879E] hover:bg-[#ccebf0]"
|
|
>
|
|
{tab.replace("-", " ").replace(/\b\w/g, l => l.toUpperCase())}
|
|
</TabsTrigger>
|
|
))}
|
|
</TabsList>
|
|
<TabsUsageContent usageEventOptions={vm.getUsageEventOptions()} mainState={vm.getMainState()} formState={vm.getRatePlanFormState()}/>
|
|
<TabsContent value="recurring">Recurring here.</TabsContent>
|
|
<TabsContent value="subscription">Subscription here.</TabsContent>
|
|
<TabsContent value="discount">Discount here.</TabsContent>
|
|
<TabsContent value="trigger">Trigger here.</TabsContent>
|
|
<TabsContent value="total">Total here.</TabsContent>
|
|
<TabsContent value="param">Param here.</TabsContent>
|
|
<TabsContent value="param-version">Param Version here.</TabsContent>
|
|
</Tabs>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
export default PricePlanTab |