This repository has been archived on 2022-10-07. You can view files and clone it, but cannot push or open issues or pull requests.
2022-03-02 11:51:16 +00:00
|
|
|
import { Link } from "gatsby";
|
|
|
|
import { useMemo } from "react";
|
|
|
|
|
|
|
|
import { Button } from "../Button";
|
|
|
|
|
|
|
|
const SuggestedPlan = ({ plans, activePlan }) => {
|
|
|
|
const nextPlan = useMemo(() => plans.find(({ tier }) => tier > activePlan.tier), [plans, activePlan]);
|
|
|
|
|
|
|
|
if (!nextPlan) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="mt-7">
|
|
|
|
<p className="font-sans font-semibold text-xs uppercase text-primary">Discover {nextPlan.name}</p>
|
|
|
|
<p className="pt-1 text-xs sm:text-base">{nextPlan.description}</p>
|
2022-04-15 14:53:49 +00:00
|
|
|
<Button $primary as={Link} to="/payments" className="mt-6">
|
2022-03-02 11:51:16 +00:00
|
|
|
Upgrade
|
|
|
|
</Button>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default SuggestedPlan;
|