Add ULID to /id

app/routes/id.tsx

@@ -2,49 +2,39 @@ import { createId } from "@paralleldrive/cuid2";
 import { json } from "@remix-run/cloudflare";
 import { useLoaderData } from "@remix-run/react";
 import { useId } from "react";
+import { ulid } from "ulidx";
 
 export function loader() {
 	return json({
 		uuid: crypto.randomUUID(),
 		cuid: createId(),
+		ulid: ulid(),
 	});
 }
 
 export default function Component() {
-	let { uuid, cuid } = useLoaderData<typeof loader>();
+	let { uuid, cuid, ulid } = useLoaderData<typeof loader>();
 	let id = useId();
 
 	return (
 		<main className="flex min-h-screen w-full flex-col items-center justify-center gap-6 font-mono">
-			<div className="flex w-full max-w-screen-sm flex-col gap-2">
-				<label
-					htmlFor={`uuid-${id}`}
-					className="text-xl font-bold tracking-wide"
-				>
-					UUID
-				</label>
-				<output
-					id={`uuid-${id}`}
-					className="select-all bg-zinc-200 p-4 dark:bg-zinc-800"
-				>
-					{uuid}
-				</output>
-			</div>
-
-			<div className="flex w-full max-w-screen-sm flex-col gap-2">
-				<label
-					htmlFor={`cuid-${id}`}
-					className="text-xl font-bold tracking-wide"
-				>
-					CUID
-				</label>
-				<output
-					id={`cuid-${id}`}
-					className="select-all bg-zinc-200 p-4 dark:bg-zinc-800"
-				>
-					{cuid}
-				</output>
-			</div>
+			<Identifier label="UUID" value={uuid} />
+			<Identifier label="CUID" value={cuid} />
+			<Identifier label="ULID" value={ulid} />
 		</main>
 	);
 }
+
+function Identifier({ label, value }: { label: string; value: string }) {
+	let id = useId();
+	return (
+		<div className="flex w-full max-w-screen-sm flex-col gap-2">
+			<label htmlFor={id} className="text-xl font-bold tracking-wide">
+				{label}
+			</label>
+			<output id={id} className="select-all bg-zinc-200 p-4 dark:bg-zinc-800">
+				{value}
+			</output>
+		</div>
+	);
+}

package.json

@@ -79,6 +79,7 @@
 		"tailwind-variants": "^0.1.20",
 		"tiny-invariant": "^1.3.1",
 		"turbo-stream": "^2.0.1",
+		"ulidx": "^2.3.0",
 		"zod": "^3.22.4"
 	},
 	"devDependencies": {