mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
5a32d10f96
* chore: replaced marimekko graph with a bar graph * chore: add bar onClick handler * chore: custom date filter for widgets * style: priority graph * chore: workspace profile activity pagination * chore: profile activity pagination * chore: user profile activity pagination * chore: workspace user activity csv download * chore: download activity button added * chore: workspace user pagination * chore: collabrator pagination * chore: field change * chore: recent collaborators pagination * chore: changed the collabrators * chore: collabrators list changed * fix: distinct users * chore: search filter in collaborators * fix: import error * chore: update priority graph x-axis values * chore: admin and member request validation * chore: update csv download request method * chore: search implementation for the collaborators widget * refactor: priority distribution card * chore: add enum for duration filters * chore: update inbox types * chore: add todos for refactoring --------- Co-authored-by: NarayanBavisetti <narayan3119@gmail.com>
62 lines
2.0 KiB
TypeScript
62 lines
2.0 KiB
TypeScript
import { observer } from "mobx-react";
|
|
import { Tab } from "@headlessui/react";
|
|
// helpers
|
|
import { cn } from "helpers/common.helper";
|
|
// types
|
|
import { EDurationFilters, TIssuesListTypes } from "@plane/types";
|
|
// constants
|
|
import { FILTERED_ISSUES_TABS_LIST, UNFILTERED_ISSUES_TABS_LIST } from "constants/dashboard";
|
|
|
|
type Props = {
|
|
durationFilter: EDurationFilters;
|
|
selectedTab: TIssuesListTypes;
|
|
};
|
|
|
|
export const TabsList: React.FC<Props> = observer((props) => {
|
|
const { durationFilter, selectedTab } = props;
|
|
|
|
const tabsList = durationFilter === "none" ? UNFILTERED_ISSUES_TABS_LIST : FILTERED_ISSUES_TABS_LIST;
|
|
const selectedTabIndex = tabsList.findIndex((tab) => tab.key === selectedTab);
|
|
|
|
return (
|
|
<Tab.List
|
|
as="div"
|
|
className="relative border-[0.5px] border-custom-border-200 rounded bg-custom-background-80 p-[1px] grid"
|
|
style={{
|
|
gridTemplateColumns: `repeat(${tabsList.length}, 1fr)`,
|
|
}}
|
|
>
|
|
<div
|
|
className={cn(
|
|
"absolute top-1/2 left-[1px] bg-custom-background-100 rounded-[3px] transition-all duration-500 ease-in-out",
|
|
{
|
|
// right shadow
|
|
"shadow-[2px_0_8px_rgba(167,169,174,0.15)]": selectedTabIndex !== tabsList.length - 1,
|
|
// left shadow
|
|
"shadow-[-2px_0_8px_rgba(167,169,174,0.15)]": selectedTabIndex !== 0,
|
|
}
|
|
)}
|
|
style={{
|
|
height: "calc(100% - 2px)",
|
|
width: `calc(${100 / tabsList.length}% - 1px)`,
|
|
transform: `translate(${selectedTabIndex * 100}%, -50%)`,
|
|
}}
|
|
/>
|
|
{tabsList.map((tab) => (
|
|
<Tab
|
|
key={tab.key}
|
|
className={cn(
|
|
"relative z-[1] font-semibold text-xs rounded-[3px] py-1.5 text-custom-text-400 focus:outline-none transition duration-500",
|
|
{
|
|
"text-custom-text-100": selectedTab === tab.key,
|
|
"hover:text-custom-text-300": selectedTab !== tab.key,
|
|
}
|
|
)}
|
|
>
|
|
<span className="scale-110">{tab.label}</span>
|
|
</Tab>
|
|
))}
|
|
</Tab.List>
|
|
);
|
|
});
|