90 lines
3.4 KiB
TypeScript
90 lines
3.4 KiB
TypeScript
import { cn } from "~/lib/utils";
|
|
|
|
/** Shared Tailwind class strings for admin management pages. */
|
|
|
|
export const adminPageClass = "h-full overflow-auto bg-[#f3f6f9] p-6";
|
|
|
|
export const adminToolbarClass =
|
|
"mb-3.5 flex items-center justify-between rounded-lg border border-line bg-white px-3.5 py-3";
|
|
|
|
export const adminToolbarSearchClass =
|
|
"flex w-[280px] items-center gap-2 rounded-md border border-[#d9e2eb] bg-[#f8fafb] px-3 py-2 [&_svg]:text-[#8a99a8]";
|
|
|
|
export const adminToolbarInputClass =
|
|
"w-full border-none bg-transparent text-xs text-[#20364c] outline-none placeholder:text-[#a0b0bf]";
|
|
|
|
export const adminReadonlyClass =
|
|
"mb-3 rounded-md border border-[#f1d79c] bg-[#fff8e8] px-3.5 py-2.5 text-[11px] text-[#8a6416]";
|
|
|
|
export const adminEmptyClass = "p-[25px] text-center text-ink-subtle";
|
|
|
|
export const employeeNameClass =
|
|
"flex items-center gap-2.5 [&_small]:mt-[3px] [&_small]:text-[#93a0ae] [&_strong]:text-[#23384e] [&>span]:flex [&>span]:min-w-0 [&>span]:flex-col";
|
|
|
|
export const employeeAvatarClass =
|
|
"grid size-8 place-items-center rounded-full bg-gradient-to-br from-[#3b92ed] to-[#1869c9] text-sm font-bold text-white";
|
|
|
|
export const employeeActionsClass = "flex gap-1.5";
|
|
|
|
export const roleActionsClass = "flex gap-1.5";
|
|
|
|
export const rowButtonClass =
|
|
"h-6 gap-1 rounded-[4px] border-[#d9e3ec] bg-white px-[9px] text-[11px] text-[#4c6c88] hover:bg-[#f7fafc] disabled:cursor-not-allowed disabled:opacity-[0.45]";
|
|
|
|
export const rowDangerButtonClass =
|
|
"h-6 gap-1 rounded-[4px] border-[#d9e3ec] bg-white px-[9px] text-[11px] text-[#c14a4a] hover:bg-[#fdf2f2] disabled:cursor-not-allowed disabled:opacity-[0.45]";
|
|
|
|
export const roleCodeClass = "font-mono text-[11px] text-[#60758b]";
|
|
|
|
export const roleNameClass = "font-semibold text-[#23384e]";
|
|
|
|
export const permissionCountClass = "text-[#5d7488]";
|
|
|
|
export const formHintClass =
|
|
"mt-1.5 block text-[10px] font-normal leading-normal text-[#98a5b3]";
|
|
|
|
export const roleErrorClass = "mt-1.5 text-[10px] font-medium text-[#c0392b]";
|
|
|
|
export const permissionGroupsClass = "flex flex-col gap-3.5";
|
|
|
|
export const permissionGroupClass =
|
|
"rounded-[7px] border border-[#e3eaf1] bg-[#fafbfc] px-3 py-2.5";
|
|
|
|
export const permissionGroupTitleClass =
|
|
"mb-2 text-[10px] font-bold tracking-wide text-[#2e86de]";
|
|
|
|
export const permissionItemClass =
|
|
"flex cursor-pointer items-start gap-[9px] rounded-md px-2 py-[7px] hover:bg-[#f0f6fc] [&_small]:mt-0.5 [&_small]:text-[10px] [&_small]:text-[#8a99a8] [&_span]:flex [&_span]:min-w-0 [&_span]:flex-col [&_strong]:text-[11px] [&_strong]:text-[#33475c]";
|
|
|
|
export const permissionItemLockedClass =
|
|
"cursor-not-allowed bg-[#f1f3f5] opacity-80 hover:bg-[#f1f3f5]";
|
|
|
|
export function rolePillClass(roleCode: string): string {
|
|
return cn(
|
|
"w-max rounded-xl px-2 py-1",
|
|
roleCode === "admin"
|
|
? "bg-[#fff2d6] text-[#87580f]"
|
|
: "bg-[#eaf4ff] text-[#1d6ab3]",
|
|
);
|
|
}
|
|
|
|
export function statusPillClass(status: string): string {
|
|
return cn(
|
|
"w-max rounded-xl px-2 py-1",
|
|
status === "disabled" || status === "locked"
|
|
? "bg-[#ffeded] text-[#a64b4b]"
|
|
: "bg-[#e8f8f1] text-[#138657]",
|
|
);
|
|
}
|
|
|
|
export function builtinBadgeClass(isBuiltin: boolean): string {
|
|
return cn(
|
|
"w-max rounded-xl px-2 py-1 text-[10px]",
|
|
isBuiltin ? "bg-[#fff2d6] text-[#87580f]" : "bg-[#eaf4ff] text-[#1d6ab3]",
|
|
);
|
|
}
|
|
|
|
export function permissionItemClassName(locked: boolean): string {
|
|
return cn(permissionItemClass, locked && permissionItemLockedClass);
|
|
}
|