plane/web/components/cycles/cycles-list-mobile-header.tsx

53 lines
1.7 KiB
TypeScript
Raw Normal View History

import { observer } from "mobx-react";
// ui
2024-03-19 14:38:35 +00:00
import { List } from "lucide-react";
import { CustomMenu } from "@plane/ui";
// icon
// constants
2024-03-19 14:38:35 +00:00
import { CYCLE_VIEW_LAYOUTS } from "@/constants/cycle";
// hooks
2024-03-19 14:38:35 +00:00
import { useCycleFilter, useProject } from "@/hooks/store";
const CyclesListMobileHeader = observer(() => {
const { currentProjectDetails } = useProject();
// hooks
const { updateDisplayFilters } = useCycleFilter();
return (
<div className="flex justify-center sm:hidden">
<CustomMenu
maxHeight={"md"}
className="flex flex-grow justify-center text-custom-text-200 text-sm py-2 border-b border-custom-border-200 bg-custom-sidebar-background-100"
// placement="bottom-start"
customButton={
<span className="flex items-center gap-2">
<List className="h-4 w-4" />
<span className="flex flex-grow justify-center text-custom-text-200 text-sm">Layout</span>
</span>
}
customButtonClassName="flex flex-grow justify-center items-center text-custom-text-200 text-sm"
closeOnSelect
>
{CYCLE_VIEW_LAYOUTS.map((layout) => {
if (layout.key == "gantt") return;
return (
<CustomMenu.MenuItem
key={layout.key}
onClick={() => {
updateDisplayFilters(currentProjectDetails!.id, {
layout: layout.key,
});
}}
className="flex items-center gap-2"
>
<layout.icon className="w-3 h-3" />
<div className="text-custom-text-300">{layout.title}</div>
</CustomMenu.MenuItem>
);
})}
</CustomMenu>
</div>
);
});
export default CyclesListMobileHeader;