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"}>
+      <Container>
+        <Header>Pick a date</Header>
         <Calendar
           value={selectedDate || ""}
           onChange={(e) => setSelectedDate(e.detail.value)}
           isDateEnabled={isDateEnabled}
         />
         {selectedDate && (
-        <Container
-          header={
+          <>
+            <Header>
               <FormattedDate
                 value={selectedDate}
                 day="numeric"
                 month="long"
                 year="numeric"
               />
-          }
-        >
+            </Header>
             {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>
+                <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>