chore: move nc-gui-v2 to nc-gui

packages/nc-gui/components/general/HelpAndSupport.vue

@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+import { useGlobal, useProject } from '#imports'
+
+const showDrawer = ref(false)
+
+const { appInfo } = useGlobal()
+
+const { project } = useProject()
+
+const route = useRoute()
+
+const openSwaggerLink = () => {
+  openLink(`/api/v1/db/meta/projects/${route.params.projectId}/swagger`, appInfo.value.ncSiteUrl)
+}
+</script>
+
+<template>
+  <div
+    class="flex items-center space-x-1 w-full cursor-pointer pl-3 py-1.5 hover:(text-primary bg-primary bg-opacity-5)"
+    @click="showDrawer = true"
+  >
+    <MdiCommentTextOutline class="mr-1" />
+    <!-- APIs & Support -->
+    <div>{{ $t('title.APIsAndSupport') }}</div>
+  </div>
+
+  <a-drawer
+    v-bind="$attrs"
+    v-model:visible="showDrawer"
+    class="h-full relative"
+    placement="right"
+    size="small"
+    :closable="false"
+    :body-style="{ padding: '12px 24px 0 24px', background: '#fafafa' }"
+  >
+    <div class="flex flex-col w-full h-full p-4 pb-0">
+      <!-- Help center -->
+      <a-typography-title :level="4" class="!mb-6 !text-gray-500">{{ $t('title.helpCenter') }}</a-typography-title>
+
+      <GeneralSocialCard class="!w-full nc-social-card">
+        <template #before>
+          <a-list-item v-if="project">
+            <nuxt-link
+              v-t="['e:docs']"
+              class="!no-underline !text-current py-4 font-semibold"
+              target="_blank"
+              @click="openSwaggerLink"
+            >
+              <div class="ml-3 flex items-center text-sm">
+                <LogosSwagger />
+                <!--            Swagger Documentation -->
+                <span class="ml-3">{{ project.title }} : {{ $t('title.swaggerDocumentation') }}</span>
+              </div>
+            </nuxt-link>
+          </a-list-item>
+        </template>
+      </GeneralSocialCard>
+      <div class="min-h-10 w-full" />
+    </div>
+  </a-drawer>
+</template>
+
+<style scoped lang="scss">
+/* Social card style */
+.nc-social-card {
+  @apply !shadow-none !border-0 bg-transparent;
+
+  :deep(.ant-spin-container) {
+    @apply !gap-3;
+
+    .ant-list-item {
+      @apply mb-2 border-1 bg-white border-gray-200;
+      &:last-child {
+        @apply !border-solid;
+      }
+    }
+  }
+}
+</style>