initial commit

.envrc

@@ -0,0 +1 @@
+use flake

.gitignore

@@ -0,0 +1,13 @@
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# Fresh build directory
+_fresh/
+# npm dependencies
+node_modules/
+
+.direnv/

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Alexandre Negrel
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,16 @@
+# Fresh project
+
+Your new Fresh project is ready to go. You can follow the Fresh "Getting
+Started" guide here: https://fresh.deno.dev/docs/getting-started
+
+### Usage
+
+Make sure to install Deno: https://deno.land/manual/getting_started/installation
+
+Then start the project:
+
+```
+deno task start
+```
+
+This will watch the project directory and restart as necessary.

components/AlertList.tsx

@@ -0,0 +1,38 @@
+import { ComponentChildren } from "preact";
+
+function AlertList(
+  { icon, title, list, className, children }: {
+    icon?: ComponentChildren;
+    title: string;
+    list: string[];
+    className?: string;
+    children?: ComponentChildren;
+  },
+) {
+  return (
+    <div
+      role="alert"
+      class={`relative flex w-full px-4 py-4 text-base rounded-lg font-regular bg-gradient-to-tr from-gray-900 to-gray-800 dark:from-gray-100 dark:to-gray-500 dark:text-slate-950 text-slate-50 ${
+        className ? className : ""
+      }`}
+      style="opacity: 1;"
+    >
+      <div class="shrink-0">
+        {icon}
+      </div>
+      <div className="w-full">
+        <div class="ml-3 mr-12">
+          <p class="block font-sans text-base antialiased font-medium leading-relaxed text-inherit">
+            {title}
+          </p>
+          <ul class="mt-2 ml-2 list-disc list-inside">
+            {list.map((el) => <li>{el}</li>)}
+          </ul>
+        </div>
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export default AlertList;

components/Button.tsx

@@ -0,0 +1,11 @@
+import { ComponentProps } from "preact";
+
+function Button(props: ComponentProps<"button">) {
+  props.className =
+    "select-none flex nowrap items-center gap-2 cursor-pointer rounded-lg bg-gradient-to-tr from-gray-900 to-gray-800 dark:from-gray-100 dark:to-gray-500 text-center align-middle font-sans text-xs font-bold uppercase text-slate-50 dark:text-slate-950 shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none " +
+    (props.className ?? "");
+
+  return <button {...props} />;
+}
+
+export default Button;

components/InformationCircleIcon.tsx

@@ -0,0 +1,21 @@
+function InformationCircleIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="2"
+      stroke="currentColor"
+      class="w-6 h-6"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"
+      >
+      </path>
+    </svg>
+  );
+}
+
+export default InformationCircleIcon;

components/LeftArrowIcon.tsx

@@ -0,0 +1,23 @@
+import { ComponentProps } from "preact";
+
+function LeftArrowIcon(props: ComponentProps<"svg">) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      class="w-6 h-6"
+      {...props}
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18"
+      />
+    </svg>
+  );
+}
+
+export default LeftArrowIcon;

components/OutlinedButton.tsx

@@ -0,0 +1,11 @@
+import { ComponentProps } from "preact";
+
+function OutlinedButton(props: ComponentProps<"button">) {
+  props.className =
+    "select-none flex nowrap items-center rounded-lg border border-current text-center align-middle font-sans text-xs font-bold uppercase transition-all hover:opacity-75 focus:ring focus:ring-gray-300 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none " +
+    (props.className ?? "");
+
+  return <button {...props} />;
+}
+
+export default OutlinedButton;

components/ProgressBar.tsx

@@ -0,0 +1,32 @@
+import { SignalLike } from "$fresh/src/types.ts";
+
+function ProgressBar(
+  { title, percentage }: {
+    title: string;
+    percentage: number | SignalLike<number>;
+  },
+) {
+  return (
+    <div class="w-full">
+      <div class="flex items-center justify-between gap-4 mb-2">
+        <h6 class="block font-sans text-base antialiased font-semibold leading-relaxed tracking-normal text-blue-gray-900">
+          {title}
+        </h6>
+        <h6 class="block font-sans text-base antialiased font-semibold leading-relaxed tracking-normal text-blue-gray-900">
+          {percentage}%
+        </h6>
+      </div>
+      <div class="flex-start flex h-2.5 w-full overflow-hidden rounded-full dark:bg-slate-800 bg-slate-200 font-sans text-xs font-medium">
+        <div
+          class="flex items-center justify-center h-full overflow-hidden dark:bg-slate-50 bg-slate-950 break-all rounded-full"
+          style={{
+            width: `${percentage}%`,
+          }}
+        >
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ProgressBar;

components/RightArrowIcon.tsx

@@ -0,0 +1,23 @@
+import { ComponentProps } from "preact";
+
+function RightArrowIcon(props: ComponentProps<"svg">) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      class="w-6 h-6"
+      {...props}
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"
+      />
+    </svg>
+  );
+}
+
+export default RightArrowIcon;

