awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-15 14:27:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Continue to make progress on usage and billing page revamp

Browse Source
This commit is contained in:
Tuan Dang
2023-06-25 17:03:41 +07:00
parent 8d82e2d0fc
commit a127d452bd
27 changed files with 1940 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/settings/billing/[id].tsx
+44 -36
View File
@@ -1,9 +1,7 @@
import { useTranslation } from "react-i18next";
import Head from "next/head";
import Plan from "@app/components/billing/Plan";
import NavHeader from "@app/components/navigation/NavHeader";
import { useSubscription } from "@app/context";
import { BillingSettingsPage } from "@app/views/Settings/BillingSettingsPage";
export default function SettingsBilling() {
const { subscription } = useSubscription();
@@ -55,45 +53,55 @@ export default function SettingsBilling() {
];
return (
<div className="flex flex-col justify-between bg-bunker-800 pb-4 text-white">
<div className="h-full bg-bunker-800">
<Head>
<title>{t("common.head-title", { title: t("billing.title") })}</title>
<link rel="icon" href="/infisical.ico" />
</Head>
<div className="flex flex-row">
<div className="w-full pb-2">
<NavHeader pageName={t("billing.title")} />
<div className="my-8 ml-6 flex max-w-5xl flex-row items-center justify-between text-xl">
<div className="flex flex-col items-start justify-start text-3xl">
<p className="mr-4 font-semibold text-gray-200">{t("billing.title")}</p>
<p className="mr-4 text-base font-normal text-gray-400">{t("billing.description")}</p>
</div>
</div>
<div className="ml-6 flex w-max flex-col text-mineshaft-50">
<p className="text-xl font-semibold">{t("billing.subscription")}</p>
<div className="mt-4 grid grid-cols-2 grid-rows-2 gap-y-6 gap-x-3 overflow-x-auto">
{plans.map((plan) => (
<Plan key={plan.name} plan={plan} />
))}
</div>
{/* <p className="mt-12 text-xl font-bold">{t("billing.current-usage")}</p>
<div className="flex flex-row">
<div className="mr-4 mt-8 flex w-60 flex-col items-center justify-center rounded-md bg-white/5 pt-6 pb-10 text-gray-300">
<p className="text-6xl font-bold">{numUsers}</p>
<p className="text-gray-300">
Organization members
</p>
</div>
<div className="mr-4 mt-8 text-gray-300 w-60 pt-6 pb-10 rounded-md bg-white/5 flex justify-center items-center flex flex-col">
<p className="text-6xl font-bold">1 </p>
<p className="text-gray-300">Organization projects</p>
</div>
</div> */}
</div>
</div>
</div>
<BillingSettingsPage />
</div>
);
}
SettingsBilling.requireAuth = true;
// return (
// <div className="h-full bg-bunker-800">
// <Head>
// <title>{t("common.head-title", { title: t("billing.title") })}</title>
// <link rel="icon" href="/infisical.ico" />
// </Head>
// <div className="h-full bg-red">
// <NavHeader pageName={t("billing.title")} />
// <div className="my-8 ml-6 flex max-w-5xl flex-row items-center justify-between text-xl">
// <div className="flex flex-col items-start justify-start text-3xl">
// <p className="mr-4 font-semibold text-gray-200">{t("billing.title")}</p>
// <p className="mr-4 text-base font-normal text-gray-400">{t("billing.description")}</p>
// </div>
// </div>
// <div className="ml-6 flex w-max flex-col text-mineshaft-50">
// <p className="text-xl font-semibold">{t("billing.subscription")}</p>
// <div className="mt-4 grid grid-cols-2 grid-rows-2 gap-y-6 gap-x-3 overflow-x-auto">
// {plans.map((plan) => (
// <Plan key={plan.name} plan={plan} />
// ))}
// </div>
// {/* <p className="mt-12 text-xl font-bold">{t("billing.current-usage")}</p>
// <div className="flex flex-row">
// <div className="mr-4 mt-8 flex w-60 flex-col items-center justify-center rounded-md bg-white/5 pt-6 pb-10 text-gray-300">
// <p className="text-6xl font-bold">{numUsers}</p>
// <p className="text-gray-300">
// Organization members
// </p>
// </div>
// <div className="mr-4 mt-8 text-gray-300 w-60 pt-6 pb-10 rounded-md bg-white/5 flex justify-center items-center flex flex-col">
// <p className="text-6xl font-bold">1 </p>
// <p className="text-gray-300">Organization projects</p>
// </div>
// </div> */}
// </div>
// </div>
// </div>
// );