Browse Source

feat(gui-v2): add social card

pull/3130/head
Wing-Kam Wong 2 years ago
parent
commit
9140cdccbc
  1. 73
      packages/nc-gui-v2/components/general/SocialCard.vue
  2. 7
      packages/nc-gui-v2/pages/index/index.vue

73
packages/nc-gui-v2/components/general/SocialCard.vue

@ -0,0 +1,73 @@
<script setup lang="ts">
import { enumColor as colors } from '#imports'
const { lang: currentLang } = useGlobal()
const isRtlLang = $computed(() => ['fa'].includes(currentLang.value))
</script>
<template>
<a-list class="w-[300px] pa-3 elevation-4 rounded-xl mr-10" dense>
<a-list-item class="cursor-pointer">
<nuxt-link class="text-primary" to="https://github.com/nocodb/nocodb" target="_blank">
<div class="flex items-center text-sm">
<mdi-github class="mx-3 text-lg" />
<div v-if="isRtlLang">
<!-- us on Github -->
{{ $t('labels.community.starUs2') }}
<!-- Star -->
{{ $t('labels.community.starUs1') }}
<mdi-star-outline />
</div>
<div v-else class="flex items-center">
<!-- Star -->
{{ $t('labels.community.starUs1') }}
<mdi-star-outline class="mx-1" />
<!-- us on Github -->
{{ $t('labels.community.starUs2') }}
</div>
</div>
</nuxt-link>
</a-list-item>
<a-list-item>
<nuxt-link class="text-primary" to="https://calendly.com/nocodb-meeting" target="_blank">
<div class="flex items-center text-sm">
<mdi-calendar-month class="mx-3 text-lg" :color="colors.dark[3 % colors.dark.length]" />
<!-- Book a Free DEMO -->
<div>
{{ $t('labels.community.bookDemo') }}
</div>
</div>
</nuxt-link>
</a-list-item>
<a-list-item>
<nuxt-link class="text-primary" to="https://discord.gg/5RgZmkW" target="_blank">
<div class="flex items-center text-sm">
<mdi-discord class="mx-3 text-lg" :color="colors.dark[0 % colors.dark.length]" />
<!-- Get your questions answered -->
<div>
{{ $t('labels.community.getAnswered') }}
</div>
</div>
</nuxt-link>
</a-list-item>
<a-list-item>
<nuxt-link class="text-primary" to="https://twitter.com/NocoDB" target="_blank">
<div class="flex items-center text-sm">
<mdi-twitter class="mx-3 text-lg" :color="colors.dark[1 % colors.dark.length]" />
<!-- Follow NocoDB -->
<div>
{{ $t('labels.community.followNocodb') }}
</div>
</div>
</nuxt-link>
</a-list-item>
<a-list-item v-t="['e:hiring']">
<nuxt-link class="text-primary" target="_blank" to="http://careers.nocodb.com">
<div class="flex items-center text-sm">
<div class="ml-3">🚀 <span class="ml-2">We are Hiring!!!</span></div>
</div>
</nuxt-link>
</a-list-item>
</a-list>
</template>

7
packages/nc-gui-v2/pages/index/index.vue

@ -156,8 +156,13 @@ onMounted(() => {
</a-table> </a-table>
</a-card> </a-card>
</a-col> </a-col>
<a-col :span="8" class="col-sm-12 col-lg-3 d-sm-none d-md-flex justify-center justify-lg-end align-start"> <a-col :span="8" class="">
<div class="justify-end flex">
<GeneralSponsors /> <GeneralSponsors />
</div>
<div class="justify-end flex">
<GeneralSocialCard />
</div>
</a-col> </a-col>
</a-row> </a-row>
</NuxtLayout> </NuxtLayout>

Loading…
Cancel
Save