chore: restructure packages

packages/lume-column-default/src/index.tsx

@@ -0,0 +1,45 @@
+import { Column } from "@lume/ark";
+import { ColumnIcon } from "@lume/icons";
+import { IColumn } from "@lume/types";
+import { TOPICS } from "@lume/utils";
+
+export function Default({ column }: { column: IColumn }) {
+	return (
+		<Column.Root>
+			<Column.Header
+				id={column.id}
+				title="Add columns"
+				icon={<ColumnIcon className="size-4" />}
+			/>
+			<div className="h-full px-3 mt-3 overflow-y-auto scrollbar-none">
+				<div className="flex flex-col gap-5">
+					<div>
+						<h1 className="text-lg font-semibold leading-tight">Topics</h1>
+						<p className="text-neutral-600 dark:text-neutral-400">
+							Discover content based on your interests.
+						</p>
+					</div>
+					<div className="grid grid-cols-2 gap-3">
+						{TOPICS.sort((a, b) => a.title.localeCompare(b.title)).map(
+							(topic, index) => (
+								<div
+									key={topic + index.toString()}
+									className="flex flex-col w-full px-3 rounded-lg bg-neutral-100"
+								>
+									<div className="rounded-md h-9 w-9 shrink-0">
+										<img
+											src={`/${topic.title.toLowerCase()}.jpg`}
+											alt={topic.title}
+											className="rounded-md h-9 w-9"
+										/>
+									</div>
+									<p className="font-medium">{topic.title}</p>
+								</div>
+							),
+						)}
+					</div>
+				</div>
+			</div>
+		</Column.Root>
+	);
+}