Merge pull request #631 from us3r-network/F-exploreHomeUi-shixuewen

feat: home community ui & hot community quantity
degencast · Mar 19, 2024 · 1367f1f · 1367f1f
2 parents 3c52388 + 5a0ea2f
commit 1367f1f
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 27 deletions.
diff --git a/apps/u3/src/components/explore/posts/ImgPostCard.tsx b/apps/u3/src/components/explore/posts/ImgPostCard.tsx
@@ -83,10 +83,11 @@ function FirstCard({ data, ...wrapperProps }: Props) {
                 </AuthorDisplayName>
               </UserNameWrapper>
             </div>
-            {!isMobile && <RecReason>{recReason}</RecReason>}
+            <div className="flex items-center gap-[10px]">
+              {platformIconUrl && <PlatformIcon src={platformIconUrl} />}
+              <RecReason>{recReason}</RecReason>
+            </div>
           </div>
-
-          {platformIconUrl && <PlatformIcon src={platformIconUrl} />}
         </div>
       </CardBody>
     </CardWrapper>
@@ -139,9 +140,11 @@ function RightCard({ idx, data, ...wrapperProps }: Props) {
                   {authorDisplayName} {authorHandle && `@${authorHandle}`}
                 </AuthorDisplayName>
               </UserNameWrapper>
-              {!isMobile && <RecReason>{recReason}</RecReason>}
+              <div className="flex items-center gap-[10px]">
+                {platformIconUrl && <PlatformIcon src={platformIconUrl} />}
+                <RecReason>{recReason}</RecReason>
+              </div>
             </div>
-            {platformIconUrl && <PlatformIcon src={platformIconUrl} />}
           </div>
         </div>
       </CardBody>
@@ -194,9 +197,11 @@ function BottomCard({ idx, data, ...wrapperProps }: Props) {
                   {authorDisplayName} {authorHandle && `@${authorHandle}`}
                 </AuthorDisplayName>
               </UserNameWrapper>
-              {!isMobile && <RecReason>{recReason}</RecReason>}
+              <div className="flex items-center gap-[10px]">
+                {platformIconUrl && <PlatformIcon src={platformIconUrl} />}
+                <RecReason>{recReason}</RecReason>
+              </div>
             </div>
-            {platformIconUrl && <PlatformIcon src={platformIconUrl} />}
           </div>
         </div>
       </CardBody>
@@ -223,7 +228,7 @@ function CardBody({ className, ...props }: ComponentPropsWithRef<'div'>) {
     <div
       className={cn(
         'w-full h-full [transition:all_0.3s] flex gap-[20px] relative',
-        isMobile ? 'flex-col gap-[10px]' : '',
+        'max-sm:flex-col max-sm:gap-[10px]',
         className || ''
       )}
       {...props}
@@ -236,7 +241,7 @@ function Title({ className, ...props }: ComponentPropsWithRef<'span'>) {
     <span
       className={cn(
         'font-bold text-[18px] leading-[19px] text-[#ffffff]',
-        isMobile ? 'text-[16px] leading-[19px] font-medium' : '',
+        'max-sm:text-[16px] max-sm:leading-[19px] max-sm:font-medium',
         className || ''
       )}
       {...props}
@@ -311,8 +316,7 @@ function PlatformIcon({ className, ...props }: ComponentPropsWithRef<'img'>) {
   return (
     <img
       className={cn(
-        'w-[30px] h-[30px] rounded-[50%] object-cover flex-shrink-0',
-        isMobile ? 'w-[14px] h-[14px]' : '',
+        'w-[14px] h-[14px] rounded-[50%]  object-cover flex-shrink-0',
         className || ''
       )}
       alt=""

diff --git a/apps/u3/src/components/explore/posts/PostCard.tsx b/apps/u3/src/components/explore/posts/PostCard.tsx
@@ -1,9 +1,11 @@
 import styled, { StyledComponentPropsWithRef } from 'styled-components';
 
 import { isMobile } from 'react-device-detect';
+import { ComponentPropsWithRef } from 'react';
 import CardBase from '../../common/card/CardBase';
 import EllipsisText from '../../common/text/EllipsisText';
 import { HeartIcon3 } from '../../common/icons/HeartIcon';
+import { cn } from '@/lib/utils';
 
 export type PostCardData = {
   title: string;
@@ -43,10 +45,11 @@ export default function PostCard({ data, ...wrapperProps }: Props) {
                 {authorDisplayName} {authorHandle && `@${authorHandle}`}
               </AuthorDisplayName>
             </UserWrapper>
-            {!isMobile && <RecReason>{recReason}</RecReason>}
+            <div className="flex items-center gap-[10px]">
+              {platformIconUrl && <PlatformIcon src={platformIconUrl} />}
+              <RecReason>{recReason}</RecReason>
+            </div>
           </BottomLeft>
-
-          {platformIconUrl && <PlatformIcon src={platformIconUrl} />}
         </BottomWrapper>
       </CardBody>
     </CardWrapper>
@@ -234,15 +237,15 @@ const RecReason = styled.div`
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 `;
-const PlatformIcon = styled.img`
-  width: 30px;
-  height: 30px;
-  border-radius: 50%;
-  object-fit: cover;
-  flex-shrink: 0;
-  ${isMobile &&
-  `
-      width: 14px;
-      height: 14px;
-    `}
-`;
+function PlatformIcon({ className, ...props }: ComponentPropsWithRef<'img'>) {
+  return (
+    <img
+      className={cn(
+        'w-[14px] h-[14px] rounded-[50%]  object-cover flex-shrink-0',
+        className || ''
+      )}
+      alt=""
+      {...props}
+    />
+  );
+}
diff --git a/apps/u3/src/container/explore/Home.tsx b/apps/u3/src/container/explore/Home.tsx
@@ -141,7 +141,7 @@ export default function Home() {
       });
 
     fetchTrendingCommunities({
-      pageSize: 3,
+      pageSize: 6,
       pageNumber: 1,
     })
       .then((res) => {