style: align active session badge with timer

This commit is contained in:
esdrasrenan 2025-10-05 00:15:30 -03:00
parent c5a537a833
commit d56bb3e7b3

View file

@ -3,7 +3,7 @@
import { useEffect, useMemo, useState } from "react" import { useEffect, useMemo, useState } from "react"
import { format, formatDistanceToNow } from "date-fns" import { format, formatDistanceToNow } from "date-fns"
import { ptBR } from "date-fns/locale" import { ptBR } from "date-fns/locale"
import { IconPlayerPause, IconPlayerPlay } from "@tabler/icons-react" import { IconClock, IconPlayerPause, IconPlayerPlay } from "@tabler/icons-react"
import { useMutation, useQuery } from "convex/react" import { useMutation, useQuery } from "convex/react"
import { toast } from "sonner" import { toast } from "sonner"
// eslint-disable-next-line @typescript-eslint/ban-ts-comment // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@ -199,6 +199,11 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
return ( return (
<div className={cardClass}> <div className={cardClass}>
<div className="absolute right-6 top-6 flex items-center gap-3"> <div className="absolute right-6 top-6 flex items-center gap-3">
{isPlaying ? (
<Badge className="inline-flex h-9 items-center gap-2 rounded-full border border-black bg-black px-3 text-sm font-semibold text-white">
<IconClock className="size-4" /> Sessão atual: {formattedCurrentSession}
</Badge>
) : null}
{workSummary ? ( {workSummary ? (
<Badge className="inline-flex h-9 items-center gap-2 rounded-full border border-slate-200 bg-white px-3 text-sm font-semibold text-neutral-700"> <Badge className="inline-flex h-9 items-center gap-2 rounded-full border border-slate-200 bg-white px-3 text-sm font-semibold text-neutral-700">
Tempo total: {formattedTotalWorked} Tempo total: {formattedTotalWorked}
@ -256,15 +261,6 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
)} )}
</Button> </Button>
</div> </div>
{workSummary ? (
<div className="flex flex-wrap items-center gap-2">
{isPlaying ? (
<Badge className="inline-flex items-center gap-1 rounded-full border border-black bg-black px-3 py-1 text-xs font-semibold text-white">
Sessão atual: {formattedCurrentSession}
</Badge>
) : null}
</div>
) : null}
{editing ? ( {editing ? (
<div className="space-y-2"> <div className="space-y-2">
<Input <Input