mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
479c145b02
* refactor: filters and display filters to accept handlers as props * refactor: filters and display filters folder structure * refactor: change issue layout options constant structure * chore: display filters validations * chore: view less filters functionality * fix: display filters validation * refactor: wrap functions around useCallback * chore: start and target date filter options added * refactor: query params generator function * fix: query params generator function
41 lines
1.3 KiB
TypeScript
41 lines
1.3 KiB
TypeScript
import React from "react";
|
|
|
|
// ui
|
|
import { Tooltip } from "components/ui";
|
|
// types
|
|
import { TIssueLayouts } from "types";
|
|
// constants
|
|
import { ISSUE_LAYOUTS } from "constants/issue";
|
|
|
|
type Props = {
|
|
layouts: TIssueLayouts[];
|
|
onChange: (layout: TIssueLayouts) => void;
|
|
selectedLayout: TIssueLayouts;
|
|
};
|
|
|
|
export const LayoutSelection: React.FC<Props> = (props) => {
|
|
const { layouts, onChange, selectedLayout } = props;
|
|
|
|
return (
|
|
<div className="flex items-center gap-1 p-1 rounded bg-custom-background-80">
|
|
{ISSUE_LAYOUTS.filter((l) => layouts.includes(l.key)).map((layout) => (
|
|
<Tooltip key={layout.key} tooltipContent={layout.title}>
|
|
<button
|
|
type="button"
|
|
className={`w-7 h-[22px] rounded grid place-items-center transition-all hover:bg-custom-background-100 overflow-hidden group ${
|
|
selectedLayout == layout.key ? "bg-custom-background-100 shadow-custom-shadow-2xs" : ""
|
|
}`}
|
|
onClick={() => onChange(layout.key)}
|
|
>
|
|
<layout.icon
|
|
size={14}
|
|
strokeWidth={2}
|
|
className={`${selectedLayout == layout.key ? "text-custom-text-100" : "text-custom-text-200"}`}
|
|
/>
|
|
</button>
|
|
</Tooltip>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|