Function WorkspaceResultsRow

site/src/pages/WorkspacesPage/WorkspacesButton.tsx:118–166

({ template })

}

const WorkspaceResultsRow: FC<WorkspaceResultsRowProps> = ({ template }) => {
	const getLink = useLinks();
	const templateLink = getLink(
		linkToTemplate(template.organization_name, template.name),
	);

	return (
		<PopoverLink
			to={`${templateLink}/workspace`}
			className="flex gap-3 items-center"
		>
			<Avatar
				variant="icon"
				src={template.icon}
				fallback={template.display_name || template.name}
			/>

			<div
				css={(theme) => ({
					color: theme.palette.text.primary,
					display: "flex",
					flexDirection: "column",
					lineHeight: "140%",
					fontSize: 14,
					overflow: "hidden",
				})}
			>
				<span className="whitespace-nowrap text-ellipsis">
					{template.display_name || template.name || "[Unnamed]"}
				</span>
				<span
					css={(theme) => ({
						fontSize: 13,
						color: theme.palette.text.secondary,
					})}
				>
					{/*
					 * There are some templates that have -1 as their user count –
					 * basically functioning like a null value in JS. Can safely just
					 * treat them as if they were 0.
					 */}
					{template.active_user_count <= 0 ? "No" : template.active_user_count}{" "}
					developer
					{template.active_user_count === 1 ? "" : "s"}
				</span>
			</div>
		</PopoverLink>
	);
};

const PopoverLink: FC<RouterLinkProps> = ({ children, ...linkProps }) => {
	return (