Add buy button in sign up page

src/pages/SignUp.tsx

@@ -3,6 +3,7 @@ import {
   Button,
   SpaceBetween,
   Container,
+  Header,
 } from "@cloudscape-design/components";
 import { useState } from "react";
 import { FormattedDate } from "react-intl";
@@ -14,33 +15,45 @@ export const SignUp = () => {
   const isDateEnabled = (date: Date) =>
     [tuesday, thursday].includes(date.getDay());
   const availableSlots: number = 3;
+  const availableTokens: number = 0;
 
   return (
     <SpaceBetween size="s" alignItems={"center"}>
-      <Calendar
+      <Container>
-        value={selectedDate || ""}
+        <Header>Pick a date</Header>
-        onChange={(e) => setSelectedDate(e.detail.value)}
+        <Calendar
-        isDateEnabled={isDateEnabled}
+          value={selectedDate || ""}
-      />
+          onChange={(e) => setSelectedDate(e.detail.value)}
-      {selectedDate && (
+          isDateEnabled={isDateEnabled}
-        <Container
+        />
-          header={
+        {selectedDate && (
-            <FormattedDate
+          <>
-              value={selectedDate}
+            <Header>
-              day="numeric"
+              <FormattedDate
-              month="long"
+                value={selectedDate}
-              year="numeric"
+                day="numeric"
-            />
+                month="long"
-          }
+                year="numeric"
-        >
+              />
-          {availableSlots === 0 ? (
+            </Header>
-            <p>There are no available slots for this date.</p>
+            {availableSlots === 0 ? (
-          ) : (
+              <p>There are no available slots for this date.</p>
-            <>
+            ) : (
-              <p>There are {availableSlots} available slots for this date.</p>
+              <>
-              <Button>Sign up</Button>
+                <p>There are {availableSlots} available slots for this date.</p>
-            </>
+                <Button disabled={!availableTokens}>Sign up</Button>
-          )}
+              </>
+            )}
+          </>
+        )}
+      </Container>
+      {!availableTokens && (
+        <Container>
+          <p>
+            You don't have any more tokens to sign up to any slot, please buy
+            here.
+          </p>
+          <Button>Buy</Button>
         </Container>
       )}
     </SpaceBetween>