<template>
  <v-footer class="text-center d-flex flex-column mb-12" location="bottom">
    <div>
      <v-btn variant="plain" icon="mdi-facebook" @click="window.open('https://facebook.com','facebook')"/>
      <v-btn variant="plain" icon="mdi-twitter" @click="window.open('https://x.com','twitter')"/>
      <v-btn variant="plain" icon="mdi-reddit" @click="window.open('https://reddit.com','reddit')"/>
      <v-btn variant="plain" icon="mdi-discord" @click="window.open('https://discord.com','discord')"/>
    </div>
    <div class="text-grey logo" style="font-size: small; margin-bottom: 0;">dexorder</div>
    <div class="text-grey" style="font-size: x-small">&copy;{{ new Date().getFullYear() }}</div>
  </v-footer>
</template>

<script setup>
import {useStore} from "@/store/store";

const s = useStore()

</script>

<style scoped lang="scss">
@use "src/styles/vars" as *;
.v-btn {
  margin: 0 1em 0 1em;
}
.footer {
  font-size: small;
}
</style>
