54 lines
2.0 KiB
TypeScript
54 lines
2.0 KiB
TypeScript
import { useState } from "react";
|
|
import Image from "@/components/Image";
|
|
import Icon from "@/components/Icon";
|
|
import ModalPlan from "@/components/ModalPlan";
|
|
|
|
const Upgrade = ({}) => {
|
|
const [open, setOpen] = useState(false);
|
|
|
|
return (
|
|
<>
|
|
<div className="mt-8 max-md:mt-6">
|
|
<div className="">
|
|
<Image
|
|
className="w-full opacity-100 dark:hidden"
|
|
src="/images/upgrade-pic-light.png"
|
|
width={220}
|
|
height={140}
|
|
alt="Upgrade"
|
|
priority
|
|
/>
|
|
<Image
|
|
className="!hidden w-full opacity-100 dark:!block"
|
|
src="/images/upgrade-pic-dark.png"
|
|
width={220}
|
|
height={140}
|
|
alt="Upgrade"
|
|
priority
|
|
/>
|
|
</div>
|
|
<div className="p-3 rounded-b-xl dark:shadow-[inset_0_0_0.1875rem_0_rgba(255,255,255,0.16)]">
|
|
<div
|
|
className="group flex items-center gap-1 text-label-md cursor-pointer"
|
|
onClick={() => setOpen(true)}
|
|
>
|
|
Upgrade to Premium{" "}
|
|
<Icon
|
|
className="fill-blue-500 transition-transform group-hover:translate-x-0.5"
|
|
name="arrow"
|
|
/>
|
|
</div>
|
|
<div className="mt-0.75 text-label-xs text-sub-600">
|
|
Want to reach{" "}
|
|
<span className="text-strong-950">more features</span>{" "}
|
|
and grow much bigger?
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<ModalPlan open={open} onClose={() => setOpen(false)} />
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Upgrade;
|