JSFiddle - React, Tailwind, and code Playground

by nerdycap007

HTML

<v-container class="pt-0 display-flex flex-column flex-grow-1">
      <div
        class="position-sticky top-0 z-index-4 grey lighten-5 pt-8 flex-auto"
      >
        <v-toolbar flat color="transparent" class="">
          <div class="display-flex align-items-end flex-nowrap w-100">
            <div>
              <div class="overline font-weight-medium grey--text pb-1">
                Organization
              </div>
              <!-- <organizations-menu
                :change-current-org="false"
                :show-actions="true"
                :selected="orgId"
                :btn-props="{ class: 'halo' }"
                @update:selected="handleOrgChange"
              /> -->
              {{ orgId }}
            </div>
            <v-spacer />
            <v-btn
              depressed
              :color="projectsColor.shadedColor"
              @click="openNewProjectDialog"
            >
              <v-icon left> $add </v-icon>
              <span>New Project</span>
            </v-btn>
          </div>
        </v-toolbar>
        <v-divider
          class="my-4 opacity-2"
          :class="[orgColor.shadedColor]"
          style="border-top-width: 1px"
        />
      </div>
      <v-toolbar flat color="transparent" class="flex-auto">
        <v-text-field
          v-model="searchStr"
          dense
          outlined
          clearable
          style="max-width: 250px"
          prepend-inner-icon="$search"
          placeholder="Search projects..."
          hide-details=""
          class="bg-white"
        />
        <v-spacer />
        <div class="mr-4">
          <v-switch
            v-model="showArchived"
            color="primary"
            hide-details=""
            dense
          >
            <template #label>
              <span class="overline font-weight-medium"> Show Archived </span>
            </template>
          </v-switch>
        </div>
        <!-- <sort-query-selector-menu
         ...

JavaScript

// import { reactive, toRefs } from "@vue/composition-api";
// import OrganizationsMenu from './components/OrganizationsMenu';
import ProjectCard from './components/ProjectCard';
import EmptyResultContent from "@/shared/components/misc/EmptyResultContent";
// import SortQuerySelectorMenu from './SortSelectorMenu'
import { mapMutations } from "vuex";
// import _ from "lodash";
// import { mapFields } from "@/../node_modules/vuex-map-fields/dist";

/**
 * [TODO]
 * THE FOLLOWING IS DUMMY DATA BEING USED.
 */
import dummyProjectsData from "./models/projectsOfOrg.js";
import routeColors from "./models/routeColors.js";
// import teamModuleData from "./models/TeamModule/teamModuleData.js";

export default {
  name: "TeamModule",
  components: {
    // SortQuerySelectorMenu,
    // OrganizationMenu,
    ProjectCard,
    EmptyResultContent,
  },
  mixins: [],
  inheritAttrs: false,
  props: {
    orgId: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      wallTitle: "Home",
      apiInProgress: false,
      showLoading: true,
      vScrollPos: 0,
      searchStr: "",
      showArchived: false,
      sortQueryActiveId: null,
      sortQuery: {},
      searchFieldKey: "name",
      emptyResultImage: require("@/shared/assets/empty.svg"),

      // [TODO] FOLLOWING IS DUMMY DATA
      routeColors,
    };
  },
  computed: {
    // ...mapGetters("projects", { findProjectsInStore: "find" }),
    // ...mapFields("interface", ["currentOrg"]),
    archivedQuery() {
      return this.showArchived ? {} : { isArchived: { $nin: [true] } };
    },
    scopeQuery() {
      return {
        orgId: {
          $in: [].concat(this.orgId),
        },
      };
    },
    strSearchQuery() {
      if (this.searchStr) {
        const query = {
          [this.searchFieldKey]: {
            $regex: this.searchStr.replace(/[|\\{}()[\]^$+*?.]/g, "\\$&"),
            $options: "i",
          },
        };
        return query;
      }
      return {};
    },
   ...