Add tool tips that link to issues.

Author: WebsByTodd

src/components/Badge.tsx

@@ -1,6 +1,7 @@
+import { useState } from 'react'
 import { twMerge } from 'tailwind-merge'
 import type { VariantProps } from 'tailwind-variants'
-import { badgeCVA, typeIcons } from '@/components/design'
+import { badgeCVA, typeIcons, typeTooltips } from '@/components/design'
 
 export type BadgeProps = VariantProps<typeof badgeCVA> & {
   type: keyof typeof typeIcons
@@ -9,17 +10,36 @@ export type BadgeProps = VariantProps<typeof badgeCVA> & {
 
 const Badge = ({ text, type }: BadgeProps) => {
   const Icon = typeIcons[type]
+  const [showTooltip, setShowTooltip] = useState(false)
+  const TooltipComponent = showTooltip && typeTooltips[type]
   return (
-    <span
-      className={twMerge(
-        badgeCVA({
-          type,
-        }),
-      )}
+    <button
+      type='button'
+      className='relative'
+      onMouseEnter={() => setShowTooltip(true)}
+      onMouseLeave={() => setShowTooltip(false)}
     >
-      {type === 'blank' || <Icon className='h-3 w-3' />}
-      {text || type}
-    </span>
+      <span
+        className={twMerge(
+          badgeCVA({
+            clickable: !!typeTooltips[type],
+            type,
+          }),
+        )}
+      >
+        {type === 'blank' || <Icon className='h-3 w-3' />}
+        {text || type}
+      </span>
+      {TooltipComponent && (
+        <div
+          className={
+            'absolute top-full w-max rounded bg-gray-800 px-2 py-1 text-white text-xs shadow-lg z-10'
+          }
+        >
+          <TooltipComponent />
+        </div>
+      )}
+    </button>
   )
 }
 

src/components/BadgePreviews/CodePreview.tsx

@@ -0,0 +1,3 @@
+export function CodePreview() {
+  return <a href='https://github.com/diffplug/gitcasso/issues/81'>TODO #81</a>
+}

src/components/BadgePreviews/ImagePreview.tsx

@@ -0,0 +1,3 @@
+export function ImagePreview() {
+  return <a href='https://github.com/diffplug/gitcasso/issues/80'>TODO #80</a>
+}

src/components/BadgePreviews/LinkPreview.tsx

@@ -0,0 +1,3 @@
+export function LinkPreview() {
+  return <a href='https://github.com/diffplug/gitcasso/issues/79'>TODO #79</a>
+}

src/components/BadgePreviews/TextPreview.tsx

@@ -0,0 +1,3 @@
+export function TextPreview() {
+  return <a href='https://github.com/diffplug/gitcasso/issues/82'>TODO #82</a>
+}

src/components/BadgePreviews/TimePreview.tsx

@@ -0,0 +1,3 @@
+export function TimePreview() {
+  return <a href='https://github.com/diffplug/gitcasso/issues/83'>TODO #83</a>
+}

src/components/design.tsx

@@ -11,7 +11,13 @@ import {
   TextSelect,
   Trash2,
 } from 'lucide-react'
+import type { JSX } from 'react'
 import { tv } from 'tailwind-variants'
+import { CodePreview } from './BadgePreviews/CodePreview'
+import { ImagePreview } from './BadgePreviews/ImagePreview'
+import { LinkPreview } from './BadgePreviews/LinkPreview'
+import { TextPreview } from './BadgePreviews/TextPreview'
+import { TimePreview } from './BadgePreviews/TimePreview'
 
 // TV configuration for stat badges
 export const badgeCVA = tv({
@@ -60,3 +66,11 @@ export const typeIcons = {
   trashed: Trash2,
   unsent: MessageSquareDashed,
 } as const
+
+export const typeTooltips: { [key: string]: () => JSX.Element | undefined } = {
+  code: CodePreview,
+  image: ImagePreview,
+  link: LinkPreview,
+  text: TextPreview,
+  time: TimePreview,
+}