beenull/merakiui
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Add js to components and remove href

Browse source
This commit is contained in:
khatabwedaa 2020-05-07 18:10:07 +02:00
parent e477b0ba44
commit ccb257c27b
13 changed files with 52 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/UI/Alert/NotificationPop.vue
View file

@ -7,7 +7,7 @@
<div class="mx-3">
<h2 class="text-xl font-semibold text-gray-800">Jane Doe</h2>
<p class="text-gray-600">Sara was replied on the <a href="#" class="text-blue-500 hover:text-blue-400 hover:underline">Upload Image</a>.</p>
<p class="text-gray-600">Sara was replied on the <a class="text-blue-500 hover:text-blue-400 hover:underline">Upload Image</a>.</p>
</div>
</div>
</div>

8
src/components/UI/Cards/ArticleCard.vue
View file

@ -3,11 +3,11 @@
<div class="max-w-2xl mx-auto px-8 py-4 bg-white rounded-lg shadow-md">
<div class="flex justify-between items-center">
<span class="font-light text-gray-600">Mar 10, 2019</span>
<a class="px-2 py-1 bg-gray-600 text-gray-100 font-bold rounded hover:bg-gray-500" href="#">Design</a>
<a class="px-2 py-1 bg-gray-600 text-gray-100 font-bold rounded hover:bg-gray-500">Design</a>
</div>
<div class="mt-2">
<a class="text-2xl text-gray-700 font-bold hover:text-gray-600 hover:underline" href="#">Accessibility tools for
<a class="text-2xl text-gray-700 font-bold hover:text-gray-600 hover:underline">Accessibility tools for
designers and developers</a>
<p class="mt-2 text-gray-600">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora expedita
dicta totam aspernatur doloremque. Excepturi iste iusto eos enim reprehenderit nisi, accusamus
@ -15,9 +15,9 @@
</div>
<div class="flex justify-between items-center mt-4">
<a class="text-blue-600 hover:underline" href="#">Read more</a>
<a class="text-blue-600 hover:underline">Read more</a>
<div>
<a class="flex items-center" href="#">
<a class="flex items-center">
<img class="mx-4 w-10 h-10 object-cover rounded-full hidden sm:block"
src="https://images.unsplash.com/photo-1502980426475-b83966705988?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=40&q=80"
alt="avatar">

4
src/components/UI/Cards/ArticleCardWithImage.vue
View file

@ -9,13 +9,13 @@
<div class="p-6">
<div>
<span class="text-blue-600 text-xs font-medium uppercase">Product</span>
<a class="block text-gray-800 font-semibold text-2xl mt-2 hover:text-gray-600 hover:underline" href="#">I Built A Successful Blog In One Year</a>
<a class="block text-gray-800 font-semibold text-2xl mt-2 hover:text-gray-600 hover:underline">I Built A Successful Blog In One Year</a>
<p class="text-sm text-gray-600 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Molestie parturient et sem ipsum volutpat vel. Natoque sem et aliquam mauris egestas quam volutpat viverra. In pretium nec senectus erat. Et malesuada lobortis.</p>
</div>
<div class="mt-4">
<div class="flex items-center">
<a href="#" class="flex items-center">
<a class="flex items-center">
<img class="h-10 h-10 object-cover rounded-full" src="https://images.unsplash.com/photo-1586287011575-a23134f797f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=48&q=60"
alt="Avatar">
<span class="mx-2 text-gray-700 font-semibold">Jone Doe</span>

2
src/components/UI/Cards/TestimonialCard.vue
View file

@ -14,7 +14,7 @@
</div>
<div class="flex justify-end mt-4">
<a href="#" class="text-xl font-medium text-indigo-500">John Doe</a>
<a class="text-xl font-medium text-indigo-500">John Doe</a>
</div>
</div>
</div>

2
src/components/UI/Cards/UserCard.vue
View file

@ -4,7 +4,7 @@
<img class="w-full h-56 object-cover" src="https://images.unsplash.com/photo-1542156822-6924d1a71ace?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="avatar">
<div class="py-5 text-center">
<a class="block text-2xl text-gray-800 font-bold" href="#">John Doe</a>
<a class="block text-2xl text-gray-800 font-bold">John Doe</a>
<span class="text-sm text-gray-700">Software Engineer</span>
</div>
</div>

4
src/components/UI/Forms/SignInForm.vue
View file

