feat(columns): add default column

packages/@columns/default/package.json

@@ -0,0 +1,26 @@
+{
+	"name": "@columns/default",
+	"version": "0.0.0",
+	"private": true,
+	"main": "./src/index.tsx",
+	"dependencies": {
+		"@lume/ark": "workspace:^",
+		"@lume/icons": "workspace:^",
+		"@lume/ui": "workspace:^",
+		"@lume/utils": "workspace:^",
+		"@nostr-dev-kit/ndk": "^2.3.2",
+		"@tanstack/react-query": "^5.17.0",
+		"react": "^18.2.0",
+		"react-router-dom": "^6.21.1",
+		"sonner": "^1.3.1",
+		"virtua": "^0.18.1"
+	},
+	"devDependencies": {
+		"@lume/tailwindcss": "workspace:^",
+		"@lume/tsconfig": "workspace:^",
+		"@lume/types": "workspace:^",
+		"@types/react": "^18.2.46",
+		"tailwind": "^4.0.0",
+		"typescript": "^5.3.3"
+	}
+}

packages/@columns/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>
+	);
+}

packages/@columns/default/tailwind.config.js

@@ -0,0 +1,8 @@
+import sharedConfig from "@lume/tailwindcss";
+
+const config = {
+	content: ["./src/**/*.{js,ts,jsx,tsx}"],
+	presets: [sharedConfig],
+};
+
+export default config;

packages/@columns/default/tsconfig.json

@@ -0,0 +1,8 @@
+{
+	"extends": "@lume/tsconfig/base.json",
+	"compilerOptions": {
+		"outDir": "dist"
+	},
+	"include": ["src"],
+	"exclude": ["node_modules", "dist"]
+}