feat: tooltip and popover components
This commit is contained in:
Liyas Thomas
GitHub
@@ -78,7 +78,6 @@ export default {
|
|||||||
this.globe = new ThreeGlobe()
|
this.globe = new ThreeGlobe()
|
||||||
.globeImageUrl(texture)
|
.globeImageUrl(texture)
|
||||||
.atmosphereColor("#aaaaaa")
|
.atmosphereColor("#aaaaaa")
|
||||||
|
|
||||||
// arcs layer
|
// arcs layer
|
||||||
.arcsData(this.arcsData)
|
.arcsData(this.arcsData)
|
||||||
.arcColor("color")
|
.arcColor("color")
|
||||||
@@ -93,6 +92,14 @@ export default {
|
|||||||
.hexPolygonResolution(3)
|
.hexPolygonResolution(3)
|
||||||
.hexPolygonMargin(0.5)
|
.hexPolygonMargin(0.5)
|
||||||
.hexPolygonColor(() => `#aaaaaa`)
|
.hexPolygonColor(() => `#aaaaaa`)
|
||||||
|
// labels layer
|
||||||
|
// .labelsData(this.labelsData)
|
||||||
|
// .labelLat("lat")
|
||||||
|
// .labelLng("lng")
|
||||||
|
// .labelText("text")
|
||||||
|
// .labelColor("color")
|
||||||
|
// .labelSize(1.5)
|
||||||
|
// .labelDotRadius(0.5)
|
||||||
|
|
||||||
// labels layer
|
// labels layer
|
||||||
.labelsData(this.labelsData)
|
.labelsData(this.labelsData)
|
||||||
|
|||||||
@@ -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>
|
|
||||||
Reference in New Issue
Block a user