init

2026-01-25 06:27:57 -06:00
parent fd27ac9c69
commit 7f3f266d52
24 changed files with 1298 additions and 210 deletions
--- a/src/apps/Jobs/Jobs.js
+++ b/src/apps/Jobs/Jobs.js
@@ -0,0 +1,101 @@
+import "./JobsSidebar.js"
+import "./JobsGrid.js"
+
+css(`
+    jobs- {
+        font-family: 'Bona';
+    }
+
+    jobs- input::placeholder {
+        font-family: 'Bona Nova';
+        font-size: 0.9em;
+        color: var(--accent);
+    }
+
+    input[type="checkbox"] {
+        appearance: none;        /* remove default style */
+        -webkit-appearance: none;
+        width: 1em;
+        height: 1em;
+        border: 1px solid var(--accent);
+    }
+
+    input[type="checkbox"]:checked {
+        background-color: var(--red);
+    }
+`)
+
+class Jobs extends Shadow {
+    jobs = [
+        {
+            title: "Austin Chapter Lead",
+            salary: "1% of Local Revenue",
+            company: "Hyperia",
+            city: "Austin",
+            state: "TX"
+        }
+    ]
+
+    render() {
+        ZStack(() => {
+            HStack(() => {
+                JobsSidebar()
+    
+                JobsGrid(this.jobs)
+            })
+            .width(100, "%")
+            .x(0).y(13, vh)
+
+            HStack(() => {
+                input("Search jobs... (Coming Soon!)", "45vw")
+                    .attr({
+                        "type": "text",
+                        "disabled": "true"
+                    })
+                    .fontSize(1.1, em)
+                    .paddingLeft(1.3, em)
+                    .background("transparent")
+                    .border("0.5px solid var(--divider)")
+                    .outline("none")
+                    .color("var(--accent)")
+                    .opacity(0.5)
+                    .borderRadius(10, px)
+                    .background("grey")
+                    .cursor("not-allowed")
+
+                button("+ Add Job")
+                    .width(7, em)
+                    .marginLeft(1, em)
+                    .borderRadius(10, px)
+                    .background("transparent")
+                    .border("0.3px solid var(--accent2)")
+                    .color("var(--accent)")
+                    .fontFamily("Bona Nova")
+                    .onHover(function (hovering) {
+                        if(hovering) {
+                            this.style.background = "var(--green)"
+
+                        } else {
+                            this.style.background = "transparent"
+
+                        }
+                    })
+                    .onClick((clicking) => {
+                        console.log(this, "clicked")
+                    })
+
+            })
+            .x(55, vw).y(4, vh)
+            .position("absolute")
+            .transform("translateX(-50%)")
+        })
+        .width(100, "%")
+        .height(100, "%")
+    }
+
+    connectedCallback() {
+        // Optional additional logic
+    }
+}
+
+register(Jobs)