app

figma · Jun 26, 2024 · 463e933 · 463e933
1 parent 9f25ace
commit 463e933
Showing 1 changed file with 23 additions and 34 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -280,54 +280,43 @@ function App() {
         </Panel>
       </Section>
       <Section padding={sectionPadding}>
-        <Flex container wrap type="quarter" gap={flexGap}>
-          {isMobile ? null : (
-            <FlexItem size="minor">Filter content will go here</FlexItem>
-          )}
+        <Flex container wrap gap={flexGap}>
           <FlexItem size={isDesktop ? "major" : "full"}>
             <Flex direction="column" gap="1200" alignSecondary="stretch">
               <Flex
-                type="auto"
                 alignPrimary="space-between"
                 alignSecondary="center"
+                type="quarter"
                 wrap
                 gap="600"
               >
                 <FlexItem size="fill">
+                  <TagToggleGroup
+                    selectionMode="multiple"
+                    aria-label="Search filters"
+                    defaultSelectedKeys={["new"]}
+                  >
+                    <TagToggleList>
+                      <TagToggle id="new" iconStart={<IconCheck />}>
+                        New
+                      </TagToggle>
+                      <TagToggle id="price-ascending">
+                        Price ascending
+                      </TagToggle>
+                      <TagToggle id="price-descending">
+                        Price descending
+                      </TagToggle>
+                      <TagToggle id="rating">Rating</TagToggle>
+                    </TagToggleList>
+                  </TagToggleGroup>
+                </FlexItem>
+                <FlexItem size="minor">
                   <Flex alignPrimary="stretch">
                     <Search placeholder="Search" />
                   </Flex>
                 </FlexItem>
-                <TagToggleGroup
-                  selectionMode="multiple"
-                  aria-label="Search filters"
-                  defaultSelectedKeys={["new"]}
-                >
-                  <TagToggleList>
-                    <TagToggle id="new" iconStart={<IconCheck />}>
-                      New
-                    </TagToggle>
-                    <TagToggle id="price-ascending">Price ascending</TagToggle>
-                    <TagToggle id="price-descending">
-                      Price descending
-                    </TagToggle>
-                    <TagToggle id="rating">Rating</TagToggle>
-                  </TagToggleList>
-                </TagToggleGroup>
               </Flex>
-              <Flex type="third" wrap gap="600">
-                <ProductInfoCard
-                  asset={<Image alt="Accessibility!" src={placeholder} />}
-                  heading="Product"
-                  price="5"
-                  description="Wow do we have a cool thing for you. What an amazing thing."
-                />
-                <ProductInfoCard
-                  asset={<Image alt="Accessibility!" src={placeholder} />}
-                  heading="Product"
-                  price="5"
-                  description="Wow do we have a cool thing for you. What an amazing thing."
-                />
+              <Flex type="quarter" wrap gap="600">
                 <ProductInfoCard
                   asset={<Image alt="Accessibility!" src={placeholder} />}
                   heading="Product"