Start of UI work

2020-07-29 20:47:36 +02:00
parent 7a88c636fd
commit 6a4d1c3b22
8 changed files with 124 additions and 1 deletions
--- a/registry/src/views/_base.tsx
+++ b/registry/src/views/_base.tsx
@ -0,0 +1,16 @@
+/// <reference path="../types/jsx.d.ts" />
+import { React } from "../deps.ts";
+
+export default function Base(d: any, children: any[]) {
+   return (
+      <html>
+         <head>
+            <link
+               rel="stylesheet"
+               href="https://deno.hibas123.de/raw/@hibas123-theme@2.0.2/out/base.css"
+            />
+         </head>
+         <body class="light-theme">{children}</body>
+      </html>
+   );
+}
--- a/registry/src/views/index.tsx
+++ b/registry/src/views/index.tsx
@ -0,0 +1,33 @@
+/// <reference path="../types/jsx.d.ts" />
+import { React, Fragment } from "../deps.ts";
+import Base from "./_base.tsx";
+import DB, { IPackage } from "../db.ts";
+
+function Package({ pkg }: { pkg: IPackage }) {
+   const { name, versions } = pkg;
+
+   return (
+      <div class="card elv-4">
+         <div style="font-weight: bold">{name}</div>
+         <ul class="list">
+            {versions.map((version) => (
+               <li>{version}</li>
+            ))}
+         </ul>
+      </div>
+   );
+}
+
+export default async function index() {
+   const packages = await DB.find({});
+
+   return (
+      <Base>
+         <div class="container">
+            {packages.map((pkg) => (
+               <Package pkg={pkg} />
+            ))}
+         </div>
+      </Base>
+   );
+}