mirror of https://github.com/nocodb/nocodb
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
64 lines
1.9 KiB
64 lines
1.9 KiB
<script lang="ts" setup> |
|
import { useI18n } from 'vue-i18n' |
|
import MdiDiscord from '~icons/mdi/discord' |
|
import MdiReddit from '~icons/mdi/reddit' |
|
import MdiTwitter from '~icons/mdi/twitter' |
|
import MdiCalendarMonth from '~icons/mdi/calendar-month' |
|
|
|
const { locale } = useI18n() |
|
|
|
const open = (url: string) => { |
|
window.open(url, '_blank') |
|
} |
|
|
|
const isZhLang = $computed(() => locale.value.startsWith('zh')) |
|
</script> |
|
|
|
<template> |
|
<!-- todo: add missing google analytics directive events --> |
|
<v-list> |
|
<general-share |
|
v-if="isZhLang" |
|
class="flex justify-center" |
|
url="https://github.com/nocodb/nocodb" |
|
:social-medias="['renren', 'douban', 'weibo', 'wechat']" |
|
/> |
|
|
|
<div v-else class="flex justify-between gap-1 w-full px-2"> |
|
<MdiDiscord v-t="['e:community:discord']" class="icon text-[#7289DA]" @click="open('https://discord.gg/5RgZmkW')" /> |
|
<div |
|
v-t="['e:community:discourse']" |
|
class="icon flex items-center justify-center min-w-[43px]" |
|
@click="open('https://community.nocodb.com/')" |
|
> |
|
<div class="discourse" /> |
|
</div> |
|
<MdiReddit v-t="['e:community:reddit']" class="icon text-[#FF4600]" @click="open('https://www.reddit.com/r/NocoDB/')" /> |
|
<MdiTwitter v-t="['e:community:twitter']" class="icon text-[#1DA1F2]" @click="open('https://twitter.com/NocoDB')" /> |
|
<MdiCalendarMonth |
|
v-t="['e:community:book-demo']" |
|
class="icon text-green-500" |
|
@click="open('https://calendly.com/nocodb-meeting')" |
|
/> |
|
</div> |
|
</v-list> |
|
</template> |
|
|
|
<style scoped> |
|
.icon { |
|
@apply cursor-pointer text-3xl rounded-full p-2 bg-gray-100 shadow-md hover:(shadow-lg bg-gray-200); |
|
} |
|
|
|
.discourse { |
|
height: 22px; |
|
width: 22px; |
|
background-image: url('~/assets/img/discourse-icon.png'); |
|
background-size: contain; |
|
background-repeat: no-repeat; |
|
} |
|
|
|
.discourse::before { |
|
visibility: hidden; |
|
content: ''; |
|
} |
|
</style>
|
|
|