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.
82 lines
1.8 KiB
82 lines
1.8 KiB
<script setup lang="ts"> |
|
const { $e } = useNuxtApp() |
|
|
|
const socialIcons = [ |
|
{ |
|
name: '@nocodb', |
|
icon: iconMap.iconTwitter, |
|
link: 'https://twitter.com/nocodb', |
|
e: 'c:feed::twitter-open', |
|
}, |
|
{ |
|
name: 'NocoDB', |
|
icon: iconMap.youtube, |
|
e: 'c:feed:youtube-open', |
|
link: 'https://www.youtube.com/@nocodb', |
|
}, |
|
{ |
|
name: 'NocoDB', |
|
icon: iconMap.iconDiscord, |
|
e: 'c:feed:discord-open', |
|
link: 'https://discord.nocodb.com', |
|
}, |
|
{ |
|
name: 'r/NocoDB', |
|
icon: iconMap.iconReddit, |
|
e: 'c:feed:reddit-open', |
|
link: 'https://www.reddit.com/r/NocoDB/', |
|
}, |
|
{ |
|
name: 'Forum', |
|
icon: iconMap.nocodb, |
|
e: 'c:feed:forum-open', |
|
link: 'https://community.nocodb.com/', |
|
}, |
|
] |
|
|
|
const openUrl = (url: string, e: string) => { |
|
$e(e) |
|
window.open(url, '_blank') |
|
} |
|
</script> |
|
|
|
<template> |
|
<div style="width: 230px" class="flex flex-col bg-white border-gray-200 rounded-lg border-1"> |
|
<div class="text-gray-800 font-semibold leading-6 border-b-1 border-gray-200 px-4 py-3">Stay tuned</div> |
|
<div class="flex flex-col"> |
|
<div |
|
v-for="social in socialIcons" |
|
:key="social.name" |
|
class="flex items-center social-icon-wrapper cursor-pointer rounded-lg hover:bg-gray-100 py-3 px-4 gap-2 text-gray-800" |
|
@click="openUrl(social.link, social.e)" |
|
> |
|
<component :is="social.icon" class="w-5 h-5 stroke-transparent social-icon" /> |
|
<span class="font-semibold">{{ social.name }}</span> |
|
</div> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<style scoped lang="scss"> |
|
.social-icon { |
|
// Make icon black and white |
|
filter: grayscale(100%); |
|
|
|
// Make icon color on hover |
|
&:hover { |
|
filter: grayscale(100%) invert(100%); |
|
} |
|
} |
|
|
|
.social-icon-wrapper { |
|
.nc-icon { |
|
@apply mr-0.15; |
|
} |
|
|
|
&:hover { |
|
.social-icon { |
|
filter: none !important; |
|
} |
|
} |
|
} |
|
</style>
|
|
|