add hover card

apps/admin.saladeaula.digital/app/routes/_.$orgid.checkout/assigned.tsx

@@ -1,5 +1,5 @@
 import { Fragment } from 'react'
-import { Trash2Icon, PlusIcon } from 'lucide-react'
+import { Trash2Icon, PlusIcon, CircleQuestionMarkIcon } from 'lucide-react'
 import { useForm, useFieldArray, Controller, useWatch } from 'react-hook-form'
 import { useParams } from 'react-router'
 import { ErrorMessage } from '@hookform/error-message'
@@ -9,6 +9,11 @@ import { Form } from '@repo/ui/components/ui/form'
 import { InputGroup, InputGroupInput } from '@repo/ui/components/ui/input-group'
 import { Button } from '@repo/ui/components/ui/button'
 import { Separator } from '@repo/ui/components/ui/separator'
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger
+} from '@repo/ui/components/ui/hover-card'
 
 import {
   MAX_ITEMS,
@@ -19,6 +24,7 @@ import { ScheduledForInput } from '../_.$orgid.enrollments.add/scheduled-for'
 import { Cell } from '../_.$orgid.enrollments.add/route'
 import { CoursePicker } from '../_.$orgid.enrollments.add/course-picker'
 import { UserPicker } from '../_.$orgid.enrollments.add/user-picker'
+import { Kbd } from '@repo/ui/components/ui/kbd'
 
 const emptyRow = {
   user: undefined,
@@ -65,7 +71,30 @@ export function Assigned({ courses }: AssignedProps) {
           <>
             <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>Valor unit.</Cell>
             <Cell>{/**/}</Cell>
           </>