react native problems

package.json

@@ -42,4 +42,4 @@
     "prettier": "^2.8.8",
     "typescript": "^4.9.5"
   }
-}
+}

src/app/checkout/styles.ts

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+const CheckoutButton = styled.button`
+  width: 100px;
+  height: 50px;
+`;
+
+export default CheckoutButton;

src/app/delivery/page.tsx

@@ -1,7 +1,34 @@
+'use client';
+
+// import React from 'react';
+import NavBar from '../../components/NavBar';
+import { GlobalStyle } from '../../styles/components';
+import { Heading1 } from '../../styles/fonts';
+import {
+  DeliveryContainer,
+  OrderContainer,
+  OrderSummary,
+  OrderButton,
+  InformationContainer,
+  InformationText,
+} from './styles';
+
 export default function App() {
   return (
     <main>
-      <div> Delivery </div>
+      <GlobalStyle />
+      <NavBar />
+      <DeliveryContainer>
+        <InformationContainer>
+          <Heading1>Shipping</Heading1>
+          <InformationText>Ethan Auyeung</InformationText>
+          <InformationText>123 Telegraph Ave</InformationText>
+        </InformationContainer>
+        <OrderContainer>
+          <OrderSummary />
+          <OrderButton>Place Order</OrderButton>
+        </OrderContainer>
+      </DeliveryContainer>
     </main>
   );
 }

src/app/delivery/styles.ts

@@ -0,0 +1,68 @@
+import styled from 'styled-components';
+import COLORS from '../../styles/colors';
+
+export const DeliveryContainer = styled.div`
+  margin-top: 50px;
+  margin-left: 80px;
+  width: 1300px;
+  height: 500px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  align-items: center;
+  border: 2px solid black;
+`;
+
+export const InformationContainer = styled.div`
+  width: 730px;
+  height: 400px;
+  border: 2px solid black;
+`;
+
+export const InformationText = styled.div`
+  width: 700px;
+  height: 50px;
+  margin: 10px;
+  border-radius: 4px;
+  border: 1px solid ${COLORS.neutralGrey};
+  background: ${COLORS.lightGrey};
+  display: flex; /* Use flexbox */
+  align-items: center; /* Center vertically */
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  padding-left: 20px;
+`;
+
+export const OrderContainer = styled.div`
+  width: 350px;
+  height: 450px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-evenly;
+`;
+
+export const OrderSummary = styled.div`
+  width: 350px;
+  height: 360px;
+  border-radius: 8px;
+  background: ${COLORS.white};
+  box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.15);
+  align-items: center;
+`;
+
+export const OrderButton = styled.button`
+  width: 350px;
+  height: 50px;
+  flex-shrink: 0;
+  align-items: center;
+  background: ${COLORS.navy};
+  border-radius: 8px;
+  color: ${COLORS.white};
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+`;

src/app/storefront/styles.ts

@@ -5,6 +5,7 @@ interface props {
 }
 
 export const Button = styled.button<props>`
+  // position: sticky;
   background-color: ${props => (props.isClicked ? '#00507f' : '#C7E1FF')};
   border-radius: 50%;
   width: 50px;
@@ -38,6 +39,7 @@ export const ItemContainer = styled.div`
 `;
 
 export const ButtonsContainer = styled.div`
+  position: sticky;
   margin-left: 400px;
   margin-right: 400px;
   width: 600px;
@@ -46,7 +48,7 @@ export const ButtonsContainer = styled.div`
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  position: absolute;
+  // position: absolute;
   z-index: 5;
 `;
 

src/styles/components.tsx

@@ -50,7 +50,7 @@ export const NavBarComp = styled.nav`
   height: 200px;
   padding-top: 20px;
   z-index: 1;
-  position: absolute;
+  position: sticky;
   width: 100%;
   background: var(--Light-Periwinkle, #f4f7ff);
   box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.1);

src/styles/fonts.tsx

@@ -1,3 +1,4 @@
+// import React from 'react-native';
 import styled from 'styled-components/native';
 
 export const Heading1 = styled.Text`