feat: Info tooltip listing good first labels added

kudos-ink · Jan 21, 2024 · e523779 · e523779
1 parent 6f2f11e
commit e523779
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 9 deletions.
diff --git a/assets/icons.tsx b/assets/icons.tsx
@@ -204,3 +204,29 @@ export const FeedbackIcon: React.FC<IconSvgProps> = ({
     </svg>
   );
 };
+
+export const InfoIcon: React.FC<IconSvgProps> = ({
+  size = 24,
+  width,
+  height,
+  ...props
+}) => {
+  return (
+    <svg
+      height={size || height}
+      viewBox="0 0 24 24"
+      width={size || width}
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <circle cx="12" cy="12" r="10" />
+      <path d="M12 16v-4" />
+      <path d="M12 8h.01" />
+    </svg>
+  );
+};
diff --git a/components/filters/checkbox-filter.tsx b/components/filters/checkbox-filter.tsx
@@ -2,6 +2,9 @@
 import React from "react";
 import { usePathname, useRouter } from "next/navigation";
 import { Checkbox } from "@nextui-org/checkbox";
+import { Tooltip } from "@nextui-org/tooltip";
+import { InfoIcon } from "@/assets/icons";
+import { GOOD_FIRST_ISSUE_LABELS } from "@/data/filters";
 import { createUrl } from "@/utils/url";
 
 interface ICheckboxFilterProps {
@@ -28,16 +31,34 @@ export const CheckboxFilter = ({
   };
 
   return (
-    <Checkbox
-      classNames={{
-        wrapper: "before:border-default-200 before:border-medium",
-        label: "whitespace-nowrap",
-      }}
-      isSelected={isSelected}
-      onValueChange={handleValueChange}
+    <Tooltip
+      content={
+        <div className="px-1 py-2">
+          <div className="text-small font-bold">
+            Based on the following GitHub labels:
+          </div>
+          {GOOD_FIRST_ISSUE_LABELS.map((label, idx) => (
+            <div className="text-tiny" key={idx}>
+              • {label}
+            </div>
+          ))}
+        </div>
+      }
     >
-      {placeholder}
-    </Checkbox>
+      <div className="flex">
+        <Checkbox
+          classNames={{
+            wrapper: "before:border-default-200 before:border-medium",
+            label: "flex gap-2 items-center whitespace-nowrap",
+          }}
+          isSelected={isSelected}
+          onValueChange={handleValueChange}
+        >
+          {placeholder}
+          <InfoIcon className="text-default-500" size={16} />
+        </Checkbox>
+      </div>
+    </Tooltip>
   );
 };