Working on the search
This commit is contained in:
parent
82f525ef38
commit
215ebdd9e3
26
src/Models/Component.js
Normal file
26
src/Models/Component.js
Normal file
|
@ -0,0 +1,26 @@
|
|||
import categories from "./data";
|
||||
|
||||
export default class Component {
|
||||
|
||||
constructor() {
|
||||
this.categories = categories;
|
||||
}
|
||||
|
||||
all() {
|
||||
return this.categories;
|
||||
}
|
||||
|
||||
whereCategory(category) {
|
||||
|
||||
if(this.isEmpty(category)) return this.categories;
|
||||
|
||||
let pattern = new RegExp(`^${category}`, 'i');
|
||||
|
||||
return this.categories.filter(category => category.name.match(pattern));
|
||||
}
|
||||
|
||||
isEmpty(string) {
|
||||
return string.length === 0;
|
||||
}
|
||||
|
||||
}
|
|
@ -1,17 +1,25 @@
|
|||
<template>
|
||||
<div class="min-h-screen container mx-auto px-6">
|
||||
<div class="py-16 text-center">
|
||||
<h1 class="text-xl md:text-2xl text-gray-800 font-medium">Discover new components. Build amazing things 🔥</h1>
|
||||
<h1 class="text-xl md:text-3xl text-gray-800 font-medium">Discover new components. Build amazing things
|
||||
🔥</h1>
|
||||
<div class="max-w-2xl mx-auto">
|
||||
<div>
|
||||
<input class="w-full bg-white mt-6 px-6 py-4 border border-gray-300 text-gray-800 rounded-lg focus:outline-none focus:bg-gray-100 placeholder-gray-700" type="text" placeholder="Search.." v-model="searchText">
|
||||
<input class="w-full bg-white mt-6 px-6 py-4 border border-gray-300 text-gray-800 rounded-lg focus:outline-none focus:bg-gray-100 placeholder-gray-700"
|
||||
type="text" placeholder="Search.." v-model="searchText">
|
||||
</div>
|
||||
<div class="flex items-center mt-5 flex justify-start">
|
||||
<div class="flex flex-col md:flex-row items-center justify-start mt-5 ">
|
||||
<span class="text-gray-700">Categories : </span>
|
||||
<a @click="searchText = ''" class="ml-1 text-gray-700 hover:text-gray-600 cursor-pointer font-light hover:underline">all</a>
|
||||
<span v-for="category in categories" :key="category.name">
|
||||
<a @click="searchText = category.name" class="ml-2 text-gray-700 hover:text-gray-600 cursor-pointer font-light hover:underline">{{ category.name }}</a>
|
||||
</span>
|
||||
<div class="mt-2 md:mt-0">
|
||||
<button @click="searchText = ''"
|
||||
class="ml-1 px-3 py-1 cursor-pointer hover:bg-gray-700 hover:text-gray-200 rounded text-sm focus:outline-none"
|
||||
:class="searchText.length === 0 ? 'bg-gray-700 text-gray-200' : 'bg-gray-200 text-gray-700'">all</button>
|
||||
<span v-for="category in categories" :key="category.name">
|
||||
<button @click="searchText = category.name"
|
||||
class="ml-2 px-3 py-1 cursor-pointer hover:bg-gray-700 hover:text-gray-200 rounded text-sm focus:outline-none"
|
||||
:class="category.name === searchText? 'bg-gray-700 text-gray-200' : 'bg-gray-200 text-gray-700'">{{ category.name }}</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -19,7 +27,8 @@
|
|||
<div class="w-full max-w-5xl mx-auto">
|
||||
<div class="mb-16" v-for="category in list" :key="category.name">
|
||||
<h1 class="text-2xl text-gray-800 font-semibold mb-6 capitalize" v-text="category.name"></h1>
|
||||
<component v-for="component in category.components" :key="component.name" :is="component.name" class="mb-10"></component>
|
||||
<component v-for="component in category.components" :key="component.name" :is="component.name"
|
||||
class="mb-10"></component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -34,7 +43,7 @@
|
|||
import ProductEvaluation from "./UI/Cards/ProductWithEvaluation";
|
||||
import Login from "./UI/Forms/Login";
|
||||
import Subscribe from "./UI/Forms/Subscribe";
|
||||
import componentList from "./../components";
|
||||
import Component from "../Models/Component";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
@ -49,25 +58,18 @@
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
categories: componentList,
|
||||
categories: [],
|
||||
searchText: '',
|
||||
component: new Component(),
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.categories = this.component.all();
|
||||
},
|
||||
computed: {
|
||||
list() {
|
||||
|
||||
if (this.searchText.length === 0) return componentList;
|
||||
|
||||
return this.search(this.searchText);
|
||||
return this.component.whereCategory(this.searchText);
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
search(string) {
|
||||
let pattern = new RegExp(`^${string}`, 'i');
|
||||
|
||||
return this.categories.filter(category => category.name.match(pattern));
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
Loading…
Reference in a new issue