[examples/][xs]: Renamed catalog to ckan

examples/ckan/components/_shared/CustomLink.tsx

@@ -0,0 +1,15 @@
+type LinkProps = {
+  url: string;
+  format: any;
+};
+
+const CustomLink: React.FC<LinkProps> = ({ url, format }: LinkProps) => (
+  <a
+    href={url}
+    className="bg-white hover:bg-gray-200 border text-black font-semibold py-2 px-4 rounded"
+  >
+    {format}
+  </a>
+);
+
+export default CustomLink;

examples/ckan/components/_shared/Error.tsx

@@ -0,0 +1,17 @@
+const ErrorMessage: React.FC<{ message: any }> = ({ message }) => {
+  return (
+    <aside>
+      {message}
+      <style jsx>{`
+        aside {
+          padding: 1.5em;
+          font-size: 14px;
+          color: white;
+          background-color: red;
+        }
+      `}</style>
+    </aside>
+  );
+};
+
+export default ErrorMessage;

examples/ckan/components/_shared/Table.tsx

@@ -0,0 +1,53 @@
+interface TableProps {
+  columns: Array<any>;
+  data: Array<any>;
+  className?: string;
+}
+
+const Table: React.FC<TableProps> = ({ columns, data, className }) => {
+  return (
+    <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+      <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
+        <div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
+          <table
+            className={`min-w-full divide-y divide-gray-200 ${className}`}
+          >
+            <thead className="bg-gray-50">
+              <tr>
+                {columns.map(({ key, name }) => (
+                  <th
+                    key={key}
+                    scope="col"
+                    className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                  >
+                    {name}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody className="bg-white divide-y divide-gray-200">
+              {data.map((item) => (
+                <tr key={item.id}>
+                  {columns.map(({ key, render }) => (
+                    <td
+                      key={key}
+                      className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900"
+                    >
+                      {(render &&
+                        typeof render === 'function' &&
+                        render(item)) ||
+                        item[key] ||
+                        ''}
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Table;

examples/ckan/components/_shared/index.ts

@@ -0,0 +1,5 @@
+import Table from './Table';
+import ErrorMessage from './Error';
+import CustomLink from './CustomLink';
+
+export { Table, ErrorMessage, CustomLink };