Upgrade to Tailwind CSS v4 (#1173)

This commit is contained in:
Brandon McConnell 2025-09-09 15:44:07 -04:00 committed by GitHub
parent 4ce76987a1
commit 848205f5cb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
76 changed files with 1098 additions and 1050 deletions

View file

@ -50,7 +50,10 @@ const getStatusBadge = (status: ToolUIPart['state']) => {
} as const;
return (
<Badge className="rounded-full text-xs flex items-center gap-1" variant="secondary">
<Badge
className="flex items-center gap-1 rounded-full text-xs"
variant="secondary"
>
{icons[status]}
<span>{labels[status]}</span>
</Badge>
@ -65,16 +68,16 @@ export const ToolHeader = ({
}: ToolHeaderProps) => (
<CollapsibleTrigger
className={cn(
'flex w-full items-center justify-between gap-2 p-3 min-w-0',
'flex w-full min-w-0 items-center justify-between gap-2 p-3',
className,
)}
{...props}
>
<div className="flex items-center gap-2 min-w-0 flex-1">
<WrenchIcon className="size-4 text-muted-foreground shrink-0" />
<span className="font-medium text-sm truncate">{type}</span>
<div className="flex min-w-0 flex-1 items-center gap-2">
<WrenchIcon className="size-4 shrink-0 text-muted-foreground" />
<span className="truncate font-medium text-sm">{type}</span>
</div>
<div className="flex items-center gap-2 shrink-0">
<div className="flex shrink-0 items-center gap-2">
{getStatusBadge(state)}
<ChevronDownIcon className="size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" />
</div>
@ -86,7 +89,7 @@ export type ToolContentProps = ComponentProps<typeof CollapsibleContent>;
export const ToolContent = ({ className, ...props }: ToolContentProps) => (
<CollapsibleContent
className={cn(
'data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in',
'data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground outline-hidden data-[state=closed]:animate-out data-[state=open]:animate-in',
className,
)}
{...props}