Example project redesign

apps/example/src/app/(system)/entries/[id]/page.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { Fragment, useEffect } from "react";
+import { useMockService } from "@/data/MockData/useMockService";
+import { DocumentWidget } from "@/app/document-widget";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+
+export type EntryPageParams = {
+  id: string;
+};
+export default function EntryPage({
+  params: { id },
+}: {
+  params: EntryPageParams;
+}) {
+  const mockService = useMockService();
+
+  if (!mockService) {
+    return null;
+  }
+
+  const entry = mockService.getEntryById(id);
+
+  if (!entry) {
+    notFound();
+  }
+
+  return (
+    <Fragment>
+      <div className={"container mx-auto"}>
+        <Link
+          href={"/entries"}
+          className={"underline text-blue-500 hover:opacity-70"}
+        >
+          ← All Entries
+        </Link>
+        <h2 className={"text-2xl mb-16 mt-4"}>{entry.name}</h2>
+
+        <div className={"mb-6"}>
+          <div className={"font-bold"}>ID</div>
+          <div>{entry.id}</div>
+        </div>
+
+        <div className={"mb-6"}>
+          <div className={"font-bold"}>Name</div>
+          <div>{entry.name}</div>
+        </div>
+
+        <div className={"mb-6"}>
+          <div className={"font-bold"}>Description</div>
+          <div>{entry.description}</div>
+        </div>
+
+        <div className={"mb-6"}>
+          <div className={"font-bold"}>Last modified</div>
+          <div>{entry.updatedAt.toString()}</div>
+        </div>
+
+        <div className={"mb-6"}>
+          <div className={"font-bold"}>Created at</div>
+          <div>{entry.createdAt.toString()}</div>
+        </div>
+
+        <div className={"mb-6"}>
+          <div className={"font-bold"}>Page</div>
+          <div className={"mt-3"}>
+            <DocumentWidget
+              document={entry.page}
+              onSave={(document) => {
+                mockService.updateEntry({
+                  ...entry,
+                  page: document,
+                });
+              }}
+            />
+          </div>
+        </div>
+      </div>
+    </Fragment>
+  );
+}
+
+export const revalidate = 0;

apps/example/src/app/(system)/entries/page.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { Fragment, useEffect } from "react";
+import { useMockService } from "@/data/MockData/useMockService";
+import Link from "next/link";
+
+export default function EntriesPage() {
+  const service = useMockService();
+
+  if (!service) {
+    return null;
+  }
+
+  const entries = service.getEntries();
+
+  const cellClasses = "p-2 text-left border border-gray-200 leading-none";
+
+  return (
+    <Fragment>
+      <div className={"container mx-auto"}>
+        <h2 className={"text-2xl mb-16"}>System entries</h2>
+
+        <table className={"border-collapse border border-gray-200 w-full"}>
+          <thead>
+            <tr>
+              <th className={cellClasses}>Name</th>
+              <th className={cellClasses}>Id</th>
+              <th className={cellClasses}>Last modified</th>
+            </tr>
+          </thead>
+          <tbody>
+            {entries.map((entry) => (
+              <tr key={entry.id}>
+                <td className={cellClasses}>
+                  <Link
+                    href={`/entries/${entry.id}`}
+                    className={"underline text-blue-500 hover:opacity-70"}
+                  >
+                    {entry.name}
+                  </Link>
+                </td>
+                <td className={cellClasses}>{entry.id}</td>
+                <td className={cellClasses}>
+                  {entry.updatedAt.toDateString()}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </Fragment>
+  );
+}
+
+export const revalidate = 0;

apps/example/src/app/(system)/layout.tsx

@@ -0,0 +1,38 @@
+import "../globals.css";
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "ACME Software",
+  description: "ACME Software using Easyblocks",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        <div className={"border-b border-gray-300"}>
+          <header className="container mx-auto">
+            <div className="flex justify-between items-center py-4">
+              <div>
+                <a className="text-lg leading-none font-medium">
+                  ACME Company Software
+                </a>
+              </div>
+              <div className="text-right leading-none">
+                John Doe - john.doe@acme.com
+              </div>
+            </div>
+          </header>
+        </div>
+        <main className="container mx-auto mt-16">{children}</main>
+      </body>
+    </html>
+  );
+}

apps/example/src/app/(system)/not-found.tsx

@@ -0,0 +1,9 @@
+import Link from "next/link";
+
+export default function NotFound() {
+  return (
+    <div>
+      <p>Could not find requested resource</p>
+    </div>
+  );
+}

apps/example/src/app/(system)/page.tsx

@@ -0,0 +1,16 @@
+import Link from "next/link";
+
+export default function MainPage() {
+  return (
+    <div className={"container mx-auto"}>
+      <h2 className={"text-2xl mb-16"}>Hello</h2>
+
+      <Link
+        href={`/entries`}
+        className={"underline text-blue-500 hover:opacity-70"}
+      >
+        System entries
+      </Link>
+    </div>
+  );
+}