ultisuite-client/components/gmail/settings/automation/automation-domain-mark.tsx
R3D347HR4Y ad1370ea7e
Some checks are pending
E2E / Playwright e2e (push) Waiting to run
feat: enhance configuration and add new demo layouts
- Introduced turbopack alias for canvas in next.config.mjs.
- Updated package.json scripts for development and branding tasks.
- Added new dependencies for Tiptap extensions.
- Implemented new demo layouts for agenda, contacts, drive, and mail applications.
- Enhanced globals.css for improved theming and splash screen animations.
- Added OAuth callback handling for drive mounts.
- Updated layout components to integrate new demo shells and improve structure.
2026-06-12 19:10:24 +02:00

97 lines
2.4 KiB
TypeScript

"use client"
import { LayoutGrid } from "lucide-react"
import { AgendaMark } from "@/components/suite/agenda-mark"
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("/ultimail-mark.svg"),
drive: suitePublicAsset("/ultidrive-mark.svg"),
contacts: suitePublicAsset("/contacts-mark.svg"),
agenda: suitePublicAsset("/agenda-mark.svg"),
}
export function AutomationDomainMark({
domain,
className,
alt,
}: {
domain: AutomationDomain
className?: string
alt?: string
}) {
const label = alt ?? AUTOMATION_DOMAIN_LABELS[domain]
if (domain === "agenda") {
return <AgendaMark className={cn("shrink-0 object-contain", className)} alt={label} />
}
return (
<img
src={AUTOMATION_DOMAIN_MARK_SRC[domain]}
alt={label}
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-2 rounded-md border px-2.5 py-1.5 text-xs 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-4 shrink-0 opacity-80" aria-hidden />
) : (
<AutomationDomainMark domain={domain} className="size-4" alt="" />
)}
<span>{label}</span>
</button>
)
}