feat: tooltip and popover components

2021-07-02 16:30:08 +00:00
parent eaf0da3d00
commit 0e443b3a43
63 changed files with 1172 additions and 1461 deletions
--- a/components/landing/CTA.vue
+++ b/components/landing/CTA.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="flex p-4 bg-primaryLight rounded">
+    <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+      <div
+        v-for="(cta, index) in ctas"
+        :key="`cta-${index}`"
+        class="inline-flex flex-col p-8"
+      >
+        <i class="text-3xl material-icons text-accent">{{ cta.icon }}</i>
+        <div class="flex-grow">
+          <h2
+            class="
+              mt-4
+              mb-2
+              text-lg
+              font-semibold
+              transition
+              text-secondaryDark
+            "
+          >
+            {{ cta.title }}
+          </h2>
+          <p>
+            {{ cta.description }}
+          </p>
+          <p class="mt-2">
+            <SmartLink :to="cta.link.target" class="link" blank>
+              {{ cta.link.title }}
+              <i class="material-icons">chevron_right</i>
+            </SmartLink>
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      ctas: [
+        {
+          icon: "layers",
+          title: "API Documentation",
+          description:
+            "Get up and running with Kooli in as little as 10 minutes.",
+          link: {
+            title: "API reference",
+            target: "https://docs.kooli.tech/api",
+          },
+        },
+        {
+          icon: "local_library",
+          title: "Guides",
+          description:
+            "Explore and start integrating Kooli's products and tools.",
+          link: {
+            title: "Guides and resources",
+            target: "https://docs.kooli.tech/guides",
+          },
+        },
+        {
+          icon: "local_library",
+          title: "Guides",
+          description:
+            "Explore and start integrating Kooli's products and tools.",
+          link: {
+            title: "Guides and resources",
+            target: "https://docs.kooli.tech/guides",
+          },
+        },
+      ],
+    }
+  },
+}
+</script>
--- a/components/landing/Features.vue
+++ b/components/landing/Features.vue
@@ -4,38 +4,14 @@
      <p class="my-4 font-semibold tracking-widest text-center text-accent">
        FEATURES
      </p>
-      <h3
-        class="
-          max-w-xl
-          mt-4
-          mb-8
-          text-4xl
-          font-bold
-          leading-tight
-          tracking-tight
-          text-center
-          transition
-          text-secondaryDark
-        "
-      >
-        A technology-first approach to payments and finance
-      </h3>
    </div>
    <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
      <div
        v-for="(feature, index) in features"
        :key="`feature-${index}`"
-        class="
-          inline-flex
-          flex-col
-          p-8
-          transition
-          border
-          rounded-lg
-          border-divider
-        "
+        class="inline-flex flex-col p-8"
      >
-        <i class="text-3xl material-icons text-accent">{{ feature.icon }}</i>
+        <i class="text-4xl material-icons text-accent">{{ feature.icon }}</i>
        <div class="flex-grow">
          <h2
            class="
--- a/components/landing/Footer.vue
+++ b/components/landing/Footer.vue
@@ -1,18 +1,11 @@
 <template>
-  <footer class="flex flex-col px-8 py-16">
+  <footer class="flex flex-col p-4">
    <nav class="grid grid-cols-2 gap-4 md:grid-cols-4">
      <div class="flex flex-col space-y-2">
-        <SmartLink
-          :to="
-            !$store.state.authUser
-              ? localePath('/')
-              : localePath(`/${$store.state.login}`)
-          "
-          class="my-2"
-        >
+        <span>
          <AppLogo class="h-8" />
-        </SmartLink>
-        <span> Kooli </span>
+        </span>
+        <span class="font-bold"> Hoppscotch </span>
        <SmartChangeLanguage />
        <ul class="space-y-2">
          <li>
