Create a link component with native feedback

front/packages/primitives/src/links.tsx

@@ -18,9 +18,17 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { ReactNode } from "react";
+import { ComponentType, ReactNode } from "react";
-import { Platform, TextProps } from "react-native";
+import {
-import { TextLink } from "solito/link";
+	Platform,
+	Pressable,
+	TextProps,
+	TouchableOpacity,
+	TouchableNativeFeedback,
+	View,
+	ViewProps,
+} from "react-native";
+import { LinkCore, TextLink } from "solito/link";
 import { useYoshiki } from "yoshiki/native";
 
 export const A = ({
@@ -46,3 +54,27 @@ export const A = ({
 		</TextLink>
 	);
 };
+
+export const Link = ({ href, children, ...props }: ViewProps & { href: string }) => {
+	return (
+		<LinkCore
+			href={href}
+			Component={Platform.select<ComponentType>({
+				web: View,
+				android: TouchableNativeFeedback,
+				ios: TouchableOpacity,
+				default: Pressable,
+			})}
+			componentProps={Platform.select<object>({
+				android: { useForeground: true },
+				default: props,
+			})}
+		>
+			{Platform.select<ReactNode>({
+				android: <View {...props}>{children}</View>,
+				ios: <View {...props}>{children}</View>,
+				default: children,
+			})}
+		</LinkCore>
+	);
+};

front/packages/ui/src/browse/grid.tsx

@@ -18,8 +18,8 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { A, Skeleton, Poster, ts, P, SubP } from "@kyoo/primitives";
+import { Link, Skeleton, Poster, ts, P, SubP } from "@kyoo/primitives";
-import { Platform, View } from "react-native";
+import { Platform } from "react-native";
 import { percent, px, Stylable, useYoshiki } from "yoshiki/native";
 import { WithLoading } from "../fetch";
 
@@ -40,8 +40,8 @@ export const ItemGrid = ({
 	const { css } = useYoshiki();
 
 	return (
-		<View
+		<Link
-			// href={href ?? ""}
+			href={href ?? ""}
 			{...css(
 				[
 					{
@@ -81,7 +81,7 @@ export const ItemGrid = ({
 					)}
 				</Skeleton>
 			)}
-		</View>
+		</Link>
 	);
 };