78 lines
2.1 KiB
TypeScript
78 lines
2.1 KiB
TypeScript
interface Props {
|
|
kind: "server-default" | "yours";
|
|
title: string;
|
|
sectionType: string;
|
|
hidden: boolean;
|
|
onHide: () => void;
|
|
onShow: () => void;
|
|
onEdit: () => void;
|
|
onDelete: () => void;
|
|
}
|
|
|
|
export default function ProfileSectionRow({
|
|
kind,
|
|
title,
|
|
sectionType,
|
|
hidden,
|
|
onHide,
|
|
onShow,
|
|
onEdit,
|
|
onDelete,
|
|
}: Props) {
|
|
return (
|
|
<div
|
|
className={`grid grid-cols-[24px_1fr_120px_80px_80px] items-center gap-3 border-b border-white/5 px-2 py-2 text-sm ${hidden ? "opacity-55" : ""}`}
|
|
>
|
|
<span className="cursor-grab text-white/30">⋮⋮</span>
|
|
<div>
|
|
<div className="font-semibold">{title}</div>
|
|
<div className="font-mono text-[10px] opacity-55">· {sectionType}</div>
|
|
</div>
|
|
<span
|
|
className={`rounded px-1.5 py-0.5 text-[10px] ${kind === "yours" ? "bg-emerald-500/15 text-emerald-200" : "bg-indigo-500/15 text-indigo-200"}`}
|
|
>
|
|
{kind === "yours" ? "Yours" : "Server default"}
|
|
</span>
|
|
<span className="text-[10px] opacity-65">{hidden ? "hidden" : "on"}</span>
|
|
<div className="flex justify-end gap-1">
|
|
{kind === "server-default" ? (
|
|
hidden ? (
|
|
<button
|
|
type="button"
|
|
onClick={onShow}
|
|
className="rounded border border-white/15 px-2 py-0.5 text-[11px]"
|
|
>
|
|
Show
|
|
</button>
|
|
) : (
|
|
<button
|
|
type="button"
|
|
onClick={onHide}
|
|
className="rounded border border-white/15 px-2 py-0.5 text-[11px]"
|
|
>
|
|
Hide
|
|
</button>
|
|
)
|
|
) : (
|
|
<>
|
|
<button
|
|
type="button"
|
|
onClick={onEdit}
|
|
className="rounded border border-white/15 px-2 py-0.5 text-[11px]"
|
|
>
|
|
Edit
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={onDelete}
|
|
className="rounded border border-white/15 px-2 py-0.5 text-[11px]"
|
|
>
|
|
Delete
|
|
</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|