From 79498907b5d6627aaae7152fd8e96bc99ac92af0 Mon Sep 17 00:00:00 2001
From: Florian RICHER <florian.richer@unova.fr>
Date: Sun, 4 Jun 2023 22:40:01 +0200
Subject: [PATCH] Add Link

---
 src/components/Link.scss       | 11 +++++++++++
 src/components/Link.tsx        | 19 +++++++++++++++++++
 src/components/MonParcours.tsx |  7 ++++---
 src/components/Tag.tsx         |  2 +-
 4 files changed, 35 insertions(+), 4 deletions(-)
 create mode 100644 src/components/Link.scss
 create mode 100644 src/components/Link.tsx

diff --git a/src/components/Link.scss b/src/components/Link.scss
new file mode 100644
index 0000000..7e5f9f3
--- /dev/null
+++ b/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;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/components/Link.tsx b/src/components/Link.tsx
new file mode 100644
index 0000000..531204d
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/src/components/MonParcours.tsx b/src/components/MonParcours.tsx
index 85fbbc5..3eceb07 100644
--- a/src/components/MonParcours.tsx
+++ b/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
diff --git a/src/components/Tag.tsx b/src/components/Tag.tsx
index 245570c..a09ef4a 100644
--- a/src/components/Tag.tsx
+++ b/src/components/Tag.tsx
@@ -1,6 +1,6 @@
 import './Tag.scss'
 
-interface TagProps {
+type TagProps = {
     name: string,
     url?: string
 }