[@portaljs/ckan][xl] - add ckan package and example using it

examples/ckan/pages/index.tsx

@@ -0,0 +1,52 @@
+import {
+  CKAN,
+  DatasetSearchForm,
+  ListOfDatasets,
+  PackageSearchOptions,
+  Organization,
+  Group,
+} from "@portaljs/ckan";
+import { useState } from "react";
+
+export async function getServerSideProps() {
+  const ckan = new CKAN("https://demo.dev.datopian.com");
+  const groups = await ckan.getGroupsWithDetails();
+  const orgs = await ckan.getOrgsWithDetails();
+  return {
+    props: {
+      groups,
+      orgs,
+    },
+  };
+}
+
+export default function Home({
+  orgs,
+  groups,
+}: {
+  orgs: Organization[];
+  groups: Group[];
+}) {
+  const ckan = new CKAN("https://demo.dev.datopian.com");
+  const [options, setOptions] = useState<PackageSearchOptions>({
+    offset: 0,
+    limit: 5,
+    tags: [],
+    groups: [],
+    orgs: [],
+  });
+
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-between p-24 bg-zinc-900">
+      <DatasetSearchForm
+        options={options}
+        setOptions={setOptions}
+        groups={groups}
+        orgs={orgs}
+      />
+      <div className="bg-white p-8 my-4 rounded-lg">
+        <ListOfDatasets options={options} setOptions={setOptions} ckan={ckan} />{" "}
+      </div>
+    </main>
+  );
+}