init project portal web

2025-04-15 13:56:54 +07:00
parent 9a25243035
commit 8b15dcebf8
122 changed files with 13965 additions and 1 deletions
--- a/lib/price-plan-detail/view/header/index.tsx
+++ b/lib/price-plan-detail/view/header/index.tsx
@ -0,0 +1,45 @@
+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