From a8dfc1fc9973b0cf2e8e4a9f849a0ab78f0d2fd7 Mon Sep 17 00:00:00 2001
From: Muhammad Rehan Saeed <rehansaeed@gmail.com>
Date: Fri, 25 Mar 2022 08:37:13 +0000
Subject: [PATCH] Add footer

---
 Source/DotnetNewUI/Frontend/src/App.vue       |  5 +-
 .../Frontend/src/components/Footer.vue        | 50 +++++++++++++++++++
 2 files changed, 54 insertions(+), 1 deletion(-)
 create mode 100644 Source/DotnetNewUI/Frontend/src/components/Footer.vue

diff --git a/Source/DotnetNewUI/Frontend/src/App.vue b/Source/DotnetNewUI/Frontend/src/App.vue
index fda406d..e6766f7 100644
--- a/Source/DotnetNewUI/Frontend/src/App.vue
+++ b/Source/DotnetNewUI/Frontend/src/App.vue
@@ -7,17 +7,20 @@
   <nprogress-container />
   <ui-navigation />
   <router-view />
+  <ui-footer />
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
 import NprogressContainer from "vue-nprogress/src/NprogressContainer";
-import Navigation from "@/components/Navigation.vue"; // @ is an alias to /src
+import Footer from "@/components/Footer.vue";
+import Navigation from "@/components/Navigation.vue";
 
 export default defineComponent({
   name: "App",
   components: {
     NprogressContainer,
+    "ui-footer": Footer,
     "ui-navigation": Navigation,
   },
 });
diff --git a/Source/DotnetNewUI/Frontend/src/components/Footer.vue b/Source/DotnetNewUI/Frontend/src/components/Footer.vue
new file mode 100644
index 0000000..303b2f6
--- /dev/null
+++ b/Source/DotnetNewUI/Frontend/src/components/Footer.vue
@@ -0,0 +1,50 @@
+<template>
+  <footer class="footer">
+    <span class="footer__copyright"
+      >Copyright © {{ new Date().getFullYear() }}
+      <a href="https://rehansaeed.com">Muhammad Rehan Saeed</a> &
+      <a href="https://github.com/petroemil">Emil Petro</a></span
+    >
+    <span>|</span>
+    <span class="footer__links"
+      >Built with <a href="https://dot.net">.NET</a></span
+    >
+    <span>|</span>
+    <span class="footer__links"
+      >Code on
+      <a href="https://github.com/ligershark/dotnet-new-ui">GitHub</a></span
+    >
+  </footer>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "ui-footer",
+});
+</script>
+
+<style lang="scss">
+.footer {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+
+  padding: 20px;
+}
+
+.footer a {
+  color: #fff;
+}
+.footer a:hover {
+  background: hsl(283, 69%, 41%);
+  transform: scale(1.1);
+}
+
+@media print {
+  .footer {
+    display: none;
+  }
+}
+</style>