plane/apps/app/components/issues/sidebar-select/priority.tsx
Aaryan Khandelwal 2b168edd99
feat: peek overview for spreadsheet issues (#1979)
* feat: peak overview for issues

* fix: peek spelling

* chore: truncate issue property labels

* style: full screen view designed

* chore: add comment section

* chore: copy link and delete options added

* chore: update icons

---------

Co-authored-by: Aaryan Khandelwal <aaryan610@Aaryans-MacBook-Pro.local>
2023-08-25 17:41:23 +05:30

54 lines
1.6 KiB
TypeScript

import React from "react";
// ui
import { CustomSelect } from "components/ui";
// icons
import { getPriorityIcon } from "components/icons/priority-icon";
// constants
import { PRIORITIES } from "constants/project";
type Props = {
value: string | null;
onChange: (val: string) => void;
disabled?: boolean;
};
export const SidebarPrioritySelect: React.FC<Props> = ({ value, onChange, disabled = false }) => (
<CustomSelect
customButton={
<button
type="button"
className={`flex items-center gap-1.5 text-left text-sm capitalize rounded px-2.5 py-0.5 ${
value === "urgent"
? "border-red-500/20 bg-red-500/20 text-red-500"
: value === "high"
? "border-orange-500/20 bg-orange-500/20 text-orange-500"
: value === "medium"
? "border-yellow-500/20 bg-yellow-500/20 text-yellow-500"
: value === "low"
? "border-green-500/20 bg-green-500/20 text-green-500"
: "bg-custom-background-80 border-custom-border-200"
}`}
>
<span className="grid place-items-center -my-1">
{getPriorityIcon(value ?? "None", "!text-sm")}
</span>
<span>{value ?? "None"}</span>
</button>
}
value={value}
onChange={onChange}
optionsClassName="w-min"
disabled={disabled}
>
{PRIORITIES.map((option) => (
<CustomSelect.Option key={option} value={option} className="capitalize">
<>
{getPriorityIcon(option, "text-sm")}
{option ?? "None"}
</>
</CustomSelect.Option>
))}
</CustomSelect>
);