--- a/components/landing/Globe.vue
+++ b/components/landing/Globe.vue
@@ -12,23 +12,47 @@ export default {
  data() {
    return {
      globe: null,
-      cube: null,
      renderer: null,
      scene: null,
      camera: null,
-      tbControls: null,
-      arcsData: [...Array(40).keys()].map(() => ({
+      arcsData: [...Array(20).keys()].map(() => ({
        startLat: (Math.random() - 0.5) * 180,
        startLng: (Math.random() - 0.5) * 360,
        endLat: (Math.random() - 0.5) * 180,
        endLng: (Math.random() - 0.5) * 360,
-        color: ["#00acee", "#aceeff", "#00ffac", "#aaef3e"][
-          Math.round(Math.random() * 3)
+        color: [
+          ["#00acee", "#aceeff", "#00ffac", "#aaef3e"][
+            Math.round(Math.random() * 3)
+          ],
+          ["#00acee", "#aceeff", "#00ffac", "#aaef3e"][
+            Math.round(Math.random() * 3)
+          ],
        ],
      })),
    }
  },

+  // computed: {
+  //   labelsData() {
+  //     const labelsData = []
+  //     this.arcsData.forEach(
+  //       ({ startLat, startLng, endLat, endLng, color }, linkIdx) =>
+  //         [
+  //           [startLat, startLng],
+  //           [endLat, endLng],
+  //         ].forEach(([lat, lng], edgeIdx) =>
+  //           labelsData.push({
+  //             lat,
+  //             lng,
+  //             color: color[edgeIdx],
+  //             text: `${linkIdx} ${edgeIdx ? "tgt" : "src"}`,
+  //           })
+  //         )
+  //     )
+  //     return labelsData
+  //   },
+  // },
+
  mounted() {
    this.init()
    this.animate()
@@ -52,17 +76,27 @@ export default {
      this.globe = new ThreeGlobe()
        .globeImageUrl(texture)
        .atmosphereColor("#aaaaaa")
+        // arcs layer
        .arcsData(this.arcsData)
        .arcColor("color")
        .arcDashLength(1)
-        .arcDashGap(5)
+        .arcDashGap(() => Math.random())
        .arcStroke(1)
        .arcDashInitialGap(() => Math.random() * 5)
        .arcDashAnimateTime(2000)
+        // hex layer
        .hexPolygonsData(geojson.features)
        .hexPolygonResolution(3)
        .hexPolygonMargin(0.5)
        .hexPolygonColor(() => `#aaaaaa`)
+      // labels layer
+      // .labelsData(this.labelsData)
+      // .labelLat("lat")
+      // .labelLng("lng")
+      // .labelText("text")
+      // .labelColor("color")
+      // .labelSize(1.5)
+      // .labelDotRadius(0.5)

      this.renderer = new THREE.WebGLRenderer({
        alpha: true,
--- a/components/landing/Hero.vue
+++ b/components/landing/Hero.vue
@@ -6,9 +6,9 @@
          leading-none
          tracking-tighter
          font-semibold
-          text-accent text-5xl
-          md:text-6xl
-          lg:text-8xl
+          text-accent text-4xl
+          md:text-5xl
+          lg:text-6xl
        "
      >
        Open Source
@@ -16,7 +16,7 @@
      <h3
        class="
          text-3xl
-          my-8
+          my-4
          font-mono
          text-secondaryDark
          md:text-4xl
@@ -32,7 +32,13 @@
        in the world.
      </p>
      <div class="my-8 flex items-center">
-        <button class="button rounded text-xl">Get Started</button>
+        <ButtonPrimary
+          label="Dashboard"
+          icon="chevron_right"
+          class="my-4"
+          large
+          reverse
+        />
      </div>
    </div>
    <div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
--- a/components/landing/Package.vue
+++ b/components/landing/Package.vue
@@ -1,142 +0,0 @@
-<template>
-  <div class="flex flex-col p-4">
-    <div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
-      <div
-        class="inline-flex flex-col transition border rounded-lg border-divider"
-      >
-        <div class="flex flex-col p-8">
-          <p class="font-semibold tracking-widest text-accent">API</p>
-          <h3
-            class="
-              max-w-xl
-              my-4
-              text-4xl
-              font-semibold
-              leading-tight
-              tracking-tight
-              transition
-              text-secondaryDark
-            "
-          >
-            Powerful and easy-to-use APIs
-          </h3>
-          <p class="my-4 text-lg md:w-4/5">
-            We agonize over the right abstractions so your teams don’t need to
-            stitch together disparate systems or spend months integrating
-            payments functionality.
-          </p>
-          <div class="flex mt-4">
-            <ButtonPrimary
-              to="https://docs.kooli.tech/guides"
-              label="Read the docs"
-              icon="chevron_right"
-              reverse
-            />
-          </div>
-        </div>
-        <div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
-          <div
-            v-for="(api, index) in apis"
-            :key="`api-${index}`"
-            class="inline-flex flex-col p-8"
-          >
-            <i class="text-3xl material-icons text-accent">{{ api.icon }}</i>
-            <div class="flex-grow">
-              <h2
-                class="
-                  mt-4
-                  mb-2
-                  text-lg
-                  font-semibold
-                  transition
-                  text-secondaryDark
-                "
-              >
-                {{ api.title }}
-              </h2>
-              <p>
-                {{ api.description }}
-              </p>
-              <p class="mt-2">
-                <SmartLink :to="api.link.target" class="link">
-                  {{ api.link.title }}
-                  <i class="material-icons">chevron_right</i>
-                </SmartLink>
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="
-          inline-flex
-          flex-col
-          p-4
-          transition
-          border
-          rounded-lg
-          border-divider
-          bg-primaryLight
-        "
-      >
-        <div class="flex">
-          <div class="w-3 h-3 mr-2 bg-red-500 rounded-full"></div>
-          <div class="w-3 h-3 mr-2 bg-yellow-500 rounded-full"></div>
-          <div class="w-3 h-3 bg-green-500 rounded-full"></div>
-        </div>
-        <div class="flex flex-1 p-4 overflow-auto whitespace-pre">
-          <pre>
-/*
- ** TailwindCSS Configuration File
- **
- ** Docs: https://tailwindcss.com/docs/configuration
- ** Default: https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js
- */
-module.exports = {
-  future: {
-    removeDeprecatedGapUtilities: true,
-    purgeLayersByDefault: true,
-  },
-  experimental: "all",
-  dark: "class",
-  corePlugins: {
-    float: false,
-    clear: false,
-    transitionDelay: false,
-    skew: false,
-  },
-}
-          </pre>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      apis: [
-        {
-          icon: "layers",
-          title: "Tools for every stack",
-          description:
-            "We offer client and server libraries in everything from React, PHP to .NET and iOS.",
-          link: {
-            title: "See libraries",
-            target: "https://docs.kooli.tech/api",
-          },
-        },
-        {
-          icon: "extension",
-          title: "Prebuilt integrations",
-          description:
-            "Use integrations for systems like Shopify, PayPal, and more.",
-          link: { title: "Explore partners", target: "/about/integrations" },
-        },
-      ],
-    }
-  },
-}
-</script>
--- a/components/landing/Users.vue
+++ b/components/landing/Users.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col p-4 mx-4 bg-primaryLight my-16 rounded">
+  <div class="flex flex-col p-4 mx-4 bg-primaryLight rounded">
    <div class="flex flex-col items-center">
      <p class="my-4 font-semibold tracking-widest text-center">
        EMPOWERING DEVELOPERS FROM