mirror of
https://github.com/bakateam/merakiui.git
synced 2025-12-09 07:03:24 +00:00
wip
This commit is contained in:
khatabwedaa
@@ -8,7 +8,7 @@
|
||||
</div>
|
||||
|
||||
<div class="max-w-2xl mx-auto mt-6">
|
||||
<span v-for="route in routes" :key="route.path">
|
||||
<span class="ml-2" v-for="route in routes" :key="route.path">
|
||||
<router-link class="inline-block px-3 py-1 rounded text-sm font-medium bg-gray-200 text-gray-700 cursor-pointer hover:bg-gray-700 hover:text-gray-200" :to="route.path">
|
||||
{{route.name}}
|
||||
</router-link>
|
||||
|
||||
38
src/components/categories/Cards.vue
Normal file
38
src/components/categories/Cards.vue
Normal file
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<div class="w-full max-w-5xl mx-auto my-10">
|
||||
<h1 class="text-2xl text-gray-800 font-semibold capitalize mb-6">Cards</h1>
|
||||
|
||||
<Article></Article>
|
||||
<article-with-image></article-with-image>
|
||||
<product></product>
|
||||
<product-with-evaluation></product-with-evaluation>
|
||||
<simple-product></simple-product>
|
||||
<testimonial></testimonial>
|
||||
<user></user>
|
||||
<user-with-details></user-with-details>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Article from "../ui/Cards/Article";
|
||||
import ArticleWithImage from "../ui/Cards/ArticleWithImage";
|
||||
import Product from "../ui/Cards/Product";
|
||||
import ProductWithEvaluation from "../ui/Cards/ProductWithEvaluation";
|
||||
import SimpleProduct from "../ui/Cards/SimpleProduct";
|
||||
import Testimonial from "../ui/Cards/Testimonial";
|
||||
import User from "../ui/Cards/User";
|
||||
import UserWithDetails from "../ui/Cards/UserWithDetails";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Article,
|
||||
ArticleWithImage,
|
||||
Product,
|
||||
ProductWithEvaluation,
|
||||
SimpleProduct,
|
||||
Testimonial,
|
||||
User,
|
||||
UserWithDetails
|
||||
},
|
||||
};
|
||||
</script>
|
||||
26
src/components/categories/Forms.vue
Normal file
26
src/components/categories/Forms.vue
Normal file
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<div class="w-full max-w-5xl mx-auto my-10">
|
||||
<h1 class="text-2xl text-gray-800 font-semibold capitalize mb-6">Forms</h1>
|
||||
|
||||
<inputs></inputs>
|
||||
<newsletter></newsletter>
|
||||
<sign-in></sign-in>
|
||||
<sign-in-with-image></sign-in-with-image>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Inputs from "../ui/Forms/Inputs";
|
||||
import Newsletter from "../ui/Forms/Newsletter";
|
||||
import SignIn from "../ui/Forms/SignIn";
|
||||
import SignInWithImage from "../ui/Forms/SignInWithImage";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Inputs,
|
||||
Newsletter,
|
||||
SignIn,
|
||||
SignInWithImage
|
||||
},
|
||||
};
|
||||
</script>
|
||||
57
src/components/ui/Cards/Article.vue
Normal file
57
src/components/ui/Cards/Article.vue
Normal file
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<view-component :name="name" :code="code">
|
||||
<div class="px-3 py-6" slot="component">
|
||||
<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 text-sm">Mar 10, 2019</span>
|
||||
<a class="px-3 py-1 bg-gray-600 text-gray-100 text-sm font-bold rounded hover:bg-gray-500">Design</a>
|
||||
</div>
|
||||
|
||||
<div class="mt-2">
|
||||
<a href="#" 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 delectus nihil quis facere in modi ratione libero!</p>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between items-center mt-4">
|
||||
<a href="#" class="text-blue-600 hover:underline">Read more</a>
|
||||
|
||||
<div 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">
|
||||
<a class="text-gray-700 font-bold cursor-pointer">Khatab wedaa</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</view-component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Article',
|
||||
code: `
|
||||
<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 text-sm">Mar 10, 2019</span>
|
||||
<a class="px-3 py-1 bg-gray-600 text-gray-100 text-sm font-bold rounded hover:bg-gray-500">Design</a>
|
||||
</div>
|
||||
|
||||
<div class="mt-2">
|
||||
<a href="#" 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 delectus nihil quis facere in modi ratione libero!</p>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between items-center mt-4">
|
||||
<a href="#" class="text-blue-600 hover:underline">Read more</a>
|
||||
|
||||
<div 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">
|
||||
<a class="text-gray-700 font-bold cursor-pointer">Khatab wedaa</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,38 +0,0 @@
|
||||
<template>
|
||||
<div class="px-3" :id="name | toId">
|
||||
<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 text-sm">Mar 10, 2019</span>
|
||||
<a class="px-3 py-1 bg-gray-600 text-gray-100 text-sm font-bold rounded hover:bg-gray-500">Design</a>
|
||||
</div>
|
||||
|
||||
<div class="mt-2">
|
||||
<a href="#" 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
|
||||
delectus nihil quis facere in modi ratione libero!</p>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between items-center mt-4">
|
||||
<a href="#" class="text-blue-600 hover:underline">Read more</a>
|
||||
<div 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">
|
||||
<a class="text-gray-700 font-bold cursor-pointer">Khatab wedaa</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Article Card',
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,39 +0,0 @@
|
||||
<template>
|
||||
<div class="px-3" :id="name | toId">
|
||||
<div class="max-w-2xl mx-auto bg-white overflow-hidden shadow-md rounded-lg">
|
||||
<div>
|
||||
<img class="w-full h-64 object-cover" src="https://images.unsplash.com/photo-1550439062-609e1531270e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
|
||||
alt="Article">
|
||||
</div>
|
||||
|
||||
<div class="p-6">
|
||||
<div>
|
||||
<span class="text-blue-600 text-xs font-medium uppercase">Product</span>
|
||||
<a href="#" 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">
|
||||
<div 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">
|
||||
<a href="#" class="mx-2 text-gray-700 font-semibold">Jone Doe</a>
|
||||
</div>
|
||||
<span class="mx-1 text-gray-600 text-xs">21 SEP 2015</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Article Card With Image'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
59
src/components/ui/Cards/ArticleWithImage.vue
Normal file
59
src/components/ui/Cards/ArticleWithImage.vue
Normal file
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<view-component :name="name" :code="code">
|
||||
<div class="px-3 py-6" slot="component">
|
||||
<div class="max-w-2xl mx-auto bg-white overflow-hidden shadow-md rounded-lg">
|
||||
<img class="w-full h-64 object-cover" src="https://images.unsplash.com/photo-1550439062-609e1531270e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Article">
|
||||
|
||||
<div class="p-6">
|
||||
<div>
|
||||
<span class="text-blue-600 text-xs font-medium uppercase">Product</span>
|
||||
<a href="#" 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">
|
||||
<div 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">
|
||||
<a href="#" class="mx-2 text-gray-700 font-semibold">Jone Doe</a>
|
||||
</div>
|
||||
<span class="mx-1 text-gray-600 text-xs">21 SEP 2015</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</view-component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Article With Image',
|
||||
code: `
|
||||
<div class="max-w-2xl mx-auto bg-white overflow-hidden shadow-md rounded-lg">
|
||||
<img class="w-full h-64 object-cover" src="https://images.unsplash.com/photo-1550439062-609e1531270e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Article">
|
||||
|
||||
<div class="p-6">
|
||||
<div>
|
||||
<span class="text-blue-600 text-xs font-medium uppercase">Product</span>
|
||||
<a href="#" 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">
|
||||
<div 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">
|
||||
<a href="#" class="mx-2 text-gray-700 font-semibold">Jone Doe</a>
|
||||
</div>
|
||||
<span class="mx-1 text-gray-600 text-xs">21 SEP 2015</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
30
src/components/ui/Cards/Product.vue
Normal file
30
src/components/ui/Cards/Product.vue
Normal file
@@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<view-component :name="name" :code="code">
|
||||
<div class="px-3 py-6" slot="component">
|
||||
<div class="max-w-xs mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
|
||||
<div class="px-4 py-2">
|
||||
<h1 class="text-gray-900 font-bold text-3xl uppercase">NIKE AIR</h1>
|
||||
<p class="text-gray-600 text-sm mt-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi quos quidem sequi illum facere recusandae voluptatibus</p>
|
||||
</div>
|
||||
|
||||
<img class="h-48 w-full object-cover mt-2" src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=320&q=80" alt="NIKE AIR">
|
||||
|
||||
<div class="flex items-center justify-between px-4 py-2 bg-gray-900">
|
||||
<h1 class="text-gray-200 font-bold text-lg">$129</h1>
|
||||
<button class="px-2 py-1 bg-gray-200 text-xs text-gray-900 font-semibold rounded uppercase hover:bg-gray-400 focus:bg-gray-400">Add to cart</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</view-component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Product',
|
||||
code: ``,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,29 +0,0 @@
|
||||
<template>
|
||||
<div class="px-3" :id="name | toId">
|
||||
<div class="max-w-xs mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
|
||||
<div class="px-4 py-2">
|
||||
<h1 class="text-gray-900 font-bold text-3xl uppercase">NIKE AIR</h1>
|
||||
<p class="text-gray-600 text-sm mt-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi quos quidem sequi illum facere recusandae voluptatibus</p>
|
||||
</div>
|
||||
|
||||
<img class="h-48 w-full object-cover mt-2"
|
||||
src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=320&q=80"
|
||||
alt="NIKE AIR">
|
||||
|
||||
<div class="flex items-center justify-between px-4 py-2 bg-gray-900">
|
||||
<h1 class="text-gray-200 font-bold text-lg">$129</h1>
|
||||
<button class="px-2 py-1 bg-gray-200 text-xs text-gray-900 font-semibold rounded uppercase hover:bg-gray-400 focus:bg-gray-400">Add to cart</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Product Card',
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,45 +0,0 @@
|
||||
<template>
|
||||
<div class="px-3" :id="name | toId">
|
||||
<div class="flex max-w-md mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
|
||||
<div class="w-1/3 bg-cover"
|
||||
style="background-image: url('https://images.unsplash.com/photo-1494726161322-5360d4d0eeae?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80')"></div>
|
||||
|
||||
<div class="w-2/3 p-4 md:p-4">
|
||||
<h1 class="text-gray-900 font-bold text-2xl">Backpack</h1>
|
||||
<p class="mt-2 text-gray-600 text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit In odit</p>
|
||||
<div class="flex item-center mt-2">
|
||||
<svg class="w-5 h-5 fill-current text-gray-700" viewBox="0 0 24 24">
|
||||
<path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
|
||||
</svg>
|
||||
<svg class="w-5 h-5 fill-current text-gray-700" viewBox="0 0 24 24">
|
||||
<path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
|
||||
</svg>
|
||||
<svg class="w-5 h-5 fill-current text-gray-700" viewBox="0 0 24 24">
|
||||
<path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
|
||||
</svg>
|
||||
<svg class="w-5 h-5 fill-current text-gray-500" viewBox="0 0 24 24">
|
||||
<path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
|
||||
</svg>
|
||||
<svg class="w-5 h-5 fill-current text-gray-500" viewBox="0 0 24 24">
|
||||
<path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex item-center justify-between mt-3">
|
||||
<h1 class="text-gray-700 font-bold text-lg md:text-xl">$220</h1>
|
||||
<button class="px-2 py-1 bg-gray-800 text-white text-xs font-bold uppercase rounded hover:bg-gray-700 focus:outline-none focus:bg-gray-700">Add to Cart</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Product Card With Evaluation',
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
90
src/components/ui/Cards/ProductWithEvaluation.vue
Normal file
90
src/components/ui/Cards/ProductWithEvaluation.vue
Normal file
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<view-component :name="name" :code="code">
|
||||
<div class="px-3 py-6" slot="component">
|
||||
<div class="flex max-w-md mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
|
||||
<div class="w-1/3 bg-cover" style="background-image: url('https://images.unsplash.com/photo-1494726161322-5360d4d0eeae?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80')"></div>
|
||||
|
||||
<div class="w-2/3 p-4 md:p-4">
|
||||
<h1 class="text-gray-900 font-bold text-2xl">Backpack</h1>
|
||||
|
||||
<p class="mt-2 text-gray-600 text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit In odit</p>
|
||||
|
||||
<div class="flex item-center mt-2">
|
||||
<svg class="w-5 h-5 fill-current text-gray-700" viewBox="0 0 24 24">
|
||||
<path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
|
||||
</svg>
|
||||
|
||||
<svg class="w-5 h-5 fill-current text-gray-700" viewBox="0 0 24 24">
|
||||
<path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
|
||||
</svg>
|
||||
|
||||
<svg class="w-5 h-5 fill-current text-gray-700" viewBox="0 0 24 24">
|
||||
<path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
|
||||
</svg>
|
||||
|
||||
<svg class="w-5 h-5 fill-current text-gray-500" viewBox="0 0 24 24">
|
||||
<path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
|
||||
</svg>
|
||||
|
||||
<svg class="w-5 h-5 fill-current text-gray-500" viewBox="0 0 24 24">
|
||||
<path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="flex item-center justify-between mt-3">
|
||||
<h1 class="text-gray-700 font-bold text-lg md:text-xl">$220</h1>
|
||||
<button class="px-2 py-1 bg-gray-800 text-white text-xs font-bold uppercase rounded hover:bg-gray-700 focus:outline-none focus:bg-gray-700">Add to Cart</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</view-component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Product With Evaluation',
|
||||
code:`
|
||||
<div class="flex max-w-md mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
|
||||
<div class="w-1/3 bg-cover" style="background-image: url('https://images.unsplash.com/photo-1494726161322-5360d4d0eeae?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80')"></div>
|
||||
|
||||
<div class="w-2/3 p-4 md:p-4">
|
||||
<h1 class="text-gray-900 font-bold text-2xl">Backpack</h1>
|
||||
|
||||
<p class="mt-2 text-gray-600 text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit In odit</p>
|
||||
|
||||
<div class="flex item-center mt-2">
|
||||
<svg class="w-5 h-5 fill-current text-gray-700" viewBox="0 0 24 24">
|
||||
<path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
|
||||
</svg>
|
||||
|
||||
<svg class="w-5 h-5 fill-current text-gray-700" viewBox="0 0 24 24">
|
||||
<path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
|
||||
</svg>
|
||||
|
||||
<svg class="w-5 h-5 fill-current text-gray-700" viewBox="0 0 24 24">
|
||||
<path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
|
||||
</svg>
|
||||
|
||||
<svg class="w-5 h-5 fill-current text-gray-500" viewBox="0 0 24 24">
|
||||
<path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
|
||||
</svg>
|
||||
|
||||
<svg class="w-5 h-5 fill-current text-gray-500" viewBox="0 0 24 24">
|
||||
<path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="flex item-center justify-between mt-3">
|
||||
<h1 class="text-gray-700 font-bold text-lg md:text-xl">$220</h1>
|
||||
<button class="px-2 py-1 bg-gray-800 text-white text-xs font-bold uppercase rounded hover:bg-gray-700 focus:outline-none focus:bg-gray-700">Add to Cart</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
41
src/components/ui/Cards/SimpleProduct.vue
Normal file
41
src/components/ui/Cards/SimpleProduct.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<view-component :name="name" :code="code">
|
||||
<div class="px-3 py-6" slot="component">
|
||||
<div class="flex flex-col justify-center items-center max-w-sm mx-auto">
|
||||
<div class="bg-gray-300 h-64 w-full rounded-lg shadow-md bg-cover bg-center" style="background-image: url(https://images.unsplash.com/photo-1539185441755-769473a23570?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1951&q=80"></div>
|
||||
|
||||
<div class="w-56 md:w-64 bg-white -mt-10 shadow-lg rounded-lg overflow-hidden">
|
||||
<h3 class="py-2 text-center font-bold uppercase tracking-wide text-gray-800">Nike Revolt</h3>
|
||||
|
||||
<div class="flex items-center justify-between py-2 px-3 bg-gray-200">
|
||||
<span class="text-gray-800 font-bold ">$129</span>
|
||||
<button class=" bg-gray-800 text-xs text-white px-2 py-1 font-semibold rounded uppercase hover:bg-gray-700">Add to cart</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</view-component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Simple Product',
|
||||
code: `
|
||||
<div class="flex flex-col justify-center items-center max-w-sm mx-auto">
|
||||
<div class="bg-gray-300 h-64 w-full rounded-lg shadow-md bg-cover bg-center" style="background-image: url(https://images.unsplash.com/photo-1539185441755-769473a23570?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1951&q=80"></div>
|
||||
|
||||
<div class="w-56 md:w-64 bg-white -mt-10 shadow-lg rounded-lg overflow-hidden">
|
||||
<h3 class="py-2 text-center font-bold uppercase tracking-wide text-gray-800">Nike Revolt</h3>
|
||||
|
||||
<div class="flex items-center justify-between py-2 px-3 bg-gray-200">
|
||||
<span class="text-gray-800 font-bold ">$129</span>
|
||||
<button class=" bg-gray-800 text-xs text-white px-2 py-1 font-semibold rounded uppercase hover:bg-gray-700">Add to cart</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,26 +0,0 @@
|
||||
<template>
|
||||
<div class="px-3" :id="name | toId">
|
||||
<div class="flex flex-col justify-center items-center max-w-sm mx-auto">
|
||||
<div style="background-image: url(https://images.unsplash.com/photo-1539185441755-769473a23570?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1951&q=80"
|
||||
class="bg-gray-300 h-64 w-full rounded-lg shadow-md bg-cover bg-center">
|
||||
</div>
|
||||
<div class="w-56 md:w-64 bg-white -mt-10 shadow-lg rounded-lg overflow-hidden">
|
||||
<div class="py-2 text-center font-bold uppercase tracking-wide text-gray-800">Nike Revolt</div>
|
||||
<div class="flex items-center justify-between py-2 px-3 bg-gray-200">
|
||||
<h1 class="text-gray-800 font-bold ">$129</h1>
|
||||
<button class=" bg-gray-800 text-xs text-white px-2 py-1 font-semibold rounded uppercase hover:bg-gray-700">Add to cart</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Simple Product Card',
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
43
src/components/ui/Cards/Testimonial.vue
Normal file
43
src/components/ui/Cards/Testimonial.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<view-component :name="name" :code="code">
|
||||
<div class="px-3 pb-6 pt-16" slot="component">
|
||||
<div class="max-w-md mx-auto py-4 px-8 bg-white shadow-lg rounded-lg">
|
||||
<div class="flex justify-center md:justify-end -mt-16">
|
||||
<img class="w-20 h-20 object-cover rounded-full border-2 border-indigo-500" alt="Testimonial avatar" src="https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=76&q=80">
|
||||
</div>
|
||||
|
||||
<h2 class="text-gray-800 text-2xl mt-2 md:mt-0 md:text-3xl font-semibold">Design Tools</h2>
|
||||
|
||||
<p class="mt-2 text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae dolores deserunt ea doloremque natus error, rerum quas odio quaerat nam ex commodi hic, suscipit in a veritatis pariatur minus consequuntur!</p>
|
||||
|
||||
<div class="flex justify-end mt-4">
|
||||
<a href="#" class="text-xl font-medium text-indigo-500">John Doe</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</view-component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Testimonial',
|
||||
code: `
|
||||
<div class="max-w-md mx-auto py-4 px-8 bg-white shadow-lg rounded-lg">
|
||||
<div class="flex justify-center md:justify-end -mt-16">
|
||||
<img class="w-20 h-20 object-cover rounded-full border-2 border-indigo-500" alt="Testimonial avatar" src="https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=76&q=80">
|
||||
</div>
|
||||
|
||||
<h2 class="text-gray-800 text-2xl mt-2 md:mt-0 md:text-3xl font-semibold">Design Tools</h2>
|
||||
|
||||
<p class="mt-2 text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae dolores deserunt ea doloremque natus error, rerum quas odio quaerat nam ex commodi hic, suscipit in a veritatis pariatur minus consequuntur!</p>
|
||||
|
||||
<div class="flex justify-end mt-4">
|
||||
<a href="#" class="text-xl font-medium text-indigo-500">John Doe</a>
|
||||
</div>
|
||||
</div>`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,32 +0,0 @@
|
||||
<template>
|
||||
<div class="px-3 my-16" :id="name | toId">
|
||||
<div class="max-w-md mx-auto py-4 px-8 bg-white shadow-lg rounded-lg">
|
||||
<div class="flex justify-center md:justify-end -mt-16">
|
||||
<img class="w-20 h-20 object-cover rounded-full border-2 border-indigo-500"
|
||||
alt="Testimonial avatar"
|
||||
src="https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=76&q=80">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="text-gray-800 text-2xl mt-2 md:mt-0 md:text-3xl font-semibold">Design Tools</h2>
|
||||
<p class="mt-2 text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae dolores
|
||||
deserunt ea doloremque natus error, rerum quas odio quaerat nam ex commodi hic, suscipit in a
|
||||
veritatis pariatur minus consequuntur!</p>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end mt-4">
|
||||
<a href="#" class="text-xl font-medium text-indigo-500">John Doe</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Testimonial Card',
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
35
src/components/ui/Cards/User.vue
Normal file
35
src/components/ui/Cards/User.vue
Normal file
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<view-component :name="name" :code="code">
|
||||
<div class="px-3 py-6" slot="component">
|
||||
<div class="max-w-xs bg-white shadow-lg rounded-lg overflow-hidden mx-auto">
|
||||
<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 href="#" class="block text-2xl text-gray-800 font-bold">John Doe</a>
|
||||
|
||||
<span class="text-sm text-gray-700">Software Engineer</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</view-component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'User',
|
||||
code: `
|
||||
<div class="max-w-xs bg-white shadow-lg rounded-lg overflow-hidden mx-auto">
|
||||
<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 href="#" class="block text-2xl text-gray-800 font-bold">John Doe</a>
|
||||
|
||||
<span class="text-sm text-gray-700">Software Engineer</span>
|
||||
</div>
|
||||
</div>`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,22 +0,0 @@
|
||||
<template>
|
||||
<div class="px-3" :id="name | toId">
|
||||
<div class="max-w-xs bg-white shadow-lg rounded-lg overflow-hidden mx-auto">
|
||||
<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 href="#" class="block text-2xl text-gray-800 font-bold">John Doe</a>
|
||||
<span class="text-sm text-gray-700">Software Engineer</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'User Card',
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,50 +0,0 @@
|
||||
<template>
|
||||
<div class="px-3" :id="name | toId">
|
||||
<div class="max-w-sm mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
|
||||
<img class="w-full h-56 object-cover object-center" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar">
|
||||
<div class="flex items-center px-6 py-3 bg-gray-900">
|
||||
<svg class="h-6 w-6 fill-current text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M17 21C15.8954 21 15 20.1046 15 19V15C15 13.8954 15.8954 13 17 13H19V12C19 8.13401 15.866 5 12 5C8.13401 5 5 8.13401 5 12V13H7C8.10457 13 9 13.8954 9 15V19C9 20.1046 8.10457 21 7 21H3V12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12V21H17ZM19 15H17V19H19V15ZM7 15H5V19H7V15Z"/>
|
||||
</svg>
|
||||
|
||||
<h1 class="mx-3 text-white font-semibold text-lg">Focusing</h1>
|
||||
</div>
|
||||
<div class="py-4 px-6">
|
||||
<h1 class="text-xl font-semibold text-gray-800">Patterson johnson</h1>
|
||||
<p class="py-2 text-gray-700">Full Stack maker & UI / UX Designer , love hip hop music Author of Building UI.</p>
|
||||
<div class="flex items-center mt-4 text-gray-700">
|
||||
<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14 11H10V13H14V11Z"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M7 5V4C7 2.89545 7.89539 2 9 2H15C16.1046 2 17 2.89545 17 4V5H20C21.6569 5 23 6.34314 23 8V18C23 19.6569 21.6569 21 20 21H4C2.34314 21 1 19.6569 1 18V8C1 6.34314 2.34314 5 4 5H7ZM9 4H15V5H9V4ZM4 7C3.44775 7 3 7.44769 3 8V14H21V8C21 7.44769 20.5522 7 20 7H4ZM3 18V16H21V18C21 18.5523 20.5522 19 20 19H4C3.44775 19 3 18.5523 3 18Z"/>
|
||||
</svg>
|
||||
|
||||
<h1 class="px-2 text-sm">Meraki UI</h1>
|
||||
</div>
|
||||
<div class="flex items-center mt-4 text-gray-700">
|
||||
<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.2721 10.2721C16.2721 12.4813 14.4813 14.2721 12.2721 14.2721C10.063 14.2721 8.27214 12.4813 8.27214 10.2721C8.27214 8.063 10.063 6.27214 12.2721 6.27214C14.4813 6.27214 16.2721 8.063 16.2721 10.2721ZM14.2721 10.2721C14.2721 11.3767 13.3767 12.2721 12.2721 12.2721C11.1676 12.2721 10.2721 11.3767 10.2721 10.2721C10.2721 9.16757 11.1676 8.27214 12.2721 8.27214C13.3767 8.27214 14.2721 9.16757 14.2721 10.2721Z"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.79417 16.5183C2.19424 13.0909 2.05438 7.3941 5.48178 3.79418C8.90918 0.194258 14.6059 0.0543983 18.2059 3.48179C21.8058 6.90919 21.9457 12.606 18.5183 16.2059L12.3124 22.7241L5.79417 16.5183ZM17.0698 14.8268L12.243 19.8965L7.17324 15.0698C4.3733 12.404 4.26452 7.9732 6.93028 5.17326C9.59603 2.37332 14.0268 2.26454 16.8268 4.93029C19.6267 7.59604 19.7355 12.0269 17.0698 14.8268Z"/>
|
||||
</svg>
|
||||
|
||||
<h1 class="px-2 text-sm">California</h1>
|
||||
</div>
|
||||
<div class="flex items-center mt-4 text-gray-700">
|
||||
<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.00977 5.83789C3.00977 5.28561 3.45748 4.83789 4.00977 4.83789H20C20.5523 4.83789 21 5.28561 21 5.83789V17.1621C21 18.2667 20.1046 19.1621 19 19.1621H5C3.89543 19.1621 3 18.2667 3 17.1621V6.16211C3 6.11449 3.00333 6.06765 3.00977 6.0218V5.83789ZM5 8.06165V17.1621H19V8.06199L14.1215 12.9405C12.9499 14.1121 11.0504 14.1121 9.87885 12.9405L5 8.06165ZM6.57232 6.80554H17.428L12.7073 11.5263C12.3168 11.9168 11.6836 11.9168 11.2931 11.5263L6.57232 6.80554Z"/>
|
||||
</svg>
|
||||
<h1 class="px-2 text-sm">patterson@example.com</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'User Card With Details',
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
99
src/components/ui/Cards/UserWithDetails.vue
Normal file
99
src/components/ui/Cards/UserWithDetails.vue
Normal file
@@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<view-component :name="name" :code="code">
|
||||
<div class="px-3 py-6" slot="component">
|
||||
<div class="max-w-sm mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
|
||||
<img class="w-full h-56 object-cover object-center" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar">
|
||||
|
||||
<div class="flex items-center px-6 py-3 bg-gray-900">
|
||||
<svg class="h-6 w-6 fill-current text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M17 21C15.8954 21 15 20.1046 15 19V15C15 13.8954 15.8954 13 17 13H19V12C19 8.13401 15.866 5 12 5C8.13401 5 5 8.13401 5 12V13H7C8.10457 13 9 13.8954 9 15V19C9 20.1046 8.10457 21 7 21H3V12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12V21H17ZM19 15H17V19H19V15ZM7 15H5V19H7V15Z"/>
|
||||
</svg>
|
||||
|
||||
<h1 class="mx-3 text-white font-semibold text-lg">Focusing</h1>
|
||||
</div>
|
||||
|
||||
<div class="py-4 px-6">
|
||||
<h1 class="text-xl font-semibold text-gray-800">Patterson johnson</h1>
|
||||
|
||||
<p class="py-2 text-gray-700">Full Stack maker & UI / UX Designer , love hip hop music Author of Building UI.</p>
|
||||
|
||||
<div class="flex items-center mt-4 text-gray-700">
|
||||
<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14 11H10V13H14V11Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M7 5V4C7 2.89545 7.89539 2 9 2H15C16.1046 2 17 2.89545 17 4V5H20C21.6569 5 23 6.34314 23 8V18C23 19.6569 21.6569 21 20 21H4C2.34314 21 1 19.6569 1 18V8C1 6.34314 2.34314 5 4 5H7ZM9 4H15V5H9V4ZM4 7C3.44775 7 3 7.44769 3 8V14H21V8C21 7.44769 20.5522 7 20 7H4ZM3 18V16H21V18C21 18.5523 20.5522 19 20 19H4C3.44775 19 3 18.5523 3 18Z"/>
|
||||
</svg>
|
||||
|
||||
<h1 class="px-2 text-sm">Meraki UI</h1>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center mt-4 text-gray-700">
|
||||
<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.2721 10.2721C16.2721 12.4813 14.4813 14.2721 12.2721 14.2721C10.063 14.2721 8.27214 12.4813 8.27214 10.2721C8.27214 8.063 10.063 6.27214 12.2721 6.27214C14.4813 6.27214 16.2721 8.063 16.2721 10.2721ZM14.2721 10.2721C14.2721 11.3767 13.3767 12.2721 12.2721 12.2721C11.1676 12.2721 10.2721 11.3767 10.2721 10.2721C10.2721 9.16757 11.1676 8.27214 12.2721 8.27214C13.3767 8.27214 14.2721 9.16757 14.2721 10.2721Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M5.79417 16.5183C2.19424 13.0909 2.05438 7.3941 5.48178 3.79418C8.90918 0.194258 14.6059 0.0543983 18.2059 3.48179C21.8058 6.90919 21.9457 12.606 18.5183 16.2059L12.3124 22.7241L5.79417 16.5183ZM17.0698 14.8268L12.243 19.8965L7.17324 15.0698C4.3733 12.404 4.26452 7.9732 6.93028 5.17326C9.59603 2.37332 14.0268 2.26454 16.8268 4.93029C19.6267 7.59604 19.7355 12.0269 17.0698 14.8268Z"/>
|
||||
</svg>
|
||||
|
||||
<h1 class="px-2 text-sm">California</h1>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center mt-4 text-gray-700">
|
||||
<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.00977 5.83789C3.00977 5.28561 3.45748 4.83789 4.00977 4.83789H20C20.5523 4.83789 21 5.28561 21 5.83789V17.1621C21 18.2667 20.1046 19.1621 19 19.1621H5C3.89543 19.1621 3 18.2667 3 17.1621V6.16211C3 6.11449 3.00333 6.06765 3.00977 6.0218V5.83789ZM5 8.06165V17.1621H19V8.06199L14.1215 12.9405C12.9499 14.1121 11.0504 14.1121 9.87885 12.9405L5 8.06165ZM6.57232 6.80554H17.428L12.7073 11.5263C12.3168 11.9168 11.6836 11.9168 11.2931 11.5263L6.57232 6.80554Z"/>
|
||||
</svg>
|
||||
|
||||
<h1 class="px-2 text-sm">patterson@example.com</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</view-component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'User With Details',
|
||||
code: `
|
||||
<div class="max-w-sm mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
|
||||
<img class="w-full h-56 object-cover object-center" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar">
|
||||
|
||||
<div class="flex items-center px-6 py-3 bg-gray-900">
|
||||
<svg class="h-6 w-6 fill-current text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M17 21C15.8954 21 15 20.1046 15 19V15C15 13.8954 15.8954 13 17 13H19V12C19 8.13401 15.866 5 12 5C8.13401 5 5 8.13401 5 12V13H7C8.10457 13 9 13.8954 9 15V19C9 20.1046 8.10457 21 7 21H3V12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12V21H17ZM19 15H17V19H19V15ZM7 15H5V19H7V15Z"/>
|
||||
</svg>
|
||||
|
||||
<h1 class="mx-3 text-white font-semibold text-lg">Focusing</h1>
|
||||
</div>
|
||||
|
||||
<div class="py-4 px-6">
|
||||
<h1 class="text-xl font-semibold text-gray-800">Patterson johnson</h1>
|
||||
|
||||
<p class="py-2 text-gray-700">Full Stack maker & UI / UX Designer , love hip hop music Author of Building UI.</p>
|
||||
|
||||
<div class="flex items-center mt-4 text-gray-700">
|
||||
<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14 11H10V13H14V11Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M7 5V4C7 2.89545 7.89539 2 9 2H15C16.1046 2 17 2.89545 17 4V5H20C21.6569 5 23 6.34314 23 8V18C23 19.6569 21.6569 21 20 21H4C2.34314 21 1 19.6569 1 18V8C1 6.34314 2.34314 5 4 5H7ZM9 4H15V5H9V4ZM4 7C3.44775 7 3 7.44769 3 8V14H21V8C21 7.44769 20.5522 7 20 7H4ZM3 18V16H21V18C21 18.5523 20.5522 19 20 19H4C3.44775 19 3 18.5523 3 18Z"/>
|
||||
</svg>
|
||||
|
||||
<h1 class="px-2 text-sm">Meraki UI</h1>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center mt-4 text-gray-700">
|
||||
<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.2721 10.2721C16.2721 12.4813 14.4813 14.2721 12.2721 14.2721C10.063 14.2721 8.27214 12.4813 8.27214 10.2721C8.27214 8.063 10.063 6.27214 12.2721 6.27214C14.4813 6.27214 16.2721 8.063 16.2721 10.2721ZM14.2721 10.2721C14.2721 11.3767 13.3767 12.2721 12.2721 12.2721C11.1676 12.2721 10.2721 11.3767 10.2721 10.2721C10.2721 9.16757 11.1676 8.27214 12.2721 8.27214C13.3767 8.27214 14.2721 9.16757 14.2721 10.2721Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M5.79417 16.5183C2.19424 13.0909 2.05438 7.3941 5.48178 3.79418C8.90918 0.194258 14.6059 0.0543983 18.2059 3.48179C21.8058 6.90919 21.9457 12.606 18.5183 16.2059L12.3124 22.7241L5.79417 16.5183ZM17.0698 14.8268L12.243 19.8965L7.17324 15.0698C4.3733 12.404 4.26452 7.9732 6.93028 5.17326C9.59603 2.37332 14.0268 2.26454 16.8268 4.93029C19.6267 7.59604 19.7355 12.0269 17.0698 14.8268Z"/>
|
||||
</svg>
|
||||
|
||||
<h1 class="px-2 text-sm">California</h1>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center mt-4 text-gray-700">
|
||||
<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.00977 5.83789C3.00977 5.28561 3.45748 4.83789 4.00977 4.83789H20C20.5523 4.83789 21 5.28561 21 5.83789V17.1621C21 18.2667 20.1046 19.1621 19 19.1621H5C3.89543 19.1621 3 18.2667 3 17.1621V6.16211C3 6.11449 3.00333 6.06765 3.00977 6.0218V5.83789ZM5 8.06165V17.1621H19V8.06199L14.1215 12.9405C12.9499 14.1121 11.0504 14.1121 9.87885 12.9405L5 8.06165ZM6.57232 6.80554H17.428L12.7073 11.5263C12.3168 11.9168 11.6836 11.9168 11.2931 11.5263L6.57232 6.80554Z"/>
|
||||
</svg>
|
||||
|
||||
<h1 class="px-2 text-sm">patterson@example.com</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
79
src/components/ui/Forms/Inputs.vue
Normal file
79
src/components/ui/Forms/Inputs.vue
Normal file
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<view-component :name="name" :code="code">
|
||||
<div class="px-3 py-6" slot="component">
|
||||
<div class="max-w-4xl p-6 mx-auto bg-white rounded-md shadow-md">
|
||||
<h2 class="text-lg text-gray-700 font-semibold capitalize">Account settings</h2>
|
||||
|
||||
<form>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-4">
|
||||
<div>
|
||||
<label class="text-gray-700" for="username">Username</label>
|
||||
<input id="username" type="text" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="text-gray-700" for="emailAddress">Email Address</label>
|
||||
<input id="emailAddress" type="email" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="text-gray-700" for="password">Password</label>
|
||||
<input id="password" type="password" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="text-gray-700" for="passwordConfirmation">Password Confirmation</label>
|
||||
<input id="passwordConfirmation" type="password" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end mt-4">
|
||||
<button class="px-4 py-2 bg-gray-800 text-gray-200 rounded hover:bg-gray-700 focus:outline-none focus:bg-gray-700">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</view-component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Inputs',
|
||||
code: `
|
||||
<div class="max-w-4xl p-6 mx-auto bg-white rounded-md shadow-md">
|
||||
<h2 class="text-lg text-gray-700 font-semibold capitalize">Account settings</h2>
|
||||
|
||||
<form>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-4">
|
||||
<div>
|
||||
<label class="text-gray-700" for="username">Username</label>
|
||||
<input id="username" type="text" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="text-gray-700" for="emailAddress">Email Address</label>
|
||||
<input id="emailAddress" type="email" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="text-gray-700" for="password">Password</label>
|
||||
<input id="password" type="password" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="text-gray-700" for="passwordConfirmation">Password Confirmation</label>
|
||||
<input id="passwordConfirmation" type="password" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end mt-4">
|
||||
<button class="px-4 py-2 bg-gray-800 text-gray-200 rounded hover:bg-gray-700 focus:outline-none focus:bg-gray-700">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,45 +0,0 @@
|
||||
<template>
|
||||
<div class="px-3" :id="name | toId">
|
||||
<div class="max-w-4xl p-6 mx-auto bg-white rounded-md shadow-md">
|
||||
<h2 class="text-lg text-gray-700 font-semibold capitalize">Account settings</h2>
|
||||
|
||||
<form>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-4">
|
||||
<div>
|
||||
<label class="text-gray-700" for="username">Username</label>
|
||||
<input id="username" type="text" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="text-gray-700" for="emailAddress">Email Address</label>
|
||||
<input id="emailAddress" type="email" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="text-gray-700" for="password">Password</label>
|
||||
<input id="password" type="password" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="text-gray-700" for="passwordConfirmation">Password Confirmation</label>
|
||||
<input id="passwordConfirmation" type="password" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end mt-4">
|
||||
<button class="px-4 py-2 bg-gray-800 text-gray-200 rounded hover:bg-gray-700 focus:outline-none focus:bg-gray-700">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Inputs Form'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
55
src/components/ui/Forms/Newsletter.vue
Normal file
55
src/components/ui/Forms/Newsletter.vue
Normal file
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<view-component :name="name" :code="code">
|
||||
<div class="px-3 py-6" slot="component">
|
||||
<div class="flex flex-col max-w-4xl mx-auto bg-white rounded-lg shadow-lg overflow-hidden md:flex-row md:h-48">
|
||||
<div class="md:flex md:items-center md:justify-center md:w-1/2 md:bg-gray-700">
|
||||
<div class="py-6 px-6 md:px-8 md:py-0">
|
||||
<h2 class="text-gray-700 text-lg font-bold md:text-gray-100">Sign Up For <span class="text-blue-600 md:text-blue-300">Project</span> Updates</h2>
|
||||
|
||||
<p class="mt-2 text-gray-600 text-sm md:text-gray-400">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consectetur obcaecati odio</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-center pb-6 md:py-0 md:w-1/2 md:border-b-8 border-gray-700">
|
||||
<form>
|
||||
<div class="flex flex-col rounded-lg overflow-hidden lg:flex-row">
|
||||
<input class="py-3 px-6 bg-gray-200 text-gray-700 outline-none placeholder-gray-500 focus:bg-gray-300" type="text" name="email" placeholder="Enter your email" aria-label="Enter your email">
|
||||
|
||||
<button class="py-3 px-4 bg-gray-700 text-gray-100 text-sm font-semibold uppercase hover:bg-gray-600 focus:bg-gray-600 focus:outline-none">subscribe</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</view-component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Newsletter',
|
||||
code: `
|
||||
<div class="flex flex-col max-w-4xl mx-auto bg-white rounded-lg shadow-lg overflow-hidden md:flex-row md:h-48">
|
||||
<div class="md:flex md:items-center md:justify-center md:w-1/2 md:bg-gray-700">
|
||||
<div class="py-6 px-6 md:px-8 md:py-0">
|
||||
<h2 class="text-gray-700 text-lg font-bold md:text-gray-100">Sign Up For <span class="text-blue-600 md:text-blue-300">Project</span> Updates</h2>
|
||||
|
||||
<p class="mt-2 text-gray-600 text-sm md:text-gray-400">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consectetur obcaecati odio</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-center pb-6 md:py-0 md:w-1/2 md:border-b-8 border-gray-700">
|
||||
<form>
|
||||
<div class="flex flex-col rounded-lg overflow-hidden lg:flex-row">
|
||||
<input class="py-3 px-6 bg-gray-200 text-gray-700 outline-none placeholder-gray-500 focus:bg-gray-300" type="text" name="email" placeholder="Enter your email" aria-label="Enter your email">
|
||||
|
||||
<button class="py-3 px-4 bg-gray-700 text-gray-100 text-sm font-semibold uppercase hover:bg-gray-600 focus:bg-gray-600 focus:outline-none">subscribe</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,31 +0,0 @@
|
||||
<template>
|
||||
<div class="px-3" :id="name | toId">
|
||||
<div class="flex flex-col max-w-4xl mx-auto bg-white rounded-lg shadow-lg overflow-hidden md:flex-row md:h-48">
|
||||
<div class="md:flex md:items-center md:justify-center md:w-1/2 md:bg-gray-700">
|
||||
<div class="py-6 px-6 md:px-8 md:py-0">
|
||||
<h2 class="text-gray-700 text-lg font-bold md:text-gray-100">Sign Up For <span class="text-blue-600 md:text-blue-300">Project</span> Updates</h2>
|
||||
<p class="mt-2 text-gray-600 text-sm md:text-gray-400">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consectetur obcaecati odio</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center pb-6 md:py-0 md:w-1/2 md:border-b-8 border-gray-700">
|
||||
<form>
|
||||
<div class="flex flex-col rounded-lg overflow-hidden lg:flex-row">
|
||||
<input class="py-3 px-6 bg-gray-200 text-gray-700 outline-none placeholder-gray-500 focus:bg-gray-300" type="text" name="email" placeholder="Enter your email" aria-label="Enter your email">
|
||||
<button class="py-3 px-4 bg-gray-700 text-gray-100 text-sm font-semibold uppercase hover:bg-gray-600 focus:bg-gray-600 focus:outline-none">subscribe</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Newsletter Form',
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
83
src/components/ui/Forms/SignIn.vue
Normal file
83
src/components/ui/Forms/SignIn.vue
Normal file
@@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<view-component :name="name" :code="code">
|
||||
<div class="px-3 py-6" slot="component">
|
||||
<div class="bg-white w-full max-w-sm rounded-lg shadow-md overflow-hidden mx-auto">
|
||||
<div class="py-4 px-6">
|
||||
<h2 class="text-center font-bold text-gray-700 text-3xl">Brand</h2>
|
||||
|
||||
<p class="mt-1 text-center font-bold text-gray-600 text-xl">Welcome Back</p>
|
||||
|
||||
<span class="mt-1 text-center text-gray-600">Login or create account</span>
|
||||
|
||||
<form>
|
||||
<div class="mt-4 w-full">
|
||||
<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="email" placeholder="Email Address" aria-label="Email Address">
|
||||
</div>
|
||||
|
||||
<div class="mt-4 w-full">
|
||||
<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" aria-label="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>
|
||||
|
||||
<button class="py-2 px-4 bg-gray-700 text-white rounded hover:bg-gray-600 focus:outline-none" type="button">
|
||||
Login
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-center py-4 bg-gray-100 text-center">
|
||||
<span class="text-gray-600 text-sm">Dont`t have an account? </span>
|
||||
|
||||
<a href="#" class="text-blue-600 font-bold mx-2 text-sm hover:text-blue-500">Register</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</view-component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Sign In',
|
||||
code: `
|
||||
<div class="bg-white w-full max-w-sm rounded-lg shadow-md overflow-hidden mx-auto">
|
||||
<div class="py-4 px-6">
|
||||
<h2 class="text-center font-bold text-gray-700 text-3xl">Brand</h2>
|
||||
|
||||
<p class="mt-1 text-center font-bold text-gray-600 text-xl">Welcome Back</p>
|
||||
|
||||
<span class="mt-1 text-center text-gray-600">Login or create account</span>
|
||||
|
||||
<form>
|
||||
<div class="mt-4 w-full">
|
||||
<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="email" placeholder="Email Address" aria-label="Email Address">
|
||||
</div>
|
||||
|
||||
<div class="mt-4 w-full">
|
||||
<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" aria-label="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>
|
||||
|
||||
<button class="py-2 px-4 bg-gray-700 text-white rounded hover:bg-gray-600 focus:outline-none" type="button">
|
||||
Login
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-center py-4 bg-gray-100 text-center">
|
||||
<span class="text-gray-600 text-sm">Do not have an account? </span>
|
||||
|
||||
<a href="#" class="text-blue-600 font-bold mx-2 text-sm hover:text-blue-500">Register</a>
|
||||
</div>
|
||||
</div>`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,45 +0,0 @@
|
||||
<template>
|
||||
<div class="px-3" :id="name | toId">
|
||||
<div class="bg-white w-full max-w-sm rounded-lg overflow-hidden mx-auto">
|
||||
<div class="py-4 px-6">
|
||||
<div class="text-center font-bold text-gray-700 text-3xl">Brand</div>
|
||||
<div class="mt-1 text-center font-bold text-gray-600 text-xl">Welcome Back</div>
|
||||
<div class="mt-1 text-center text-gray-600">Login or create account</div>
|
||||
|
||||
<form>
|
||||
<div class="mt-4 w-full">
|
||||
<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="email" placeholder="Email Address" aria-label="Email Address">
|
||||
</div>
|
||||
<div class="mt-4 w-full">
|
||||
<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" aria-label="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>
|
||||
<button class="py-2 px-4 bg-gray-700 text-white rounded hover:bg-gray-600 focus:outline-none"
|
||||
type="button">
|
||||
Login
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Sign In Form',
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,70 +0,0 @@
|
||||
<template>
|
||||
<div class="px-3" :id="name | toId">
|
||||
<div class="flex max-w-sm mx-auto bg-white rounded-lg shadow-lg overflow-hidden lg:max-w-4xl">
|
||||
<div class="hidden lg:block lg:w-1/2 bg-cover" style="background-image:url('https://images.unsplash.com/photo-1546514714-df0ccc50d7bf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=667&q=80')"></div>
|
||||
|
||||
<div class="w-full py-8 px-6 md:px-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">
|
||||
<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"
|
||||
fill="#FFC107"/>
|
||||
<path d="M5.25497 12.2425L10.7308 16.2583C12.2125 12.59 15.8008 9.99999 20 9.99999C22.5491 9.99999 24.8683 10.9617 26.6341 12.5325L31.3483 7.81833C28.3716 5.04416 24.39 3.33333 20 3.33333C13.5983 3.33333 8.04663 6.94749 5.25497 12.2425Z"
|
||||
fill="#FF3D00"/>
|
||||
<path d="M20 36.6667C24.305 36.6667 28.2167 35.0192 31.1742 32.34L26.0159 27.975C24.3425 29.2425 22.2625 30 20 30C15.665 30 11.9842 27.2359 10.5975 23.3784L5.16254 27.5659C7.92087 32.9634 13.5225 36.6667 20 36.6667Z"
|
||||
fill="#4CAF50"/>
|
||||
<path d="M36.3425 16.7358H35V16.6667H20V23.3333H29.4192C28.7592 25.1975 27.56 26.805 26.0133 27.9758C26.0142 27.975 26.015 27.975 26.0158 27.9742L31.1742 32.3392C30.8092 32.6708 36.6667 28.3333 36.6667 20C36.6667 18.8825 36.5517 17.7917 36.3425 16.7358Z"
|
||||
fill="#1976D2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="px-4 py-3 w-5/6 text-center text-gray-600 font-bold">Sign in with Google</h3>
|
||||
</a>
|
||||
|
||||
<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>
|
||||
<span class="border-b w-1/5 lg:w-1/4"></span>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<label class="block text-gray-700 text-sm font-bold mb-2" for="LoggingEmailAddress">Email Address</label>
|
||||
<input id="LoggingEmailAddress" 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="email">
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<div class="flex justify-between">
|
||||
<label class="block text-gray-700 text-sm font-bold mb-2" for="loggingPassword">Password</label>
|
||||
<a href="#" class="text-xs text-gray-500 hover:underline">Forget Password?</a>
|
||||
</div>
|
||||
<input id="loggingPassword" 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">
|
||||
</div>
|
||||
|
||||
<div class="mt-8">
|
||||
<button class="bg-gray-700 text-white font-bold py-2 px-4 w-full rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600">Login
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<span class="border-b w-1/5 md:w-1/4"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Sign In Form With Image',
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
133
src/components/ui/Forms/SignInWithImage.vue
Normal file
133
src/components/ui/Forms/SignInWithImage.vue
Normal file
@@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<view-component :name="name" :code="code">
|
||||
<div class="px-3 py-6" slot="component">
|
||||
<div class="flex max-w-sm mx-auto bg-white rounded-lg shadow-lg overflow-hidden lg:max-w-4xl">
|
||||
<div class="hidden lg:block lg:w-1/2 bg-cover" style="background-image:url('https://images.unsplash.com/photo-1546514714-df0ccc50d7bf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=667&q=80')"></div>
|
||||
|
||||
<div class="w-full py-8 px-6 md:px-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">
|
||||
<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" fill="#FFC107"/>
|
||||
<path d="M5.25497 12.2425L10.7308 16.2583C12.2125 12.59 15.8008 9.99999 20 9.99999C22.5491 9.99999 24.8683 10.9617 26.6341 12.5325L31.3483 7.81833C28.3716 5.04416 24.39 3.33333 20 3.33333C13.5983 3.33333 8.04663 6.94749 5.25497 12.2425Z" fill="#FF3D00"/>
|
||||
<path d="M20 36.6667C24.305 36.6667 28.2167 35.0192 31.1742 32.34L26.0159 27.975C24.3425 29.2425 22.2625 30 20 30C15.665 30 11.9842 27.2359 10.5975 23.3784L5.16254 27.5659C7.92087 32.9634 13.5225 36.6667 20 36.6667Z" fill="#4CAF50"/>
|
||||
<path d="M36.3425 16.7358H35V16.6667H20V23.3333H29.4192C28.7592 25.1975 27.56 26.805 26.0133 27.9758C26.0142 27.975 26.015 27.975 26.0158 27.9742L31.1742 32.3392C30.8092 32.6708 36.6667 28.3333 36.6667 20C36.6667 18.8825 36.5517 17.7917 36.3425 16.7358Z" fill="#1976D2"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<span class="px-4 py-3 w-5/6 text-center text-gray-600 font-bold">Sign in with Google</span>
|
||||
</a>
|
||||
|
||||
<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>
|
||||
|
||||
<span class="border-b w-1/5 lg:w-1/4"></span>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<label class="block text-gray-700 text-sm font-bold mb-2" for="LoggingEmailAddress">Email Address</label>
|
||||
<input id="LoggingEmailAddress" 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="email">
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<div class="flex justify-between">
|
||||
<label class="block text-gray-700 text-sm font-bold mb-2" for="loggingPassword">Password</label>
|
||||
<a href="#" class="text-xs text-gray-500 hover:underline">Forget Password?</a>
|
||||
</div>
|
||||
|
||||
<input id="loggingPassword" 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">
|
||||
</div>
|
||||
|
||||
<div class="mt-8">
|
||||
<button class="bg-gray-700 text-white font-bold py-2 px-4 w-full rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600">
|
||||
Login
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
<span class="border-b w-1/5 md:w-1/4"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</view-component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Sign In With Image',
|
||||
code: `
|
||||
<div class="flex max-w-sm mx-auto bg-white rounded-lg shadow-lg overflow-hidden lg:max-w-4xl">
|
||||
<div class="hidden lg:block lg:w-1/2 bg-cover" style="background-image:url('https://images.unsplash.com/photo-1546514714-df0ccc50d7bf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=667&q=80')"></div>
|
||||
|
||||
<div class="w-full py-8 px-6 md:px-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">
|
||||
<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" fill="#FFC107"/>
|
||||
<path d="M5.25497 12.2425L10.7308 16.2583C12.2125 12.59 15.8008 9.99999 20 9.99999C22.5491 9.99999 24.8683 10.9617 26.6341 12.5325L31.3483 7.81833C28.3716 5.04416 24.39 3.33333 20 3.33333C13.5983 3.33333 8.04663 6.94749 5.25497 12.2425Z" fill="#FF3D00"/>
|
||||
<path d="M20 36.6667C24.305 36.6667 28.2167 35.0192 31.1742 32.34L26.0159 27.975C24.3425 29.2425 22.2625 30 20 30C15.665 30 11.9842 27.2359 10.5975 23.3784L5.16254 27.5659C7.92087 32.9634 13.5225 36.6667 20 36.6667Z" fill="#4CAF50"/>
|
||||
<path d="M36.3425 16.7358H35V16.6667H20V23.3333H29.4192C28.7592 25.1975 27.56 26.805 26.0133 27.9758C26.0142 27.975 26.015 27.975 26.0158 27.9742L31.1742 32.3392C30.8092 32.6708 36.6667 28.3333 36.6667 20C36.6667 18.8825 36.5517 17.7917 36.3425 16.7358Z" fill="#1976D2"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<span class="px-4 py-3 w-5/6 text-center text-gray-600 font-bold">Sign in with Google</span>
|
||||
</a>
|
||||
|
||||
<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>
|
||||
|
||||
<span class="border-b w-1/5 lg:w-1/4"></span>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<label class="block text-gray-700 text-sm font-bold mb-2" for="LoggingEmailAddress">Email Address</label>
|
||||
<input id="LoggingEmailAddress" 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="email">
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<div class="flex justify-between">
|
||||
<label class="block text-gray-700 text-sm font-bold mb-2" for="loggingPassword">Password</label>
|
||||
<a href="#" class="text-xs text-gray-500 hover:underline">Forget Password?</a>
|
||||
</div>
|
||||
|
||||
<input id="loggingPassword" 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">
|
||||
</div>
|
||||
|
||||
<div class="mt-8">
|
||||
<button class="bg-gray-700 text-white font-bold py-2 px-4 w-full rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600">
|
||||
Login
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
<span class="border-b w-1/5 md:w-1/4"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="rounded overflow-hidden">
|
||||
<pre><code class="px-8 py-6 rounded-md overflow-x-scroll overflow-hidden">{{ code }}</code></pre>
|
||||
<pre><code class="px-8 py-6 rounded-md overflow-x-scroll overflow-hidden text-sm">{{ code }}</code></pre>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -3,10 +3,18 @@ import VueRouter from "vue-router";
|
||||
const Alerts = () =>
|
||||
import("./components/categories/Alerts");
|
||||
|
||||
const Cards = () =>
|
||||
import("./components/categories/Cards");
|
||||
|
||||
const Forms = () =>
|
||||
import("./components/categories/Forms");
|
||||
|
||||
|
||||
export default new VueRouter({
|
||||
routes: [
|
||||
// { path: '/', redirect: '/alerts' },
|
||||
{ path: "/alerts", component: Alerts, name: "Alerts" },
|
||||
{ path: "/cards", component: Cards, name: "Cards" },
|
||||
{ path: "/forms", component: Forms, name: "Forms" },
|
||||
],
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user