forked from github/plane
48 lines
1.8 KiB
TypeScript
48 lines
1.8 KiB
TypeScript
import { useState } from "react";
|
|
import { Search } from "lucide-react";
|
|
// types
|
|
import { WidgetProps } from "components/dashboard/widgets";
|
|
// components
|
|
import { DefaultCollaboratorsList } from "./default-list";
|
|
import { SearchedCollaboratorsList } from "./search-list";
|
|
|
|
const PER_PAGE = 8;
|
|
|
|
export const RecentCollaboratorsWidget: React.FC<WidgetProps> = (props) => {
|
|
const { dashboardId, workspaceSlug } = props;
|
|
// states
|
|
const [searchQuery, setSearchQuery] = useState("");
|
|
|
|
return (
|
|
<div className="w-full rounded-xl border-[0.5px] border-custom-border-200 bg-custom-background-100 duration-300 hover:shadow-custom-shadow-4xl">
|
|
<div className="flex items-start justify-between px-7 pt-6">
|
|
<div>
|
|
<h4 className="text-lg font-semibold text-custom-text-300">Collaborators</h4>
|
|
<p className="mt-2 text-xs font-medium text-custom-text-300">
|
|
View and find all members you collaborate with across projects
|
|
</p>
|
|
</div>
|
|
<div className="flex min-w-72 items-center justify-start gap-2 rounded-md border border-custom-border-200 px-2.5 py-1.5 placeholder:text-custom-text-400">
|
|
<Search className="h-3.5 w-3.5 text-custom-text-400" />
|
|
<input
|
|
className="w-full border-none bg-transparent text-sm focus:outline-none"
|
|
placeholder="Search for collaborators"
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
{searchQuery.trim() !== "" ? (
|
|
<SearchedCollaboratorsList
|
|
dashboardId={dashboardId}
|
|
perPage={PER_PAGE}
|
|
searchQuery={searchQuery}
|
|
workspaceSlug={workspaceSlug}
|
|
/>
|
|
) : (
|
|
<DefaultCollaboratorsList dashboardId={dashboardId} perPage={PER_PAGE} workspaceSlug={workspaceSlug} />
|
|
)}
|
|
</div>
|
|
);
|
|
};
|