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> ); };