feat: enhance RecommendationCard with grid layout for routes

- Added Grid component to display routes in a two-column layout.
- Introduced TouchableOpacity for route items to improve user interaction.
- Adjusted styles for better responsiveness and visual appeal.

Signed-off-by: Innei <i@innei.in>

apps/mobile/src/components/ui/grid/index.tsx

@@ -0,0 +1,50 @@
+import { cn } from "@follow/utils"
+import type { PropsWithChildren } from "react"
+import * as React from "react"
+import { useMemo } from "react"
+import type { StyleProp, ViewStyle } from "react-native"
+import { View } from "react-native"
+
+interface GridProps {
+  columns: number
+  gap: number
+
+  style?: StyleProp<ViewStyle>
+  className?: string
+}
+const placeholder = <View className="flex-1 shrink-0" />
+export const Grid = ({
+  columns,
+  gap,
+  children,
+  style,
+  className,
+}: GridProps & PropsWithChildren) => {
+  const rowsChildren = useMemo(() => {
+    const childrenArray = React.Children.toArray(children)
+    const rows = []
+    for (let i = 0; i < childrenArray.length; i += columns) {
+      const row = childrenArray.slice(i, i + columns)
+
+      // Fill row if columns is greater than row length
+      if (row.length < columns) {
+        row.push(...Array.from({ length: columns - row.length }, () => placeholder))
+      }
+      rows.push(row)
+    }
+    return rows
+  }, [children, columns])
+  return (
+    <View className={cn("w-full flex-1", className)} style={[{ gap }, style]}>
+      {rowsChildren.map((row, index) => (
+        <View key={index} className="flex flex-row" style={{ gap }}>
+          {row.map((child, index) => (
+            <View key={index} className="flex-1 shrink-0">
+              {child}
+            </View>
+          ))}
+        </View>
+      ))}
+    </View>
+  )
+}

apps/mobile/src/modules/discover/recommendation-card.tsx

@@ -2,9 +2,10 @@ import type { RSSHubCategories } from "@follow/constants"
 import type { RSSHubRouteDeclaration } from "@follow/models/src/rsshub"
 import type { FC } from "react"
 import { useMemo } from "react"
-import { Clipboard, Linking, Text, View } from "react-native"
+import { Clipboard, Linking, Text, TouchableOpacity, View } from "react-native"
 
 import { ContextMenu } from "@/src/components/ui/context-menu"
+import { Grid } from "@/src/components/ui/grid"
 import { FeedIcon } from "@/src/components/ui/icon/feed-icon"
 
 import { RSSHubCategoryCopyMap } from "./copy"
@@ -36,7 +37,7 @@ export const RecommendationCard: FC<{
       <View className="overflow-hidden rounded-lg">
         <FeedIcon siteUrl={`https://${data.url}`} size={28} />
       </View>
-      <View className="ml-2">
+      <View className="ml-2 flex-1">
         <Text className="text-text text-base font-medium">{data.name}</Text>
         {/* Maintainers */}
         <View className="flex-row items-center">
@@ -83,6 +84,21 @@ export const RecommendationCard: FC<{
             </View>
           ))}
         </View>
+
+        {/* Items */}
+
+        <Grid columns={2} gap={8} className="mt-2">
+          {Object.keys(data.routes).map((route) => (
+            <TouchableOpacity
+              key={route}
+              className="bg-gray-5 h-10 flex-row items-center justify-center overflow-hidden rounded px-2"
+            >
+              <Text ellipsizeMode="middle" numberOfLines={1} className="whitespace-pre">
+                {data.routes[route].name}
+              </Text>
+            </TouchableOpacity>
+          ))}
+        </Grid>
       </View>
     </View>
   )