Open in a new tab
View code
tsx
<FanOutDiagram
	aria-label="One feed fetch reaches every reader"
	pauseLabel="Pause the animation"
	source={{
		icon: <RssIcon size={14} aria-hidden="true" />,
		title: "Feed fetched once",
		detail: "GET /blog/feed.xml",
	}}
	targets={[
		{ title: "Ana's queue", detail: "+3 posts" },
		{ title: "Ben's queue", detail: "+3 posts" },
		{ title: "Chen's queue", detail: "+3 posts" },
		{ title: "Dana's queue", detail: "+3 posts" },
		{ title: "Eli's queue", detail: "+3 posts" },
	]}
	outcome="Delivered to 5 readers"
	footnote={
		<>
			<InboxIcon size={14} aria-hidden="true" />
			One request, however many follow
		</>
	}
/>