45 lines
1.6 KiB
TypeScript
45 lines
1.6 KiB
TypeScript
import { Edit2, LucideArrowLeft, PlusIcon, Trash2 } from "lucide-react"
|
|
import { useRouter } from "next/navigation"
|
|
import PricePlanDetailState from "../../state/price-plan-detail-state"
|
|
|
|
const themeColor = "#00879E"
|
|
|
|
interface Props {
|
|
mainState: PricePlanDetailState
|
|
}
|
|
|
|
const PricePlanHeader = ({
|
|
mainState
|
|
}: Props) => {
|
|
|
|
const router = useRouter()
|
|
|
|
const {
|
|
getName,
|
|
getVersion,
|
|
} = mainState
|
|
|
|
return (
|
|
<section className="flex border-y px-4 py-3 items-center justify-between bg-white shadow-sm">
|
|
<div className={`flex gap-4 items-center font-bold text-[${themeColor}]`}>
|
|
<LucideArrowLeft className="ml-4 cursor-pointer hover:text-[#006876]" onClick={() => router.back()} />
|
|
<h1 className="text-xl text-[#00879E]">Price Plan</h1>
|
|
</div>
|
|
<div className="ml-14 font-normal flex gap-2 items-center text-gray-600">
|
|
<span>Subscription Price</span>
|
|
<span>|</span>
|
|
<span className="font-medium text-[#00879E]">{getName()}</span>
|
|
<span>-</span>
|
|
<span>Version:</span>
|
|
<span className="text-sm font-bold text-[#00879E]">{getVersion()}</span>
|
|
</div>
|
|
<div className="flex items-center gap-3 mr-8 text-[#00879E]">
|
|
<Edit2 width={16} className="cursor-pointer hover:text-[#006876]" />
|
|
<PlusIcon width={20} className="cursor-pointer hover:text-[#006876]" />
|
|
<Trash2 width={16} className="cursor-pointer hover:text-red-500" />
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
export default PricePlanHeader |