feat(mobile): smaller trending feed card
This commit is contained in:
DIYgod
parent
a271f2de1e
commit
05a427596a
|
|
@ -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 (
|
||||
<Svg width={width} height={height} fill="none" viewBox="0 0 24 24">
|
||||
<Path
|
||||
d="M4.767 3.043c-.498.065-.847.23-1.17.554-.253.253-.405.52-.508.894-.102.37-.1 2.172.002 2.549.168.615.428 1.012 1.418 2.165.79.919 1.894 2.047 2.763 2.825 1.323 1.182 1.557 1.405 1.632 1.558.071.143.077.305.098 2.652.021 2.398.025 2.51.105 2.749.247.734.616 1.028 2.241 1.79.399.187.881.385 1.073.44.414.12.891.135 1.22.037.435-.129.853-.49 1.057-.911.264-.544.299-1.013.301-4.03 0-1.37.017-2.39.041-2.516a.969.969 0 0 1 .142-.345c.056-.074.582-.563 1.17-1.088 1.953-1.744 3.906-3.885 4.347-4.765.248-.496.28-.703.28-1.841 0-.841-.012-1.064-.068-1.269-.196-.712-.664-1.186-1.38-1.401-.215-.064-.728-.069-7.371-.075-3.927-.003-7.254.009-7.393.028M18.992 5.64c.016.807-.008.989-.157 1.216-.228.343-1.373 1.645-2.093 2.379-.67.682-1.128 1.111-2.43 2.273-.556.496-.816.811-1.018 1.233-.264.552-.263.541-.29 3.666-.013 1.554-.037 2.839-.053 2.855-.045.045-.327-.076-1.165-.497l-.766-.385-.024-2.4c-.026-2.653-.03-2.696-.29-3.239-.226-.472-.473-.748-1.403-1.571-1.77-1.567-4.063-4.008-4.247-4.523-.055-.155-.081-1.569-.029-1.62.015-.015 3.16-.023 6.99-.017l6.963.01.012.62"
|
||||
fill={color}
|
||||
fillRule="evenodd"
|
||||
/>
|
||||
</Svg>
|
||||
)
|
||||
}
|
||||
|
|
@ -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 (
|
||||
<View>
|
||||
<View className="flex-row items-center gap-1 px-6 pb-1 pt-4">
|
||||
<Text className="text-label text-2xl font-bold leading-[1.1]">Trending</Text>
|
||||
<View className="flex-row items-center justify-between pb-1 pl-6 pr-5 pt-4">
|
||||
<View className="flex-row items-center gap-2">
|
||||
<TrendingUpCuteReIcon width={24} height={24} />
|
||||
<Text className="text-label text-2xl font-bold leading-[1.1]">Trending</Text>
|
||||
</View>
|
||||
<ItemPressable className="rounded-lg p-1">
|
||||
<FilterCuteReIcon width={20} height={20} />
|
||||
</ItemPressable>
|
||||
</View>
|
||||
|
||||
<Trending />
|
||||
|
||||
<View className="mt-4 flex-row items-center gap-1 px-6 pb-1 pt-4">
|
||||
<Text className="text-label text-2xl font-bold leading-[1.1]">Categories</Text>
|
||||
<View className="mt-4 flex-row items-center justify-between pb-1 pl-6 pr-5 pt-4">
|
||||
<View className="flex-row items-center gap-2">
|
||||
<Grid2CuteReIcon width={24} height={24} />
|
||||
<Text className="text-label text-2xl font-bold leading-[1.1]">Categories</Text>
|
||||
</View>
|
||||
<ItemPressable className="rounded-lg p-1">
|
||||
<FilterCuteReIcon width={20} height={20} />
|
||||
</ItemPressable>
|
||||
</View>
|
||||
|
||||
<DiscoverGrid />
|
||||
|
|
|
|||
|
|
@ -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 = () => {
|
|||
</View>
|
||||
) : (
|
||||
data?.map((item, index) => (
|
||||
<View key={item.feed?.id} className="relative">
|
||||
<TrendingFeedCard item={item} />
|
||||
<View className="pointer-events-none absolute inset-0 left-2 overflow-hidden rounded-xl">
|
||||
<Text
|
||||
className={cn(
|
||||
"center absolute -left-5 -top-6 size-12 rounded-br-2xl pl-[26] pt-7 text-xs",
|
||||
index < 3
|
||||
? cn(
|
||||
"bg-accent text-white",
|
||||
index === 0 && "bg-accent",
|
||||
index === 1 && "bg-accent/90",
|
||||
index === 2 && "bg-accent/80",
|
||||
)
|
||||
: "bg-gray-5/60",
|
||||
)}
|
||||
>
|
||||
<View key={item.feed?.id} className="flex flex-row items-center px-6 py-3">
|
||||
<View
|
||||
className={cn(
|
||||
"flex size-6 items-center justify-center rounded-full",
|
||||
index < 3
|
||||
? cn(
|
||||
"bg-accent text-white",
|
||||
index === 0 && "bg-accent",
|
||||
index === 1 && "bg-accent/90",
|
||||
index === 2 && "bg-accent/80",
|
||||
)
|
||||
: "bg-gray-5/60",
|
||||
)}
|
||||
>
|
||||
<Text className={cn("text-xs font-medium", index < 3 && "text-white")}>
|
||||
{index + 1}
|
||||
</Text>
|
||||
</View>
|
||||
<FeedSummary item={item} className="flex-1 pl-4" simple />
|
||||
</View>
|
||||
))
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -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<ReturnType<typeof apiClient.discover.$post>>["data"][number]
|
||||
|
||||
export const TrendingFeedCard = ({ item }: { item: SearchResultItem }) => {
|
||||
const isSubscribed = useSubscriptionByFeedId(item.feed?.id ?? "")
|
||||
const iconColor = useColor("text")
|
||||
|
||||
return (
|
||||
<FeedSummary item={item} className="pb-3 pl-8 pr-4 pt-5" simple>
|
||||
<View className="flex-row items-center justify-between pl-[39]">
|
||||
<View className="flex-row items-center gap-1.5 opacity-60">
|
||||
<User3CuteReIcon width={14} height={14} color={iconColor} />
|
||||
<Text className="text-text text-sm">{item.analytics?.subscriptionCount} followers</Text>
|
||||
</View>
|
||||
<View>
|
||||
{isSubscribed ? (
|
||||
<View className="rounded-lg px-3 py-2">
|
||||
<Text className="text-gray-2 text-sm font-bold">Followed</Text>
|
||||
</View>
|
||||
) : (
|
||||
<View className="rounded-lg px-3 py-2">
|
||||
<Text className="text-accent text-sm font-bold">Follow</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
</FeedSummary>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M4.767 3.043c-.498.065-.847.23-1.17.554-.253.253-.405.52-.508.894-.102.37-.1 2.172.002 2.549.168.615.428 1.012 1.418 2.165.79.919 1.894 2.047 2.763 2.825 1.323 1.182 1.557 1.405 1.632 1.558.071.143.077.305.098 2.652.021 2.398.025 2.51.105 2.749.247.734.616 1.028 2.241 1.79.399.187.881.385 1.073.44.414.12.891.135 1.22.037.435-.129.853-.49 1.057-.911.264-.544.299-1.013.301-4.03 0-1.37.017-2.39.041-2.516a.969.969 0 0 1 .142-.345c.056-.074.582-.563 1.17-1.088 1.953-1.744 3.906-3.885 4.347-4.765.248-.496.28-.703.28-1.841 0-.841-.012-1.064-.068-1.269-.196-.712-.664-1.186-1.38-1.401-.215-.064-.728-.069-7.371-.075-3.927-.003-7.254.009-7.393.028M18.992 5.64c.016.807-.008.989-.157 1.216-.228.343-1.373 1.645-2.093 2.379-.67.682-1.128 1.111-2.43 2.273-.556.496-.816.811-1.018 1.233-.264.552-.263.541-.29 3.666-.013 1.554-.037 2.839-.053 2.855-.045.045-.327-.076-1.165-.497l-.766-.385-.024-2.4c-.026-2.653-.03-2.696-.29-3.239-.226-.472-.473-.748-1.403-1.571-1.77-1.567-4.063-4.008-4.247-4.523-.055-.155-.081-1.569-.029-1.62.015-.015 3.16-.023 6.99-.017l6.963.01.012.62" fill="#10161F" fill-rule="evenodd"/></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
Loading…
Reference in New Issue