JSFiddle - React, Tailwind, and code Playground

by cgough

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css">

<filter-component params="filters: initialData.filters, items: initialData.items"></filter-component>
<template id="filter-template">
<div class="filter-list">
<label>Filter: </label>
  <select data-bind="options: filters, value: filter"></select>
    <div data-bind="text: 'Filter Applied: ' + filter()"></div>
    <div class="filtered-list" data-bind="foreach: filteredItems">     
      <span class="state-span" data-bind="css: icon"></span> 
      <span data-bind="text: name"></span>
    </div>    
</div>
</template>

CSS

.filtered-list {
  font-family: arial, helvetica, sans-serif;
  font-size: 13px;
}

JavaScript

var filterViewModel = function(data) {
  var self = this;
  self.filters = ko.observableArray(data.filters);
  self.filter = ko.observable('');
  self.items = ko.observableArray(data.items);
  self.filteredItems = ko.computed(function() {
    var filter = self.filter();
    if (!filter || filter == "All") {
      return self.items();
    } else {
      return ko.utils.arrayFilter(self.items(), function(i) {
        return i.type == filter;
      });
    }
  });
}

pageViewModel = function() {
var self = this;
 self.initialData = {
  filters: ["All","Active", "Inactive"],
  items: [{
      name: "User First Name",
      type: "Active",
      icon: "fas fa-check"
    },
    {
      name: "User Second Name",
      type: "Active",
      icon: "fas fa-check"
    },
    {
      name: "User Third Name",
      type: "Inactive",
      icon: "fas fa-times"
    },
    {
      name: "User Fourth Name",
      type: "Inactive",
      icon: "fas fa-times"
    }
  ]
};
}

ko.components.register('filter-component', {
  viewModel: filterViewModel,
  template: {element: 'filter-template'}
});

ko.applyBindings(new pageViewModel());