Use LinkAsButton component

src/components/details.page.tsx

@@ -1,12 +1,14 @@
 import { Attachement } from '@/api/settings';
 import { LatLngTuple } from 'leaflet';
+import { useTranslations } from 'next-intl';
 
 import { convertAttachementsToImages } from '@/lib/utils';
 
 import ButtonCenterView from './button-center-view';
 import ButtonClose from './button-close';
 import Carousel from './carousel';
 import { MetadataList } from './metadata-list';
+import LinkAsButton from './ui/link-as-button';
 
 type Props = {
   content: {
@@ -32,6 +34,7 @@ type Props = {
 };
 
 export default function DetailsPageUI({ content }: Props) {
+  const t = useTranslations('details');
   return (
     <article>
       {content?.attachments?.length > 0 && (
@@ -68,17 +71,9 @@ export default function DetailsPageUI({ content }: Props) {
 
       <div dangerouslySetInnerHTML={{ __html: content.description }} />
       {content?.url && (
-        <div 
-          className="w-full"
-          >
-          <a 
-            href={content.url}
-            target="_blank"
-            className="w-fit block gap-4 py-2 px-2 my-4 mx-auto border rounded-md font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 bg-primary hover:bg-primary/80 border-transparent text-primary-foreground"
-          >
-              Voir le site associé
-          </a>
-        </div>
+        <LinkAsButton className="mx-auto mt-4 block w-fit" href={content?.url}>
+          {t('link')}
+        </LinkAsButton>
       )}
     </article>
   );

translations/fr.json

@@ -9,7 +9,8 @@
     "m": "m",
     "meters": "mètres",
     "observationTypes": "Types d'observations",
-    "observations": "Observations"
+    "observations": "Observations",
+    "link": "Voir le site associé"
   },
   "home": {
     "title": "Sentinelle des rivières : j'observe, je protège",