fix: make retention badge clickable for mobile devices (#486)

This commit is contained in:
Nico 2026-02-09 18:15:34 +01:00 committed by GitHub
parent 81d3a76518
commit 124b8f4081
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -1,3 +1,4 @@
import { useState } from "react";
import { cn } from "~/client/lib/utils";
import { HoverCard, HoverCardContent, HoverCardTrigger } from "./ui/hover-card";
@ -38,6 +39,8 @@ function Badge({ category }: { category: string }) {
}
export function RetentionCategoryBadges({ categories, className }: RetentionCategoryBadgesProps) {
const [open, setOpen] = useState(false);
if (categories.length === 0) {
return null;
}
@ -63,12 +66,13 @@ export function RetentionCategoryBadges({ categories, className }: RetentionCate
}
return (
<HoverCard>
<HoverCard open={open} onOpenChange={setOpen}>
<HoverCardTrigger asChild>
<button
type="button"
className={cn("cursor-pointer bg-transparent p-0 border-0", className)}
aria-label={`View ${categories.length} retention categories`}
onClick={() => setOpen(true)}
>
<Badge category={`${categories.length} tags`} />
</button>