From 023a91832a28d2143d7fd2c96aed2394d7ab8582 Mon Sep 17 00:00:00 2001
From: Ephraim Atta-Duncan <ephraimduncan68@gmail.com>
Date: Sat, 23 Sep 2023 12:02:37 +0000
Subject: [PATCH] feat: add extra info for the early adopters

---
 .../src/app/(marketing)/open/bar-metrics.tsx  |  7 +++-
 .../src/app/(marketing)/open/page.tsx         |  2 +
 .../src/app/(marketing)/open/tooltip.tsx      | 40 +++++++++++++++++++
 3 files changed, 48 insertions(+), 1 deletion(-)
 create mode 100644 apps/marketing/src/app/(marketing)/open/tooltip.tsx

diff --git a/apps/marketing/src/app/(marketing)/open/bar-metrics.tsx b/apps/marketing/src/app/(marketing)/open/bar-metrics.tsx
index ec677ec83..42295c0bf 100644
--- a/apps/marketing/src/app/(marketing)/open/bar-metrics.tsx
+++ b/apps/marketing/src/app/(marketing)/open/bar-metrics.tsx
@@ -13,6 +13,7 @@ export type BarMetricProps<T extends Record<string, unknown>> = HTMLAttributes<H
   title: string;
   label: string;
   chartHeight?: number;
+  extraInfo?: JSX.Element;
 };
 
 export const BarMetric = <T extends Record<string, Record<keyof T[string], unknown>>>({
@@ -22,6 +23,7 @@ export const BarMetric = <T extends Record<string, Record<keyof T[string], unkno
   title,
   label,
   chartHeight = 400,
+  extraInfo,
   ...props
 }: BarMetricProps<T>) => {
   const formattedData = Object.keys(data)
@@ -33,7 +35,10 @@ export const BarMetric = <T extends Record<string, Record<keyof T[string], unkno
 
   return (
     <div className={cn('flex flex-col', className)} {...props}>
-      <h3 className="px-4 text-lg font-semibold">{title}</h3>
+      <div className="flex items-center px-4">
+        <h3 className="text-lg font-semibold">{title}</h3>
+        <span>{extraInfo}</span>
+      </div>
 
       <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border pr-2 shadow-sm hover:shadow">
         <ResponsiveContainer width="100%" height={chartHeight}>
diff --git a/apps/marketing/src/app/(marketing)/open/page.tsx b/apps/marketing/src/app/(marketing)/open/page.tsx
index 8a8281d53..8d04e21b1 100644
--- a/apps/marketing/src/app/(marketing)/open/page.tsx
+++ b/apps/marketing/src/app/(marketing)/open/page.tsx
@@ -8,6 +8,7 @@ import { BarMetric } from './bar-metrics';
 import { CapTable } from './cap-table';
 import { FundingRaised } from './funding-raised';
 import { TeamMembers } from './team-members';
+import { OpenPageTooltip } from './tooltip';
 
 export const revalidate = 3600;
 
@@ -133,6 +134,7 @@ export default async function OpenPage() {
           title="Early Adopters"
           label="Early Adopters"
           className="col-span-12 lg:col-span-6"
+          extraInfo={<OpenPageTooltip />}
         />
 
         <BarMetric<StargazersType>
diff --git a/apps/marketing/src/app/(marketing)/open/tooltip.tsx b/apps/marketing/src/app/(marketing)/open/tooltip.tsx
new file mode 100644
index 000000000..e6bf48a94
--- /dev/null
+++ b/apps/marketing/src/app/(marketing)/open/tooltip.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@documenso/ui/primitives/tooltip';
+
+export function OpenPageTooltip() {
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger>
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            className="ml-2 mt-2.5"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M7.49991 0.876892C3.84222 0.876892 0.877075 3.84204 0.877075 7.49972C0.877075 11.1574 3.84222 14.1226 7.49991 14.1226C11.1576 14.1226 14.1227 11.1574 14.1227 7.49972C14.1227 3.84204 11.1576 0.876892 7.49991 0.876892ZM1.82707 7.49972C1.82707 4.36671 4.36689 1.82689 7.49991 1.82689C10.6329 1.82689 13.1727 4.36671 13.1727 7.49972C13.1727 10.6327 10.6329 13.1726 7.49991 13.1726C4.36689 13.1726 1.82707 10.6327 1.82707 7.49972ZM8.24992 4.49999C8.24992 4.9142 7.91413 5.24999 7.49992 5.24999C7.08571 5.24999 6.74992 4.9142 6.74992 4.49999C6.74992 4.08577 7.08571 3.74999 7.49992 3.74999C7.91413 3.74999 8.24992 4.08577 8.24992 4.49999ZM6.00003 5.99999H6.50003H7.50003C7.77618 5.99999 8.00003 6.22384 8.00003 6.49999V9.99999H8.50003H9.00003V11H8.50003H7.50003H6.50003H6.00003V9.99999H6.50003H7.00003V6.99999H6.50003H6.00003V5.99999Z"
+              fill="currentColor"
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+            ></path>
+          </svg>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>
+            August and earlier: Active subscribers. September and beyond: Numbers of active
+            subscriptions.
+          </p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}