From 633269f74f61d8c64f9f374a0d45545bd8445017 Mon Sep 17 00:00:00 2001
From: MiguelMLorente <miguel.munoz.lorente.14@gmail.com>
Date: Sun, 16 Nov 2025 17:48:04 +0100
Subject: [PATCH] Create buy box skeleton

---
 README.md         |  1 -
 src/App.tsx       |  2 ++
 src/pages/Buy.tsx | 26 +++++++++++++++++++++++++-
 3 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index cf42564..fbf4ffe 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1 @@
 # Paysplit
-
diff --git a/src/App.tsx b/src/App.tsx
index 8c3fbc7..ea019c7 100644
--- a/src/App.tsx
+++ b/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>
diff --git a/src/pages/Buy.tsx b/src/pages/Buy.tsx
index da89992..00a0f70 100644
--- a/src/pages/Buy.tsx
+++ b/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>
+  );
+};