feat: explore hot communities

apps/u3/src/components/community/CommunityItem.tsx

@@ -56,7 +56,7 @@ export default function CommunityItem({
             </div>
           )}
         </div>
-        <div className="text-[#FFF] text-[14px] font-normal leading-[20px] line-clamp-2">
+        <div className="text-[#FFF] text-[14px] font-normal leading-[20px] line-clamp-2 max-sm:line-clamp-1">
           {description}
         </div>
       </div>

apps/u3/src/components/explore/HomeLayout.tsx

@@ -2,12 +2,12 @@ import { useNavigate } from 'react-router-dom';
 import { MainWrapper } from '../layout/Index';
 import HotPosts from './posts/HotPosts';
 import type { ExploreHomeState } from '../../container/explore/Home';
-import TopChannels from './channels/TopChannels';
 import ColorButton from '../common/button/ColorButton';
+import HotCommunities from './community/HotCommunities';
 
 export default function HomeLayout({
   hotPosts,
-  topChannels,
+  hotCommunities,
 }: ExploreHomeState) {
   const navigate = useNavigate();
   return (
@@ -17,9 +17,9 @@ export default function HomeLayout({
         isLoading={hotPosts.isLoading}
         farcasterUserData={hotPosts.farcasterUserData}
       />
-      <TopChannels
-        channels={topChannels.channels}
-        isLoading={topChannels.isLoading}
+      <HotCommunities
+        communities={hotCommunities.communities}
+        isLoading={hotCommunities.isLoading}
       />
       <ColorButton
         className="hidden max-sm:flex"

apps/u3/src/components/explore/community/CommunityItem.tsx

@@ -0,0 +1,65 @@
+import { ComponentPropsWithRef } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { CommunityInfo } from '@/services/community/types/community';
+import { cn } from '@/lib/utils';
+import JoinCommunityBtn from '@/components/community/JoinCommunityBtn';
+
+export default function CommunityItem({
+  className,
+  communityInfo,
+  ...props
+}: ComponentPropsWithRef<'div'> & {
+  communityInfo: CommunityInfo;
+}) {
+  const navigate = useNavigate();
+  const { logo, name, description, memberInfo, types } = communityInfo || {};
+  return (
+    <div
+      className={cn(
+        'h-[160px] flex p-[20px] box-border items-center gap-[20px] bg-[#1B1E23] rounded-[20px] cursor-pointer',
+        'max-sm:p-[10px] max-sm:h-[120px]',
+        className
+      )}
+      onClick={() => {
+        navigate(`/community/${communityInfo.channelId}`);
+      }}
+      {...props}
+    >
+      <img
+        src={logo}
+        alt=""
+        className="w-[120px] h-[120px] rounded-[20px] max-sm:w-[100px] max-sm:h-[100px]"
+      />
+      <div className="flex-1 flex h-full flex-col justify-between items-start">
+        <div className="w-full flex justify-between items-start gap-[10px]">
+          <div className="flex-1 flex flex-col gap-[10px]">
+            {types?.length > 0 && (
+              <div className="text-[#718096] text-[12px] font-normal line-clamp-1">
+                {types.reduce((acc, cur) => {
+                  return `${acc}, ${cur}`;
+                })}
+              </div>
+            )}
+            <div className="text-[#FFF] text-[16px] font-medium">{name}</div>
+          </div>
+          <JoinCommunityBtn communityInfo={communityInfo} />
+        </div>
+        <div className="flex gap-[10px] items-center">
+          {memberInfo?.newPostNumber > 0 && (
+            <div className="text-[#718096] text-[12px] font-normal leading-[15px]">
+              {memberInfo?.newPostNumber} new posts
+            </div>
+          )}
+          {memberInfo?.totalNumber > 0 && (
+            <div className="text-[#718096] text-[12px] font-normal leading-[15px]">
+              {memberInfo?.totalNumber} members
+            </div>
+          )}
+        </div>
+        <div className="text-[#FFF] text-[14px] font-normal leading-[20px] line-clamp-2  max-sm:line-clamp-1">
+          {description}
+        </div>
+      </div>
+    </div>
+  );
+}

apps/u3/src/components/explore/community/HotCommunities.tsx

@@ -0,0 +1,51 @@
+import { useNavigate } from 'react-router-dom';
+import Title from '../Title';
+import Loading from '../../common/loading/Loading';
+import { cn } from '@/lib/utils';
+import { CommunityInfo } from '@/services/community/types/community';
+import CommunityItem from './CommunityItem';
+
+export type HotCommunitiesData = Array<CommunityInfo>;
+
+export default function HotCommunities({
+  communities,
+  isLoading,
+}: {
+  communities: HotCommunitiesData;
+  isLoading: boolean;
+}) {
+  const navigate = useNavigate();
+  return (
+    <div className="w-full">
+      <Title
+        text="Hot Communities"
+        viewAllAction={() => {
+          navigate(`/communities`);
+        }}
+      />
+      <div className={cn('w-full mt-[20px]', 'max-sm:mt-[10px]')}>
+        {isLoading ? (
+          <div
+            className={cn(
+              'w-full h-full flex justify-center items-center',
+              'max-sm:h-[430px]'
+            )}
+          >
+            <Loading />
+          </div>
+        ) : (
+          <div
+            className={cn(
+              'w-full grid gap-[20px] grid-cols-3',
+              'max-sm:grid-cols-1 max-sm:gap-[10px]'
+            )}
+          >
+            {communities.map((item) => {
+              return <CommunityItem key={item.id} communityInfo={item} />;
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

apps/u3/src/container/explore/Home.tsx

@@ -13,6 +13,8 @@ import HomeLayout from '../../components/explore/HomeLayout';
 import { TopChannelsData } from '@/components/explore/channels/TopChannels';
 import { useFarcasterCtx } from '@/contexts/social/FarcasterCtx';
 import type { ExploreLayoutCtx } from './ExploreLayout';
+import { HotCommunitiesData } from '@/components/explore/community/HotCommunities';
+import { fetchTrendingCommunities } from '@/services/community/api/community';
 
 type FarcasterUserData = { [key: string]: { type: number; value: string }[] };
 type HotPostsState = {
@@ -32,11 +34,16 @@ type HighScoreDappsState = {
   dapps: HighScoreDappsData;
   isLoading: boolean;
 };
+type HotCommunitiesState = {
+  communities: HotCommunitiesData;
+  isLoading: boolean;
+};
 export type ExploreHomeState = {
   hotPosts: HotPostsState;
   topLinks: TopLinksState;
   topChannels: TopChannelsState;
   highScoreDapps: HighScoreDappsState;
+  hotCommunities: HotCommunitiesState;
 };
 
 export default function Home() {
@@ -62,6 +69,11 @@ export default function Home() {
     isLoading: true,
   });
 
+  const [hotCommunities, setHotCommunities] = useState<HotCommunitiesState>({
+    communities: [],
+    isLoading: true,
+  });
+
   useEffect(() => {
     getHotPosts()
       .then((res) => {
@@ -125,6 +137,25 @@ export default function Home() {
       .catch(() => {
         setHighScoreDapps((pre) => ({ ...pre, dapps: [], isLoading: false }));
       });
+
+    fetchTrendingCommunities({
+      pageSize: 3,
+      pageNumber: 1,
+    })
+      .then((res) => {
+        const { data: communities } = res.data;
+        setHotCommunities({
+          communities,
+          isLoading: false,
+        });
+      })
+      .catch(() => {
+        setHotCommunities((pre) => ({
+          ...pre,
+          communities: [],
+          isLoading: false,
+        }));
+      });
   }, []);
 
   const { trendChannels, trendChannelsLoading } = useFarcasterCtx();
@@ -165,6 +196,7 @@ export default function Home() {
       topLinks={topLinks}
       topChannels={topChannels}
       highScoreDapps={highScoreDapps}
+      hotCommunities={hotCommunities}
     />
   );
 }