Merge pull request #1902 from dubinc/nav-updates

Nav Updates
dubinc · Jan 16, 2025 · c9c1ed1 · c9c1ed1
2 parents 5f47aa4 + e25aefb
commit c9c1ed1
Show file tree

Hide file tree

Showing 12 changed files with 809 additions and 130 deletions.
diff --git a/apps/web/lib/webhook/qstash.ts b/apps/web/lib/webhook/qstash.ts
@@ -68,7 +68,7 @@ const publishWebhookEventToQStash = async ({
     },
     callback: callbackUrl.href,
     failureCallback: callbackUrl.href,
-    ...(process.env.NODE_ENV === "test" && { delay: 2 }),
+    ...(process.env.NODE_ENV === "test" && { delay: 5 }),
   });
 
   if (!response.messageId) {

diff --git a/apps/web/tests/webhooks/index.test.ts b/apps/web/tests/webhooks/index.test.ts
@@ -44,9 +44,7 @@ const eventSchemas: Record<WebhookTrigger, z.ZodSchema> = {
 
 describe.concurrent("suite", () => {
   WEBHOOK_TRIGGERS.forEach((trigger) => {
-    it(`webhook event - ${trigger}`, async () => {
-      await testWebhookEvent(trigger);
-    });
+    it(`webhook event - ${trigger}`, () => testWebhookEvent(trigger));
   });
 });
 
@@ -65,11 +63,10 @@ const testWebhookEvent = async (trigger: WebhookTrigger) => {
 
   const messageId = response[0].messageId;
   const qstashMessage = await qstash.messages.get(messageId);
-
   assertQstashMessage(qstashMessage, data, trigger);
 };
 
-const assertQstashMessage = async (
+const assertQstashMessage = (
   qstashMessage: Message,
   body: any,
   trigger: WebhookTrigger,

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.2.16",
+  "version": "0.2.19",
   "sideEffects": false,
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

diff --git a/packages/ui/src/content.ts b/packages/ui/src/content.ts
@@ -4,18 +4,25 @@ import {
   ConnectedDotsFill,
   CubeSettingsFill,
   FeatherFill,
+  Github,
   Go,
   HeadsetFill,
+  HeartFill,
+  HexadecagonStar,
   Hyperlink,
   LinesY,
+  LinkedIn,
   Php,
   ProductHunt,
   Python,
   Raycast,
   Ruby,
+  Twitter,
   Typescript,
+  YouTube,
 } from "./icons";
 import { Elxo } from "./icons/elxo";
+import { Logo } from "./logo";
 
 export const FEATURES_LIST = [
   {
@@ -105,6 +112,33 @@ export const SDKS = [
 ];
 
 export const RESOURCES = [
+  {
+    icon: Book2Fill,
+    title: "Docs",
+    description: "Platform documentation",
+    href: "/docs/introduction",
+  },
+  {
+    icon: HeadsetFill,
+    title: "Help Center",
+    description: "Answers to your questions",
+    href: "/help",
+  },
+  {
+    icon: HexadecagonStar,
+    title: "Dub Brand",
+    description: "Logos, wordmark, etc.",
+    href: "/brand",
+  },
+];
+
+export const COMPANY = [
+  {
+    icon: Logo,
+    title: "About",
+    description: "Company and team",
+    href: "/about",
+  },
   {
     icon: FeatherFill,
     title: "Blog",
@@ -118,16 +152,10 @@ export const RESOURCES = [
     href: "/changelog",
   },
   {
-    icon: Book2Fill,
-    title: "Docs",
-    description: "Platform documentation",
-    href: "/docs/introduction",
-  },
-  {
-    icon: HeadsetFill,
-    title: "Help Center",
-    description: "Answers to your questions",
-    href: "/help",
+    icon: HeartFill,
+    title: "Customers",
+    description: "Success stories and use cases",
+    href: "/customers",
   },
 ];
 
@@ -145,3 +173,22 @@ export const LEGAL_PAGES = [
   { name: "Subprocessors", slug: "subprocessors" },
   { name: "Report Abuse", slug: "abuse" },
 ];
+
+export const SOCIAL_LINKS = [
+  { name: "X (Twitter)", icon: Twitter, href: "https://x.com/dubdotco" },
+  {
+    name: "LinkedIn",
+    icon: LinkedIn,
+    href: "https://www.linkedin.com/company/dubinc",
+  },
+  {
+    name: "GitHub",
+    icon: Github,
+    href: "https://github.com/dubinc/dub",
+  },
+  {
+    name: "YouTube",
+    icon: YouTube,
+    href: "https://www.youtube.com/@dubdotco",
+  },
+];
diff --git a/packages/ui/src/icons/nucleo/heart-fill.tsx b/packages/ui/src/icons/nucleo/heart-fill.tsx
@@ -0,0 +1,20 @@
+import { SVGProps } from "react";
+
+export function HeartFill(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      height="18"
+      width="18"
+      viewBox="0 0 18 18"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g fill="currentColor">
+        <path
+          d="M12.164,2c-1.195,.015-2.324,.49-3.164,1.306-.84-.815-1.972-1.291-3.178-1.306-2.53,.015-4.582,2.084-4.572,4.609,0,5.253,5.306,8.429,6.932,9.278,.256,.133,.537,.2,.818,.2s.562-.067,.817-.2c1.626-.848,6.933-4.024,6.933-9.275,.009-2.528-2.042-4.597-4.586-4.612Z"
+          fill="currentColor"
+        />
+      </g>
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/nucleo/index.ts b/packages/ui/src/icons/nucleo/index.ts
@@ -95,6 +95,7 @@ export * from "./grid-layout-rows";
 export * from "./grid-plus";
 export * from "./headset";
 export * from "./headset-fill";
+export * from "./heart-fill";
 export * from "./hexadecagon-star";
 export * from "./hyperlink";
 export * from "./icosahedron";

diff --git a/packages/ui/src/nav/content/company-content.tsx b/packages/ui/src/nav/content/company-content.tsx
@@ -0,0 +1,50 @@
+import { cn, createHref } from "@dub/utils";
+import { COMPANY, SOCIAL_LINKS } from "../../content";
+import {
+  contentHeadingClassName,
+  ContentLinkCard,
+  getUtmParams,
+  LargeLinkCard,
+} from "./shared";
+
+export function CompanyContent({ domain }: { domain: string }) {
+  return (
+    <div className="grid w-[540px] grid-cols-[minmax(0,1fr),minmax(0,0.75fr)] divide-x divide-neutral-200">
+      <div className="flex flex-col gap-4 p-4">
+        {COMPANY.map(({ title, description, icon, href }) => (
+          <LargeLinkCard
+            key={title}
+            title={title}
+            description={description}
+            icon={icon}
+            iconClassName="size-5"
+            href={createHref(
+              href,
+              domain,
+              getUtmParams({ domain, utm_content: title }),
+            )}
+          />
+        ))}
+      </div>
+      <div className="px-6 py-4">
+        <p className={cn(contentHeadingClassName, "mb-2")}>Social</p>
+        <div className="grid grid-cols-1">
+          {SOCIAL_LINKS.map(({ icon: Icon, name, href }) => (
+            <ContentLinkCard
+              key={href}
+              href={href}
+              target="_blank"
+              className="-mx-2"
+              icon={
+                <div className="shrink-0 rounded-lg border border-neutral-200 bg-white/50 p-1.5 dark:border-white/20 dark:bg-white/10">
+                  <Icon className="size-4 shrink-0 text-neutral-600 transition-colors dark:text-white/60" />
+                </div>
+              }
+              title={name}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}