JSFiddle - React, Tailwind, and code Playground

Data driven states

by Travis Almand

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<div id="app">
	<div class="panel">
		<button @click="changeState('', $el)">default</button>
		<button @click="changeState('good', $el)">good</button>
		<button @click="changeState('error', $el)">error</button>
	</div>
  <card-component></card-component>
  <card-component></card-component>
  <card-component></card-component>
</div>

SCSS

:root {
  --bg-color: white;
  --border-color: black;
  --color: black;
}

#app {
	display: flex;
	flex-wrap: wrap;
	height: 100vh;
	justify-content: center;
	width: 100vw;
	
	.panel {
		text-align: center;
		width: 100%;
	}
	
	.card {
		align-items: center;
		background-color: var(--bg-color);
		border: 2px solid var(--border-color);
		border-radius: 10px;
    color: var(--color);
		display: flex;
    flex-direction: column;
		height: 200px;
		justify-content: center;
    margin: 10px;
    transition: 0.25s;
		width: 200px;
	}
  
  .panel {
    margin-top: 10px;
  }
}

Vue

console.clear();

const states = {
	good: {
		'--bg-color': 'green',
		'--border-color': 'darkgreen',
		'--color': 'white'
	},
	error: {
		'--bg-color': 'red',
		'--border-color': 'darkred',
		'--color': 'white'
	}
}

Vue.component('card-component', {
	name: 'card-component',
  
	template: `
  	<div class="card">
      <div class="panel">
      	<button @click="$root.changeState('', $el)">default</button>
        <button @click="$root.changeState('good', $el)">good</button>
        <button @click="$root.changeState('error', $el)">error</button>
      </div>
    </div>
  `
});

new Vue({
  el: "#app",
	
	methods: {
		changeState: function (state, el) {
			if (state) {
        Object.entries(states[state]).forEach(entry => {
          el.style.setProperty(entry[0], entry[1]);
        });
      } else {
      	el.style = '';
      }
		}
	}
})