Add ToS

src/app/(normal)/tos/page.tsx

@@ -0,0 +1,18 @@
+import { prisma } from '@/lib/prisma';
+import ReactMarkdown from 'react-markdown';
+
+export default async function TosPage() {
+  const tos = await prisma.termsOfService.findFirst({
+    orderBy: [{ version: "desc" }],
+  })
+
+  // console.log(tos?.markdown)
+
+  return (
+    <div className="container py-10 space-y-10">
+      <div className="markdown">
+        <ReactMarkdown>{tos?.markdown}</ReactMarkdown>
+      </div>
+    </div>
+  );
+}

src/app/globals.css

@@ -115,6 +115,70 @@
   --sidebar-ring: oklch(0.556 0 0);
 }
 
+.markdown {
+  @apply text-base leading-relaxed text-foreground;
+}
+
+.markdown h1 {
+  @apply text-4xl font-bold mt-6 mb-4;
+}
+
+.markdown h2 {
+  @apply text-3xl font-semibold mt-6 mb-3;
+}
+
+.markdown h3 {
+  @apply text-2xl font-medium mt-5 mb-2;
+}
+
+.markdown p {
+  @apply my-4;
+}
+
+.markdown ul {
+  @apply list-disc pl-6 my-4;
+}
+
+.markdown ol {
+  @apply list-decimal pl-6 my-4;
+}
+
+.markdown li {
+  @apply mb-1;
+}
+
+.markdown blockquote {
+  @apply border-l-4 pl-4 italic text-muted-foreground my-4;
+}
+
+.markdown code {
+  @apply bg-muted px-1 py-0.5 rounded font-mono text-sm;
+}
+
+.markdown pre {
+  @apply bg-muted p-4 rounded overflow-x-auto text-sm my-4;
+}
+
+.markdown a {
+  @apply underline text-primary hover:text-primary/80;
+}
+
+.markdown li:has(input[type="checkbox"]) {
+  @apply list-none pl-0 items-start gap-2 mb-2;
+}
+
+.markdown input[type="checkbox"] {
+  @apply mt-1 h-4 w-4 shrink-0 rounded border border-border bg-background text-primary accent-primary cursor-default;
+}
+
+.markdown input[type="checkbox"]:checked + * {
+  @apply line-through text-muted-foreground;
+}
+
+div:hover {
+  border-color: var(--hover-border-color);
+}
+
 @layer base {
   * {
     @apply border-border outline-ring/50;

src/components/global/TopNav.tsx

@@ -12,11 +12,11 @@ const links = [
   { href: "/artworks", label: "Portfolio" },
   { href: "/artworks/animalstudies", label: "Animal Studies" },
   { href: "/commissions", label: "Commissions" },
+  { href: "/tos", label: "Terms of Service" },
   // { href: "/portfolio/artfight", label: "Artfight" },
   // { href: "/portfolio/minis", label: "Miniatures" },
   // { href: "/commissions", label: "Commissions" },
   // { href: "/ych", label: "YCH / Custom offers" },
-  // { href: "/tos", label: "Terms of Service" },
   // { href: "/todo", label: "todo (temp)" },
 ]