Adding search feature, it's not polished yet just a starting point
This commit is contained in:
parent
151331770e
commit
748daa7d62
26
src/components.js
Normal file
26
src/components.js
Normal file
|
@ -0,0 +1,26 @@
|
||||||
|
export default [
|
||||||
|
{
|
||||||
|
name: 'Alert',
|
||||||
|
components: [
|
||||||
|
{ name: 'notification-Pop' }
|
||||||
|
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Cards',
|
||||||
|
components: [
|
||||||
|
{ name: 'article' },
|
||||||
|
{ name: 'product' },
|
||||||
|
{ name: 'product-evaluation' },
|
||||||
|
{ name: 'testimonial' },
|
||||||
|
{ name: 'user-details' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Forms',
|
||||||
|
components: [
|
||||||
|
{ name: 'login' },
|
||||||
|
{ name: 'subscribe' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
|
@ -3,7 +3,8 @@
|
||||||
|
|
||||||
<div class="container mx-auto px-6 py-16 text-center">
|
<div class="container mx-auto px-6 py-16 text-center">
|
||||||
<h1 class="text-2xl md:text-3xl text-gray-800">Discover new components. Build amazing things 🔥</h1>
|
<h1 class="text-2xl md:text-3xl text-gray-800">Discover new components. Build amazing things 🔥</h1>
|
||||||
<input class="w-11/12 mt-6 px-6 py-4 bg-gray-200 border border-gray-300 text-gray-800 rounded-lg focus:outline-none focus:bg-white placeholder-gray-700" type="text" placeholder="search..">
|
<input class="w-11/12 mt-6 px-6 py-4 bg-gray-200 border border-gray-300 text-gray-800 rounded-lg focus:outline-none focus:bg-white placeholder-gray-700"
|
||||||
|
type="text" placeholder="search.." v-model="searchText">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
|
@ -19,24 +20,10 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="w-full md:flex-1">
|
<div class="w-full md:flex-1">
|
||||||
<div class="container mx-auto px-6">
|
<div class="container mx-auto px-6">
|
||||||
<div class="pb-8">
|
<div class="pb-8" v-for="category in list" :key="category.name">
|
||||||
<h1 class="text-2xl text-gray-800 font-semibold mb-6">Alert</h1>
|
<h1 class="text-2xl text-gray-800 font-semibold mb-6" v-text="category.name"></h1>
|
||||||
<notification-pop></notification-pop>
|
<component v-for="component in category.components" :key="component.name" :is="component.name"
|
||||||
</div>
|
class="mt-8"></component>
|
||||||
|
|
||||||
<div class="py-8">
|
|
||||||
<h1 class="text-2xl text-gray-800 font-semibold mb-6">Cards</h1>
|
|
||||||
<user-details></user-details>
|
|
||||||
<testimonial class="mt-10"></testimonial>
|
|
||||||
<artical class="mt-10"></artical>
|
|
||||||
<product class="mt-10"></product>
|
|
||||||
<product-evaluation class="mt-10"></product-evaluation>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="py-8">
|
|
||||||
<h1 class="text-2xl text-gray-800 font-semibold mb-6">Forms</h1>
|
|
||||||
<login></login>
|
|
||||||
<subscribe class="my-10"></subscribe>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -45,25 +32,48 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import NotificationPop from "./UI/Alert/NotificationPop";
|
import NotificationPop from "./UI/Alert/NotificationPop";
|
||||||
import UserDetails from "./UI/Cards/UserDetails";
|
import UserDetails from "./UI/Cards/UserDetails";
|
||||||
import Testimonial from "./UI/Cards/Testimonial";
|
import Testimonial from "./UI/Cards/Testimonial";
|
||||||
import Artical from "./UI/Cards/Artical";
|
import Article from "./UI/Cards/Article";
|
||||||
import Product from "./UI/Cards/Product";
|
import Product from "./UI/Cards/Product";
|
||||||
import ProductEvaluation from "./UI/Cards/ProductWithEvaluation";
|
import ProductEvaluation from "./UI/Cards/ProductWithEvaluation";
|
||||||
import Login from "./UI/Forms/Login";
|
import Login from "./UI/Forms/Login";
|
||||||
import Subscribe from "./UI/Forms/Subscribe";
|
import Subscribe from "./UI/Forms/Subscribe";
|
||||||
|
import componentList from "./../components";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
NotificationPop ,
|
NotificationPop,
|
||||||
UserDetails ,
|
UserDetails,
|
||||||
Testimonial ,
|
Testimonial,
|
||||||
Artical ,
|
Article,
|
||||||
Product ,
|
Product,
|
||||||
ProductEvaluation,
|
ProductEvaluation,
|
||||||
Login,
|
Login,
|
||||||
Subscribe
|
Subscribe
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
categories: componentList,
|
||||||
|
searchText: '',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
list() {
|
||||||
|
|
||||||
|
if (this.searchText.length === 0) return componentList;
|
||||||
|
|
||||||
|
return this.search(this.searchText);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
search(string) {
|
||||||
|
let pattern = new RegExp(`^${string}`, 'i');
|
||||||
|
|
||||||
|
return this.categories.filter(category => category.name.match(pattern));
|
||||||
|
}
|
||||||
|
},
|
||||||
}
|
}
|
||||||
}
|
|
||||||
</script>
|
</script>
|
Loading…
Reference in a new issue