Create buy box skeleton

README.md

@@ -1,2 +1 @@
 # Paysplit
-

src/App.tsx

@@ -5,6 +5,7 @@ import icon from "./paella-icon.png";
 import { Route, Routes } from "react-router";
 import { SignUp } from "./pages/SignUp.tsx";
 import { Register } from "./pages/Register.tsx";
+import { Buy } from "./pages/Buy.tsx";
 
 function App() {
   return (
@@ -15,6 +16,7 @@ function App() {
           <Route path="/" element={<Login />} />
           <Route path="/signup" element={<SignUp />} />
           <Route path="/register" element={<Register />} />
+          <Route path="/buy" element={<Buy />} />
         </Routes>
       </SpaceBetween>
     </ContentLayout>

src/pages/Buy.tsx

@@ -1 +1,25 @@
-export const Buy = () => {};
+import {
+  Button,
+  Container,
+  Header,
+  Input,
+  SpaceBetween,
+} from "@cloudscape-design/components";
+import { useState } from "react";
+
+export const Buy = () => {
+  const [quantity, setQuantity] = useState(0);
+  return (
+    <Container>
+      <SpaceBetween size="s">
+        <Header>Buy tokens</Header>
+        <Input
+          type="number"
+          value={quantity.toString()}
+          onChange={(e) => setQuantity(parseInt(e.detail.value))}
+        />
+        <Button>Buy</Button>
+      </SpaceBetween>
+    </Container>
+  );
+};