Admin UI

pnpm add @quickben/admin @quickben/next

import { createAdminPage, handleAdminRequest } from "@quickben/admin";
 
import config from "../../../quickben.config";
 
import type { AdminRequest } from "@quickben/admin";
 
async function serverFunction(request: AdminRequest) {
  "use server";
  return handleAdminRequest(config, request);
}
 
export default createAdminPage(config, { serverFunction });

import "@quickben/admin/styles.css";
 
import type { ReactNode } from "react";
 
export default function AdminLayout({ children }: Readonly<{ children: ReactNode }>) {
  return children;
}

import { createAdminPage, handleAdminRequest } from "@quickben/admin";
 
import config from "../../../quickben.config";
import { ColorInput } from "./color-input";
import { PostBoard } from "./post-board";
import { Reports } from "./reports";
 
import type { AdminRequest } from "@quickben/admin";
 
async function serverFunction(request: AdminRequest) {
  "use server";
  return handleAdminRequest(config, request);
}
 
export default createAdminPage(config, {
  serverFunction,
  components: { color: ColorInput },
  views: { posts: { list: PostBoard } },
  pages: [{ path: "reports", label: "Reports", component: Reports }],
  nav: [{ label: "Docs", href: "https://quickben.vialabs.net", group: "Help" }],
  signInHref: "/sign-in",
});

color: f.text({ admin: { component: "color" } }),

import type { FieldComponentProps } from "@quickben/admin";
 
export function ColorInput({
  name,
  id,
  value,
  required,
  disabled,
  describedBy,
}: FieldComponentProps) {
  return (
    <input
      type="color"
      name={name}
      id={id}
      defaultValue={typeof value === "string" ? value : "#000000"}
      required={required}
      disabled={disabled}
      aria-describedby={describedBy}
    />
  );
}

import type { ViewProps } from "@quickben/admin";
 
export function PostBoard({ collection, basePath }: ViewProps) {
  return <a href={`${basePath}/${collection.slug}/new`}>New {collection.labels.singular}</a>;
}

import { Card, CardBody, CardHeader } from "@quickben/admin/ui";
 
import type { PageProps } from "@quickben/admin";
 
export function Reports({ user, segments }: PageProps) {
  return (
    <Card>
      <CardHeader title="Reports" description={`Signed in as ${user?.email ?? "anonymous"}`} />
      <CardBody>Path: /{segments.join("/")}</CardBody>
    </Card>
  );
}