init project portal web

lib/price-plan-detail/view/tab/index.tsx

@@ -0,0 +1,38 @@
+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