diff --git a/apps/mobile/src/icons/filter_cute_re.tsx b/apps/mobile/src/icons/filter_cute_re.tsx
new file mode 100644
index 000000000..9246ca93e
--- /dev/null
+++ b/apps/mobile/src/icons/filter_cute_re.tsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+import Svg, { Path } from "react-native-svg"
+
+interface FilterCuteReIconProps {
+ width?: number
+ height?: number
+ color?: string
+}
+
+export const FilterCuteReIcon = ({
+ width = 24,
+ height = 24,
+ color = "#10161F",
+}: FilterCuteReIconProps) => {
+ return (
+
+ )
+}
diff --git a/apps/mobile/src/modules/discover/DiscoverContent.tsx b/apps/mobile/src/modules/discover/DiscoverContent.tsx
index 245d81886..11db26327 100644
--- a/apps/mobile/src/modules/discover/DiscoverContent.tsx
+++ b/apps/mobile/src/modules/discover/DiscoverContent.tsx
@@ -6,6 +6,10 @@ import { useTranslation } from "react-i18next"
import { Pressable, StyleSheet, Text, View } from "react-native"
import { Grid } from "@/src/components/ui/grid"
+import { ItemPressable } from "@/src/components/ui/pressable/ItemPressable"
+import { FilterCuteReIcon } from "@/src/icons/filter_cute_re"
+import { Grid2CuteReIcon } from "@/src/icons/grid_2_cute_re"
+import { TrendingUpCuteReIcon } from "@/src/icons/trending_up_cute_re"
import { useNavigation } from "@/src/lib/navigation/hooks"
import { Recommendations } from "@/src/modules/discover/Recommendations"
import { Trending } from "@/src/modules/discover/Trending"
@@ -14,14 +18,26 @@ import { RecommendationCategoryScreen } from "@/src/screens/(stack)/recommendati
export function DiscoverContent() {
return (
-
- Trending
+
+
+
+ Trending
+
+
+
+
-
- Categories
+
+
+
+ Categories
+
+
+
+
diff --git a/apps/mobile/src/modules/discover/Trending.tsx b/apps/mobile/src/modules/discover/Trending.tsx
index d6adf84ad..cc7701585 100644
--- a/apps/mobile/src/modules/discover/Trending.tsx
+++ b/apps/mobile/src/modules/discover/Trending.tsx
@@ -5,7 +5,7 @@ import { Text, View } from "react-native"
import { PlatformActivityIndicator } from "@/src/components/ui/loading/PlatformActivityIndicator"
import { fetchFeedTrending } from "./api"
-import { TrendingFeedCard } from "./TrendingFeedCard"
+import { FeedSummary } from "./FeedSummary"
export const Trending = () => {
const { data, isLoading } = useQuery({
@@ -24,25 +24,25 @@ export const Trending = () => {
) : (
data?.map((item, index) => (
-
-
-
-
+
+
+
{index + 1}
+
))
)}
diff --git a/apps/mobile/src/modules/discover/TrendingFeedCard.tsx b/apps/mobile/src/modules/discover/TrendingFeedCard.tsx
deleted file mode 100644
index 000f45680..000000000
--- a/apps/mobile/src/modules/discover/TrendingFeedCard.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { Text, View } from "react-native"
-
-import { User3CuteReIcon } from "@/src/icons/user_3_cute_re"
-import type { apiClient } from "@/src/lib/api-fetch"
-import { useSubscriptionByFeedId } from "@/src/store/subscription/hooks"
-import { useColor } from "@/src/theme/colors"
-
-import { FeedSummary } from "./FeedSummary"
-
-type SearchResultItem = Awaited>["data"][number]
-
-export const TrendingFeedCard = ({ item }: { item: SearchResultItem }) => {
- const isSubscribed = useSubscriptionByFeedId(item.feed?.id ?? "")
- const iconColor = useColor("text")
-
- return (
-
-
-
-
- {item.analytics?.subscriptionCount} followers
-
-
- {isSubscribed ? (
-
- Followed
-
- ) : (
-
- Follow
-
- )}
-
-
-
- )
-}
diff --git a/icons/mgc/filter_cute_re.svg b/icons/mgc/filter_cute_re.svg
new file mode 100644
index 000000000..7cf68677f
--- /dev/null
+++ b/icons/mgc/filter_cute_re.svg
@@ -0,0 +1 @@
+
\ No newline at end of file