feat: get avatar link button

js/GetShareLink.js

@@ -0,0 +1,29 @@
+import { van } from "./van.js";
+const { button, div, span, input } = van.tags;
+
+export function GetShareLink() {
+  return div(
+    {
+      class: () =>
+        "absolute flex flex-col justify-center items-center top-0 left-0 bg-gray-900 bg-opacity-50 pointer-events-auto w-full h-full gap-2",
+    },
+    span("We're launching OpenAI Assistant API integration soon!"),
+    div(
+      {
+        class: "w-[24rem] flex justify-center items-center",
+      },
+      input({
+        class:
+          "w-full input input-bordered text-black rounded rounded-l-md rounded-r-none",
+        placeholder: "Email",
+      }),
+      button(
+        {
+          class:
+            "btn rounded rounded-l-none rounded-r-md no-animation bg-neutral hover:bg-neutral-focus text-white border-none normal-case",
+        },
+        "Get Avatar Link"
+      )
+    )
+  );
+}

js/tw-styles.css

@@ -1599,6 +1599,12 @@ details.collapse summary::-webkit-details-marker {
   border-radius: var(--rounded-box, 1rem);
 }
 
+.no-animation {
+  --btn-focus-scale: 1;
+  --animation-btn: 0;
+  --animation-input: 0;
+}
+
 .btm-nav-xs > *:where(.active) {
   border-top-width: 1px;
 }
@@ -1935,6 +1941,10 @@ details.collapse summary::-webkit-details-marker {
   height: 100%;
 }
 
+.h-10 {
+  height: 2.5rem;
+}
+
 .w-3 {
   width: 0.75rem;
 }
@@ -1956,6 +1966,22 @@ details.collapse summary::-webkit-details-marker {
   width: 100%;
 }
 
+.w-20 {
+  width: 5rem;
+}
+
+.w-96 {
+  width: 24rem;
+}
+
+.w-\[28rem\] {
+  width: 28rem;
+}
+
+.w-\[24rem\] {
+  width: 24rem;
+}
+
 .-translate-x-1\/2 {
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2022,6 +2048,55 @@ details.collapse summary::-webkit-details-marker {
   border-radius: 0.125rem;
 }
 
+.rounded {
+  border-radius: 0.25rem;
+}
+
+.rounded-s-md {
+  border-start-start-radius: 0.375rem;
+  border-end-start-radius: 0.375rem;
+}
+
+.\!rounded-s-md {
+  border-start-start-radius: 0.375rem !important;
+  border-end-start-radius: 0.375rem !important;
+}
+
+.rounded-s-lg {
+  border-start-start-radius: 0.5rem;
+  border-end-start-radius: 0.5rem;
+}
+
+.rounded-r-none {
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
+
+.rounded-l-md {
+  border-top-left-radius: 0.375rem;
+  border-bottom-left-radius: 0.375rem;
+}
+
+.rounded-l-lg {
+  border-top-left-radius: 0.5rem;
+  border-bottom-left-radius: 0.5rem;
+}
+
+.rounded-l-none {
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
+
+.rounded-r-lg {
+  border-top-right-radius: 0.5rem;
+  border-bottom-right-radius: 0.5rem;
+}
+
+.rounded-r-md {
+  border-top-right-radius: 0.375rem;
+  border-bottom-right-radius: 0.375rem;
+}
+
 .border-t-4 {
   border-top-width: 4px;
 }
@@ -2065,6 +2140,16 @@ details.collapse summary::-webkit-details-marker {
   background-color: rgb(239 68 68 / var(--tw-bg-opacity));
 }
 
+.bg-gray-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+}
+
+.bg-neutral {
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--n) / var(--tw-bg-opacity));
+}
+
 .bg-opacity-50 {
   --tw-bg-opacity: 0.5;
 }
@@ -2092,6 +2177,10 @@ details.collapse summary::-webkit-details-marker {
   padding-bottom: 0.5rem;
 }
 
+.text-center {
+  text-align: center;
+}
+
 .text-start {
   text-align: start;
 }
@@ -2110,6 +2199,10 @@ details.collapse summary::-webkit-details-marker {
   font-weight: 700;
 }
 
+.font-normal {
+  font-weight: 400;
+}
+
 .normal-case {
   text-transform: none;
 }
@@ -2129,10 +2222,20 @@ details.collapse summary::-webkit-details-marker {
   color: rgb(194 65 12 / var(--tw-text-opacity));
 }
 
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
 .opacity-80 {
   opacity: 0.8;
 }
 
+.outline-none {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -2295,6 +2398,11 @@ details.collapse summary::-webkit-details-marker {
   }
 }
 
+.hover\:bg-neutral-focus:hover {
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--nf) / var(--tw-bg-opacity));
+}
+
 .hover\:text-red-500:hover {
   --tw-text-opacity: 1;
   color: rgb(239 68 68 / var(--tw-text-opacity));