Added social links to rep

src/App.vue

@@ -4,7 +4,6 @@ import Navbar from "./components/navbar/Navbar.vue";
 
 <template>
   <div id="wrapper">
-    <Navbar />
     <div class="flex justify-center items-center">
       <RouterView />
     </div>
@@ -17,6 +16,6 @@ import Navbar from "./components/navbar/Navbar.vue";
   min-height: 100vh;
 
   display: grid;
-  grid-template-rows: auto 1fr;
+  grid-template-rows: 1fr;
 }
 </style>

src/assets/main.css

@@ -7,3 +7,21 @@
 body {
   @apply text-slate-300 bg-slate-950
 }
+
+@layer components {
+  .btn-red {
+    @apply bg-red-600 outline-red-700 hover:bg-red-700
+  }
+  .btn-twitter {
+    @apply bg-twitter-500 outline-twitter-600 hover:bg-twitter-600
+  }
+  .btn-facebook {
+    @apply bg-facebook-500 outline-facebook-600 hover:bg-facebook-600
+  }
+  .btn-instagram {
+    @apply bg-instagram-500 outline-instagram-600 hover:bg-instagram-600
+  }
+  .btn-linkedin {
+    @apply bg-linkedin-500 outline-linkedin-600 hover:bg-linkedin-600
+  }
+}

src/components/RepButton.vue

@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import { computed } from "vue";
+
+const props = defineProps<{
+  href?: string;
+  target?: string;
+  rel?: string;
+  style?:
+    | "btn-red"
+    | "btn-twitter"
+    | "btn-facebook"
+    | "btn-instagram"
+    | "btn-linkedin";
+}>();
+
+const elementTag = computed(() => (props.href ? "a" : "button"));
+</script>
+
+<template>
+  <component
+    :is="elementTag"
+    v-bind="props"
+    class="py-[10px] px-4 my-1 inline-flex text-white items-center gap-2 rounded-md font-semibold tracking-wide outline-2 outline-offset-4 focus-visible:outline transition-colors"
+    :class="props.style"
+  >
+    <slot />
+  </component>
+</template>

src/components/RepInfo.vue

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import RepButton from "./RepButton.vue";
+
 import type { Depute } from "@/models/rep";
 import { computed } from "vue";
 
@@ -22,24 +24,116 @@ const repMandate = computed(() => {
   );
   return parliamentMandate;
 });
+
+const repSocials = {
+  twitter: computed(() =>
+    props.rep.acteur.adresses.adresse.find(
+      (adr) => adr["typeLibelle"] === "Twitter"
+    )
+  ),
+  facebook: computed(() =>
+    props.rep.acteur.adresses.adresse.find(
+      (adr) => adr["typeLibelle"] === "Facebook"
+    )
+  ),
+  instagram: computed(() =>
+    props.rep.acteur.adresses.adresse.find(
+      (adr) => adr["typeLibelle"] === "Instagram"
+    )
+  ),
+  linkedin: computed(() =>
+    props.rep.acteur.adresses.adresse.find(
+      (adr) => adr["typeLibelle"] === "Linkedin"
+    )
+  ),
+};
 </script>
 
 <template>
-  <article>
-    <figure class="mb-8 mx-auto w-60 h-60 rounded-full overflow-hidden">
-      <img
-        :src="repImage"
-        :alt="repFullName"
-        class="w-full h-full object-contain"
-      />
-    </figure>
+  <section>
+    <header>
+      <figure class="mt-8 mx-auto w-60 h-60 rounded-full overflow-hidden">
+        <img
+          :src="repImage"
+          :alt="repFullName"
+          class="w-full h-full object-contain"
+        />
+      </figure>
 
-    <h1 class="mb-4 text-center font-bold text-3xl">
-      {{ repFullName }}
-    </h1>
-    <h2 class="text-center font-bold text-xl">
-      {{ repMandate?.election?.lieu.departement }} -
-      {{ repMandate?.election?.lieu.numCirco }}e circonscription
-    </h2>
-  </article>
+      <h1 class="mt-4 text-center font-bold text-3xl">
+        {{ repFullName }}
+      </h1>
+      <h2 class="text-center font-bold text-xl">
+        {{ repMandate?.election?.lieu.departement }} -
+        {{ repMandate?.election?.lieu.numCirco }}e circonscription
+      </h2>
+      <h3 class="mt-2 text-center font-medium text-lg">
+        {{ rep.acteur.profession.libelleCourant }}
+      </h3>
+    </header>
+
+    <footer class="mt-8">
+      <div class="mt-4 text-center">
+        <RepButton
+          :href="`https://www.assemblee-nationale.fr/dyn/deputes/${rep.acteur.uid['#text']}`"
+          target="_blank"
+          rel="noopener"
+          :style="'btn-red'"
+        >
+          <font-awesome-icon :icon="['fass', 'landmark']" size="lg" />
+          <span>Fiche Assemblée</span>
+        </RepButton>
+      </div>
+
+      <menu class="mt-2 flex justify-center items-center gap-4">
+        <li v-if="repSocials.twitter">
+          <RepButton
+            :href="`https://twitter.com/${repSocials.twitter.value?.valElec}`"
+            target="_blank"
+            rel="noopener"
+            :style="'btn-twitter'"
+          >
+            <font-awesome-icon :icon="['fab', 'twitter']" size="lg" />
+            <span>Twitter</span>
+          </RepButton>
+        </li>
+
+        <li v-if="repSocials.facebook">
+          <RepButton
+            :href="`https://www.facebook.com/${repSocials.facebook.value?.valElec}`"
+            target="_blank"
+            rel="noopener"
+            :style="'btn-facebook'"
+          >
+            <font-awesome-icon :icon="['fab', 'facebook']" size="lg" />
+            <span>Facebook</span>
+          </RepButton>
+        </li>
+
+        <li v-if="repSocials.linkedin">
+          <RepButton
+            :href="`https://www.linkedin.com/${repSocials.linkedin.value?.valElec}`"
+            target="_blank"
+            rel="noopener"
+            :style="'btn-linkedin'"
+          >
+            <font-awesome-icon :icon="['fab', 'linkedin']" size="lg" />
+            <span>Linkedin</span>
+          </RepButton>
+        </li>
+
+        <li v-if="repSocials.instagram">
+          <RepButton
+            :href="`https://www.instagram.com/${repSocials.instagram.value?.valElec}`"
+            target="_blank"
+            rel="noopener"
+            :style="'btn-instagram'"
+          >
+            <font-awesome-icon :icon="['fab', 'instagram']" size="lg" />
+            <span>Instagram</span>
+          </RepButton>
+        </li>
+      </menu>
+    </footer>
+  </section>
 </template>

src/main.ts

@@ -6,9 +6,24 @@ import router from "./router";
 
 import "./assets/main.css";
 
+import { library } from "@fortawesome/fontawesome-svg-core";
+
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import {
+  faTwitter,
+  faFacebook,
+  faLinkedin,
+  faInstagram,
+} from "@fortawesome/free-brands-svg-icons";
+import { faLandmark } from "@fortawesome/free-solid-svg-icons";
+
+library.add(faTwitter, faFacebook, faLinkedin, faInstagram, faLandmark);
+
 const app = createApp(App);
 
 app.use(createPinia());
 app.use(router);
 
+app.component("font-awesome-icon", FontAwesomeIcon);
+
 app.mount("#app");