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

Fix broken components

Browse Source
This commit is contained in:
khatabwedaa
2022-04-19 23:23:13 +02:00
parent 16613ef99e
commit 19511b9a10
5 changed files with 20 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
components/ui/Heros/CenterContent.vue
View File

@@ -24,13 +24,13 @@
<!-- Mobile Menu open: "block", Menu closed: "hidden" --> <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
<div :class="isOpen ? 'flex' : 'hidden lg:flex'" class="flex-col mt-4 space-y-2 lg:mt-0 lg:flex-row lg:-px-8 lg:space-y-0"> <div :class="isOpen ? 'flex' : 'hidden lg:flex'" class="flex-col mt-4 space-y-2 lg:mt-0 lg:flex-row lg:-px-8 lg:space-y-0">
<a class="mx-8 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500" <a class="text-gray-700 transition-colors duration-200 transform lg:mx-8 dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500"
href="#">Home</a> href="#">Home</a>
<a class="mx-8 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500" <a class="text-gray-700 transition-colors duration-200 transform lg:mx-8 dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500"
href="#">Components</a> href="#">Components</a>
<a class="mx-8 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500" <a class="text-gray-700 transition-colors duration-200 transform lg:mx-8 dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500"
href="#">Pricing</a> href="#">Pricing</a>
<a class="mx-8 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500" <a class="text-gray-700 transition-colors duration-200 transform lg:mx-8 dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500"
href="#">Contact</a> href="#">Contact</a>
</div> </div>
@@ -91,13 +91,13 @@
<!-- Mobile Menu open: "block", Menu closed: "hidden" --> <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
<div class="flex flex-col mt-4 space-y-2 lg:mt-0 lg:flex-row lg:-px-8 lg:space-y-0"> <div class="flex flex-col mt-4 space-y-2 lg:mt-0 lg:flex-row lg:-px-8 lg:space-y-0">
<a class="mx-8 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500" <a class="text-gray-700 transition-colors duration-200 transform lg:mx-8 dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500"
href="#">Home</a> href="#">Home</a>
<a class="mx-8 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500" <a class="text-gray-700 transition-colors duration-200 transform lg:mx-8 dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500"
href="#">Components</a> href="#">Components</a>
<a class="mx-8 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500" <a class="text-gray-700 transition-colors duration-200 transform lg:mx-8 dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500"
href="#">Pricing</a> href="#">Pricing</a>
<a class="mx-8 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500" <a class="text-gray-700 transition-colors duration-200 transform lg:mx-8 dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500"
href="#">Contact</a> href="#">Contact</a>
</div> </div>

2
components/ui/Heros/WithBGImage.vue
View File

@@ -69,7 +69,7 @@
</div> </div>
<!-- Mobile Menu open: "block", Menu closed: "hidden" --> <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
<div class="hidden -mx-4 lg:flex lg:items-center"> <div class="-mx-4 lg:flex lg:items-center">
<a href="#" class="block mx-4 mt-2 text-sm text-gray-700 capitalize lg:mt-0 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Web developers</a> <a href="#" class="block mx-4 mt-2 text-sm text-gray-700 capitalize lg:mt-0 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Web developers</a>
<a href="#" class="block mx-4 mt-2 text-sm text-gray-700 capitalize lg:mt-0 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Web Designers</a> <a href="#" class="block mx-4 mt-2 text-sm text-gray-700 capitalize lg:mt-0 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Web Designers</a>
<a href="#" class="block mx-4 mt-2 text-sm text-gray-700 capitalize lg:mt-0 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">UI/UX Designers</a> <a href="#" class="block mx-4 mt-2 text-sm text-gray-700 capitalize lg:mt-0 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">UI/UX Designers</a>

10
components/ui/Heros/WithImage.vue
View File

