create-aziz-app 2.0.2 → 2.0.4

package/template/styles/tailwind.css

@@ -0,0 +1,122 @@
+/* ============================================================
+   TAILWIND CSS STYLES
+   Custom styles when using Tailwind CSS
+   ============================================================ */
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Reset */
+@layer base {
+    * {
+        @apply m-0 p-0 box-border;
+    }
+
+    body {
+        @apply min-h-screen flex flex-col bg-gray-50 text-gray-900;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+            'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+            sans-serif;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
+
+    code {
+        font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+    }
+}
+
+/* Custom Components */
+@layer components {
+    /* Page wrapper */
+    #root {
+        @apply flex-1 py-10 px-8 max-w-4xl w-full mx-auto;
+    }
+
+    /* Card */
+    .card {
+        @apply bg-white rounded-lg p-6 shadow-md mb-5;
+    }
+
+    /* Buttons */
+    .btn {
+        @apply inline-block py-2.5 px-6 border-0 rounded-lg cursor-pointer text-base transition-opacity;
+    }
+
+    .btn:hover {
+        @apply opacity-85;
+    }
+
+    .btn-primary {
+        @apply bg-primary text-dark font-bold;
+    }
+
+    .btn-danger {
+        @apply bg-red-500 text-white;
+    }
+
+    .btn-grey {
+        @apply bg-gray-300 text-gray-800;
+    }
+
+    /* Counter */
+    .count-display {
+        @apply text-6xl font-bold text-gray-800 my-4 text-center;
+    }
+
+    .counter-actions {
+        @apply flex gap-3 justify-center mt-2;
+    }
+
+    /* Forms */
+    form {
+        @apply flex flex-col gap-3;
+    }
+
+    input,
+    textarea {
+        @apply py-2.5 px-3.5 border border-gray-300 rounded-lg text-base outline-none transition-colors;
+    }
+
+    input:focus,
+    textarea:focus {
+        @apply border-primary ring-2 ring-primary ring-opacity-50;
+    }
+
+    textarea {
+        @apply resize-y min-h-[100px];
+    }
+
+    /* 404 */
+    .not-found {
+        @apply text-center py-16;
+    }
+
+    .not-found h1 {
+        @apply text-8xl text-primary;
+    }
+}
+
+/* Custom Utilities */
+@layer utilities {
+    .text-primary {
+        color: #61dafb;
+    }
+
+    .bg-primary {
+        background-color: #61dafb;
+    }
+
+    .text-dark {
+        color: #282c34;
+    }
+
+    .bg-dark {
+        background-color: #282c34;
+    }
+
+    .border-primary {
+        border-color: #61dafb;
+    }
+}

package/app.js

@@ -1,88 +0,0 @@
-/** @jsx h */
-
-// ==============================
-//  h() — our own createElement
-//  Babel compiles JSX like <div class="x"> into h("div", { class: "x" }, ...children)
-//  This function turns that into a real DOM element
-// ==============================
-function h(tag, props, ...children) {
-    // If tag is a function (a component like Header), call it
-    if (typeof tag === "function") {
-        return tag(props, ...children);
-    }
-
-    // Create the real DOM element
-    const el = document.createElement(tag);
-
-    // Apply props (class, onClick, etc.)
-    if (props) {
-        for (let key in props) {
-            if (key.startsWith("on")) {
-                // onClick -> click event
-                const eventName = key.slice(2).toLowerCase();
-                el.addEventListener(eventName, props[key]);
-            } else if (key === "className") {
-                el.className = props[key];
-            } else {
-                el.setAttribute(key, props[key]);
-            }
-        }
-    }
-
-    // Append children (text or elements)
-    for (let child of children) {
-        if (child === null || child === undefined) continue;
-        if (typeof child === "string" || typeof child === "number") {
-            el.appendChild(document.createTextNode(child));
-        } else {
-            el.appendChild(child);
-        }
-    }
-
-    return el;
-}
-
-
-// ==============================
-//  STATE
-// ==============================
-let state = {
-    count: 0
-};
-
-
-// ==============================
-//  RENDER
-// ==============================
-function render() {
-    const root = document.getElementById("root");
-    root.innerHTML = "";
-    root.appendChild(Header());
-    root.appendChild(Counter());
-    root.appendChild(Footer());
-}
-
-
-// ==============================
-//  STATE UPDATER FUNCTIONS
-// ==============================
-function increment() {
-    state.count = state.count + 1;
-    render();
-}
-
-function decrement() {
-    state.count = state.count - 1;
-    render();
-}
-
-function reset() {
-    state.count = 0;
-    render();
-}
-
-
-// ==============================
-//  FIRST RENDER
-// ==============================
-render();

package/template/pages/NewPage.jsx

@@ -1,39 +0,0 @@
-/** @jsx h */
-
-// Register this page at route "home" → "#/"
-registerPage("NewPage", NewPage);
-
-function NewPage() {
-    return (
-        <div>
-            <h1>Welcome Home 👋</h1>
-
-            <div class="card">
-                <h2>Global State Counter</h2>
-                <p>This uses the global state. Click the buttons to update it.</p>
-
-                <div class="count-display">{state.count}</div>
-
-                <div class="counter-actions">
-                    <button class="btn btn-danger"  onClick={() => setState({ count: state.count - 1 })}>−</button>
-                    <button class="btn btn-primary" onClick={() => setState({ count: state.count + 1 })}>+</button>
-                    <button class="btn btn-grey"    onClick={() => setState({ count: 0 })}>Reset</button>
-                </div>
-            </div>
-
-            <div class="card">
-                <h2>File-based Routing</h2>
-                <p>
-                    Each file in <strong>pages/</strong> is a route — just like Next.js.
-                    Add a new file, register it in app.js, and it's a new page.
-                </p>
-                <button class="btn btn-primary" onClick={() => navigate("test")}>
-                    Go to Test Page →
-                </button>
-                <button class="btn btn-primary" onClick={() => navigate("about")}>
-                    Go to About →
-                </button>
-            </div>
-        </div>
-    );
-}