Skip to content

Commit bb08e33

Browse files
committed
[dashboard] Re-implement Plans page for new dashboard
1 parent 9e6635d commit bb08e33

File tree

1 file changed

+49
-1
lines changed

1 file changed

+49
-1
lines changed

components/dashboard/src/settings/Plans.tsx

Lines changed: 49 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,61 @@
44
* See License-AGPL.txt in the project root for license information.
55
*/
66

7+
import SelectableCard from "../components/SelectableCard";
78
import { SettingsPage } from "./SettingsPage";
89

910
export default function Plans() {
1011
return <div>
1112
<SettingsPage title='Plans' subtitle='Manage account usage and billing.'>
12-
<h3>Plans</h3>
13+
<div className="w-full text-center">
14+
<a href="#">Billing</a>
15+
</div>
16+
<div className="flex space-x-2">
17+
<PlanCard title="FREE" selected={true} hours="50" price="FREE">
18+
<p>✓ Public Repositories</p>
19+
<p>✓ 4 Parallel Workspaces</p>
20+
<p>✓ 30 min Timeout</p>
21+
</PlanCard>
22+
<PlanCard title="PERSONAL" selected={false} hours="100" price="€8 per month">
23+
<p>← Everything in Free</p>
24+
<p>✓ Private Repositories</p>
25+
</PlanCard>
26+
<PlanCard title="PROFESSIONAL" selected={false} hours="∞" price="€23 per month">
27+
<p>← Everything in Personal</p>
28+
<p>✓ 8 Parallel Workspaces</p>
29+
<p>✓ Teams</p>
30+
</PlanCard>
31+
<PlanCard title="ULTIMATE" selected={false} hours="∞" price="€35 per month">
32+
<p className="truncate">← Everything in Professional</p>
33+
<p>✓ 16 Parallel Workspaces</p>
34+
<p>✓ 1h Timeout</p>
35+
<p>✓ 3h Timeout Boost</p>
36+
</PlanCard>
37+
</div>
1338
</SettingsPage>
1439
</div>;
1540
}
1641

42+
interface PlanCardProps {
43+
title: string;
44+
selected: boolean;
45+
hours: string;
46+
price: string;
47+
children: React.ReactNode;
48+
}
49+
50+
function PlanCard(p: PlanCardProps) {
51+
return <SelectableCard className="w-52" title={p.title} selected={p.selected} onClick={() => {}}>
52+
<div className="mt-5 mb-5 flex flex-col items-center justify-center">
53+
<p className="text-3xl text-gray-500 font-bold">{p.hours}</p>
54+
<p className="text-base text-gray-500 font-bold">hours</p>
55+
</div>
56+
<div className="flex-grow flex flex-col space-y-2">
57+
{p.children}
58+
</div>
59+
<div>
60+
<p className="text-center font-semibold mb-2 mt-4">{p.price}</p>
61+
<button className="w-full">Current Plan</button>
62+
</div>
63+
</SelectableCard>;
64+
}

0 commit comments

Comments
 (0)