@@ -129,12 +129,12 @@
<!-- Mobile Menu open: "block", Menu closed: "hidden" --> <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
<div class="items-center lg:flex"> <div class="items-center lg:flex">
<div class="flex flex-col mt-4 space-y-8 lg:flex-row lg:items-center lg:mt-0 lg:space-y-0 lg:-px-8"> <div class="flex flex-col mt-4 space-y-8 lg:flex-row lg:items-center lg:mt-0 lg:space-y-0 lg:-px-8">
<a class="block mx-8 font-medium text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">glasses Search</a> <a class="block font-medium text-gray-700 dark:text-gray-200 lg:mx-8 hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">glasses Search</a>
<a class="block mx-8 font-medium text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">How it works!</a> <a class="block font-medium text-gray-700 dark:text-gray-200 lg:mx-8 hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">How it works!</a>
<a class="block mx-8 font-medium text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">Why us?</a> <a class="block font-medium text-gray-700 dark:text-gray-200 lg:mx-8 hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">Why us?</a>
<a class="block mx-8 font-medium text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">Contact</a> <a class="block font-medium text-gray-700 dark:text-gray-200 lg:mx-8 hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">Contact</a>
<button class="flex items-center px-5 py-2 text-sm font-medium tracking-wide text-center text-white capitalize transition-colors duration-200 transform bg-gray-700 rounded-lg hover:bg-gray-600 focus:outline-none focus:bg-gray-600"> <button class="flex items-center justify-center px-5 py-2 text-sm font-medium tracking-wide text-center text-white capitalize transition-colors duration-200 transform bg-gray-700 rounded-lg hover:bg-gray-600 focus:outline-none focus:bg-gray-600">
Get in touch Get in touch
</button> </button>
</div> </div>

45
layouts/default.vue
View File

@@ -1,52 +1,9 @@
<template> <template>
<div class="relative bg-white font-roboto"> <div class="relative bg-white font-roboto">
<Nuxt /> <Nuxt />
<transition
leave-active-class="transition duration-300 ease-in transform"
leave-class="translate-x-0 opacity-100"
leave-to-class="translate-x-20 opacity-0"
>
<div v-show="byMeCoffee" class="fixed inset-x-0 lg:inset-x-auto bottom-6 lg:right-8 xl:right-10 xl:bottom-16">
<div class="lg:w-[24rem] px-6 lg:px-0">
<div class="p-2 bg-blue-600 rounded-lg shadow-lg sm:p-3">
<div class="flex flex-wrap items-center justify-between">
<a target="_blank" href="https://www.buymeacoffee.com/khatabwedaa/e/54228" class="flex items-center flex-1 w-0">
<span class="flex p-2 bg-blue-800 rounded-lg">
<!-- Heroicon name: outline/speakerphone -->
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 15.546c-.523 0-1.046.151-1.5.454a2.704 2.704 0 01-3 0 2.704 2.704 0 00-3 0 2.704 2.704 0 01-3 0 2.704 2.704 0 00-3 0 2.704 2.704 0 01-3 0 2.701 2.701 0 00-1.5-.454M9 6v2m3-2v2m3-2v2M9 3h.01M12 3h.01M15 3h.01M21 21v-7a2 2 0 00-2-2H5a2 2 0 00-2 2v7h18zm-3-9v-2a2 2 0 00-2-2H8a2 2 0 00-2 2v2h12z" />
</svg>
</span>
<p class="ml-3 font-medium tracking-wide text-white truncate">
Support Meraki UI
</p>
</a>
<div class="flex-shrink-0 order-2 sm:order-3 sm:ml-2">
<button @click="byMeCoffee = false" type="button" class="flex p-2 -mr-1 rounded-md hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-white">
<span class="sr-only">Dismiss</span>
<!-- Heroicon name: outline/x -->
<svg class="w-4 h-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</transition>
</div> </div>
</template> </template>
<script> <script>
export default { export default {};
data() {
return {
byMeCoffee: true
}
}
};
</script> </script>

6
pages/components.vue
View File

@@ -32,8 +32,12 @@
<main id="main" class="flex flex-col flex-1 overflow-x-hidden lg:overflow-y-auto"> <main id="main" class="flex flex-col flex-1 overflow-x-hidden lg:overflow-y-auto">
<div class="container px-4 mx-auto sm:px-6 "> <div class="container px-4 mx-auto sm:px-6 ">
<div class="py-8 text-center md:py-16"> <div class="py-8 text-center md:py-16">
<a href="/" class="inline-flex items-center text-xl font-bold text-gray-700 transition-colors duration-200 transform xl:hidden md:text-2xl hover:text-blue-500">
<img class="w-8 h-8 mr-2" src="../assets/svg/logo-sidebar.svg" alt="logo"> Meraki <span class="text-blue-500">UI</span>
</a>
<h1 <h1
class="text-xl font-medium text-gray-700 sm:flex sm:items-center sm:justify-center lg:text-3xl" class="mt-2 text-xl font-medium text-gray-700 sm:flex sm:items-center sm:justify-center lg:text-3xl"
> >
<span>Discover new components. Build amazing things. </span> &nbsp; <span>Discover new components. Build amazing things. </span> &nbsp;