feat: oidc based authentication

app/components/TabLink.tsx

@@ -0,0 +1,23 @@
+import { NavLink } from '@remix-run/react'
+import clsx from 'clsx'
+import type { ReactNode } from 'react'
+
+type Properties = {
+	readonly name: string;
+	readonly to: string;
+	readonly icon: ReactNode;
+}
+
+export default function TabLink({ name, to, icon }: Properties) {
+	return (
+		<NavLink
+			to={to}
+			className={({ isActive, isPending }) => clsx(
+				'flex items-center gap-x-2 p-2 border-b-2 text-sm',
+				isActive ? 'border-white' : 'border-transparent'
+			)}
+		>
+			{icon} {name}
+		</NavLink>
+	)
+}