Use A instead of a Link component for external links

front/packages/primitives/src/links.tsx

@@ -23,18 +23,26 @@ import { Platform, Pressable, TextProps, View, PressableProps } from "react-nati
 import { TextLink, useLink } from "solito/link";
 import { useTheme, useYoshiki } from "yoshiki/native";
 import { alpha } from "./themes";
+import { NextLink } from "solito/build/link/next-link";
 
 export const A = ({
 	href,
 	replace,
 	children,
+	target,
 	...props
-}: TextProps & { href?: string; replace?: boolean; children: ReactNode }) => {
+}: TextProps & {
+	href?: string | null;
+	target?: string;
+	replace?: boolean;
+	children: ReactNode;
+}) => {
 	const { css, theme } = useYoshiki();
 
 	return (
 		<TextLink
 			href={href ?? ""}
+			target={target}
 			replace={replace as any}
 			experimental={
 				replace
@@ -51,6 +59,7 @@ export const A = ({
 				},
 				{
 					selectable: true,
+					hrefAttrs: { target },
 					...props,
 				},
 			)}

front/packages/ui/src/details/header.tsx

@@ -50,7 +50,7 @@ import {
 } from "@kyoo/primitives";
 import { Fragment } from "react";
 import { useTranslation } from "react-i18next";
-import { ImageStyle, Platform, View } from "react-native";
+import { ImageStyle, Platform, Text, View } from "react-native";
 import {
 	Theme,
 	md,
@@ -430,12 +430,12 @@ export const Header = ({
 						).map(([name, data]) => (
 							<Chip
 								key={name}
-								as={Link}
+								as={A}
 								href={data?.link}
 								target="_blank"
 								size="small"
 								outline
-								{...css({
+								{...(css({
 									m: ts(0.5),
 									color: (theme: Theme) => theme.contrast,
 									fover: {
@@ -444,7 +444,7 @@ export const Header = ({
 											bg: (theme: Theme) => theme.accent,
 										},
 									},
-								})}
+								}) as any)}
 							>
 								{data ? name : <Skeleton {...css({ width: rem(3) })} />}
 							</Chip>