wip: add dummy calculator page

* Add tailwind form reset, and test it
PHS-TSA · Mar 3, 2024 · 539b448 · 539b448
1 parent 2cb8660
commit 539b448
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 1 deletion.
diff --git a/deno.json b/deno.json
@@ -40,6 +40,7 @@
     "remark-mdx-frontmatter": "npm:remark-mdx-frontmatter@4.0.0",
     "remark-preset-lint-consistent": "npm:remark-preset-lint-consistent@5.1.2",
     "remark-preset-lint-recommended": "npm:remark-preset-lint-recommended@6.1.3",
+    "@tailwindcss/forms": "npm:@tailwindcss/forms@0.5.7",
     "@tailwindcss/typography": "npm:@tailwindcss/typography@0.5.10",
     "tailwindcss": "npm:tailwindcss@3.4.1",
     "tailwindcss/plugin": "npm:tailwindcss@3.4.1/plugin.js",

diff --git a/src/fresh.gen.ts b/src/fresh.gen.ts
diff --git a/src/routes/calculator.tsx b/src/routes/calculator.tsx
@@ -0,0 +1,32 @@
+import { Head } from "$fresh/runtime.ts";
+import type { JSX } from "preact";
+import { Cover } from "../components/Cover.tsx";
+import { Meta } from "../components/Meta.tsx";
+
+/**
+ * The page title.
+ */
+const pageTitle = "Calculator" as const;
+
+/**
+ * Render an about page.
+ *
+ * @returns The rendered about page.
+ */
+export default function Calculator(): JSX.Element {
+  return (
+    <>
+      <Head>
+        <Meta title={pageTitle} />
+      </Head>
+      <Cover title={pageTitle} />
+      <form class="justify-center">
+        <label>
+          Query:
+          <input type="text" name="q" value={""} />
+        </label>
+        <button type="submit">Search</button>
+      </form>
+    </>
+  );
+}
diff --git a/src/tailwind.config.ts b/src/tailwind.config.ts
@@ -1,9 +1,10 @@
+import forms from "@tailwindcss/forms";
 import typography from "@tailwindcss/typography";
 import type { Config } from "tailwindcss";
 
 export default {
   content: ["{routes,islands,components}/**/*.{ts,tsx}"],
-  plugins: [typography],
+  plugins: [typography, forms],
   theme: {
     extend: {
       gridTemplateColumns: {