add hover card

apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments.add/route.tsx

@@ -8,7 +8,8 @@ import {
   CopyPlusIcon,
   Trash2Icon,
   PlusIcon,
-  EllipsisIcon
+  EllipsisIcon,
+  CircleQuestionMarkIcon
 } from 'lucide-react'
 import { redirect, Link, useParams, useFetcher } from 'react-router'
 import { Controller, useFieldArray, useForm } from 'react-hook-form'
@@ -22,6 +23,11 @@ import {
   CommandItem,
   CommandList
 } from '@repo/ui/components/ui/command'
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger
+} from '@repo/ui/components/ui/hover-card'
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -48,6 +54,7 @@ import {
   PopoverContent,
   PopoverTrigger
 } from '@repo/ui/components/ui/popover'
+import { Kbd } from '@repo/ui/components/ui/kbd'
 import { Label } from '@repo/ui/components/ui/label'
 import { createSearch } from '@repo/util/meili'
 import { HttpMethod, request as req } from '@repo/util/request'
@@ -65,6 +72,7 @@ import {
 import { ScheduledForInput } from './scheduled-for'
 import { CoursePicker } from './course-picker'
 import { UserPicker } from './user-picker'
+import { cn } from '@repo/ui/lib/utils'
 
 const emptyRow = {
   user: undefined,
@@ -211,7 +219,30 @@ export default function Route({
               <>
                 <Cell>Colaborador</Cell>
                 <Cell>Curso</Cell>
-                <Cell>Matricular em</Cell>
+                <Cell className="flex items-center gap-1.5">
+                  Matricular em
+                  <HoverCard openDelay={0}>
+                    <HoverCardTrigger asChild>
+                      <button type="button">
+                        <CircleQuestionMarkIcon className="size-4 text-muted-foreground" />
+                      </button>
+                    </HoverCardTrigger>
+                    <HoverCardContent
+                      align="end"
+                      className="text-sm space-y-1.5 lg:w-76"
+                    >
+                      <p>
+                        Escolha a data em que o colaborador será matriculado no
+                        curso.
+                      </p>
+
+                      <p>
+                        Você poderá acompanhar as matrículas em{' '}
+                        <Kbd>Agendamentos</Kbd>
+                      </p>
+                    </HoverCardContent>
+                  </HoverCard>
+                </Cell>
                 <Cell>{/**/}</Cell>
               </>
 
@@ -496,9 +527,20 @@ function ActionMenu() {
   )
 }
 
-export function Cell({ children }: { children?: ReactNode }) {
+export function Cell({
+  children,
+  className
+}: {
+  children?: ReactNode
+  className?: string
+}) {
   return (
-    <div className="max-lg:hidden text-foreground font-medium text-sm">
+    <div
+      className={cn(
+        'max-lg:hidden text-foreground font-medium text-sm',
+        className
+      )}
+    >
       {children}
     </div>
   )