Function WorkspacesEmpty

site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx:15–111

({
	isUsingFilter,
	templates,
	canCreateTemplate,
})

}

export const WorkspacesEmpty: FC<WorkspacesEmptyProps> = ({
	isUsingFilter,
	templates,
	canCreateTemplate,
}) => {
	const getLink = useLinks();

	const totalFeaturedTemplates = 6;
	const featuredTemplates = templates?.slice(0, totalFeaturedTemplates);
	const defaultTitle = "Create a workspace";
	const defaultMessage =
		"A workspace is your personal, customizable development environment.";
	const defaultImage = (
		<div className="max-w-[50%] h-[272px] overflow-hidden mt-12 opacity-85">
			<img src="/featured/workspaces.webp" alt="" className="max-w-full" />
		</div>
	);

	if (isUsingFilter) {
		return <EmptyState message="No results matched your search" />;
	}

	if (templates && templates.length === 0 && canCreateTemplate) {
		return (
			<EmptyState
				message={defaultTitle}
				description={`${defaultMessage} To create a workspace, you first need to create a template.`}
				cta={
					<Button asChild>
						<Link to="/templates">Go to templates</Link>
					</Button>
				}
				className="pb-0"
				image={defaultImage}
			/>
		);
	}

	if (templates && templates.length === 0 && !canCreateTemplate) {
		return (
			<EmptyState
				message={defaultTitle}
				description={`${defaultMessage} There are no templates available, but you will see them here once your admin adds them.`}
				className="pb-0"
				image={defaultImage}
			/>
		);
	}

	return (
		<EmptyState
			message={defaultTitle}
			description={`${defaultMessage} Select one template below to start.`}
			cta={
				<div>
					<div className="flex flex-wrap gap-4 mb-6 justify-center max-w-[800px]">
						{featuredTemplates?.map((t) => (
							<Link