diff options
author | vnugent <public@vaughnnugent.com> | 2023-07-12 01:28:23 -0400 |
---|---|---|
committer | vnugent <public@vaughnnugent.com> | 2023-07-12 01:28:23 -0400 |
commit | f64955c69d91e578e580b409ba31ac4b3477da96 (patch) | |
tree | 16f01392ddf1abfea13d7d1ede3bfb0459fe8f0d /front-end/src/bootstrap/components/Footer.vue |
Initial commit
Diffstat (limited to 'front-end/src/bootstrap/components/Footer.vue')
-rw-r--r-- | front-end/src/bootstrap/components/Footer.vue | 69 |
1 files changed, 69 insertions, 0 deletions
diff --git a/front-end/src/bootstrap/components/Footer.vue b/front-end/src/bootstrap/components/Footer.vue new file mode 100644 index 0000000..98f6f55 --- /dev/null +++ b/front-end/src/bootstrap/components/Footer.vue @@ -0,0 +1,69 @@ +<template> + <footer class="bottom-0 left-0 z-10 w-full"> + <div id="footer-content" class="footer-content" > + <div class="footer-main-container"> + <div class="col-span-4 sm:col-span-6 lg:col-span-3"> + <p class="my-4 text-xs leading-normal"> + No tracking, no external dependencies, no ads. You shouldn't trust anyone with your data, + and I am no exception. + </p> + </div> + <nav> + <slot name="footer-nav-1" /> + </nav> + <nav> + <slot name="footer-nav-2" /> + </nav> + <nav> + <p class="nav-title"> + Built with + </p> + <a class="footer-link" href="https://www.vaughnnugent.com/resources/software/modules">VNLib HTTP v1.0.1</a> + <a class="footer-link" href="https://tailwindcss.com/">Tailwindcss</a> + <a class="footer-link" href="https://vuejs.org/">Vuejs v3</a> + <a class="footer-link" href="https://fontawesome.com/">Font Awesome</a> + </nav> + <div class="color-selector-container"> + <p class="nav-title"> + Color Scheme + </p> + <div class="flex flex-row gap-6 md:my-auto"> + <div class=""> + <button class="bg-sel-btn" @click.prevent="Dark" > + Dark + </button> + </div> + <div class=""> + <fa-icon icon="lightbulb" /> + </div> + <div class=""> + <button class="bg-sel-btn" @click.prevent="Light"> + Light + </button> + </div> + </div> + </div> + </div> + <div class="text-sm footer-lower"> + <div class="mb-6 md:mb-0"> + <p class="text-left"> + Highly angular trousers ~ Pete Jordanson + </p> + </div> + <div class="mb-6 text-left md:mb-0"> + Copyright © 2023 Vaughn Nugent. All Rights Reserved. + </div> + </div> + </div> + </footer> +</template> + +<script setup lang="ts"> +import { useDark } from '@vueuse/core' +import { debounce } from 'lodash' + +const isDark = useDark() + +const Dark = debounce(() => isDark.value = true, 50) +const Light = debounce(() => isDark.value = false, 50) +</script> |