Mirroring/merakiui
1
0
Fork 0
mirror of https://github.com/bakateam/merakiui.git synced 2025-12-08 22:53:24 +00:00
Code Issues Projects Releases Wiki Activity

Remove search button and all section

Browse Source
This commit is contained in:
khatabwedaa
2020-05-20 19:53:45 +02:00
parent 8d71d8deb8
commit bbcd55e87c
2 changed files with 12 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Header.vue
View File

@@ -16,13 +16,16 @@
</div>
</div>
</nav>
<div class="bg-gray-900">
<div class="container mx-auto px-6">
<div class="md:flex md:h-96 py-16 md:py-0">
<div class="flex items-center w-full w-1/2">
<div class="max-w-sm text-white">
<div class="text-xs font-light">Simple UI Starter</div>
<h1 class="font-semibold text-2xl mt-2 text-white md:text-3xl">Meraki <span class="text-blue-400">UI</span>Components</h1>
<h1 class="font-semibold text-2xl mt-2 text-white md:text-3xl">Meraki <span class="text-blue-400">UI </span> Components</h1>
<p class="mt-2 text-gray-300">
Beautiful <a href="https://tailwindcss.com" class="text-blue-400 hover:underline font-normal">tailwindcss</a>
components that support RTL languages & fully responsive based on Flexbox & CSS Grid, built by
@@ -31,6 +34,7 @@
</p>
</div>
</div>
<div class="hidden justify-end items-end w-full w-1/2 md:flex">
<div class="max-w-md">
<img src="../assets/svg/undraw_moonlight_5ksn.svg" alt="moon">

25
src/components/Main.vue
View File

@@ -1,34 +1,25 @@
<template>
<div class="container mx-auto px-6 pb-12">
<div class="py-16 text-center">
<h1 class="text-xl md:text-3xl 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">
</div>
<div class="flex items-center justify-center mt-5 ">
<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 mt-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>
<button @click="searchText = category.name" class="ml-2 mt-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>
<p class="mt-8 text-gray-700">Header components require simple(Don't panic please😘) <a class="text-blue-600 hover:underline" href="https://gist.github.com/Miaababikir/052e31b345781c0f73180b80a285781b" target="_blank">configuration</a></p>
<p class="mt-8 text-gray-700">Header components require simple(don't panic please 😎) <a class="text-blue-600 hover:underline" href="https://gist.github.com/Miaababikir/052e31b345781c0f73180b80a285781b" target="_blank">configuration</a></p>
</div>
<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>
<view-component v-for="component in category.components" :key="component.name" :name="component.name" class="mt-6">
<div slot="component">
<div class="my-4">
@@ -75,8 +66,6 @@
// Footers
import FooterWithSubscribeForm from "./UI/Footers/FooterWithSubscribeForm";
import Component from "../Models/Component";
import ViewComponent from "./Utilities/ViewComponent";
@@ -119,7 +108,7 @@
data() {
return {
categories: [],
searchText: '',
searchText: 'Alert',
component: new Component(),
}
},