feat: initial features

2026-09-19 18:57:46 +07:00 · 2024-04-13 16:04:32 +07:00
commit e27b047f65
19 changed files with 557 additions and 0 deletions
@@ -0,0 +1,35 @@
+import type { FC, PropsWithChildren } from "hono/jsx";
+
+type Props = PropsWithChildren<{
+  title?: string;
+}>;
+
+const Layout: FC<Props> = ({ children, title }) => {
+  return (
+    <html lang="en" data-theme="dark">
+      <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta name="color-scheme" content="dark" />
+
+        <title>{title || "Cebol"}</title>
+
+        <link
+          rel="stylesheet"
+          href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"
+        />
+        <script src="https://unpkg.com/[email protected]" defer />
+      </head>
+      <body>
+        <header class="container" style="margin-top: 2em;">
+          <h1>Cebol</h1>
+          <p>URL Shortener</p>
+        </header>
+
+        {children}
+      </body>
+    </html>
+  );
+};
+
+export default Layout;
@@ -0,0 +1,22 @@
+import type { FC } from "hono/jsx";
+import Layout from "../layouts/layout";
+import LinksSection from "../sections/links";
+import CreateLinkSection from "../sections/create-link";
+import type { Link } from "../../types/link";
+
+type Props = {
+  links: Link[];
+};
+
+const HomePage: FC<Props> = ({ links }) => {
+  return (
+    <Layout title="Cebol - URL Shortener">
+      <main class="container">
+        <CreateLinkSection />
+        <LinksSection links={links} />
+      </main>
+    </Layout>
+  );
+};
+
+export default HomePage;
@@ -0,0 +1,15 @@
+import type { FC } from "hono/jsx";
+import Layout from "../layouts/layout";
+
+const NotFoundPage: FC = () => {
+  return (
+    <Layout title="Link Not Found!">
+      <main class="container" style="margin-top: 2em;">
+        <h3>Link Not Found!</h3>
+        <p>The requested link was not found.</p>
+      </main>
+    </Layout>
+  );
+};
+
+export default NotFoundPage;
@@ -0,0 +1,25 @@
+import type { FC } from "hono/jsx";
+
+const CreateLinkSection: FC = () => {
+  return (
+    <section>
+      <h3>Create New Link</h3>
+
+      <div id="create-link-res"></div>
+
+      <form
+        hx-post="/cebol"
+        hx-target="#create-link-res"
+        hx-disabled-elt="button[type=submit]"
+      >
+        <div class="grid">
+          <input type="text" name="alias" placeholder="url alias (optional)" />
+          <input type="text" name="url" placeholder="https://" required />
+        </div>
+        <button type="submit">Create</button>
+      </form>
+    </section>
+  );
+};
+
+export default CreateLinkSection;
@@ -0,0 +1,47 @@
+import type { FC } from "hono/jsx";
+import type { Link } from "../../types/link";
+
+type Props = {
+  links: Link[];
+};
+
+const LinksSection: FC<Props> = ({ links }) => {
+  return (
+    <section id="links">
+      <h3>Links</h3>
+
+      <div class="overflow-auto">
+        <table>
+          <tbody>
+            {links.map((link) => (
+              <tr>
+                <td>
+                  <a href={"/" + link.alias} target="_blank">
+                    {link.alias}
+                  </a>
+                </td>
+                <td style="width: 35%;">{link.url}</td>
+                <td style="width: 10%;">{link.clicks}</td>
+                <td style="width: 20%;">{link.createdAt}</td>
+                <td style="width: 100px;">
+                  <a
+                    href="#"
+                    style="color: red; margin-left: 1em;"
+                    hx-delete={`/cebol/${link.id}`}
+                    hx-confirm="Are you sure?"
+                    hx-target="#links"
+                    hx-swap="outerHTML"
+                  >
+                    Delete
+                  </a>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </section>
+  );
+};
+
+export default LinksSection;