feat(appearance): viewMode init

stoqey · Apr 13, 2024 · c5f53f2 · c5f53f2
1 parent 118ecd8
commit c5f53f2
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 42 deletions.
diff --git a/src/app/search/search.tsx b/src/app/search/search.tsx
@@ -54,8 +54,8 @@ export function AdsSearchPage(props: AdsSearchPageProps) {
               </Layout>
             </Column>
             <Column cols={{ default: 7 }}>
-              <Layout padding={2}>
-                <Layout padding={2}>
+              <Layout padding={{ bottom: 2, top: 1 }}>
+                <Layout display="flex" justifyContent="flex-end">
                   <SegmentedButton>
                     <SegmentedButtonOption
                       name="view-mode"

diff --git a/src/containers/AdSearch/ad.list.tsx b/src/containers/AdSearch/ad.list.tsx
@@ -119,47 +119,66 @@ export default function AdSearchList(props: AdSearchListProps) {
         </Layout>
       )}
 
-      <Tower
-        childWidth={TowerChildWidth.Medium}
-        gutterSize={TowerGutter.ExtraSmall}
-        placeholderItems={20}
-      >
-        {!isEmpty(adsItems) &&
-          adsItems?.map((item) => (
-            <AdsSearchItem
-              key={item?.id}
-              {...item}
-              linkTo={onLinkTo(item)}
-              {...props.itemProps}
-              viewMode={viewMode}
-            />
-          ))}
-
-        {!isPublic && (
-          <MediaCard
-            image={
-              <MediaCardImage
-                linkProps={{ renderLink, linkTo: '/store/ads/new' }}
-                cover={
-                  <Layout
-                    background={Background.AccentAlt}
-                    fullWidth
-                    fullHeight
-                    display={Display.Flex}
-                    flexDirection={FlexDirection.Column}
-                    justifyContent={JustifyContent.Center}
-                    alignItems={AlignItems.Center}
-                  >
-                    <CoreText>Create a new ad for your products</CoreText>
-                    <br />
-                    <Button icon={SVGAsset.New}>New Ad</Button>
-                  </Layout>
-                }
+      {viewMode === 'list' ? (
+        <Layout
+          fullWidth
+          display={Display.Flex}
+          flexDirection={FlexDirection.Column}
+        >
+          {!isEmpty(adsItems) &&
+            adsItems?.map((item) => (
+              <AdsSearchItem
+                key={item?.id}
+                {...item}
+                linkTo={onLinkTo(item)}
+                {...props.itemProps}
+                viewMode={viewMode}
               />
-            }
-          />
-        )}
-      </Tower>
+            ))}
+        </Layout>
+      ) : (
+        <Tower
+          childWidth={TowerChildWidth.Medium}
+          gutterSize={TowerGutter.ExtraSmall}
+          placeholderItems={20}
+        >
+          {!isEmpty(adsItems) &&
+            adsItems?.map((item) => (
+              <AdsSearchItem
+                key={item?.id}
+                {...item}
+                linkTo={onLinkTo(item)}
+                {...props.itemProps}
+                viewMode={viewMode}
+              />
+            ))}
+
+          {!isPublic && (
+            <MediaCard
+              image={
+                <MediaCardImage
+                  linkProps={{ renderLink, linkTo: '/store/ads/new' }}
+                  cover={
+                    <Layout
+                      background={Background.AccentAlt}
+                      fullWidth
+                      fullHeight
+                      display={Display.Flex}
+                      flexDirection={FlexDirection.Column}
+                      justifyContent={JustifyContent.Center}
+                      alignItems={AlignItems.Center}
+                    >
+                      <CoreText>Create a new ad for your products</CoreText>
+                      <br />
+                      <Button icon={SVGAsset.New}>New Ad</Button>
+                    </Layout>
+                  }
+                />
+              }
+            />
+          )}
+        </Tower>
+      )}
     </Layout>
   );
 }