31 lines
1.3 KiB
TypeScript
31 lines
1.3 KiB
TypeScript
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 |