feat: add trending notes column

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

@@ -1,5 +1,4 @@
 import { Column, useColumnContext } from "@lume/ark";
-import { ColumnIcon } from "@lume/icons";
 import { IColumn } from "@lume/types";
 import { COL_TYPES } from "@lume/utils";
 
@@ -8,11 +7,7 @@ export function Default({ column }: { column: IColumn }) {
 
 	return (
 		<Column.Root>
-			<Column.Header
-				id={column.id}
-				title="Add columns"
-				icon={<ColumnIcon className="size-4" />}
-			/>
+			<Column.Header id={column.id} title="Add columns" />
 			<div className="h-full px-3 mt-3 flex flex-col gap-3 overflow-y-auto scrollbar-none">
 				<div className="h-11 flex items-center gap-5">
 					<button
@@ -87,6 +82,39 @@ export function Default({ column }: { column: IColumn }) {
 						</button>
 					</div>
 				</div>
+				<div className="flex flex-col rounded-xl overflow-hidden bg-neutral-50 dark:bg-neutral-950 ring-1 ring-neutral-100 dark:ring-neutral-900">
+					<div className="h-[100px] w-full px-3 pt-3">
+						<img
+							src="/columns/trending-notes.jpg"
+							srcSet="/columns/trending-notes@2x.jpg 2x"
+							alt="trendingNotes"
+							loading="lazy"
+							decoding="async"
+							className="w-full h-auto object-cover rounded-lg"
+						/>
+					</div>
+					<div className="h-16 shrink-0 px-3 flex items-center justify-between">
+						<div>
+							<h1 className="font-semibold">Trending Notes</h1>
+							<p className="max-w-[18rem] truncate text-sm text-neutral-600 dark:text-neutral-500">
+								What is trending on Nostr?
+							</p>
+						</div>
+						<button
+							type="button"
+							onClick={() => {
+								addColumn({
+									kind: COL_TYPES.trendingNotes,
+									title: "",
+									content: "",
+								});
+							}}
+							className="shrink-0 w-16 h-8 rounded-lg text-sm font-semibold bg-neutral-100 dark:bg-neutral-900 text-blue-500 hover:bg-neutral-200 dark:hover:bg-neutral-800 inline-flex items-center justify-center"
+						>
+							Add
+						</button>
+					</div>
+				</div>
 			</div>
 		</Column.Root>
 	);