init

ui/desktop/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)

ui/desktop/apps/Jobs/JobsGrid.js

@@ -0,0 +1,60 @@
+class JobsGrid extends Shadow {
+    jobs;
+
+    constructor(jobs) {
+        super()
+        this.jobs = jobs
+    }
+
+    boldUntilFirstSpace(text) {
+        const index = text.indexOf(' ');
+        if (index === -1) {
+            // No spaces — bold the whole thing
+            return `<b>${text}</b>`;
+        }
+        return `<b>${text.slice(0, index)}</b>${text.slice(index)}`;
+    }
+
+    render() {
+        VStack(() => {
+            h3("Results")
+            .marginTop(0.1, em)
+            .marginBottom(1, em)
+            .marginLeft(0.4, em)
+            .color("var(--accent2)")
+
+            if (this.jobs.length > 0) {
+                ZStack(() => {
+                    for (let i = 0; i < this.jobs.length; i++) {
+                        VStack(() => {
+                            p(this.jobs[i].title)
+                                .fontSize(1.2, em)
+                                .fontWeight("bold")
+                                .marginBottom(0.5, em)
+                            p(this.jobs[i].company)
+                            p(this.jobs[i].city + ", " + this.jobs[i].state)
+                                .marginBottom(0.5, em)
+                            p(this.boldUntilFirstSpace(this.jobs[i].salary))
+                        })
+                        .padding(1, em)
+                        .borderRadius(5, "px")
+                        .background("var(--darkbrown)")
+                    }
+                })
+                .display("grid")
+                .gridTemplateColumns("repeat(auto-fill, minmax(250px, 1fr))")
+                .gap(1, em)
+            } else {
+                p("No Jobs!")
+            }
+        })
+        .height(100, vh)
+        .paddingLeft(2, em)
+        .paddingRight(2, em)
+        .paddingTop(2, em)
+        .gap(0, em)
+        .width(100, "%")
+    }
+}
+
+register(JobsGrid)

ui/desktop/apps/Jobs/JobsSidebar.js

@@ -0,0 +1,26 @@
+class JobsSidebar extends Shadow {
+    render() {
+        VStack(() => {
+            h3("Location")
+            .color("var(--accent2)")
+            .marginBottom(0, em)
+
+            HStack(() => {
+                input("Location", "100%")
+                    .paddingLeft(3, em)
+                    .paddingVertical(0.75, em)
+                    .backgroundImage("/_/icons/locationPin.svg")
+                    .backgroundRepeat("no-repeat")
+                    .backgroundSize("18px 18px")
+                    .backgroundPosition("10px center")
+            })
+        })
+        .paddingTop(1, em)
+        .paddingLeft(3, em)
+        .paddingRight(3, em)
+        .gap(1, em)
+        .minWidth(10, vw)
+    }
+}
+
+register(JobsSidebar)