@ -14,7 +14,7 @@
<input class="w-full mt-2 py-2 px-4 bg-gray-100 text-gray-700 border border-gray-300 rounded block appearance-none placeholder-gray-500 focus:outline-none focus:bg-white" type="password" placeholder="Password">
</div>
<div class="flex justify-between items-center mt-6">
<a href="#" class="text-gray-600 text-sm hover:text-gray-500">Forget Password?</a>
<a class="text-gray-600 text-sm hover:text-gray-500">Forget Password?</a>
<button class="py-2 px-4 bg-gray-700 text-white rounded hover:bg-gray-600 focus:outline-none" type="button">
Login
</button>
@ -24,7 +24,7 @@
<div class="flex items-center justify-center py-4 bg-gray-100 text-center">
<h1 class="text-gray-600 text-sm">Dont`t have an account? </h1>
<a href="#" class="text-blue-600 font-bold mx-2 text-sm hover:text-blue-500">Register</a>
<a class="text-blue-600 font-bold mx-2 text-sm hover:text-blue-500">Register</a>
</div>
</div>
</div>

8
src/components/UI/Forms/SignInFormWithImage.vue
View file

@ -6,7 +6,7 @@
<div class="w-full p-8 lg:w-1/2">
<h2 class="text-2xl font-semibold text-gray-700 text-center">Brand</h2>
<p class="text-xl text-gray-600 text-center">Welcome back!</p>
<a href="#" class="flex items-center justify-center mt-4 text-white rounded-lg shadow-md hover:bg-gray-100">
<a class="flex items-center justify-center mt-4 text-white rounded-lg shadow-md hover:bg-gray-100">
<div class="px-4 py-3">
<svg class="h-6 w-6" viewBox="0 0 40 40">
<path d="M36.3425 16.7358H35V16.6667H20V23.3333H29.4192C28.045 27.2142 24.3525 30 20 30C14.4775 30 10 25.5225 10 20C10 14.4775 14.4775 9.99999 20 9.99999C22.5492 9.99999 24.8683 10.9617 26.6342 12.5325L31.3483 7.81833C28.3717 5.04416 24.39 3.33333 20 3.33333C10.7958 3.33333 3.33335 10.7958 3.33335 20C3.33335 29.2042 10.7958 36.6667 20 36.6667C29.2042 36.6667 36.6667 29.2042 36.6667 20C36.6667 18.8825 36.5517 17.7917 36.3425 16.7358Z"
@ -24,7 +24,7 @@
<div class="mt-4 flex items-center justify-between">
<span class="border-b w-1/5 lg:w-1/4"></span>
<a href="#" class="text-xs text-center text-gray-500 uppercase hover:underline">or login with email</a>
<a class="text-xs text-center text-gray-500 uppercase hover:underline">or login with email</a>
<span class="border-b w-1/5 lg:w-1/4"></span>
</div>
@ -37,7 +37,7 @@
<div class="mt-4">
<div class="flex justify-between">
<label class="block text-gray-700 text-sm font-bold mb-2">Password</label>
<a href="#" class="text-xs text-gray-500 hover:underline">Forget Password?</a>
<a class="text-xs text-gray-500 hover:underline">Forget Password?</a>
</div>
<input class="bg-gray-200 text-gray-700 border border-gray-300 rounded py-2 px-4 block w-full appearance-none focus:outline-none focus:bg-white"
type="password">
@ -50,7 +50,7 @@
<div class="mt-4 flex items-center justify-between">
<span class="border-b w-1/5 md:w-1/4"></span>
<a href="#" class="text-xs text-gray-500 uppercase hover:underline">or sign up</a>
<a class="text-xs text-gray-500 uppercase hover:underline">or sign up</a>
<span class="border-b w-1/5 md:w-1/4"></span>
</div>
</div>

23
src/components/UI/Heroes/HeroWithImage.vue
View file

@ -6,11 +6,11 @@
<div class="md:flex items-center justify-between">
<div class="flex justify-between items-center">
<div>
<a class="text-xl font-bold text-gray-800 hover:text-gray-700 md:text-2xl" href="#">Brand</a>
<a class="text-xl font-bold text-gray-800 hover:text-gray-700 md:text-2xl">Brand</a>
</div>
<div class="md:hidden">
<button type="button"
<button type="button" @click="isOpen = !isOpen"
class="block text-gray-700 hover:text-gray-600 focus:text-gray-600 focus:outline-none">
<svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
<path
@ -24,13 +24,10 @@
</div>
</div>
<div class="flex flex-col -mx-2 md:flex-row hidden md:block">
<a href="#"
class="py-2 px-2 text-sm text-gray-800 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Home</a>
<a href="#"
class="py-2 px-2 text-sm text-gray-800 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">About</a>
<a href="#"
class="py-2 px-2 text-sm text-gray-800 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Contact</a>
<div :class="!isOpen ? 'hidden' : ''" class="flex flex-col -mx-2 mt-2 md:mt-0 md:flex-row md:block">
<a class="py-2 px-2 text-sm text-gray-800 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Home</a>
<a class="py-2 px-2 text-sm text-gray-800 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">About</a>
<a class="py-2 px-2 text-sm text-gray-800 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Contact</a>
</div>
</div>
</div>
@ -38,7 +35,7 @@
<div class="bg-white relative">
<div class="container mx-auto px-6">
<div class="flex h-96">
<div class="flex h-64 md:h-96">
<div class="flex items-center lg:w-1/2">
<div class="absolute left-0 mx-6 max-w-md">
<h2 class="text-2xl font-semibold text-gray-800 md:text-3xl">
@ -50,12 +47,11 @@
</p>
<div class="flex mt-6">
<a href="#" class="px-3 py-2 block bg-gray-900 text-gray-200 text-xs font-semibold rounded hover:bg-gray-800">
<a class="px-3 py-2 block bg-gray-900 text-gray-200 text-xs font-semibold rounded hover:bg-gray-800">
Get Started
</a>
<a href="#"
class="mx-4 px-3 py-2 block bg-gray-300 text-gray-900 text-xs font-semibold rounded hover:bg-gray-400">
<a class="mx-4 px-3 py-2 block bg-gray-300 text-gray-900 text-xs font-semibold rounded hover:bg-gray-400">
Learn More
</a>
</div>
@ -79,6 +75,7 @@
data() {
return {
name: 'Hero With Image',
isOpen: false,
}
}
}

10
src/components/UI/Heroes/HeroWithPattern.vue
View file

@ -4,12 +4,12 @@
<div class="container mx-auto px-6">
<nav class="flex flex-col py-2 sm:flex-row sm:justify-between sm:items-center">
<div>
<a href="#" class="text-2xl font-semibold text-white hover:text-gray-300">Brand</a>
<a class="text-2xl font-semibold text-white hover:text-gray-300">Brand</a>
</div>
<div class="flex items-center -mx-2 mt-2 sm:mt-0">
<a href="#" class="px-3 py-1 border-2 font-semibold rounded text-sm text-white hover:bg-gray-700">Sign in</a>
<a href="#" class="mx-2 px-3 py-2 font-semibold bg-black rounded text-sm text-white hover:bg-gray-800">Sign up</a>
<a class="px-3 py-1 border-2 font-semibold rounded text-sm text-white hover:bg-gray-700">Sign In</a>
<a class="mx-2 px-3 py-2 font-semibold bg-black rounded text-sm text-white hover:bg-gray-800">Sign Up</a>
</div>
</nav>
@ -25,7 +25,7 @@
<div class="md:w-1/2 flex md:justify-end mt-8 md:mt-0">
<div class="max-w-sm bg-white rounded-lg">
<div class="p-5 text-center">
<h2 class="text-2xl font-semibold text-gray-700 fo">Sign in</h2>
<h2 class="text-2xl font-semibold text-gray-700 fo">Sign In</h2>
<form action="#">
<div class="mt-4">
@ -34,7 +34,7 @@
</div>
<div class="mt-4 flex items-center justify-between">
<a href="#" class="text-gray-600 text-sm hover:underline">Forget Password?</a>
<a class="text-gray-600 text-sm hover:underline">Forget Password?</a>
<button class="px-4 py-2 font-semibold bg-gray-900 rounded text-white hover:bg-gray-800">Login</button>
</div>

15
src/components/UI/Navbars/Navbar.vue
View file

@ -5,11 +5,11 @@
<div class="md:flex justify-between items-center">
<div class="flex justify-between items-center">
<div>
<a class="text-gray-800 text-xl font-bold hover:text-gray-700 md:text-2xl" href="#">Brand</a>
<a class="text-gray-800 text-xl font-bold hover:text-gray-700 md:text-2xl">Brand</a>
</div>
<div class="md:hidden">
<button type="button" class="block text-gray-800 hover:text-gray-700 focus:text-gray-700 focus:outline-none">
<button @click="isOpen = !isOpen" type="button" class="block text-gray-800 hover:text-gray-700 focus:text-gray-700 focus:outline-none">
<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24">
<path d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"/>
</svg>
@ -17,10 +17,10 @@
</div>
</div>
<div class="flex flex-col mt-3 md:flex-row md:mt-0">
<a class="text-gray-800 text-sm hover:font-medium md:mx-4" href="#">Home</a>
<a class="text-gray-800 text-sm hover:font-medium md:mx-4" href="#">Contact</a>
<a class="text-gray-800 text-sm hover:font-medium md:mx-4" href="#">About Us</a>
<div :class="!isOpen ? 'hidden' : ''" class="flex flex-col mt-3 md:flex-row md:mt-0 md:block">
<a class="text-gray-800 text-sm hover:font-medium md:mx-4">Home</a>
<a class="text-gray-800 text-sm hover:font-medium md:mx-4">Contact</a>
<a class="text-gray-800 text-sm hover:font-medium md:mx-4">About Us</a>
</div>
</div>
</div>
@ -32,7 +32,8 @@
export default {
data() {
return {
name: 'Navbar'
name: 'Navbar',
isOpen: false,
}
}
}

15
src/components/UI/Navbars/NavbarWithSearch.vue
View file

@ -4,11 +4,11 @@
<div class="container mx-auto px-6 py-3 md:flex">
<div class="flex justify-between items-center">
<div>
<a class="text-gray-800 text-xl font-bold hover:text-gray-700 md:text-2xl" href="#">Brand</a>
<a class="text-gray-800 text-xl font-bold hover:text-gray-700 md:text-2xl">Brand</a>
</div>
<div class="md:hidden">
<button type="button" class="block text-gray-800 hover:text-gray-700 focus:text-gray-700 focus:outline-none">
<button @click="isOpen = !isOpen" type="button" class="block text-gray-800 hover:text-gray-700 focus:text-gray-700 focus:outline-none">
<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24">
<path d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"/>
</svg>
@ -16,11 +16,11 @@
</div>
</div>
<div class="w-full md:flex md:items-center md:justify-between">
<div :class="!isOpen ? 'hidden' : ''" class="w-full md:flex md:items-center md:justify-between md:block">
<div class="flex flex-col -mx-4 px-2 py-3 md:flex-row md:mx-0 md:py-0">
<a href="#" class="py-1 px-2 text-gray-800 rounded text-sm hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Home</a>
<a href="#" class="py-1 px-2 text-gray-800 rounded text-sm hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">About</a>
<a href="#" class="py-1 px-2 text-gray-800 rounded text-sm hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Contact</a>
<a class="py-1 px-2 text-gray-800 rounded text-sm hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Home</a>
<a class="py-1 px-2 text-gray-800 rounded text-sm hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">About</a>
<a class="py-1 px-2 text-gray-800 rounded text-sm hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Contact</a>
</div>
<div>
@ -36,7 +36,8 @@
export default {
data() {
return {
name: 'Navbar With Search'
name: 'Navbar With Search',
isOpen: false,
}
}
}

2
src/components/UI/Null/ParagraphWithImage.vue
View file

@ -10,7 +10,7 @@
<h2 class="text-3xl text-gray-800 font-bold">Build Your New <span class="text-indigo-600">Idea</span></h2>
<p class="mt-4 text-gray-600">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem modi reprehenderit vitae exercitationem aliquid dolores ullam temporibus enim expedita aperiam mollitia iure consectetur dicta tenetur, porro consequuntur saepe accusantium consequatur.</p>
<div class="mt-8">
<a href="#" class="bg-gray-900 text-gray-100 px-5 py-3 font-semibold rounded">Start Now</a>
<a class="bg-gray-900 text-gray-100 px-5 py-3 font-semibold rounded">Start Now</a>
</div>
</div>
</div>

10
src/components/UI/Paginations/Pagination.vue
View file

@ -3,21 +3,21 @@
<div :id="name | toId">
<ul class="flex">
<li class="mx-1 px-3 py-2 bg-gray-200 text-gray-500 rounded-lg">
<a class="flex items-center font-bold" href="#">
<a class="flex items-center font-bold">
<span class="mx-1">previous</span>
</a>
</li>
<li class="mx-1 px-3 py-2 bg-gray-200 text-gray-700 hover:bg-gray-700 hover:text-gray-200 rounded-lg">
<a class="font-bold" href="#">1</a>
<a class="font-bold">1</a>
</li>
<li class="mx-1 px-3 py-2 bg-gray-200 text-gray-700 hover:bg-gray-700 hover:text-gray-200 rounded-lg">
<a class="font-bold" href="#">2</a>
<a class="font-bold">2</a>
</li>
<li class="mx-1 px-3 py-2 bg-gray-200 text-gray-700 hover:bg-gray-700 hover:text-gray-200 rounded-lg">
<a class="font-bold" href="#">3</a>
<a class="font-bold">3</a>
</li>
<li class="mx-1 px-3 py-2 bg-gray-200 text-gray-700 hover:bg-gray-700 hover:text-gray-200 rounded-lg">
<a class="flex items-center font-bold" href="#">
<a class="flex items-center font-bold">
<span class="mx-1">Next</span>
</a>
</li>