export function TipLayout()

in _includes/resources/tip/TipLayout.11ty.tsx [18:101]
76 lines of code
13 McCabe index (conditional complexity)

export function TipLayout(
	this: LayoutContext,
	data: TipLayoutData,
): JSX.Element {
	const { collections, content, page } = data;
	const tip = collections.resourceMap.get(page.url) as Tip;
	if (!tip) {
		throw new Error(`Tip "${page.url}" not in collection`);
	}
	// Unpack references and make it not undefined
	if (!tip.references) {
		throw new Error(`Tip ${tip.url} has no references.`);
	}
	const author = tip.references.author as Author;
	if (!author) {
		throw new Error(`Author "${tip.author}" not in collection`);
	}
	const topics = tip.references.topics
		? (tip.references.topics as Topic[])
		: [];

	// For "related resources", get an array
	const allResources = this.getResources({
		resourceTypes: ["tip", "tutorial", "tutorialstep", "link", "article"],
	});

	// Main content
	const main = (
		<Fragment>
			<div class="section">
				<div class="container">
					<div class="columns is-multiline">
						<div class="column">
							<main class="content">
								<ArticleTitleSubtitle
									title={tip.title}
									subtitle={tip.subtitle}
								/>
								<ArticleAuthor author={author} displayDate={tip.displayDate} />
								<EditArticle path={page.inputPath} />
								<ArticleTopics topics={topics} />

								{tip.animatedGif && <AnimatedGif {...tip.animatedGif} />}

								{tip.screenshot && (
									<img
										src={tip.screenshot}
										alt="Tip Screenshot"
										style="object-fit: contain; object-position: top"
									/>
								)}
								{tip.video && tip.videoVertical ? (
									<div class="columns">
										<div class="column is-one-third">
											<VideoPlayer source={tip.video} vertical={true} />
										</div>
										<div class="column is-two-thirds">
											{content && <div class="content">{content}</div>}
										</div>
									</div>
								) : (
									<Fragment>
										{tip.video && <VideoPlayer source={tip.video} />}
										{content && (
											<div class="columns mt-2">
												<div class="column is-11-desktop content">
													{content}
												</div>
											</div>
										)}
									</Fragment>
								)}
								{tip.seealso && <SeeAlso items={tip.seealso} />}
							</main>
						</div>
					</div>
				</div>
			</div>
			<RelatedResources currentResource={tip} items={allResources} />
		</Fragment>
	);

	return <BaseLayout {...data}>{main}</BaseLayout>;
}