[dashboard] Re-implement Plans page for new dashboard

Author: jankeromnes

components/dashboard/src/settings/Plans.tsx

@@ -4,13 +4,61 @@
  * See License-AGPL.txt in the project root for license information.
  */
 
+import SelectableCard from "../components/SelectableCard";
 import { SettingsPage } from "./SettingsPage";
 
 export default function Plans() {
     return <div>
         <SettingsPage title='Plans' subtitle='Manage account usage and billing.'>
-            <h3>Plans</h3>
+            <div className="w-full text-center">
+                <a href="#">Billing</a>
+            </div>
+            <div className="flex space-x-2">
+                <PlanCard title="FREE" selected={true} hours="50" price="FREE">
+                    <p>✓ Public Repositories</p>
+                    <p>✓ 4 Parallel Workspaces</p>
+                    <p>✓ 30 min Timeout</p>
+                </PlanCard>
+                <PlanCard title="PERSONAL" selected={false} hours="100" price="€8 per month">
+                    <p>← Everything in Free</p>
+                    <p>✓ Private Repositories</p>
+                </PlanCard>
+                <PlanCard title="PROFESSIONAL" selected={false} hours="∞" price="€23 per month">
+                    <p>← Everything in Personal</p>
+                    <p>✓ 8 Parallel Workspaces</p>
+                    <p>✓ Teams</p>
+                </PlanCard>
+                <PlanCard title="ULTIMATE" selected={false} hours="∞" price="€35 per month">
+                    <p className="truncate">← Everything in Professional</p>
+                    <p>✓ 16 Parallel Workspaces</p>
+                    <p>✓ 1h Timeout</p>
+                    <p>✓ 3h Timeout Boost</p>
+                </PlanCard>
+            </div>
         </SettingsPage>
     </div>;
 }
 
+interface PlanCardProps {
+  title: string;
+  selected: boolean;
+  hours: string;
+  price: string;
+  children: React.ReactNode;
+}
+
+function PlanCard(p: PlanCardProps) {
+    return <SelectableCard className="w-52" title={p.title} selected={p.selected} onClick={() => {}}>
+        <div className="mt-5 mb-5 flex flex-col items-center justify-center">
+            <p className="text-3xl text-gray-500 font-bold">{p.hours}</p>
+            <p className="text-base text-gray-500 font-bold">hours</p>
+        </div>
+        <div className="flex-grow flex flex-col space-y-2">
+            {p.children}
+        </div>
+        <div>
+            <p className="text-center font-semibold mb-2 mt-4">{p.price}</p>
+            <button className="w-full">Current Plan</button>
+        </div>
+    </SelectableCard>;
+}