import { FC } from "react"; import { useRouter } from "next/router"; import useSWR from "swr"; // services import { ProjectService } from "services/project"; // ui import { Avatar } from "components/ui"; import { CustomSearchSelect } from "@plane/ui"; // icons import { ChevronDown, UserCircle2 } from "lucide-react"; // fetch-keys import { PROJECT_MEMBERS } from "constants/fetch-keys"; type Props = { value: string | null | undefined; onChange: (val: string) => void; }; const projectService = new ProjectService(); export const SidebarLeadSelect: FC = (props) => { const { value, onChange } = props; // router const router = useRouter(); const { workspaceSlug, projectId } = router.query; // fetch project members const { data: members } = useSWR( workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null, workspaceSlug && projectId ? () => projectService.projectMembers(workspaceSlug as string, projectId as string) : null ); const options = members?.map((member) => ({ value: member.member.id, query: member.member.display_name, content: (
{member.member.display_name}
), })); const selectedOption = members?.find((m) => m.member.id === value)?.member; return (
Lead
{selectedOption?.display_name}
) : (
No lead
) } options={options} maxHeight="md" onChange={onChange} />
); };