Added social links to rep

package-lock.json

@@ -8,6 +8,11 @@
       "name": "rep-lookup-fr",
       "version": "0.1.0",
       "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^6.4.0",
+        "@fortawesome/free-brands-svg-icons": "^6.4.0",
+        "@fortawesome/free-regular-svg-icons": "^6.4.0",
+        "@fortawesome/free-solid-svg-icons": "^6.4.0",
+        "@fortawesome/vue-fontawesome": "^3.0.3",
         "@tailwindcss/typography": "^0.5.4",
         "@vueuse/core": "^10.1.0",
         "pinia": "^2.0.35",
@@ -453,6 +458,72 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.0.tgz",
+      "integrity": "sha512-HNii132xfomg5QVZw0HwXXpN22s7VBHQBv9CeOu9tfJnhsWQNd2lmTNi8CSrnw5B+5YOmzu1UoPAyxaXsJ6RgQ==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.0.tgz",
+      "integrity": "sha512-Bertv8xOiVELz5raB2FlXDPKt+m94MQ3JgDfsVbrqNpLU9+UE2E18GKjLKw+d3XbeYPqg1pzyQKGsrzbw+pPaw==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.4.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-brands-svg-icons": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.4.0.tgz",
+      "integrity": "sha512-qvxTCo0FQ5k2N+VCXb/PZQ+QMhqRVM4OORiO6MXdG6bKolIojGU/srQ1ptvKk0JTbRgaJOfL2qMqGvBEZG7Z6g==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.4.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-regular-svg-icons": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.4.0.tgz",
+      "integrity": "sha512-ZfycI7D0KWPZtf7wtMFnQxs8qjBXArRzczABuMQqecA/nXohquJ5J/RCR77PmY5qGWkxAZDxpnUFVXKwtY/jPw==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.4.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.0.tgz",
+      "integrity": "sha512-kutPeRGWm8V5dltFP1zGjQOEAzaLZj4StdQhWVZnfGFCvAPVvHh8qk5bRrU4KXnRRRNni5tKQI9PBAdI6MP8nQ==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.4.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/vue-fontawesome": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.3.tgz",
+      "integrity": "sha512-KCPHi9QemVXGMrfuwf3nNnNo129resAIQWut9QTAMXmXqL2ErABC6ohd2yY5Ipq0CLWNbKHk8TMdTXL/Zf3ZhA==",
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "vue": ">= 3.0.0 < 4"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.8",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz",

package.json

@@ -10,6 +10,11 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.4.0",
+    "@fortawesome/free-brands-svg-icons": "^6.4.0",
+    "@fortawesome/free-regular-svg-icons": "^6.4.0",
+    "@fortawesome/free-solid-svg-icons": "^6.4.0",
+    "@fortawesome/vue-fontawesome": "^3.0.3",
     "@tailwindcss/typography": "^0.5.4",
     "@vueuse/core": "^10.1.0",
     "pinia": "^2.0.35",

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,11 +24,35 @@ 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>
+  <section>
-    <figure class="mb-8 mx-auto w-60 h-60 rounded-full overflow-hidden">
+    <header>
+      <figure class="mt-8 mx-auto w-60 h-60 rounded-full overflow-hidden">
         <img
           :src="repImage"
           :alt="repFullName"
@@ -34,12 +60,80 @@ const repMandate = computed(() => {
         />
       </figure>
 
-    <h1 class="mb-4 text-center font-bold text-3xl">
+      <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>
-  </article>
+      <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");

tailwind.config.js

@@ -9,6 +9,66 @@ module.exports = {
       padding: "2rem",
       center: true,
     },
+    extend: {
+      colors: {
+        twitter: {
+          DEFAULT: "#1DA1F2",
+          50: "#CBE9FC",
+          100: "#B7E1FB",
+          200: "#91D1F9",
+          300: "#6AC1F6",
+          400: "#44B1F4",
+          500: "#1DA1F2",
+          600: "#0C82CB",
+          700: "#096096",
+          800: "#063E61",
+          900: "#031C2C",
+          950: "#010B12",
+        },
+        facebook: {
+          DEFAULT: "#4267B2",
+          50: "#C3CFE9",
+          100: "#B4C4E3",
+          200: "#96ACD8",
+          300: "#7894CD",
+          400: "#5B7DC2",
+          500: "#4267B2",
+          600: "#334F89",
+          700: "#243860",
+          800: "#142037",
+          900: "#05080E",
+          950: "#000000",
+        },
+        instagram: {
+          DEFAULT: "#C13584",
+          50: "#EEC0DA",
+          100: "#E9B0D0",
+          200: "#E090BD",
+          300: "#D870AA",
+          400: "#CF5098",
+          500: "#C13584",
+          600: "#952966",
+          700: "#691D48",
+          800: "#3D112A",
+          900: "#11050C",
+          950: "#000000",
+        },
+        linkedin: {
+          DEFAULT: "#0072B1",
+          50: "#6ACAFF",
+          100: "#55C3FF",
+          200: "#2CB4FF",
+          300: "#04A6FF",
+          400: "#008CDA",
+          500: "#0072B1",
+          600: "#004E79",
+          700: "#002A41",
+          800: "#000609",
+          900: "#000000",
+          950: "#000000",
+        },
+      },
+    },
   },
   plugins: [],
 };