1 files changed, 55 insertions, 0 deletions
diff --git a/smoke/docs-main/src/components/PageContent/ArticleNavigationButton.astro b/smoke/docs-main/src/components/PageContent/ArticleNavigationButton.astro
new file mode 100644
index 000000000..d080ce563
--- /dev/null
+++ b/smoke/docs-main/src/components/PageContent/ArticleNavigationButton.astro
@@ -0,0 +1,55 @@
+---
+const { item, rel } = Astro.props;
+---
+
+<a class={rel === 'next' ? 'rtl' : 'ltr'} rel="prev" href={new URL(item.link, Astro.site).pathname}>
+	{rel === 'prev' && (
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" height="32" width="32" fill="currentColor">
+			<path d="M447.1 256C447.1 273.7 433.7 288 416 288H109.3l105.4 105.4c12.5 12.5 12.5 32.75 0 45.25C208.4 444.9 200.2 448 192 448s-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L109.3 224H416C433.7 224 447.1 238.3 447.1 256z" />
+		</svg>
+	)}
+	{rel === 'next' && (
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" height="32" width="32" fill="currentColor">
+			<path d="M438.6 278.6l-160 160C272.4 444.9 264.2 448 256 448s-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L338.8 288H32C14.33 288 .0016 273.7 .0016 256S14.33 224 32 224h306.8l-105.4-105.4c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160C451.1 245.9 451.1 266.1 438.6 278.6z" />
+		</svg>
+	)}
+	<div class="copy">
+		<div class="heading">{rel === 'next' ? 'Next Page' : 'Back'}</div>
+		<div class="name">{item.text}</div>
+	</div>
+</a>
+
+<style>
+	a {
+		flex-grow: 1;
+		flex-shrink: 0;
+		border: 1px solid var(--theme-divider);
+		padding: 1rem 1.25rem;
+		display: flex;
+		box-shadow: 0px 1px 2px var(--theme-text-lighter);
+		text-decoration: none;
+		color: var(--theme-text-lighter);
+	}
+	a:hover {
+		color: var(--theme-text-accent);
+		border: 1px solid var(--theme-accent);
+	}
+	.copy {
+		flex-grow: 1;
+	}
+	a.ltr {
+		text-align: right;
+	}
+	a.rtl {
+		flex-direction: row-reverse;
+	}
+	.heading {
+		color: var(--theme-text-light);
+		margin-bottom: -0.2rem;
+	}
+	.name {
+		font-size: 1.3rem;
+		font-weight: bold;
+		color: var(--theme-text);
+	}
+</style>