From 5cc4eaa82be595f70e7a458e6686eb8267539ba9 Mon Sep 17 00:00:00 2001
From: Jake <97200987+jake-figma@users.noreply.github.com>
Date: Wed, 4 Sep 2024 13:03:48 -0500
Subject: [PATCH] fixes pricing card usage in app (#10)

---
 src/App.tsx | 43 +++++++++++++++----------------------------
 1 file changed, 15 insertions(+), 28 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index bb0b4ba..2e99e05 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -28,8 +28,6 @@ import {
   Text,
   TextContentHeading,
   TextHeading,
-  TextList,
-  TextListItem,
   TextPrice,
 } from "primitives";
 import { AuthenticationProvider } from "providers";
@@ -42,6 +40,7 @@ function App() {
   const [pricingInterval, setPricingInterval] = useState("monthly");
   const intervalText = pricingInterval === "monthly" ? "month" : "year";
   const annualRatio = pricingInterval === "monthly" ? 1 : 11;
+  const pricingSize = isDesktop ? "large" : "small";
 
   return (
     <AuthenticationProvider>
@@ -97,47 +96,35 @@ function App() {
           <FlexItem>
             <Flex wrap type="third" gap="1200">
               <PricingCard
+                size={pricingSize}
                 action="Select"
-                actionVariant="neutral"
                 heading="Free"
                 price={(0 * annualRatio).toString()}
-                pricePer={`/ ${intervalText}`}
-                list={
-                  <TextList>
-                    <TextListItem>List item 1</TextListItem>
-                    <TextListItem>List item 2</TextListItem>
-                    <TextListItem>List item 3</TextListItem>
-                  </TextList>
-                }
+                priceCurrency="$"
+                priceLabel={`/ ${intervalText}`}
+                list={["List item 1", "List item 2", "List item 3"]}
                 onAction={() => {}}
               />
               <PricingCard
+                size={pricingSize}
                 action="Select"
+                actionVariant="neutral"
+                variant="brand"
                 heading="Starter"
                 price={(50 * annualRatio).toString()}
-                pricePer={`/ ${intervalText}`}
-                list={
-                  <TextList>
-                    <TextListItem>List item 1</TextListItem>
-                    <TextListItem>List item 2</TextListItem>
-                    <TextListItem>List item 3</TextListItem>
-                  </TextList>
-                }
+                priceCurrency="$"
+                priceLabel={`/ ${intervalText}`}
+                list={["List item 1", "List item 2", "List item 3"]}
                 onAction={() => {}}
               />
               <PricingCard
+                size={pricingSize}
                 action="Select"
-                actionVariant="neutral"
                 heading="Enterprise"
                 price={(150 * annualRatio).toString()}
-                pricePer={`/ ${intervalText}`}
-                list={
-                  <TextList>
-                    <TextListItem>List item 1</TextListItem>
-                    <TextListItem>List item 2</TextListItem>
-                    <TextListItem>List item 3</TextListItem>
-                  </TextList>
-                }
+                priceCurrency="$"
+                priceLabel={`/ ${intervalText}`}
+                list={["List item 1", "List item 2", "List item 3"]}
                 onAction={() => {}}
               />
             </Flex>