diff --git a/app/routes/id.tsx b/app/routes/id.tsx index 12fd80b..315cd86 100644 --- a/app/routes/id.tsx +++ b/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(); + let { uuid, cuid, ulid } = useLoaderData(); let id = useId(); return (
-
- - - {uuid} - -
- -
- - - {cuid} - -
+ + +
); } + +function Identifier({ label, value }: { label: string; value: string }) { + let id = useId(); + return ( +
+ + + {value} + +
+ ); +} diff --git a/bun.lockb b/bun.lockb index 208cf5f..cdf7b20 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/package.json b/package.json index 2087b02..6c8feae 100644 --- a/package.json +++ b/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": {