89 lines
2.1 KiB
TypeScript
89 lines
2.1 KiB
TypeScript
"use client"
|
|
|
|
import { LayoutGrid } from "lucide-react"
|
|
import type { AutomationDomain } from "@/lib/mail-automation/domains"
|
|
import { AUTOMATION_DOMAIN_LABELS } from "@/lib/mail-automation/domains"
|
|
import { suitePublicAsset } from "@/lib/suite/suite-public-asset"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
export const AUTOMATION_DOMAIN_MARK_SRC: Record<AutomationDomain, string> = {
|
|
mail: suitePublicAsset("/brand/ultimail-header-icon.png"),
|
|
drive: suitePublicAsset("/ultidrive-mark.svg"),
|
|
contacts: suitePublicAsset("/contacts-mark.svg"),
|
|
}
|
|
|
|
export function AutomationDomainMark({
|
|
domain,
|
|
className,
|
|
alt,
|
|
}: {
|
|
domain: AutomationDomain
|
|
className?: string
|
|
alt?: string
|
|
}) {
|
|
return (
|
|
<img
|
|
src={AUTOMATION_DOMAIN_MARK_SRC[domain]}
|
|
alt={alt ?? AUTOMATION_DOMAIN_LABELS[domain]}
|
|
className={cn("shrink-0 object-contain", className)}
|
|
draggable={false}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export function AutomationDomainMarks({
|
|
domains,
|
|
className,
|
|
markClassName = "size-5",
|
|
}: {
|
|
domains: AutomationDomain[]
|
|
className?: string
|
|
markClassName?: string
|
|
}) {
|
|
if (domains.length === 0) return null
|
|
return (
|
|
<div className={cn("flex shrink-0 items-center gap-1", className)}>
|
|
{domains.map((domain) => (
|
|
<AutomationDomainMark
|
|
key={domain}
|
|
domain={domain}
|
|
className={markClassName}
|
|
alt=""
|
|
/>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function AutomationDomainFilterTab({
|
|
active,
|
|
onClick,
|
|
domain,
|
|
label,
|
|
}: {
|
|
active: boolean
|
|
onClick: () => void
|
|
domain: AutomationDomain | "all"
|
|
label: string
|
|
}) {
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={onClick}
|
|
className={cn(
|
|
"inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-[11px] transition-colors",
|
|
active
|
|
? "border-primary bg-primary/10 text-primary"
|
|
: "border-border bg-background text-muted-foreground hover:bg-muted"
|
|
)}
|
|
>
|
|
{domain === "all" ? (
|
|
<LayoutGrid className="size-3.5 shrink-0 opacity-80" aria-hidden />
|
|
) : (
|
|
<AutomationDomainMark domain={domain} className="size-3.5" alt="" />
|
|
)}
|
|
<span>{label}</span>
|
|
</button>
|
|
)
|
|
}
|