Component for pages + small tidy ups

2026-09-26 14:20:31 +08:00 · 2023-09-28 23:08:26 +02:00
parent ac7fdbc442
commit cedb2aa280
4 changed files with 126 additions and 72 deletions
@@ -0,0 +1,83 @@
+import type {
+  Entry as EntryType,
+  AssistantEntry,
+  ErrorMessage,
+  StampyMessage,
+  UserEntry,
+} from "../types";
+import { ShowAssistantEntry } from "./assistant";
+import { GlossarySpan } from "./glossary";
+import Image from "next/image";
+import logo from "../logo.svg";
+
+export const User = ({ entry }: { entry: UserEntry }) => {
+  return (
+    <li>
+      <p className="border border-gray-300 px-1 text-right">
+        {" "}
+        {entry.content}{" "}
+      </p>
+    </li>
+  );
+};
+
+export const Error = ({ entry }: { entry: ErrorMessage }) => {
+  return (
+    <li>
+      <p className="border border-red-500 bg-red-100 px-1 text-red-800">
+        {" "}
+        {entry.content}{" "}
+      </p>
+    </li>
+  );
+};
+
+export const Assistant = ({ entry }: { entry: AssistantEntry }) => {
+  return (
+    <li>
+      <ShowAssistantEntry entry={entry} />
+    </li>
+  );
+};
+
+export const Stampy = ({ entry }: { entry: StampyMessage }) => {
+  return (
+    <li>
+      <div
+        className="my-7 rounded bg-slate-500 px-4 py-0.5 text-slate-50"
+        style={{
+          marginLeft: "auto",
+          marginRight: "auto",
+          maxWidth: "99.8%",
+        }}
+      >
+        <div>
+          <GlossarySpan content={entry.content} />
+        </div>
+        <div className="mb-3 flex justify-end">
+          <a
+            href={entry.url}
+            target="_blank"
+            className="flex items-center space-x-1"
+          >
+            <span>aisafety.info</span>
+            <Image src={logo} alt="aisafety.info logo" width={19} />
+          </a>
+        </div>
+      </div>
+    </li>
+  );
+};
+
+export const Entry = ({ entry }: { entry: EntryType }) => {
+  switch (entry.role) {
+    case "user":
+      return <User entry={entry} />;
+    case "error":
+      return <Error entry={entry} />;
+    case "assistant":
+      return <Assistant entry={entry} />;
+    case "stampy":
+      return <Stampy entry={entry} />;
+  }
+};
@@ -0,0 +1,18 @@
+import React, { ReactNode } from "react";
+import Head from "next/head";
+import Header from "./header";
+
+const Page: React.FC<{children: ReactNode, page: "index" | "semantic"}> = ({page, children}) => {
+  return (
+    <>
+      <Head>
+        <title>AI Safety Info</title>
+      </Head>
+      <main>
+        <Header page={page} />
+        {children}
+      </main>
+    </>
+  );
+};
+export default Page;