components/Spinner.tsx

@@ -0,0 +1,36 @@
+import { ComponentProps } from "preact";
+
+function Spinner(props: ComponentProps<"svg">) {
+  props.className = (props.className ?? " ") + " text-gray-300 animate-spin";
+
+  return (
+    <svg
+      viewBox="0 0 64 64"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      {...props}
+    >
+      <path
+        d="M32 3C35.8083 3 39.5794 3.75011 43.0978 5.20749C46.6163 6.66488 49.8132 8.80101 52.5061 11.4939C55.199 14.1868 57.3351 17.3837 58.7925 20.9022C60.2499 24.4206 61 28.1917 61 32C61 35.8083 60.2499 39.5794 58.7925 43.0978C57.3351 46.6163 55.199 49.8132 52.5061 52.5061C49.8132 55.199 46.6163 57.3351 43.0978 58.7925C39.5794 60.2499 35.8083 61 32 61C28.1917 61 24.4206 60.2499 20.9022 58.7925C17.3837 57.3351 14.1868 55.199 11.4939 52.5061C8.801 49.8132 6.66487 46.6163 5.20749 43.0978C3.7501 39.5794 3 35.8083 3 32C3 28.1917 3.75011 24.4206 5.2075 20.9022C6.66489 17.3837 8.80101 14.1868 11.4939 11.4939C14.1868 8.80099 17.3838 6.66487 20.9022 5.20749C24.4206 3.7501 28.1917 3 32 3L32 3Z"
+        stroke="currentColor"
+        stroke-width="5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+      </path>
+      <path
+        d="M32 3C36.5778 3 41.0906 4.08374 45.1692 6.16256C49.2477 8.24138 52.7762 11.2562 55.466 14.9605C58.1558 18.6647 59.9304 22.9531 60.6448 27.4748C61.3591 31.9965 60.9928 36.6232 59.5759 40.9762"
+        stroke="currentColor"
+        stroke-width="5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="text-gray-900"
+      >
+      </path>
+    </svg>
+  );
+}
+
+export default Spinner;

components/UpArrowIcon.tsx

@@ -0,0 +1,23 @@
+import { ComponentProps } from "preact";
+
+function UpArrowIcon(props: ComponentProps<"svg">) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      class="w-6 h-6"
+      {...props}
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"
+      />
+    </svg>
+  );
+}
+
+export default UpArrowIcon;

deno.json

@@ -0,0 +1,41 @@
+{
+  "lock": true,
+  "tasks": {
+    "check": "deno fmt --check && deno lint && deno check **/*.ts && deno check **/*.tsx",
+    "cli": "echo \"import '\\$fresh/src/dev/cli.ts'\" | deno run --unstable -A -",
+    "manifest": "deno task cli manifest $(pwd)",
+    "start": "deno run -A --watch=static/,routes/ dev.ts",
+    "build": "deno run -A dev.ts build",
+    "preview": "deno run -A main.ts",
+    "update": "deno run -A -r https://fresh.deno.dev/update ."
+  },
+  "lint": {
+    "rules": {
+      "tags": [
+        "fresh",
+        "recommended"
+      ]
+    }
+  },
+  "exclude": [
+    "**/_fresh/*"
+  ],
+  "imports": {
+    "$fresh/": "https://deno.land/x/[email protected]/",
+    "preact": "https://esm.sh/[email protected]",
+    "preact/": "https://esm.sh/[email protected]/",
+    "@preact/signals": "https://esm.sh/*@preact/[email protected]",
+    "@preact/signals-core": "https://esm.sh/*@preact/[email protected]",
+    "tailwindcss": "npm:[email protected]",
+    "tailwindcss/": "npm:/[email protected]/",
+    "tailwindcss/plugin": "npm:/[email protected]/plugin.js",
+    "$std/": "https://deno.land/[email protected]/",
+    "@/": "./",
+    "@zip.js/zip.js": "https://deno.land/x/[email protected]/index.js"
+  },
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact"
+  },
+  "nodeModulesDir": true
+}