@dub/ui 0.0.0

package/src/tab-select.tsx

@@ -0,0 +1,27 @@
+export function TabSelect({
+  options,
+  selected,
+  selectAction,
+}: {
+  options: string[];
+  selected: string;
+  selectAction: (option: string) => void;
+}) {
+  return (
+    <div className="relative inline-flex items-center space-x-3">
+      {options.map((option) => (
+        <button
+          key={option}
+          className={`${
+            option === selected
+              ? "bg-gray-200 text-gray-800"
+              : "bg-gray-50 text-gray-600 hover:bg-gray-100"
+          } rounded-md px-2 py-1 text-sm font-medium capitalize transition-all duration-75 active:scale-90 sm:px-3`}
+          onClick={() => selectAction(option)}
+        >
+          {option}
+        </button>
+      ))}
+    </div>
+  );
+}

package/src/tooltip.tsx

@@ -0,0 +1,184 @@
+"use client";
+
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { nFormatter, timeAgo } from "@dub/utils";
+import { HelpCircle } from "lucide-react";
+import Link from "next/link";
+import { ReactNode } from "react";
+import { Drawer } from "vaul";
+import { useMediaQuery } from "./hooks";
+
+export function Tooltip({
+  children,
+  content,
+  fullWidth,
+}: {
+  children: ReactNode;
+  content: ReactNode | string;
+  fullWidth?: boolean;
+}) {
+  const { isMobile } = useMediaQuery();
+
+  if (isMobile) {
+    return (
+      <Drawer.Root>
+        <Drawer.Trigger
+          className={`${fullWidth ? "w-full" : "inline-flex"} md:hidden`}
+          onClick={(e) => {
+            e.stopPropagation();
+          }}
+        >
+          {children}
+        </Drawer.Trigger>
+        <Drawer.Overlay className="fixed inset-0 z-40 bg-gray-100 bg-opacity-10 backdrop-blur" />
+        <Drawer.Portal>
+          <Drawer.Content className="fixed bottom-0 left-0 right-0 z-50 mt-24 rounded-t-[10px] border-t border-gray-200 bg-white">
+            <div className="sticky top-0 z-20 flex w-full items-center justify-center rounded-t-[10px] bg-inherit">
+              <div className="my-3 h-1 w-12 rounded-full bg-gray-300" />
+            </div>
+            <div className="flex min-h-[150px] w-full items-center justify-center overflow-hidden bg-white align-middle shadow-xl">
+              {typeof content === "string" ? (
+                <span className="block text-center text-sm text-gray-700">
+                  {content}
+                </span>
+              ) : (
+                content
+              )}
+            </div>
+          </Drawer.Content>
+          <Drawer.Overlay />
+        </Drawer.Portal>
+      </Drawer.Root>
+    );
+  }
+  return (
+    <TooltipPrimitive.Provider delayDuration={0}>
+      <TooltipPrimitive.Root>
+        <TooltipPrimitive.Trigger className="md:inline-flex" asChild>
+          {children}
+        </TooltipPrimitive.Trigger>
+        {/* 
+            We don't use TooltipPrimitive.Portal here because for some reason it 
+            prevents you from selecting the contents of a tooltip when used inside a modal 
+        */}
+        <TooltipPrimitive.Content
+          sideOffset={8}
+          side="top"
+          className="animate-slide-up-fade z-[99] items-center overflow-hidden rounded-md border border-gray-200 bg-white shadow-md md:block"
+        >
+          {typeof content === "string" ? (
+            <div className="block max-w-xs px-4 py-2 text-center text-sm text-gray-700">
+              {content}
+            </div>
+          ) : (
+            content
+          )}
+        </TooltipPrimitive.Content>
+      </TooltipPrimitive.Root>
+    </TooltipPrimitive.Provider>
+  );
+}
+
+export function TooltipContent({
+  title,
+  cta,
+  href,
+  target,
+  onClick,
+}: {
+  title: string;
+  cta?: string;
+  href?: string;
+  target?: string;
+  onClick?: () => void;
+}) {
+  return (
+    <div className="flex flex-col items-center space-y-3 p-4 text-center md:max-w-xs">
+      <p className="text-sm text-gray-700">{title}</p>
+      {cta &&
+        (href ? (
+          <Link
+            href={href}
+            {...(target ? { target } : {})}
+            className="mt-4 w-full rounded-md border border-black bg-black px-3 py-1.5 text-center text-sm text-white transition-all hover:bg-white hover:text-black"
+          >
+            {cta}
+          </Link>
+        ) : onClick ? (
+          <button
+            type="button"
+            className="mt-4 w-full rounded-md border border-black bg-black px-3 py-1.5 text-center text-sm text-white transition-all hover:bg-white hover:text-black"
+            onClick={onClick}
+          >
+            {cta}
+          </button>
+        ) : null)}
+    </div>
+  );
+}
+
+export function SimpleTooltipContent({
+  title,
+  cta,
+  href,
+}: {
+  title: string;
+  cta: string;
+  href: string;
+}) {
+  return (
+    <div className="max-w-xs px-4 py-2 text-center text-sm text-gray-700">
+      {title}{" "}
+      <a
+        href={href}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="inline-flex text-gray-500 underline underline-offset-4 hover:text-gray-800"
+      >
+        {cta}
+      </a>
+    </div>
+  );
+}
+
+export function InfoTooltip({ content }: { content: ReactNode | string }) {
+  return (
+    <Tooltip content={content}>
+      <HelpCircle className="h-4 w-4 text-gray-500" />
+    </Tooltip>
+  );
+}
+
+export function NumberTooltip({
+  value,
+  unit = "total clicks",
+  children,
+  lastClicked,
+}: {
+  value?: number | null;
+  unit?: string;
+  children: ReactNode;
+  lastClicked?: Date | null;
+}) {
+  if ((!value || value < 1000) && !lastClicked) {
+    return children;
+  }
+  return (
+    <Tooltip
+      content={
+        <div className="block max-w-xs px-4 py-2 text-center text-sm text-gray-700">
+          <p className="text-sm font-semibold text-gray-700">
+            {nFormatter(value || 0, { full: true })} {unit}
+          </p>
+          {lastClicked && (
+            <p className="mt-1 text-xs text-gray-500">
+              Last clicked {timeAgo(lastClicked, { withAgo: true })}
+            </p>
+          )}
+        </div>
+      }
+    >
+      {children}
+    </Tooltip>
+  );
+}

package/tailwind.config.ts

@@ -0,0 +1,9 @@
+// tailwind config is required for editor support
+import sharedConfig from "tailwind-config/tailwind.config.ts";
+import type { Config } from "tailwindcss";
+
+const config: Pick<Config, "presets"> = {
+  presets: [sharedConfig],
+};
+
+export default config;

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "tsconfig/react-library.json",
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"]
+}

package/tsup.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig, Options } from "tsup";
+
+export default defineConfig((options: Options) => ({
+  entry: ["src/**/*.tsx"],
+  format: ["esm"],
+  esbuildOptions(options) {
+    options.banner = {
+      js: '"use client"',
+    };
+  },
+  dts: true,
+  minify: true,
+  external: ["react"],
+  ...options,
+}));