73 lines
1.9 KiB
TypeScript
73 lines
1.9 KiB
TypeScript
"use client"
|
|
|
|
import { memo } from "react"
|
|
import { Icon } from "@iconify/react"
|
|
import type { InboxCategoryTabIcon } from "@/lib/inbox-category-tabs"
|
|
import { navFolderIconColorFromBgClass } from "@/lib/label-pill-contrast"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
const DEFAULT_ICON_CLASS = "size-4 shrink-0"
|
|
|
|
type MailInboxCategoryTabIconsProps = {
|
|
tabs: readonly InboxCategoryTabIcon[]
|
|
onTabClick?: (tabId: string) => void
|
|
className?: string
|
|
iconClassName?: string
|
|
}
|
|
|
|
export const MailInboxCategoryTabIcons = memo(function MailInboxCategoryTabIcons({
|
|
tabs,
|
|
onTabClick,
|
|
className,
|
|
iconClassName = DEFAULT_ICON_CLASS,
|
|
}: MailInboxCategoryTabIconsProps) {
|
|
if (tabs.length === 0) return null
|
|
|
|
const ariaLabel = tabs.map((t) => t.label).join(", ")
|
|
|
|
return (
|
|
<span
|
|
className={cn("inline-flex shrink-0 items-center gap-0.5", className)}
|
|
aria-label={`Catégories : ${ariaLabel}`}
|
|
>
|
|
{tabs.map((tab) => {
|
|
const color = navFolderIconColorFromBgClass(tab.badgeColor)
|
|
const icon = (
|
|
<Icon
|
|
icon={tab.icon}
|
|
className={iconClassName}
|
|
style={{ color }}
|
|
aria-hidden
|
|
/>
|
|
)
|
|
if (!onTabClick) {
|
|
return (
|
|
<span
|
|
key={tab.id}
|
|
title={tab.label}
|
|
className="inline-flex items-center justify-center p-0.5"
|
|
>
|
|
{icon}
|
|
</span>
|
|
)
|
|
}
|
|
return (
|
|
<button
|
|
key={tab.id}
|
|
type="button"
|
|
title={tab.label}
|
|
aria-label={tab.label}
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
onTabClick(tab.id)
|
|
}}
|
|
className="inline-flex cursor-pointer items-center justify-center rounded-full p-0.5 hover:bg-black/6"
|
|
>
|
|
{icon}
|
|
</button>
|
|
)
|
|
})}
|
|
</span>
|
|
)
|
|
})
|