forked from github/plane
3c2f5d12ed
* chore: add next theme and initial setup * chore: add dark mode colors to layouts * chore: user general setting page theming * chore: dashboard theming * chore: project page theming * chore: workspace setting page theming * chore: my issue page theming * chore: cmdk theming * chore: change hardcode bg and text color to theme * chore: change color name according to the design * style: fix card in the dashboard * style: fix merge conflict design issues * style: add light high contrast and dark high contrast * style: fix cmd k menu color and selection * feat: change theme from cmdk menu * chore: add multiple theme field to custom theme * chore: removed custom theming * fix: build error --------- Co-authored-by: Saheb Giri <iamsahebgiri@gmail.com>
57 lines
1.9 KiB
TypeScript
57 lines
1.9 KiB
TypeScript
import React from "react";
|
|
|
|
// ui
|
|
import { CustomMenu } from "components/ui";
|
|
// types
|
|
import { IIssueLabels } from "types";
|
|
//icons
|
|
import { RectangleGroupIcon, LinkIcon, PencilIcon, TrashIcon } from "@heroicons/react/24/outline";
|
|
|
|
type Props = {
|
|
label: IIssueLabels;
|
|
addLabelToGroup: (parentLabel: IIssueLabels) => void;
|
|
editLabel: (label: IIssueLabels) => void;
|
|
handleLabelDelete: (labelId: string) => void;
|
|
};
|
|
|
|
export const SingleLabel: React.FC<Props> = ({
|
|
label,
|
|
addLabelToGroup,
|
|
editLabel,
|
|
handleLabelDelete,
|
|
}) => (
|
|
<div className="gap-2 space-y-3 divide-y divide-brand-base rounded-[10px] border border-brand-base bg-brand-surface-1 p-5">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<span
|
|
className="h-3.5 w-3.5 flex-shrink-0 rounded-full"
|
|
style={{
|
|
backgroundColor: label.color && label.color !== "" ? label.color : "#000",
|
|
}}
|
|
/>
|
|
<h6 className="font-medium text-brand-base">{label.name}</h6>
|
|
</div>
|
|
<CustomMenu ellipsis>
|
|
<CustomMenu.MenuItem onClick={() => addLabelToGroup(label)}>
|
|
<span className="flex items-center justify-start gap-2">
|
|
<RectangleGroupIcon className="h-4 w-4" />
|
|
<span>Convert to group</span>
|
|
</span>
|
|
</CustomMenu.MenuItem>
|
|
<CustomMenu.MenuItem onClick={() => editLabel(label)}>
|
|
<span className="flex items-center justify-start gap-2">
|
|
<PencilIcon className="h-4 w-4" />
|
|
<span>Edit label</span>
|
|
</span>
|
|
</CustomMenu.MenuItem>
|
|
<CustomMenu.MenuItem onClick={() => handleLabelDelete(label.id)}>
|
|
<span className="flex items-center justify-start gap-2">
|
|
<TrashIcon className="h-4 w-4" />
|
|
<span>Delete label</span>
|
|
</span>
|
|
</CustomMenu.MenuItem>
|
|
</CustomMenu>
|
|
</div>
|
|
</div>
|
|
);
|