portal-dashboard/app/components/upgrade-account-banner.tsx

53 lines
1.6 KiB
TypeScript
Raw Permalink Normal View History

import { useGetIdentity } from "@refinedev/core"
import { Identity } from "~/data/auth-provider"
import {
CrownIcon,
PersonIcon,
CloudIcon,
CheckRoundedIcon,
AddIcon,
CloudDownloadIcon
} from "./icons"
import { Avatar } from "./ui/avatar"
import { Button } from "./ui/button"
2024-03-12 20:22:54 +00:00
export const UpgradeAccountBanner = () => {
const { data: identity } = useGetIdentity<Identity>();
return (
<div className="flex items-center justify-between p-8 border border-ring rounded-lg bg-secondary-1">
<div className="flex items-center gap-x-4">
<Avatar className="border-2 border-ring h-20 w-20" />
<div>
<div className="flex items-center gap-x-2 font-bold">
{`${identity?.firstName} ${identity?.lastName}`}
<CrownIcon className="text-ring" />
</div>
<div className="flex gap-x-5 mt-2">
<div className="flex items-center gap-x-2 text-white text-sm">
<PersonIcon />
Lite Account (upgrade)
2024-03-12 20:22:54 +00:00
</div>
<div className="flex items-center gap-x-2 text-white text-sm">
<CloudIcon />
120 GB / 130 GB
</div>
<div className="flex items-center gap-x-2 text-white text-sm">
<CloudDownloadIcon />
10 GB / 25 GB
</div>
<div className="flex items-center gap-x-2 text-white text-sm">
<CheckRoundedIcon />
0% Free Usage
</div>
</div>
2024-03-12 20:22:54 +00:00
</div>
</div>
<Button className="gap-x-2 py-6" variant="accent">
<AddIcon />
Upgrade to Premium
</Button>
</div>
)
}