mirror of
https://github.com/bakateam/merakiui.git
synced 2025-12-09 23:15:35 +00:00
Move all files and migrated it 🌪
This commit is contained in:
khatabwedaa
131
components/ui/Forms/Contact.vue
Normal file
131
components/ui/Forms/Contact.vue
Normal file
@@ -0,0 +1,131 @@
|
||||
<template>
|
||||
<view-component :name="name" :code="code">
|
||||
<div class="px-3 py-6" slot="component">
|
||||
<section class="w-full max-w-2xl px-6 py-4 mx-auto bg-white rounded-md shadow-md dark:bg-gray-800">
|
||||
<h2 class="text-3xl font-semibold text-center text-gray-800 dark:text-white">Get in touch</h2>
|
||||
<p class="mt-3 text-center text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
|
||||
|
||||
<div class="grid grid-cols-1 gap-6 mt-6 sm:grid-cols-2 md:grid-cols-3">
|
||||
<a href="#" class="flex flex-col items-center px-4 py-3 text-gray-700 rounded-md dark:text-gray-200 hover:bg-blue-200 dark:hover:bg-blue-500">
|
||||
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<span class="mt-2">121 Street, NY</span>
|
||||
</a>
|
||||
|
||||
<a href="#" class="flex flex-col items-center px-4 py-3 text-gray-700 rounded-md dark:text-gray-200 hover:bg-blue-200 dark:hover:bg-blue-500">
|
||||
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" />
|
||||
</svg>
|
||||
|
||||
<span class="mt-2">+2499999666600</span>
|
||||
</a>
|
||||
|
||||
<a href="#" class="flex flex-col items-center px-4 py-3 text-gray-700 rounded-md dark:text-gray-200 hover:bg-blue-200 dark:hover:bg-blue-500">
|
||||
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
|
||||
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
|
||||
</svg>
|
||||
|
||||
<span class="mt-2">example@example.com</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 ">
|
||||
<div class="items-center -mx-2 md:flex">
|
||||
<div class="w-full mx-2">
|
||||
<label class="block mb-2 text-sm font-medium text-gray-600 dark:text-gray-200">Name</label>
|
||||
|
||||
<input class="block w-full px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="text">
|
||||
</div>
|
||||
|
||||
<div class="w-full mx-2 mt-4 md:mt-0">
|
||||
<label class="block mb-2 text-sm font-medium text-gray-600 dark:text-gray-200">E-mail</label>
|
||||
|
||||
<input class="block w-full px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="email">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full mt-4">
|
||||
<label class="block mb-2 text-sm font-medium text-gray-600 dark:text-gray-200">Message</label>
|
||||
|
||||
<textarea class="block w-full h-40 px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center mt-6">
|
||||
<button class="px-4 py-2 text-white transition-colors duration-200 transform bg-gray-700 rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600">Send Message</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</view-component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Contact',
|
||||
code: `
|
||||
<section class="w-full max-w-2xl px-6 py-4 mx-auto bg-white rounded-md shadow-md dark:bg-gray-800">
|
||||
<h2 class="text-3xl font-semibold text-center text-gray-800 dark:text-white">Get in touch</h2>
|
||||
<p class="mt-3 text-center text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
|
||||
|
||||
<div class="grid grid-cols-1 gap-6 mt-6 sm:grid-cols-2 md:grid-cols-3">
|
||||
<a href="#" class="flex flex-col items-center px-4 py-3 text-gray-700 rounded-md dark:text-gray-200 hover:bg-blue-200 dark:hover:bg-blue-500">
|
||||
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<span class="mt-2">121 Street, NY</span>
|
||||
</a>
|
||||
|
||||
<a href="#" class="flex flex-col items-center px-4 py-3 text-gray-700 rounded-md dark:text-gray-200 hover:bg-blue-200 dark:hover:bg-blue-500">
|
||||
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" />
|
||||
</svg>
|
||||
|
||||
<span class="mt-2">+2499999666600</span>
|
||||
</a>
|
||||
|
||||
<a href="#" class="flex flex-col items-center px-4 py-3 text-gray-700 rounded-md dark:text-gray-200 hover:bg-blue-200 dark:hover:bg-blue-500">
|
||||
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
|
||||
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
|
||||
</svg>
|
||||
|
||||
<span class="mt-2">example@example.com</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 ">
|
||||
<div class="items-center -mx-2 md:flex">
|
||||
<div class="w-full mx-2">
|
||||
<label class="block mb-2 text-sm font-medium text-gray-600 dark:text-gray-200">Name</label>
|
||||
|
||||
<input class="block w-full px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="text">
|
||||
</div>
|
||||
|
||||
<div class="w-full mx-2 mt-4 md:mt-0">
|
||||
<label class="block mb-2 text-sm font-medium text-gray-600 dark:text-gray-200">E-mail</label>
|
||||
|
||||
<input class="block w-full px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="email">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full mt-4">
|
||||
<label class="block mb-2 text-sm font-medium text-gray-600 dark:text-gray-200">Message</label>
|
||||
|
||||
<textarea class="block w-full h-40 px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center mt-6">
|
||||
<button class="px-4 py-2 text-white transition-colors duration-200 transform bg-gray-700 rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600">Send Message</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
55
components/ui/Forms/Newsletter.vue
Normal file
55
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">
|
||||
<section class="flex flex-col max-w-4xl mx-auto overflow-hidden bg-white rounded-lg shadow-lg dark:bg-gray-800 md:flex-row md:h-48">
|
||||
<div class="md:flex md:items-center md:justify-center md:w-1/2 md:bg-gray-700 md:dark:bg-gray-800">
|
||||
<div class="px-6 py-6 md:px-8 md:py-0">
|
||||
<h2 class="text-lg font-bold text-gray-700 dark:text-white md:text-gray-100">Sign Up For <span class="text-blue-600 dark:text-blue-400 md:text-blue-300">Project</span> Updates</h2>
|
||||
|
||||
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400 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">
|
||||
<form>
|
||||
<div class="flex flex-col overflow-hidden border rounded-lg dark:border-gray-600 lg:flex-row">
|
||||
<input class="px-6 py-3 text-gray-700 placeholder-gray-500 bg-white outline-none dark:bg-gray-800 dark:placeholder-gray-400 focus:placeholder-transparent dark:focus:placeholder-transparent" type="text" name="email" placeholder="Enter your email" aria-label="Enter your email">
|
||||
|
||||
<button class="px-4 py-3 text-sm font-medium tracking-wider text-gray-100 uppercase transition-colors duration-200 transform bg-gray-700 hover:bg-gray-600 focus:bg-gray-600 focus:outline-none">subscribe</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</view-component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Newsletter',
|
||||
code: `
|
||||
<section class="flex flex-col max-w-4xl mx-auto overflow-hidden bg-white rounded-lg shadow-lg dark:bg-gray-800 md:flex-row md:h-48">
|
||||
<div class="md:flex md:items-center md:justify-center md:w-1/2 md:bg-gray-700 md:dark:bg-gray-800">
|
||||
<div class="px-6 py-6 md:px-8 md:py-0">
|
||||
<h2 class="text-lg font-bold text-gray-700 dark:text-white md:text-gray-100">Sign Up For <span class="text-blue-600 dark:text-blue-400 md:text-blue-300">Project</span> Updates</h2>
|
||||
|
||||
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400 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">
|
||||
<form>
|
||||
<div class="flex flex-col overflow-hidden border rounded-lg dark:border-gray-600 lg:flex-row">
|
||||
<input class="px-6 py-3 text-gray-700 placeholder-gray-500 bg-white outline-none dark:bg-gray-800 dark:placeholder-gray-400 focus:placeholder-transparent dark:focus:placeholder-transparent" type="text" name="email" placeholder="Enter your email" aria-label="Enter your email">
|
||||
|
||||
<button class="px-4 py-3 text-sm font-medium tracking-wider text-gray-100 uppercase transition-colors duration-200 transform bg-gray-700 hover:bg-gray-600 focus:bg-gray-600 focus:outline-none">subscribe</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
96
components/ui/Forms/Search.vue
Normal file
96
components/ui/Forms/Search.vue
Normal file
@@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<view-component :name="name" :code="code">
|
||||
<div class="px-3 pt-6 pb-80" slot="component">
|
||||
<section class="relative w-full max-w-md px-5 py-4 mx-auto rounded-md">
|
||||
<div class="relative">
|
||||
<span class="absolute inset-y-0 left-0 flex items-center pl-3">
|
||||
<svg class="w-5 h-5 text-gray-400" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
<input type="text" v-model="keyword" class="w-full py-3 pl-10 pr-4 text-gray-700 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Type Something">
|
||||
</div>
|
||||
|
||||
<div v-if="jobsSearch" class="absolute inset-x-0 px-6 py-3 mx-5 mt-4 overflow-y-auto bg-white border border-gray-300 rounded-md max-h-72 dark:bg-gray-800 dark:border-transparent">
|
||||
<a v-for="job in jobsSearch" :key="job.title" href="#" class="block py-1">
|
||||
<h3 class="font-medium text-gray-700 dark:text-gray-100 hover:underline" v-text="job.title"></h3>
|
||||
<p class="mt-2 text-sm text-gray-500 dark:text-gray-400" v-text="job.date"></p>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</view-component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Search',
|
||||
keyword: '',
|
||||
jobs: [
|
||||
{
|
||||
title: 'Software engineer',
|
||||
date: '02/04/2020'
|
||||
},
|
||||
{
|
||||
title: 'Front End Developer',
|
||||
date: '01/03/2020'
|
||||
},
|
||||
{
|
||||
title: 'HR Lead',
|
||||
date: '30/2/2020'
|
||||
},
|
||||
{
|
||||
title: 'Systems engineer',
|
||||
date: '15/1/2020'
|
||||
},
|
||||
{
|
||||
title: 'Web Developer',
|
||||
date: '02/04/2020'
|
||||
},
|
||||
{
|
||||
title: 'UI/UX',
|
||||
date: '01/03/2020'
|
||||
},
|
||||
{
|
||||
title: 'Projects manager',
|
||||
date: '30/2/2020'
|
||||
},
|
||||
],
|
||||
code: `
|
||||
<section class="relative w-full max-w-md px-5 py-4 mx-auto rounded-md">
|
||||
<div class="relative">
|
||||
<span class="absolute inset-y-0 left-0 flex items-center pl-3">
|
||||
<svg class="w-5 h-5 text-gray-400" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
<input type="text" class="w-full py-3 pl-10 pr-4 text-gray-700 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Search">
|
||||
</div>
|
||||
|
||||
<div class="absolute inset-x-0 px-6 py-3 mx-5 mt-4 overflow-y-auto bg-white border border-gray-300 rounded-md max-h-72 dark:bg-gray-800 dark:border-transparent">
|
||||
<a href="#" class="block py-1">
|
||||
<h3 class="font-medium text-gray-700 dark:text-gray-100 hover:underline">Software engineer</h3>
|
||||
<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">02/04/2020</p>
|
||||
</a>
|
||||
</div>
|
||||
</section>`
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
jobsSearch() {
|
||||
if (this.keyword) {
|
||||
return this.jobs.filter((job) => {
|
||||
return job.title.toLowerCase().includes(this.keyword);
|
||||
});
|
||||
}
|
||||
|
||||
return this.jobs;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
79
components/ui/Forms/Simple.vue
Normal file
79
components/ui/Forms/Simple.vue
Normal file
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<view-component :name="name" :code="code">
|
||||
<div class="px-3 py-6" slot="component">
|
||||
<section class="max-w-4xl p-6 mx-auto bg-white rounded-md shadow-md dark:bg-gray-800">
|
||||
<h2 class="text-lg font-semibold text-gray-700 capitalize dark:text-white">Account settings</h2>
|
||||
|
||||
<form>
|
||||
<div class="grid grid-cols-1 gap-6 mt-4 sm:grid-cols-2">
|
||||
<div>
|
||||
<label class="text-gray-700 dark:text-gray-200" for="username">Username</label>
|
||||
<input id="username" type="text" class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-300 rounded dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="text-gray-700 dark:text-gray-200" for="emailAddress">Email Address</label>
|
||||
<input id="emailAddress" type="email" class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-300 rounded dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="text-gray-700 dark:text-gray-200" for="password">Password</label>
|
||||
<input id="password" type="password" class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-300 rounded dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="text-gray-700 dark:text-gray-200" for="passwordConfirmation">Password Confirmation</label>
|
||||
<input id="passwordConfirmation" type="password" class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-300 rounded dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end mt-6">
|
||||
<button class="px-6 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</div>
|
||||
</view-component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Simple',
|
||||
code: `
|
||||
<section class="max-w-4xl p-6 mx-auto bg-white rounded-md shadow-md dark:bg-gray-800">
|
||||
<h2 class="text-lg font-semibold text-gray-700 capitalize dark:text-white">Account settings</h2>
|
||||
|
||||
<form>
|
||||
<div class="grid grid-cols-1 gap-6 mt-4 sm:grid-cols-2">
|
||||
<div>
|
||||
<label class="text-gray-700 dark:text-gray-200" for="username">Username</label>
|
||||
<input id="username" type="text" class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-300 rounded dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="text-gray-700 dark:text-gray-200" for="emailAddress">Email Address</label>
|
||||
<input id="emailAddress" type="email" class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-300 rounded dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="text-gray-700 dark:text-gray-200" for="password">Password</label>
|
||||
<input id="password" type="password" class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-300 rounded dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="text-gray-700 dark:text-gray-200" for="passwordConfirmation">Password Confirmation</label>
|
||||
<input id="passwordConfirmation" type="password" class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-300 rounded dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end mt-6">
|
||||
<button class="px-6 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
45
components/ui/Forms/SimpleNewsletter.vue
Normal file
45
components/ui/Forms/SimpleNewsletter.vue
Normal file
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<view-component :name="name" :code="code">
|
||||
<div class="py-6" slot="component">
|
||||
<section class="bg-white dark:bg-gray-800">
|
||||
<div class="max-w-3xl px-6 py-16 mx-auto text-center">
|
||||
<h1 class="text-3xl font-semibold text-gray-800 dark:text-gray-100">Want to see Back in action?</h1>
|
||||
<p class="max-w-md mx-auto mt-5 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, minus tempora nemo quos</p>
|
||||
|
||||
<div class="flex flex-col mt-8 space-y-3 sm:space-y-0 sm:flex-row sm:justify-center sm:space-x-4">
|
||||
<input id="email" type="text" class="px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Email Address">
|
||||
|
||||
<button class="px-4 py-2 text-sm font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-indigo-700 rounded-md hover:bg-indigo-600 focus:outline-none focus:bg-indigo-600">
|
||||
Get Started
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</view-component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Simple Newsletter',
|
||||
code: `
|
||||
<section class="bg-white dark:bg-gray-800">
|
||||
<div class="max-w-3xl px-6 py-16 mx-auto text-center">
|
||||
<h1 class="text-3xl font-semibold text-gray-800 dark:text-gray-100">Want to see Back in action?</h1>
|
||||
<p class="max-w-md mx-auto mt-5 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, minus tempora nemo quos</p>
|
||||
|
||||
<div class="flex flex-col mt-8 space-y-3 sm:space-y-0 sm:flex-row sm:justify-center sm:space-x-4">
|
||||
<input id="email" type="text" class="px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Email Address">
|
||||
|
||||
<button class="px-4 py-2 text-sm font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-indigo-700 rounded-md hover:bg-indigo-600 focus:outline-none focus:bg-indigo-600">
|
||||
Get Started
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user