feat(topic): Topic List Route (#172)

* feat: add item scroll to active

* fix: reset enterkey and scroll to view

* fix: link item displayName

* refactor: remove keyboard page nav

* chore: fix scrolling, perf, keys, highlight active item etc

* chore: use new hook for create a page

* chore: disabled auto delete page

* wip

* chore: add learning selector

* chore: learning selector update

web/components/custom/column.tsx

@@ -0,0 +1,42 @@
+import React from "react"
+import { cn } from "@/lib/utils"
+
+interface ColumnWrapperProps extends React.HTMLAttributes<HTMLDivElement> {
+	style?: { [key: string]: string }
+}
+
+interface ColumnTextProps extends React.HTMLAttributes<HTMLSpanElement> {}
+
+const ColumnWrapper = React.forwardRef<HTMLDivElement, ColumnWrapperProps>(
+	({ children, className, style, ...props }, ref) => (
+		<div
+			className={cn("flex grow flex-row items-center justify-start", className)}
+			style={{
+				width: "var(--width)",
+				minWidth: "var(--min-width, min-content)",
+				maxWidth: "min(var(--width), var(--max-width))",
+				flexBasis: "var(--width)",
+				...style
+			}}
+			ref={ref}
+			{...props}
+		>
+			{children}
+		</div>
+	)
+)
+
+ColumnWrapper.displayName = "ColumnWrapper"
+
+const ColumnText = React.forwardRef<HTMLSpanElement, ColumnTextProps>(({ children, className, ...props }, ref) => (
+	<span className={cn("text-left text-xs", className)} ref={ref} {...props}>
+		{children}
+	</span>
+))
+
+ColumnText.displayName = "ColumnText"
+
+export const Column = {
+	Wrapper: ColumnWrapper,
+	Text: ColumnText
+}