init project portal web
This commit is contained in:
Sweli Giri
@ -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
|
||||
@ -0,0 +1,94 @@
|
||||
import PricePlanDetailState from "@/lib/price-plan-detail/state/price-plan-detail-state";
|
||||
import RatePlanFormState from "@/lib/price-plan-detail/state/rate-plan-form-state";
|
||||
import { observer } from "mobx-react-lite";
|
||||
|
||||
|
||||
const getStepStyle = (active: boolean) => ({
|
||||
borderColor: active ? "#00879E" : "#D1D5DB", // tailwind: gray-300
|
||||
textColor: active ? "#00879E" : "#9CA3AF", // tailwind: gray-400
|
||||
bgColor: active ? "#00879E" : "#D1D5DB",
|
||||
iconText: active ? "text-[#00879E]" : "text-gray-400",
|
||||
opacity: active ? "opacity-100" : "opacity-30"
|
||||
});
|
||||
|
||||
interface Props {
|
||||
mainState: PricePlanDetailState
|
||||
formState: RatePlanFormState
|
||||
}
|
||||
|
||||
const CreateRatePlan = observer(({
|
||||
mainState,
|
||||
formState
|
||||
}: Props) => {
|
||||
const isRatePlanActive = mainState.getFlow() >= 1;
|
||||
const isPriceActive = mainState.getFlow() >= 2;
|
||||
|
||||
const ratePlanStyle = getStepStyle(isRatePlanActive);
|
||||
const priceStyle = getStepStyle(isPriceActive);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={`flex flex-col items-center text-center ${ratePlanStyle.opacity}`}>
|
||||
<div
|
||||
className="relative w-24 h-24 cursor-pointer rounded-full bg-white flex items-center justify-center"
|
||||
style={{ borderWidth: "4px", borderColor: ratePlanStyle.borderColor }}
|
||||
onClick={() => {
|
||||
formState.setOpen(true)
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
className={`w-10 h-10 ${ratePlanStyle.iconText}`}
|
||||
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 text-white text-sm font-bold flex items-center justify-center"
|
||||
style={{ backgroundColor: ratePlanStyle.bgColor }}
|
||||
>
|
||||
+
|
||||
</span>
|
||||
</div>
|
||||
<span className={`mt-2 font-medium`} style={{ color: ratePlanStyle.textColor }}>
|
||||
Rate Plan
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className={`text-3xl`} style={{ color: isPriceActive ? "#00879E" : "#D1D5DB", opacity: isPriceActive ? 1 : 0.3 }}>
|
||||
→
|
||||
</div>
|
||||
|
||||
<div className={`flex flex-col items-center text-center ${priceStyle.opacity}`}>
|
||||
<div
|
||||
className="relative w-24 h-24 rounded-full bg-white flex items-center justify-center"
|
||||
style={{ borderWidth: "4px", borderColor: priceStyle.borderColor }}
|
||||
>
|
||||
<svg
|
||||
className={`w-10 h-10 ${priceStyle.iconText}`}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M12 8c-2.21 0-4 1.79-4 4 0 1.84 1.28 3.39 3 3.87V18h2v-2.13c1.72-.48 3-2.03 3-3.87 0-2.21-1.79-4-4-4z" />
|
||||
</svg>
|
||||
<span
|
||||
className="absolute -top-2 -right-2 w-6 h-6 rounded-full text-white text-sm font-bold flex items-center justify-center"
|
||||
style={{ backgroundColor: priceStyle.bgColor }}
|
||||
>
|
||||
+
|
||||
</span>
|
||||
</div>
|
||||
<span className={`mt-2 font-medium`} style={{ color: priceStyle.textColor }}>
|
||||
Price
|
||||
</span>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
})
|
||||
|
||||
export default CreateRatePlan
|
||||
24
lib/price-plan-detail/view/tab/usage-content/flow/index.tsx
Normal file
24
lib/price-plan-detail/view/tab/usage-content/flow/index.tsx
Normal file
@ -0,0 +1,24 @@
|
||||
import RatePlanFormState from "@/lib/price-plan-detail/state/rate-plan-form-state"
|
||||
import CreateEvent from "./create-event"
|
||||
import CreateRatePlan from "./create-rate-plan"
|
||||
import PricePlanDetailState from "@/lib/price-plan-detail/state/price-plan-detail-state"
|
||||
import { observer } from "mobx-react-lite"
|
||||
|
||||
interface Props {
|
||||
mainState: PricePlanDetailState
|
||||
formState: RatePlanFormState
|
||||
}
|
||||
const RatePlanFlow = observer( ({mainState, formState}: Props) => {
|
||||
if(mainState.getFlow() >= 2) return null
|
||||
|
||||
return (
|
||||
<section className={`flex gap-12 justify-center items-center ${mainState.getFlow() ? "col-span-9" : "col-span-12"}`}>
|
||||
{/* Step 1 */}
|
||||
<CreateEvent mainState={mainState} />
|
||||
{/* Step 2 */}
|
||||
<CreateRatePlan mainState={mainState} formState={formState} />
|
||||
</section>
|
||||
)
|
||||
})
|
||||
|
||||
export default RatePlanFlow
|
||||
Reference in New Issue
Block a user