fixes pricing card usage in app (#10)

figma · Sep 4, 2024 · 5cc4eaa · 5cc4eaa
1 parent 2ac6125
commit 5cc4eaa
Showing 1 changed file with 15 additions and 28 deletions.
diff --git 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>