Cleanup

apps/web/app/(marketing)/docs/components/documentation-page-link.tsx

@@ -0,0 +1,47 @@
+import Link from 'next/link';
+
+import type { DocumentationPage } from 'contentlayer/generated';
+
+import { If } from '@kit/ui/if';
+import { cn } from '@kit/ui/utils';
+
+export function DocumentationPageLink({
+  page,
+  before,
+  after,
+}: React.PropsWithChildren<{
+  page: DocumentationPage;
+  before?: React.ReactNode;
+  after?: React.ReactNode;
+}>) {
+  return (
+    <Link
+      className={cn(
+        `flex w-full items-center space-x-8 rounded-xl p-6 font-medium text-current ring-2 ring-muted transition-all hover:ring-primary`,
+        {
+          'justify-start': before,
+          'justify-end self-end': after,
+        },
+      )}
+      href={`/docs/${page.resolvedPath}`}
+    >
+      <If condition={before}>{(node) => <>{node}</>}</If>
+
+      <span className={'flex flex-col space-y-1.5'}>
+        <span
+          className={
+            'text-xs font-semibold uppercase dark:text-gray-400' +
+            ' text-gray-500'
+          }
+        >
+          {before ? `Previous` : ``}
+          {after ? `Next` : ``}
+        </span>
+
+        <span>{page.title}</span>
+      </span>
+
+      <If condition={after}>{(node) => <>{node}</>}</If>
+    </Link>
+  );
+}