fix: creates form for user media preferences

assets/bootstrap.js

@@ -1,11 +1,14 @@
 import { startStimulusApp } from '@symfony/stimulus-bundle';
-import Popover from '@stimulus-components/popover'
-import Dialog from '@stimulus-components/dialog'
-import Dropdown from '@stimulus-components/dropdown'
-import 'animate.css'
+import Popover from '@stimulus-components/popover';
+import Dialog from '@stimulus-components/dialog';
+import Dropdown from '@stimulus-components/dropdown';
+import 'animate.css';
+import Brock from './components/brock.js';
 
 const app = startStimulusApp();
 // register any custom, 3rd party controllers here
 app.register('popover', Popover);
 app.register('dialog', Dialog);
 app.register('dropdown', Dropdown);
+
+customElements.define('brock-app', Brock);

assets/components/brock.js

@@ -0,0 +1,25 @@
+export default class Brock extends HTMLElement {
+    constructor() {
+        super();
+    }
+    connectedCallback() {
+        this.render();
+    }
+
+    render() {
+        this.innerHTML = `
+            Yo, yo, yo! Waddup ${this.name}, doe, it's Brocky fresh!
+        `;
+    }
+
+    // attribute change
+    attributeChangedCallback(property, oldValue, newValue) {
+        if (oldValue === newValue) return;
+        this[ property ] = newValue;
+        this.render();
+    }
+
+    static get observedAttributes() {
+        return ['name'];
+    }
+}

assets/styles/app.css

@@ -65,7 +65,7 @@ dialog[data-dialog-target="dialog"][closing] {
 }
 
 .text-input {
-    @apply bg-gray-50 text-gray-50 p-1 bg-transparent border-b-2 border-orange-400
+    @apply bg-gray-50 text-gray-50 px-2 py-1 bg-transparent border-b-2 border-orange-400
 }
 
 .submit-button {