feat: add waifu column and fix wrong package

packages/lume-column-waifu/package.json

@@ -0,0 +1,23 @@
+{
+	"name": "@columns/waifu",
+	"version": "0.0.0",
+	"private": true,
+	"main": "./src/index.tsx",
+	"dependencies": {
+		"@lume/ark": "workspace:^",
+		"@lume/icons": "workspace:^",
+		"@lume/ui": "workspace:^",
+		"@lume/utils": "workspace:^",
+		"@tanstack/react-query": "^5.17.19",
+		"react": "^18.2.0",
+		"react-router-dom": "^6.21.3"
+	},
+	"devDependencies": {
+		"@lume/tailwindcss": "workspace:^",
+		"@lume/tsconfig": "workspace:^",
+		"@lume/types": "workspace:^",
+		"@types/react": "^18.2.48",
+		"tailwindcss": "^3.4.1",
+		"typescript": "^5.3.3"
+	}
+}

packages/lume-column-waifu/src/home.tsx

@@ -0,0 +1,69 @@
+import { LoaderIcon, RefreshIcon } from "@lume/icons";
+import { cn } from "@lume/utils";
+import { useQuery } from "@tanstack/react-query";
+
+export function HomeRoute({ colKey }: { colKey: string }) {
+	const { data, isLoading, isError, isRefetching, refetch } = useQuery({
+		queryKey: [colKey],
+		queryFn: async ({ signal }: { signal: AbortSignal }) => {
+			const apiUrl = "https://api.waifu.im/search";
+			const params = {
+				included_tags: "waifu",
+				height: ">=2000",
+			};
+
+			const queryParams = new URLSearchParams(params);
+			const requestUrl = `${apiUrl}?${queryParams}`;
+
+			const res = await fetch(requestUrl, { signal });
+
+			if (!res.ok) throw new Error("Failed to get image url");
+
+			const data = await res.json();
+			return data.images[0];
+		},
+		refetchOnMount: false,
+		refetchOnWindowFocus: false,
+	});
+
+	return (
+		<div className="p-3 h-full flex flex-col justify-center items-center">
+			{isLoading ? (
+				<LoaderIcon className="size-5 animate-spin" />
+			) : isError ? (
+				<p className="text-center text-sm font-medium">
+					Failed to get image, please try again later.
+				</p>
+			) : (
+				<div className="relative min-h-0 flex-1 grow-0 w-full rounded-xl flex items-stretch">
+					<img
+						src={data.url}
+						alt={data.signature}
+						loading="lazy"
+						decoding="async"
+						className="object-cover w-full rounded-xl ring-1 ring-black/5 dark:ring-white/5"
+					/>
+					<div className="absolute bottom-3 right-3 flex items-center gap-2">
+						<button
+							type="button"
+							onClick={() => refetch()}
+							className="text-sm font-medium px-2 h-7 inline-flex items-center justify-center bg-black/50 hover:bg-black/30 backdrop-blur-2xl rounded-md text-white"
+						>
+							<RefreshIcon
+								className={cn("size-4", isRefetching ? "animate-spin" : "")}
+							/>
+						</button>
+						<a
+							href={data.source}
+							target="_blank"
+							rel="noreferrer"
+							className="text-sm font-medium px-2 h-7 inline-flex items-center justify-center bg-black/50 hover:bg-black/30 backdrop-blur-2xl rounded-md text-white"
+						>
+							Source
+						</a>
+					</div>
+				</div>
+			)}
+		</div>
+	);
+}

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

@@ -0,0 +1,16 @@
+import { Column } from "@lume/ark";
+import { IColumn } from "@lume/types";
+import { HomeRoute } from "./home";
+
+export function Waifu({ column }: { column: IColumn }) {
+	const colKey = `waifu-${column.id}`;
+
+	return (
+		<Column.Root>
+			<Column.Header id={column.id} title={column.title} />
+			<Column.Content>
+				<Column.Route path="/" element={<HomeRoute colKey={colKey} />} />
+			</Column.Content>
+		</Column.Root>
+	);
+}

packages/lume-column-waifu/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/lume-column-waifu/tsconfig.json

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