Add Link

src/components/Link.scss

@@ -0,0 +1,11 @@
+.link {
+    @apply flex gap-1 font-semibold italic;
+
+    & > i {
+        @apply flex items-center;
+
+        & > svg {
+            @apply scale-75;
+        }
+    }
+}

src/components/Link.tsx

@@ -0,0 +1,19 @@
+import react, { ReactNode } from 'react';
+import './Link.scss'
+import { FaExternalLinkAlt } from 'react-icons/fa';
+
+type LinkProps = {
+    children: ReactNode,
+    url: string
+}
+
+function Link({ children, url }: LinkProps) {
+    return (
+        <a className="link" href={url} target='_blank'>
+            { children }
+            <i><FaExternalLinkAlt/></i>
+        </a>
+    )
+}
+
+export default Link

src/components/MonParcours.tsx

@@ -8,6 +8,7 @@ import TimelineCardContent from './timeline/TimelineCardContent'
 import Tag from './Tag'
 import ProjectList from './project/ProjectList'
 import ProjectElement from './project/ProjectElement'
+import Link from './Link'
 
 // Lang
 const RUST_TAG = <Tag name="Rust" url="https://www.rust-lang.org/" />
@@ -122,7 +123,7 @@ function MonParcours() {
                             <p>L’ensemble des sessions étaient enregistrées pour permettre à n'importe qui de savoir ce qui s'est passé.</p><br/>
                             <p>Les administrateurs pouvaient également gérer les connexions avec une ligne de commande.</p><br/>
 
-                            <i>Le projet a été abandonné au profit de <a href="https://github.com/ovh/the-bastion" target="_blank">"the-bastion"</a></i>
+                            <i>Le projet a été abandonné au profit de <Link url="https://github.com/ovh/the-bastion">The Bastion</Link></i>
 
                             <ProjectList>
                                 <ProjectElement
@@ -325,8 +326,8 @@ function MonParcours() {
                             <i>Sujet : Venir en aide aux réfugiés</i><br />
                             <i>Nom de l’équipe : echo "Avis de template"</i><br />
                             <i>Slogan : Qui sème le vent récolte le Template</i><br />
-                            <a href='https://www.nuitdelinfo.com/nuitinfo/defis2016:archives#defi38'>Méthode agile : 1er</a><br />
-                            <a href='https://www.nuitdelinfo.com/nuitinfo/defis2016:archives#defi12'>WebGL : 1er</a><br />
+                            <Link url="https://www.nuitdelinfo.com/nuitinfo/defis2016:archives#defi12">WebGL : 1er</Link>
+                            <Link url="https://www.nuitdelinfo.com/nuitinfo/defis2016:archives#defi38">Méthode agile : 1er</Link>
 
                             <ProjectList>
                                 <ProjectElement

src/components/Tag.tsx

@@ -1,6 +1,6 @@
 import './Tag.scss'
 
-interface TagProps {
+type TagProps = {
     name: string,
     url?: string
 }