Merge branch 'main' into news

dubinc · Oct 19, 2024 · da953c7 · da953c7
2 parents d899bee + 250ba38
commit da953c7
Show file tree

Hide file tree

Showing 9 changed files with 63 additions and 149 deletions.
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/billing/page-client.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/billing/page-client.tsx
@@ -15,7 +15,7 @@ import {
 import { CircleDollar, CursorRays, Hyperlink } from "@dub/ui/src/icons";
 import { cn, getFirstAndLastDay, nFormatter } from "@dub/utils";
 import Link from "next/link";
-import { CSSProperties, useMemo, useState } from "react";
+import { CSSProperties, useMemo } from "react";
 import { UsageChart } from "./usage-chart";
 
 export default function WorkspaceBillingClient() {
@@ -41,8 +41,6 @@ export default function WorkspaceBillingClient() {
   const { tags } = useTags();
   const { users } = useUsers();
 
-  const [clicked, setClicked] = useState(false);
-
   const [billingStart, billingEnd] = useMemo(() => {
     if (billingCycleStart) {
       const { firstDay, lastDay } = getFirstAndLastDay(billingCycleStart);
@@ -96,21 +94,20 @@ export default function WorkspaceBillingClient() {
               conversionEnabled && "sm:grid-cols-3",
             )}
           >
-            <UsageTabCard
-              id="links"
-              icon={Hyperlink}
-              title="Links created"
-              usage={linksUsage}
-              limit={linksLimit}
-              root
-            />
             <UsageTabCard
               id="events"
               icon={CursorRays}
               title="Events tracked"
               usage={usage}
               limit={usageLimit}
             />
+            <UsageTabCard
+              id="links"
+              icon={Hyperlink}
+              title="Links created"
+              usage={linksUsage}
+              limit={linksLimit}
+            />
             {conversionEnabled && (
               <UsageTabCard
                 id="revenue"
@@ -202,20 +199,19 @@ function UsageTabCard({
   usage: usageProp,
   limit: limitProp,
   unit,
-  root,
 }: {
   id: string;
   icon: Icon;
   title: string;
   usage?: number;
   limit?: number;
   unit?: string;
-  root?: boolean;
 }) {
   const { searchParams, queryParams } = useRouterStuff();
 
   const isActive =
-    searchParams.get("tab") === id || (!searchParams.get("tab") && root);
+    searchParams.get("tab") === id ||
+    (!searchParams.get("tab") && id === "events");
 
   const [usage, limit] =
     unit === "$" && usageProp !== undefined && limitProp !== undefined
@@ -265,12 +261,11 @@ function UsageTabCard({
             >
               <div
                 className={cn(
-                  "size-full rounded-full [mask-image:linear-gradient(90deg,transparent,black_80%)]",
+                  "size-full rounded-full bg-gradient-to-r from-blue-500/80 to-blue-600",
                   warning && "to-rose-500",
                 )}
                 style={{
                   transform: `translateX(-${100 - Math.floor((usage / Math.max(0, usage, limit)) * 100)}%)`,
-                  backgroundImage: `linear-gradient(90deg, #D8277A, #7E3AEA)`,
                 }}
               />
             </div>

diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/billing/usage-chart.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/billing/usage-chart.tsx
@@ -37,7 +37,7 @@ const resourceEmptyStates: Record<
 export function UsageChart() {
   const searchParams = useSearchParams();
   const resource =
-    RESOURCES.find((r) => r === searchParams.get("tab")) ?? "links";
+    RESOURCES.find((r) => r === searchParams.get("tab")) ?? "events";
 
   const { usage, loading } = useUsage({ resource });
 
@@ -95,16 +95,15 @@ export function UsageChart() {
             }}
           >
             <LinearGradient id="usage-bar-gradient">
-              <stop stopColor="#7E3AEA" stopOpacity={1} offset="20%" />
-              <stop stopColor="#D8277A" stopOpacity={0} offset="100%" />
+              <stop stopColor="#2563eb" stopOpacity={1} offset="20%" />
+              <stop stopColor="#3b82f6" stopOpacity={0.9} offset="100%" />
             </LinearGradient>
-            <Bars
-              seriesStyles={[
-                {
-                  id: "usage",
-                  barFill: "#00000019",
-                },
-              ]}
+            <XAxis highlightLast={false} />
+            <YAxis
+              showGridLines
+              tickFormat={
+                resource === "revenue" ? (v) => `$${nFormatter(v)}` : nFormatter
+              }
             />
             <Bars
               seriesStyles={[
@@ -114,13 +113,6 @@ export function UsageChart() {
                 },
               ]}
             />
-            <XAxis highlightLast={false} />
-            <YAxis
-              showGridLines
-              tickFormat={
-                resource === "revenue" ? (v) => `$${nFormatter(v)}` : nFormatter
-              }
-            />
           </TimeSeriesChart>
         ) : (
           <div className="flex size-full items-center justify-center">

diff --git a/apps/web/ui/layout/sidebar/usage.tsx b/apps/web/ui/layout/sidebar/usage.tsx
@@ -72,20 +72,20 @@ function UsageInner() {
         </Link>
 
         <div className="mt-4 flex flex-col gap-4">
-          <UsageRow
-            icon={Hyperlink}
-            label="Links"
-            usage={linksUsage}
-            limit={linksLimit}
-            warning={warnings[1]}
-          />
           <UsageRow
             icon={CursorRays}
             label="Events"
             usage={usage}
             limit={usageLimit}
             warning={warnings[0]}
           />
+          <UsageRow
+            icon={Hyperlink}
+            label="Links"
+            usage={linksUsage}
+            limit={linksLimit}
+            warning={warnings[1]}
+          />
         </div>
 
         <div className="mt-3">

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@dub/ui",
   "description": "UI components for Dub.co",
-  "version": "0.1.58",
+  "version": "0.1.59",
   "sideEffects": false,
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

diff --git a/packages/ui/src/content.ts b/packages/ui/src/content.ts
@@ -16,7 +16,6 @@ import {
   QRCode,
   Raycast,
   Ruby,
-  Stars2,
   Tinybird,
   Typescript,
   Users,
@@ -140,16 +139,6 @@ export const SDKS = [
 ];
 
 export const RESOURCES = [
-  {
-    icon: Headset,
-    title: "Help Center",
-    href: "/help",
-  },
-  {
-    icon: Book2,
-    title: "Docs",
-    href: "/docs",
-  },
   {
     icon: Blog,
     title: "Blog",
@@ -161,9 +150,14 @@ export const RESOURCES = [
     href: "/changelog",
   },
   {
-    icon: Stars2,
-    title: "Customers",
-    href: "/customers",
+    icon: Book2,
+    title: "Docs",
+    href: "/docs",
+  },
+  {
+    icon: Headset,
+    title: "Help Center",
+    href: "/help",
   },
   {
     icon: HexadecagonStar,

diff --git a/packages/ui/src/nav/content/resources-content.tsx b/packages/ui/src/nav/content/resources-content.tsx
@@ -1,74 +1,38 @@
 import { cn, createHref } from "@dub/utils";
-import { RESOURCES } from "../../content";
-import {
-  Amazon,
-  ChatGPT,
-  Figma,
-  GitHubEnhanced,
-  GoogleEnhanced,
-  Spotify,
-} from "../../icons";
-import {
-  ContentLinkCard,
-  ToolLinkCard,
-  contentHeadingClassName,
-} from "./shared";
-
-const items = [
-  {
-    name: "Spotify Link Shortener",
-    href: "/tools/spotify-link-shortener",
-    icon: Spotify,
-  },
-  {
-    name: "ChatGPT Link Shortener",
-    href: "/tools/chatgpt-link-shortener",
-    icon: ChatGPT,
-  },
-  {
-    name: "GitHub Link Shortener",
-    href: "/tools/github-link-shortener",
-    icon: GitHubEnhanced,
-  },
-  {
-    name: "Google Link Shortener",
-    href: "/tools/google-link-shortener",
-    icon: GoogleEnhanced,
-  },
-  {
-    name: "Amazon Link Shortener",
-    href: "/tools/amazon-link-shortener",
-    icon: Amazon,
-  },
-  {
-    name: "Figma Link Shortener",
-    href: "/tools/figma-link-shortener",
-    icon: Figma,
-  },
-];
+import { RESOURCES, SDKS } from "../../content";
+import { ContentLinkCard, contentHeadingClassName } from "./shared";
 
 export function ResourcesContent({ domain }: { domain: string }) {
   return (
-    <div className="grid w-[32rem] grid-cols-[7fr_5fr]">
-      <div className="p-5">
-        <p className={cn(contentHeadingClassName, "mb-2")}>Tools</p>
-        <div className="flex flex-col gap-2">
-          {items.map(({ name, href, icon: Icon }) => (
-            <ToolLinkCard
-              name={name}
+    <div className="grid w-[28rem] grid-cols-2">
+      <div className="border-l border-gray-200 p-5 dark:border-white/20">
+        <p className={cn(contentHeadingClassName, "mb-2")}>SDKs</p>
+        <div className="-mx-2 flex flex-col gap-0.5">
+          {SDKS.map(({ icon: Icon, iconClassName, title, href }) => (
+            <ContentLinkCard
+              key={href}
               href={createHref(href, domain, {
                 utm_source: "Custom Domain",
                 utm_medium: "Navbar",
                 utm_campaign: domain,
-                utm_content: name,
+                utm_content: title,
               })}
-              icon={<Icon />}
+              icon={
+                <Icon
+                  className={cn(
+                    "h-5 w-5 shrink-0 text-gray-600 transition-colors dark:text-white/60",
+                    iconClassName,
+                  )}
+                />
+              }
+              title={title}
+              showArrow
             />
           ))}
         </div>
       </div>
       <div className="border-l border-gray-200 p-5 dark:border-white/20">
-        <p className={cn(contentHeadingClassName, "mb-2")}>Resources</p>
+        <p className={cn(contentHeadingClassName, "mb-2")}>Content</p>
         <div className="-mx-2 flex flex-col gap-0.5">
           {RESOURCES.map(({ icon: Icon, title, href }) => (
             <ContentLinkCard

diff --git a/packages/ui/src/nav/content/solutions-content.tsx b/packages/ui/src/nav/content/solutions-content.tsx
@@ -1,5 +1,5 @@
 import { cn, createHref } from "@dub/utils";
-import { PROFILES, SDKS } from "../../content";
+import { PROFILES } from "../../content";
 import {
   ContentIcon,
   ContentLinkCard,
@@ -27,32 +27,6 @@ export function SolutionsContent({ domain }: { domain: string }) {
           ))}
         </div>
       </div>
-      <div className="border-l border-gray-200 p-5 dark:border-white/20">
-        <p className={cn(contentHeadingClassName, "mb-2")}>SDKs</p>
-        <div className="-mx-2 flex flex-col gap-0.5">
-          {SDKS.map(({ icon: Icon, iconClassName, title, href }) => (
-            <ContentLinkCard
-              key={href}
-              href={createHref(href, domain, {
-                utm_source: "Custom Domain",
-                utm_medium: "Navbar",
-                utm_campaign: domain,
-                utm_content: title,
-              })}
-              icon={
-                <Icon
-                  className={cn(
-                    "h-5 w-5 shrink-0 text-gray-600 transition-colors dark:text-white/60",
-                    iconClassName,
-                  )}
-                />
-              }
-              title={title}
-              showArrow
-            />
-          ))}
-        </div>
-      </div>
     </div>
   );
 }
diff --git a/packages/ui/src/nav/nav.tsx b/packages/ui/src/nav/nav.tsx
@@ -14,13 +14,12 @@ import Link from "next/link";
 import { useParams, useSelectedLayoutSegment } from "next/navigation";
 import { PropsWithChildren, createContext } from "react";
 import useSWR from "swr";
-import { FEATURES_LIST, RESOURCES, SDKS } from "../content";
+import { FEATURES_LIST, RESOURCES } from "../content";
 import { useScroll } from "../hooks";
 import { MaxWidthWrapper } from "../max-width-wrapper";
 import { NavLogo } from "../nav-logo";
 import { ProductContent } from "./content/product-content";
 import { ResourcesContent } from "./content/resources-content";
-import { SolutionsContent } from "./content/solutions-content";
 
 export type NavTheme = "light" | "dark";
 
@@ -35,9 +34,9 @@ export const navItems = [
     childItems: FEATURES_LIST,
   },
   {
-    name: "Solutions",
-    content: SolutionsContent,
-    childItems: SDKS,
+    name: "Resources",
+    content: ResourcesContent,
+    childItems: RESOURCES,
   },
   {
     name: "Customers",
@@ -47,11 +46,6 @@ export const navItems = [
     name: "Pricing",
     href: "/pricing",
   },
-  {
-    name: "Resources",
-    content: ResourcesContent,
-    childItems: RESOURCES,
-  },
 ];
 
 const navItemStyles = cva(

diff --git a/packages/utils/src/constants/dub-domains.ts b/packages/utils/src/constants/dub-domains.ts
@@ -109,6 +109,7 @@ export const DUB_DOMAINS = [
             "google.fr",
             "googleblog.com",
             "blog.google",
+            "g.co",
             "g.page",
             "youtube.com",
             "youtu.be",