From 609861d8f81eeae2ea72e37901a4f18d724c10dd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9rgio=20Rafael=20Siqueira?= Date: Tue, 23 Dec 2025 14:47:55 -0300 Subject: [PATCH] add hover card --- .../app/routes/_.$orgid.checkout/assigned.tsx | 33 +++++++++++- .../app/routes/_.$orgid.checkout/route.tsx | 2 +- .../routes/_.$orgid.enrollments.add/route.tsx | 50 +++++++++++++++++-- package-lock.json | 32 ++++++++++++ packages/ui/package.json | 1 + packages/ui/src/components/ui/hover-card.tsx | 44 ++++++++++++++++ 6 files changed, 155 insertions(+), 7 deletions(-) create mode 100644 packages/ui/src/components/ui/hover-card.tsx diff --git a/apps/admin.saladeaula.digital/app/routes/_.$orgid.checkout/assigned.tsx b/apps/admin.saladeaula.digital/app/routes/_.$orgid.checkout/assigned.tsx index 35fea86..3f98116 100644 --- a/apps/admin.saladeaula.digital/app/routes/_.$orgid.checkout/assigned.tsx +++ b/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) { <> Colaborador Curso - Matricular em + + Matricular em + + + + + +

+ Escolha a data em que o colaborador será matriculado no + curso. +

+ +

+ Você poderá acompanhar as matrículas em{' '} + Agendamentos +

+ + + Valor unit. {/**/} diff --git a/apps/admin.saladeaula.digital/app/routes/_.$orgid.checkout/route.tsx b/apps/admin.saladeaula.digital/app/routes/_.$orgid.checkout/route.tsx index e85c580..51a53cc 100644 --- a/apps/admin.saladeaula.digital/app/routes/_.$orgid.checkout/route.tsx +++ b/apps/admin.saladeaula.digital/app/routes/_.$orgid.checkout/route.tsx @@ -19,7 +19,7 @@ import { Bulk } from './bulk' import type { Course } from '../_.$orgid.enrollments.add/data' export function meta({}: Route.MetaArgs) { - return [{ title: '' }] + return [{ title: 'Comprar matrículas' }] } export async function loader({ params, context, request }: Route.LoaderArgs) { diff --git a/apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments.add/route.tsx b/apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments.add/route.tsx index 74ee4f3..50aed52 100644 --- a/apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments.add/route.tsx +++ b/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({ <> Colaborador Curso - Matricular em + + Matricular em + + + + + +

+ Escolha a data em que o colaborador será matriculado no + curso. +

+ +

+ Você poderá acompanhar as matrículas em{' '} + Agendamentos +

+ + + {/**/} @@ -496,9 +527,20 @@ function ActionMenu() { ) } -export function Cell({ children }: { children?: ReactNode }) { +export function Cell({ + children, + className +}: { + children?: ReactNode + className?: string +}) { return ( -
+
{children}
) diff --git a/package-lock.json b/package-lock.json index a4cd9ac..ca1cfcc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2888,6 +2888,37 @@ } } }, + "node_modules/@radix-ui/react-hover-card": { + "version": "1.1.15", + "resolved": "https://registry.npmjs.org/@radix-ui/react-hover-card/-/react-hover-card-1.1.15.tgz", + "integrity": "sha512-qgTkjNT1CfKMoP0rcasmlH2r1DAiYicWsDsufxl940sT2wHNEWWv6FMWIQXWhVdmC1d/HYfbhQx60KYyAtKxjg==", + "license": "MIT", + "dependencies": { + "@radix-ui/primitive": "1.1.3", + "@radix-ui/react-compose-refs": "1.1.2", + "@radix-ui/react-context": "1.1.2", + "@radix-ui/react-dismissable-layer": "1.1.11", + "@radix-ui/react-popper": "1.2.8", + "@radix-ui/react-portal": "1.1.9", + "@radix-ui/react-presence": "1.1.5", + "@radix-ui/react-primitive": "2.1.3", + "@radix-ui/react-use-controllable-state": "1.2.2" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-id": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz", @@ -7486,6 +7517,7 @@ "@radix-ui/react-checkbox": "^1.3.3", "@radix-ui/react-dialog": "^1.1.15", "@radix-ui/react-dropdown-menu": "^2.1.16", + "@radix-ui/react-hover-card": "^1.1.15", "@radix-ui/react-label": "^2.1.8", "@radix-ui/react-navigation-menu": "^1.2.14", "@radix-ui/react-popover": "^1.1.15", diff --git a/packages/ui/package.json b/packages/ui/package.json index 4de4484..05ecab5 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -23,6 +23,7 @@ "@radix-ui/react-checkbox": "^1.3.3", "@radix-ui/react-dialog": "^1.1.15", "@radix-ui/react-dropdown-menu": "^2.1.16", + "@radix-ui/react-hover-card": "^1.1.15", "@radix-ui/react-label": "^2.1.8", "@radix-ui/react-navigation-menu": "^1.2.14", "@radix-ui/react-popover": "^1.1.15", diff --git a/packages/ui/src/components/ui/hover-card.tsx b/packages/ui/src/components/ui/hover-card.tsx new file mode 100644 index 0000000..e754186 --- /dev/null +++ b/packages/ui/src/components/ui/hover-card.tsx @@ -0,0 +1,44 @@ +"use client" + +import * as React from "react" +import * as HoverCardPrimitive from "@radix-ui/react-hover-card" + +import { cn } from "@/lib/utils" + +function HoverCard({ + ...props +}: React.ComponentProps) { + return +} + +function HoverCardTrigger({ + ...props +}: React.ComponentProps) { + return ( + + ) +} + +function HoverCardContent({ + className, + align = "center", + sideOffset = 4, + ...props +}: React.ComponentProps) { + return ( + + + + ) +} + +export { HoverCard, HoverCardTrigger, HoverCardContent }