feat: shared request (#3486)

Co-authored-by: jamesgeorge007 <jamesgeorge998001@gmail.com>

packages/hoppscotch-common/src/components/share/templates/Button.vue

@@ -0,0 +1,19 @@
+<template>
+  <div
+    class="flex items-center justify-center rounded border border-dotted border-dividerDark p-5"
+  >
+    <a href="/" target="_blank">
+      <img :src="img" :alt="t('shared_requests.run_in_hoppscotch')" />
+    </a>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useI18n } from "~/composables/i18n"
+
+defineProps<{
+  img: string
+}>()
+
+const t = useI18n()
+</script>

packages/hoppscotch-common/src/components/share/templates/Embeds.vue

@@ -0,0 +1,101 @@
+<template>
+  <div
+    class="flex flex-col rounded border border-dotted border-divider p-5"
+    :class="{
+      'bg-accentContrast': isEmbedThemeLight,
+    }"
+  >
+    <div
+      class="flex items-stretch space-x-4 rounded border-divider"
+      :class="{
+        'bg-accentContrast': isEmbedThemeLight,
+      }"
+    >
+      <span
+        class="flex max-w-[4rem] items-center justify-center rounded border border-divider px-1 py-2 text-tiny"
+        :class="{
+          '!border-dividerLight bg-accentContrast text-primary':
+            isEmbedThemeLight,
+        }"
+      >
+        <span class="truncate">
+          {{ method }}
+        </span>
+      </span>
+      <span
+        class="flex max-w-46 items-center rounded border border-divider p-2"
+      >
+        <span
+          class="min-w-0 truncate"
+          :class="{
+            'text-primary': isEmbedThemeLight,
+          }"
+        >
+          {{ endpoint }}
+        </span>
+      </span>
+      <button
+        class="flex items-center justify-center rounded border border-dividerDark bg-primaryDark px-3 py-2 font-semibold text-secondary"
+        :class="{
+          '!bg-accentContrast text-primaryLight': isEmbedThemeLight,
+        }"
+      >
+        {{ t("action.send") }}
+      </button>
+    </div>
+    <div
+      class="flex border-divider"
+      :class="{
+        'bg-accentContrast text-primary': isEmbedThemeLight,
+        'border-b pt-2 ': !noActiveTab,
+      }"
+    >
+      <span
+        v-for="option in embedOptions.tabs"
+        v-show="option.enabled"
+        :key="option.value"
+        class="px-2 py-2"
+        :class="{
+          'border-b border-dividerDark':
+            embedOptions.selectedTab === option.value,
+        }"
+      >
+        {{ option.label }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useVModel } from "@vueuse/core"
+import { computed } from "vue"
+import { useI18n } from "~/composables/i18n"
+
+type Tabs = "parameters" | "body" | "headers" | "authorization"
+
+type EmbedOption = {
+  selectedTab: Tabs
+  tabs: {
+    value: Tabs
+    label: string
+    enabled: boolean
+  }[]
+  theme: "light" | "dark" | "system"
+}
+
+const props = defineProps<{
+  method: string | undefined
+  endpoint: string | undefined
+  modelValue: EmbedOption
+}>()
+
+const embedOptions = useVModel(props, "modelValue")
+
+const t = useI18n()
+
+const noActiveTab = computed(() => {
+  return embedOptions.value.tabs.every((tab) => !tab.enabled)
+})
+
+const isEmbedThemeLight = computed(() => embedOptions.value.theme === "light")
+</script>

packages/hoppscotch-common/src/components/share/templates/Link.vue

@@ -0,0 +1,29 @@
+<template>
+  <div
+    class="flex items-center justify-center rounded border border-dotted border-dividerDark p-5"
+  >
+    <span
+      :class="{
+        'border-b border-secondary': label,
+      }"
+    >
+      {{ text }}
+    </span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue"
+import { useI18n } from "~/composables/i18n"
+
+const t = useI18n()
+
+const props = defineProps<{
+  link?: string | undefined
+  label?: string | undefined
+}>()
+
+const text = computed(() => {
+  return props.label ? t(props.label) : `hopp.sh/r/${props.link ?? "xxxx"}`
+})
+</script>