Add filter components

src/components/filterBtn.ts

@@ -1,46 +1,45 @@
+const filterBtnTemplate = document.createElement('template');
+
+filterBtnTemplate.innerHTML = `
+<style>
+	.filter {
+		all: unset;
+		padding: 10px;
+		margin: 10px 5px;
+		min-width: 70px;
+		background-color: lightgrey;
+		cursor: pointer;
+		transition: background 200ms;
+
+	}
+	.filter:active {
+		background-color: black !important;
+		color: white;
+	}
+	:host([active]) .filter {
+		background-color: lightslategrey;
+		color: white;
+	}
+</style>
+<button class="filter">Empty</button>
+`;
+
 // Create a class for the element
-class Message extends HTMLElement {
+class FilterBtn extends HTMLElement {
 	constructor() {
 		// Always call super first in constructor
 		super();
 
 		// Create a shadow root
 		const shadow = this.attachShadow({ mode: 'open' });
-
-		// Create wrapper
-		const wrapper = document.createElement('div');
-		wrapper.setAttribute('class', 'wrapper');
-
-		const info = document.createElement('span');
-		info.setAttribute('class', 'filterName');
+		shadow.appendChild(filterBtnTemplate.content.cloneNode(true));
 
 		// Take attribute content and put it inside the info span
-		const text = this.getAttribute('data-text');
-		info.textContent = text;
-
-		wrapper.appendChild(info);
-
-		// Create some CSS to apply to the shadow dom
-		const style = document.createElement('style');
-		console.log('Style connected:', style.isConnected);
-
-		style.textContent = `
-        .wrapper {
-			position: relative;
-        }
-
-        .info {
-			position: relative;
-        }
-		`;
-
-		// Attach the created elements to the shadow dom
-		shadow.appendChild(style);
-		shadow.appendChild(wrapper);
-		wrapper.appendChild(info);
-		console.log('Style connected:', style.isConnected);
+		if (typeof this.getAttribute('filter') === 'string') {
+			shadow.querySelector('.filter')!.textContent = this.getAttribute('filter');
+		}
 	}
 }
 
 // Define the new element
-customElements.define('kbsb-message', Message);
+customElements.define('kbsb-filter-button', FilterBtn);

src/components/filters.ts

@@ -0,0 +1,39 @@
+// use a template instead of multiple createElement
+const filterTemplate = document.createElement('template');
+
+filterTemplate.innerHTML = `
+<style>
+	.filterWrapper {
+		max-width: -var(--max-width, 800px);
+		margin: 20px auto 40px auto;
+		text-align: center;
+	}
+</style>
+
+<div class="filterWrapper">
+	<kbsb-filter-button filter="Javascript" active></kbsb-filter-button>
+    <kbsb-filter-button filter="Golang"></kbsb-filter-button>
+    <kbsb-filter-button filter="Rust"></kbsb-filter-button>
+    <kbsb-filter-button filter="Java"></kbsb-filter-button>
+    <kbsb-filter-button filter="Typescript" active></kbsb-filter-button>
+    <kbsb-filter-button></kbsb-filter-button>
+    <kbsb-filter-button></kbsb-filter-button>
+    <kbsb-filter-button></kbsb-filter-button>
+    <kbsb-filter-button></kbsb-filter-button>
+</div>
+`;
+
+// create a class for the element
+class Filters extends HTMLElement {
+	constructor() {
+		// always call super first in constructor
+		super();
+
+		// create a shadow root
+		const shadow = this.attachShadow({ mode: 'open' });
+		shadow.appendChild(filterTemplate.content.cloneNode(true));
+	}
+}
+
+// Define the new element
+customElements.define('kbsb-filters', Filters);

src/main.ts

@@ -2,7 +2,7 @@
 import data from './data/profiles';
 
 // import app logic
-import appLogic from './app/app';
+import appLogic from './app/app'; // or import './app/app'; ??
 appLogic(data);
 
 // global styles
@@ -15,9 +15,12 @@ import './components/kaboom/footerShebang';
 import './components/filterBtn';
 import './components/profile';
 import './components/profiles';
+import './components/filterBtn';
+import './components/filters';
 
 const app = document.querySelector<HTMLDivElement>('#app')!;
 
 app.innerHTML = `
+<kbsb-filters></kbsb-filters>
 <kbsb-profiles></kbsb-profiles>
 `;