From d770642d7d7791217802fe5ce97770441ebd7a38 Mon Sep 17 00:00:00 2001
From: Ava Gaiety W <ava@wroten.me>
Date: Sat, 14 Jun 2025 14:22:21 -0600
Subject: [PATCH] list ticket details, begin on form

---
 src/BandForm.js   | 29 +++++++++++++++++++++++------
 src/index.css     | 47 +++++++++++++++++++++++++++++++++++++++++++++++
 src/variables.css |  4 ++++
 3 files changed, 74 insertions(+), 6 deletions(-)

diff --git a/src/BandForm.js b/src/BandForm.js
index 2c6528c..6f407c5 100644
--- a/src/BandForm.js
+++ b/src/BandForm.js
@@ -1,12 +1,29 @@
+function costToReadable(cost) {
+  const centsInADollar = 100;
+  return cost / centsInADollar;
+}
+
 function BandForm({ band }) {
   return (
-    <div className="form">
-      {band.ticketTypes.map((ticket) => (
-        <p>
-          {ticket.name} - {ticket.description}
-        </p>
+    <form className="form">
+      <h2>Select Tickets</h2>
+
+      {band.ticketTypes.map(({type, name, description, cost}) => (
+        <div className="ticketWrapper">
+          <div className="ticket">
+            <div className="ticketDetails">
+              <h3>{name}</h3>
+              <p>{description}</p>
+              <h4>${costToReadable(cost)}</h4>
+            </div>
+            <div>
+              <input type="number" step="1" />
+            </div>
+          </div>
+          <hr />
+        </div>
       ))}
-    </div>
+    </form>
   );
 }
 
diff --git a/src/index.css b/src/index.css
index 3500437..83b9a12 100644
--- a/src/index.css
+++ b/src/index.css
@@ -9,6 +9,35 @@ html {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   margin: var(--spacing-lg);
+  font-size: var(--font-base);
+}
+
+hr {
+  border-color: var(--color-text);
+  border-width: 1px;
+  width: 100%;
+}
+
+h1, h2 {
+  color: var(--color-text-darker);
+  font-weight: bold;
+}
+
+h1 {
+  font-size: var(--font-xl);
+}
+
+h2 {
+  font-size: var(--font-lg);
+}
+
+h3 {
+  font-size: var(--font-lg);
+  color: var(--color-text-dark);
+}
+
+h4 {
+  font-size: var(--font-lg);
 }
 
 .wrapper {
@@ -37,4 +66,22 @@ html {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-lg);
+
+  .ticketWrapper {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-lg);
+  }
+
+  .ticket {
+    display: flex;
+    flex-direction: row;
+    gap: var(--spacing-lg);
+  }
+
+  .ticketDetails {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-md);
+  }
 }
diff --git a/src/variables.css b/src/variables.css
index 4753626..9e632f2 100644
--- a/src/variables.css
+++ b/src/variables.css
@@ -6,4 +6,8 @@
   --color-text-dark: #626262;
   --color-text-darker: #3d4753;
   --color-section: #f7f8fa;
+
+  --font-base: 16px;
+  --font-lg: 1.75rem;
+  --font-xl: 2.5rem;
 }