init project portal web

lib/price-plan-detail/view/tab/usage-content/flow/create-event/index.tsx

@@ -0,0 +1,31 @@
+import PricePlanDetailState from "@/lib/price-plan-detail/state/price-plan-detail-state"
+import { observer } from "mobx-react-lite"
+
+interface Props {
+    mainState: PricePlanDetailState
+}
+
+const CreateEvent = observer(({mainState}: Props) => {
+    if (mainState.getFlow() >= 1) return null
+
+    return (
+        <>
+            <div className="flex flex-col items-center text-center">
+                <button
+                    className="relative w-24 h-24 rounded-full border-4 border-[#00879E] bg-white flex items-center justify-center hover:bg-[#e6f6f8] transition"
+                    onClick={() => mainState.setUsageEventModalIsOpen(!mainState.getUsageEventModalIsOpen())}
+                >
+                    <svg className="w-10 h-10 text-[#00879E]" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+                        <path d="M4 4h16v16H4V4z" />
+                        <path d="M8 8h8M8 12h8M8 16h8" />
+                    </svg>
+                    <span className="absolute -top-2 -right-2 w-6 h-6 rounded-full bg-[#00879E] text-white text-sm font-bold flex items-center justify-center">+</span>
+                </button>
+                <span className="mt-2 text-[#00879E] font-medium">Event</span>
+            </div>
+            <div className="text-[#00879E] text-3xl">{'→'}</div>
+        </>
+    )
+})
+
+export default CreateEvent