Add ContactForm, SidebarWithSearch, HeroWithImage components 🧶
This commit is contained in:
khatabwedaa
parent
b6be5da245
commit
e6ae61825f
|
|
@ -72,7 +72,7 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
components_count: 43,
|
||||
components_count: 46,
|
||||
SHARE_LINK: `https://twitter.com/intent/tweet?text=${encodeURIComponent(
|
||||
'Check out Meraki UI Awesome @tailwindcss Components that support RTL and fully responsive by @khatabwedaa and @miaababikir 🔥.'
|
||||
)}&url=${encodeURIComponent('https://merakiui.com')}`
|
||||
|
|
|
|||
|
|
@ -64,6 +64,7 @@ import DropdownsNotification from "./ui/Dropdowns/Notification";
|
|||
// Forms
|
||||
import FormsNewsletter from "./ui/Forms/Newsletter";
|
||||
import FormsSimple from "./ui/Forms/Simple";
|
||||
import FormsContact from "./ui/Forms/Contact";
|
||||
// Navbars
|
||||
import NavbarsECommerce from "./ui/Navbars/ECommerce";
|
||||
import NavbarsWithAvatar from "./ui/Navbars/WithAvatar";
|
||||
|
|
@ -72,8 +73,11 @@ import NavbarsWithSearch from "./ui/Navbars/WithSearch";
|
|||
// Heros
|
||||
import HerosECommerce from "./ui/Heros/ECommerce";
|
||||
import HerosWithImage from "./ui/Heros/WithImage";
|
||||
import HerosWithSideImage from "./ui/Heros/WithSideImage";
|
||||
import HerosWithBGImage from "./ui/Heros/WithBGImage";
|
||||
import HerosWithPattern from "./ui/Heros/WithPattern";
|
||||
// Sidebars
|
||||
import SidebarsWithSearch from "./ui/Sidebars/WithSearch";
|
||||
// Sections
|
||||
import SectionsAboutMe from "./ui/Sections/AboutMe";
|
||||
import SectionsFeature from "./ui/Sections/Feature";
|
||||
|
|
@ -118,14 +122,17 @@ export default {
|
|||
DropdownsNotification,
|
||||
FormsNewsletter,
|
||||
FormsSimple,
|
||||
FormsContact,
|
||||
NavbarsECommerce,
|
||||
NavbarsWithAvatar,
|
||||
NavbarsWithCategories,
|
||||
NavbarsWithSearch,
|
||||
HerosECommerce,
|
||||
HerosWithImage,
|
||||
HerosWithSideImage,
|
||||
HerosWithBGImage,
|
||||
HerosWithPattern,
|
||||
SidebarsWithSearch,
|
||||
SectionsAboutMe,
|
||||
SectionsFeature,
|
||||
SectionsOurTeam,
|
||||
|
|
|
|||
131
src/components/ui/Forms/Contact.vue
Normal file
131
src/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">
|
||||
<div class="max-w-2xl w-full mx-auto bg-white dark:bg-gray-800 rounded-md shadow-md px-6 py-4">
|
||||
<h2 class="text-3xl font-semibold text-center text-gray-800 dark:text-white">Get in touch</h2>
|
||||
<p class="text-gray-600 dark:text-gray-400 text-center mt-3">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 mt-6">
|
||||
<a href="#" class="flex flex-col items-center py-3 px-4 text-gray-700 dark:text-gray-200 rounded-md hover:bg-blue-200 dark:hover:bg-blue-500">
|
||||
<svg class="h-5 w-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 py-3 px-4 text-gray-700 dark:text-gray-200 rounded-md hover:bg-blue-200 dark:hover:bg-blue-500">
|
||||
<svg class="h-5 w-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 py-3 px-4 text-gray-700 dark:text-gray-200 rounded-md hover:bg-blue-200 dark:hover:bg-blue-500">
|
||||
<svg class="h-5 w-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="md:flex items-center -mx-2">
|
||||
<div class="mx-2 w-full">
|
||||
<label class="block text-gray-600 dark:text-gray-200 text-sm font-medium mb-2">Name</label>
|
||||
|
||||
<input class="bg-wbg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="text">
|
||||
</div>
|
||||
|
||||
<div class="mx-2 w-full mt-4 md:mt-0">
|
||||
<label class="block text-gray-600 dark:text-gray-200 text-sm font-medium mb-2">E-mail</label>
|
||||
|
||||
<input class="bg-wbg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="email">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 w-full">
|
||||
<label class="block text-gray-600 dark:text-gray-200 text-sm font-medium mb-2">Message</label>
|
||||
|
||||
<textarea class="bg-wbg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full h-40 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="bg-gray-700 text-white py-2 px-4 rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600">Send Message</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</view-component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Contact',
|
||||
code: `
|
||||
<div class="max-w-2xl w-full mx-auto bg-white dark:bg-gray-800 rounded-md shadow-md px-6 py-4">
|
||||
<h2 class="text-3xl font-semibold text-center text-gray-800 dark:text-white">Get in touch</h2>
|
||||
<p class="text-gray-600 dark:text-gray-400 text-center mt-3">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 mt-6">
|
||||
<a href="#" class="flex flex-col items-center py-3 px-4 text-gray-700 dark:text-gray-200 rounded-md hover:bg-blue-200 dark:hover:bg-blue-500">
|
||||
<svg class="h-5 w-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 py-3 px-4 text-gray-700 dark:text-gray-200 rounded-md hover:bg-blue-200 dark:hover:bg-blue-500">
|
||||
<svg class="h-5 w-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 py-3 px-4 text-gray-700 dark:text-gray-200 rounded-md hover:bg-blue-200 dark:hover:bg-blue-500">
|
||||
<svg class="h-5 w-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="md:flex items-center -mx-2">
|
||||
<div class="mx-2 w-full">
|
||||
<label class="block text-gray-600 dark:text-gray-200 text-sm font-medium mb-2">Name</label>
|
||||
|
||||
<input class="bg-wbg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="text">
|
||||
</div>
|
||||
|
||||
<div class="mx-2 w-full mt-4 md:mt-0">
|
||||
<label class="block text-gray-600 dark:text-gray-200 text-sm font-medium mb-2">E-mail</label>
|
||||
|
||||
<input class="bg-wbg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="email">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 w-full">
|
||||
<label class="block text-gray-600 dark:text-gray-200 text-sm font-medium mb-2">Message</label>
|
||||
|
||||
<textarea class="bg-wbg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full h-40 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="bg-gray-700 text-white py-2 px-4 rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600">Send Message</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -2,50 +2,98 @@
|
|||
<view-component :name="name" :code="code">
|
||||
<div class="py-6" slot="component">
|
||||
<header class="bg-white dark:bg-gray-800">
|
||||
<nav class="px-6 py-3 shadow">
|
||||
<div class="md:flex items-center justify-between">
|
||||
<nav class="border-b dark:border-gray-700">
|
||||
<div class="container mx-auto px-6 py-4 md:flex md:justify-between md:items-center">
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<a class="text-gray-800 dark:text-white text-xl font-bold md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
|
||||
<a class="text-gray-800 dark:text-white text-xl font-bold md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Mobile menu button -->
|
||||
<div class="md:hidden">
|
||||
<button type="button" @click="isOpen = !isOpen" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="Toggle menu">
|
||||
<div @click="isOpen = !isOpen" class="flex md:hidden">
|
||||
<button type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="Toggle menu">
|
||||
<svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
|
||||
<path d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
|
||||
<div :class="!isOpen ? 'hidden' : ''" class="flex flex-col -mx-2 mt-2 md:mt-0 md:flex-row md:block">
|
||||
<a href="#" class="py-2 px-2 text-sm text-gray-800 dark:text-gray-200 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Home</a>
|
||||
<a href="#" class="py-2 px-2 text-sm text-gray-800 dark:text-gray-200 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">About</a>
|
||||
<a href="#" class="py-2 px-2 text-sm text-gray-800 dark:text-gray-200 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Contact</a>
|
||||
<div :class="isOpen ? '' : 'hidden'" class="md:flex items-center">
|
||||
<div class="flex flex-col space-y-8 mt-4 md:flex-row md:items-center md:mt-0 md:space-y-0 md:space-x-16">
|
||||
<a class="block text-gray-700 dark:text-gray-200 font-medium hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">glasses Search</a>
|
||||
<a class="block text-gray-700 dark:text-gray-200 font-medium hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">How it works!</a>
|
||||
<a class="block text-gray-700 dark:text-gray-200 font-medium hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">Why us?</a>
|
||||
<a class="block text-gray-700 dark:text-gray-200 font-medium hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">Contact</a>
|
||||
|
||||
<button class="flex items-center py-2 px-5 text-center capitalize tracking-wide text-sm bg-gray-700 text-white font-medium rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600">
|
||||
Get in touch
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="md:flex">
|
||||
<div class="flex items-center justify-center px-6 py-8 md:h-128 w-full md:w-1/2">
|
||||
<div class="max-w-xl">
|
||||
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white md:text-3xl">Build Your New <span class="text-indigo-600 dark:text-indigo-400">Idea</span></h2>
|
||||
|
||||
<p class="mt-2 text-sm text-gray-500 dark:text-gray-400 md:text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis commodi cum cupiditate ducimus, fugit harum id necessitatibus odio quam quasi, quibusdam rem tempora voluptates.</p>
|
||||
<div class="container mx-auto md:h-128 px-6 py-10 md:py-16 flex flex-col space-y-6 md:flex-row md:items-center md:space-x-6">
|
||||
<div class="w-full md:w-1/2">
|
||||
<div class="max-w-lg">
|
||||
<h1 class="text-gray-800 dark:text-white text-2xl font-medium md:text-4xl tracking-wide">Find your premium new glasses exported from US</h1>
|
||||
<p class="mt-2 text-gray-600 dark:text-gray-300">We work with the best remunated glasses dealers in US to find your new glasses.</p>
|
||||
<div class="mt-8 grid sm:grid-cols-2 gap-6">
|
||||
<div class="flex items-center space-x-6 text-gray-800 dark:text-gray-200">
|
||||
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
|
||||
<div class="flex mt-6">
|
||||
<a href="#" class="px-3 py-2 block bg-gray-900 text-white text-xs font-semibold rounded hover:bg-gray-700">Get Started</a>
|
||||
<a href="#" class="mx-4 px-3 py-2 block bg-gray-200 text-gray-700 text-xs font-semibold rounded hover:bg-gray-300">Learn More</a>
|
||||
<span>Premium selection</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-6 text-gray-800 dark:text-gray-200">
|
||||
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
|
||||
<span>Insurance</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-6 text-gray-800 dark:text-gray-200">
|
||||
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
|
||||
<span>All legal documents</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-6 text-gray-800 dark:text-gray-200">
|
||||
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
|
||||
<span>From US glasses dealers</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-6 text-gray-800 dark:text-gray-200">
|
||||
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
|
||||
<span>Payment Security</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-6 text-gray-800 dark:text-gray-200">
|
||||
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
|
||||
<span>Fast shipping (+ Express)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full h-64 md:w-1/2 md:h-auto">
|
||||
<div class="h-full w-full bg-cover" style="background-image: url(https://images.unsplash.com/photo-1508394522741-82ac9c15ba69?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=748&q=80)">
|
||||
<div class="h-full w-full bg-black opacity-25"></div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-center w-full h-72 md:w-1/2">
|
||||
<img class="max-w-2xl w-full h-full rounded object-cover" src="https://images.unsplash.com/photo-1590412732351-8afb84aa0dd4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80" alt="glasses photo">
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
|
@ -61,13 +109,13 @@
|
|||
isOpen: false,
|
||||
code: `
|
||||
<header class="bg-white dark:bg-gray-800">
|
||||
<nav class="px-6 py-3 shadow">
|
||||
<div class="md:flex items-center justify-between">
|
||||
<nav class="border-b dark:border-gray-700">
|
||||
<div class="container mx-auto px-6 py-4 md:flex md:justify-between md:items-center">
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<a class="text-gray-800 dark:text-white text-xl font-bold md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
|
||||
<a class="text-gray-800 dark:text-white text-xl font-bold md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Mobile menu button -->
|
||||
<div class="md:hidden">
|
||||
<button type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="Toggle menu">
|
||||
|
|
@ -77,34 +125,82 @@
|
|||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
|
||||
<div class="flex flex-col -mx-2 mt-2 md:mt-0 md:flex-row md:block">
|
||||
<a href="#" class="py-2 px-2 text-sm text-gray-800 dark:text-gray-200 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Home</a>
|
||||
<a href="#" class="py-2 px-2 text-sm text-gray-800 dark:text-gray-200 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">About</a>
|
||||
<a href="#" class="py-2 px-2 text-sm text-gray-800 dark:text-gray-200 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Contact</a>
|
||||
<div class="md:flex items-center">
|
||||
<div class="flex flex-col space-y-8 mt-4 md:flex-row md:items-center md:mt-0 md:space-y-0 md:space-x-16">
|
||||
<a class="block text-gray-700 dark:text-gray-200 font-medium hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">glasses Search</a>
|
||||
<a class="block text-gray-700 dark:text-gray-200 font-medium hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">How it works!</a>
|
||||
<a class="block text-gray-700 dark:text-gray-200 font-medium hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">Why us?</a>
|
||||
<a class="block text-gray-700 dark:text-gray-200 font-medium hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">Contact</a>
|
||||
|
||||
<button class="flex items-center py-2 px-5 text-center capitalize tracking-wide text-sm bg-gray-700 text-white font-medium rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600">
|
||||
Get in touch
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="md:flex">
|
||||
<div class="flex items-center justify-center px-6 py-8 md:h-128 w-full md:w-1/2">
|
||||
<div class="max-w-xl">
|
||||
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white md:text-3xl">Build Your New <span class="text-indigo-600 dark:text-indigo-400">Idea</span></h2>
|
||||
|
||||
<p class="mt-2 text-sm text-gray-500 dark:text-gray-400 md:text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis commodi cum cupiditate ducimus, fugit harum id necessitatibus odio quam quasi, quibusdam rem tempora voluptates.</p>
|
||||
<div class="container mx-auto md:h-128 px-6 py-10 md:py-16 flex flex-col space-y-6 md:flex-row md:items-center md:space-x-6">
|
||||
<div class="w-full md:w-1/2">
|
||||
<div class="max-w-lg">
|
||||
<h1 class="text-gray-800 dark:text-white text-2xl font-medium md:text-4xl tracking-wide">Find your premium new glasses exported from US</h1>
|
||||
<p class="mt-2 text-gray-600 dark:text-gray-300">We work with the best remunated glasses dealers in US to find your new glasses.</p>
|
||||
<div class="mt-8 grid sm:grid-cols-2 gap-6">
|
||||
<div class="flex items-center space-x-6 text-gray-800 dark:text-gray-200">
|
||||
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
|
||||
<div class="flex mt-6">
|
||||
<a href="#" class="px-3 py-2 block bg-gray-900 text-white text-xs font-semibold rounded hover:bg-gray-700">Get Started</a>
|
||||
<a href="#" class="mx-4 px-3 py-2 block bg-gray-200 text-gray-700 text-xs font-semibold rounded hover:bg-gray-300">Learn More</a>
|
||||
<span>Premium selection</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-6 text-gray-800 dark:text-gray-200">
|
||||
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
|
||||
<span>Insurance</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-6 text-gray-800 dark:text-gray-200">
|
||||
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
|
||||
<span>All legal documents</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-6 text-gray-800 dark:text-gray-200">
|
||||
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
|
||||
<span>From US glasses dealers</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-6 text-gray-800 dark:text-gray-200">
|
||||
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
|
||||
<span>Payment Security</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-6 text-gray-800 dark:text-gray-200">
|
||||
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
|
||||
<span>Fast shipping (+ Express)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full h-64 md:w-1/2 md:h-auto">
|
||||
<div class="h-full w-full bg-cover" style="background-image: url(https://images.unsplash.com/photo-1508394522741-82ac9c15ba69?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=748&q=80)">
|
||||
<div class="h-full w-full bg-black opacity-25"></div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-center w-full h-72 md:w-1/2">
|
||||
<img class="max-w-2xl w-full h-full rounded object-cover" src="https://images.unsplash.com/photo-1590412732351-8afb84aa0dd4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80" alt="glasses photo">
|
||||
</div>
|
||||
</div>
|
||||
</header>`,
|
||||
|
|
|
|||
114
src/components/ui/Heros/WithSideImage.vue
Normal file
114
src/components/ui/Heros/WithSideImage.vue
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
<template>
|
||||
<view-component :name="name" :code="code">
|
||||
<div class="py-6" slot="component">
|
||||
<header class="bg-white dark:bg-gray-800">
|
||||
<nav class="px-6 py-3 shadow">
|
||||
<div class="md:flex items-center justify-between">
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<a class="text-gray-800 dark:text-white text-xl font-bold md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu button -->
|
||||
<div class="md:hidden">
|
||||
<button type="button" @click="isOpen = !isOpen" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="Toggle menu">
|
||||
<svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
|
||||
<path d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
|
||||
<div :class="!isOpen ? 'hidden' : ''" class="flex flex-col -mx-2 mt-2 md:mt-0 md:flex-row md:block">
|
||||
<a href="#" class="py-2 px-2 text-sm text-gray-800 dark:text-gray-200 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Home</a>
|
||||
<a href="#" class="py-2 px-2 text-sm text-gray-800 dark:text-gray-200 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">About</a>
|
||||
<a href="#" class="py-2 px-2 text-sm text-gray-800 dark:text-gray-200 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="md:flex">
|
||||
<div class="flex items-center justify-center px-6 py-8 md:h-128 w-full md:w-1/2">
|
||||
<div class="max-w-xl">
|
||||
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white md:text-3xl">Build Your New <span class="text-indigo-600 dark:text-indigo-400">Idea</span></h2>
|
||||
|
||||
<p class="mt-2 text-sm text-gray-500 dark:text-gray-400 md:text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis commodi cum cupiditate ducimus, fugit harum id necessitatibus odio quam quasi, quibusdam rem tempora voluptates.</p>
|
||||
|
||||
<div class="flex mt-6">
|
||||
<a href="#" class="px-3 py-2 block bg-gray-900 text-white text-xs font-semibold rounded hover:bg-gray-700">Get Started</a>
|
||||
<a href="#" class="mx-4 px-3 py-2 block bg-gray-200 text-gray-700 text-xs font-semibold rounded hover:bg-gray-300">Learn More</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full h-64 md:w-1/2 md:h-auto">
|
||||
<div class="h-full w-full bg-cover" style="background-image: url(https://images.unsplash.com/photo-1508394522741-82ac9c15ba69?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=748&q=80)">
|
||||
<div class="h-full w-full bg-black opacity-25"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
</view-component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'With Side Image',
|
||||
isOpen: false,
|
||||
code: `
|
||||
<header class="bg-white dark:bg-gray-800">
|
||||
<nav class="px-6 py-3 shadow">
|
||||
<div class="md:flex items-center justify-between">
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<a class="text-gray-800 dark:text-white text-xl font-bold md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu button -->
|
||||
<div class="md:hidden">
|
||||
<button type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="Toggle menu">
|
||||
<svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
|
||||
<path d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
|
||||
<div class="flex flex-col -mx-2 mt-2 md:mt-0 md:flex-row md:block">
|
||||
<a href="#" class="py-2 px-2 text-sm text-gray-800 dark:text-gray-200 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Home</a>
|
||||
<a href="#" class="py-2 px-2 text-sm text-gray-800 dark:text-gray-200 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">About</a>
|
||||
<a href="#" class="py-2 px-2 text-sm text-gray-800 dark:text-gray-200 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="md:flex">
|
||||
<div class="flex items-center justify-center px-6 py-8 md:h-128 w-full md:w-1/2">
|
||||
<div class="max-w-xl">
|
||||
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white md:text-3xl">Build Your New <span class="text-indigo-600 dark:text-indigo-400">Idea</span></h2>
|
||||
|
||||
<p class="mt-2 text-sm text-gray-500 dark:text-gray-400 md:text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis commodi cum cupiditate ducimus, fugit harum id necessitatibus odio quam quasi, quibusdam rem tempora voluptates.</p>
|
||||
|
||||
<div class="flex mt-6">
|
||||
<a href="#" class="px-3 py-2 block bg-gray-900 text-white text-xs font-semibold rounded hover:bg-gray-700">Get Started</a>
|
||||
<a href="#" class="mx-4 px-3 py-2 block bg-gray-200 text-gray-700 text-xs font-semibold rounded hover:bg-gray-300">Learn More</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full h-64 md:w-1/2 md:h-auto">
|
||||
<div class="h-full w-full bg-cover" style="background-image: url(https://images.unsplash.com/photo-1508394522741-82ac9c15ba69?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=748&q=80)">
|
||||
<div class="h-full w-full bg-black opacity-25"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>`,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
151
src/components/ui/Sidebars/WithSearch.vue
Normal file
151
src/components/ui/Sidebars/WithSearch.vue
Normal file
|
|
@ -0,0 +1,151 @@
|
|||
<template>
|
||||
<view-component :name="name" :code="code">
|
||||
<div slot="component">
|
||||
<div class="flex flex-col w-64 h-screen bg-white dark:bg-gray-800 px-4 py-8">
|
||||
<h2 class="text-3xl font-semibold text-gray-800 dark:text-white">Brand</h2>
|
||||
|
||||
<input class="mt-6 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="text" placeholder="Search" />
|
||||
|
||||
<div class="flex flex-col justify-between flex-1 mt-6">
|
||||
<nav>
|
||||
<a class="flex items-center rounded py-2 px-4 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200" href="#">
|
||||
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M19 11H5M19 11C20.1046 11 21 11.8954 21 13V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V13C3 11.8954 3.89543 11 5 11M19 11V9C19 7.89543 18.1046 7 17 7M5 11V9C5 7.89543 5.89543 7 7 7M7 7V5C7 3.89543 7.89543 3 9 3H15C16.1046 3 17 3.89543 17 5V7M7 7H17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 font-medium">Dashboard</span>
|
||||
</a>
|
||||
|
||||
<a class="flex items-center mt-5 py-2 px-4 text-gray-600 dark:text-gray-400 rounded hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
|
||||
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16 7C16 9.20914 14.2091 11 12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M12 14C8.13401 14 5 17.134 5 21H19C19 17.134 15.866 14 12 14Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 font-medium">Accounts</span>
|
||||
</a>
|
||||
|
||||
<a class="flex items-center mt-5 py-2 px-4 text-gray-600 dark:text-gray-400 rounded hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
|
||||
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 5V7M15 11V13M15 17V19M5 5C3.89543 5 3 5.89543 3 7V10C4.10457 10 5 10.8954 5 12C5 13.1046 4.10457 14 3 14V17C3 18.1046 3.89543 19 5 19H19C20.1046 19 21 18.1046 21 17V14C19.8954 14 19 13.1046 19 12C19 10.8954 19.8954 10 21 10V7C21 5.89543 20.1046 5 19 5H5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 font-medium">Tickets</span>
|
||||
</a>
|
||||
|
||||
<a class="flex items-center mt-5 py-2 px-4 text-gray-600 dark:text-gray-400 rounded hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
|
||||
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.3246 4.31731C10.751 2.5609 13.249 2.5609 13.6754 4.31731C13.9508 5.45193 15.2507 5.99038 16.2478 5.38285C17.7913 4.44239 19.5576 6.2087 18.6172 7.75218C18.0096 8.74925 18.5481 10.0492 19.6827 10.3246C21.4391 10.751 21.4391 13.249 19.6827 13.6754C18.5481 13.9508 18.0096 15.2507 18.6172 16.2478C19.5576 17.7913 17.7913 19.5576 16.2478 18.6172C15.2507 18.0096 13.9508 18.5481 13.6754 19.6827C13.249 21.4391 10.751 21.4391 10.3246 19.6827C10.0492 18.5481 8.74926 18.0096 7.75219 18.6172C6.2087 19.5576 4.44239 17.7913 5.38285 16.2478C5.99038 15.2507 5.45193 13.9508 4.31731 13.6754C2.5609 13.249 2.5609 10.751 4.31731 10.3246C5.45193 10.0492 5.99037 8.74926 5.38285 7.75218C4.44239 6.2087 6.2087 4.44239 7.75219 5.38285C8.74926 5.99037 10.0492 5.45193 10.3246 4.31731Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 font-medium">Settings</span>
|
||||
</a>
|
||||
|
||||
<hr class="my-6 dark:border-gray-600" />
|
||||
|
||||
<a class="flex items-center mt-5 py-2 px-4 text-gray-600 dark:text-gray-400 rounded hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
|
||||
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 5V7M15 11V13M15 17V19M5 5C3.89543 5 3 5.89543 3 7V10C4.10457 10 5 10.8954 5 12C5 13.1046 4.10457 14 3 14V17C3 18.1046 3.89543 19 5 19H19C20.1046 19 21 18.1046 21 17V14C19.8954 14 19 13.1046 19 12C19 10.8954 19.8954 10 21 10V7C21 5.89543 20.1046 5 19 5H5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 font-medium">Tickets</span>
|
||||
</a>
|
||||
|
||||
<a class="flex items-center mt-5 py-2 px-4 text-gray-600 dark:text-gray-400 rounded hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
|
||||
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.3246 4.31731C10.751 2.5609 13.249 2.5609 13.6754 4.31731C13.9508 5.45193 15.2507 5.99038 16.2478 5.38285C17.7913 4.44239 19.5576 6.2087 18.6172 7.75218C18.0096 8.74925 18.5481 10.0492 19.6827 10.3246C21.4391 10.751 21.4391 13.249 19.6827 13.6754C18.5481 13.9508 18.0096 15.2507 18.6172 16.2478C19.5576 17.7913 17.7913 19.5576 16.2478 18.6172C15.2507 18.0096 13.9508 18.5481 13.6754 19.6827C13.249 21.4391 10.751 21.4391 10.3246 19.6827C10.0492 18.5481 8.74926 18.0096 7.75219 18.6172C6.2087 19.5576 4.44239 17.7913 5.38285 16.2478C5.99038 15.2507 5.45193 13.9508 4.31731 13.6754C2.5609 13.249 2.5609 10.751 4.31731 10.3246C5.45193 10.0492 5.99037 8.74926 5.38285 7.75218C4.44239 6.2087 6.2087 4.44239 7.75219 5.38285C8.74926 5.99037 10.0492 5.45193 10.3246 4.31731Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 font-medium">Settings</span>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<div class="flex items-center -mx-2 px-4">
|
||||
<img class="mx-2 h-9 w-9 rounded-full object-cover" src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="avatar">
|
||||
<h4 class="mx-2 text-gray-800 dark:text-gray-200 font-medium hover:underline">John Doe</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</view-component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'With Search',
|
||||
code: `
|
||||
<div class="flex flex-col w-64 h-screen bg-white dark:bg-gray-800 px-4 py-8">
|
||||
<h2 class="text-3xl font-semibold text-gray-800 dark:text-white">Brand</h2>
|
||||
|
||||
<input class="mt-6 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="text" placeholder="Search" />
|
||||
|
||||
<div class="flex flex-col justify-between flex-1 mt-6">
|
||||
<nav>
|
||||
<a class="flex items-center rounded py-2 px-4 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200" href="#">
|
||||
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M19 11H5M19 11C20.1046 11 21 11.8954 21 13V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V13C3 11.8954 3.89543 11 5 11M19 11V9C19 7.89543 18.1046 7 17 7M5 11V9C5 7.89543 5.89543 7 7 7M7 7V5C7 3.89543 7.89543 3 9 3H15C16.1046 3 17 3.89543 17 5V7M7 7H17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 font-medium">Dashboard</span>
|
||||
</a>
|
||||
|
||||
<a class="flex items-center mt-5 py-2 px-4 text-gray-600 dark:text-gray-400 rounded hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
|
||||
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16 7C16 9.20914 14.2091 11 12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M12 14C8.13401 14 5 17.134 5 21H19C19 17.134 15.866 14 12 14Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 font-medium">Accounts</span>
|
||||
</a>
|
||||
|
||||
<a class="flex items-center mt-5 py-2 px-4 text-gray-600 dark:text-gray-400 rounded hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
|
||||
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 5V7M15 11V13M15 17V19M5 5C3.89543 5 3 5.89543 3 7V10C4.10457 10 5 10.8954 5 12C5 13.1046 4.10457 14 3 14V17C3 18.1046 3.89543 19 5 19H19C20.1046 19 21 18.1046 21 17V14C19.8954 14 19 13.1046 19 12C19 10.8954 19.8954 10 21 10V7C21 5.89543 20.1046 5 19 5H5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 font-medium">Tickets</span>
|
||||
</a>
|
||||
|
||||
<a class="flex items-center mt-5 py-2 px-4 text-gray-600 dark:text-gray-400 rounded hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
|
||||
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.3246 4.31731C10.751 2.5609 13.249 2.5609 13.6754 4.31731C13.9508 5.45193 15.2507 5.99038 16.2478 5.38285C17.7913 4.44239 19.5576 6.2087 18.6172 7.75218C18.0096 8.74925 18.5481 10.0492 19.6827 10.3246C21.4391 10.751 21.4391 13.249 19.6827 13.6754C18.5481 13.9508 18.0096 15.2507 18.6172 16.2478C19.5576 17.7913 17.7913 19.5576 16.2478 18.6172C15.2507 18.0096 13.9508 18.5481 13.6754 19.6827C13.249 21.4391 10.751 21.4391 10.3246 19.6827C10.0492 18.5481 8.74926 18.0096 7.75219 18.6172C6.2087 19.5576 4.44239 17.7913 5.38285 16.2478C5.99038 15.2507 5.45193 13.9508 4.31731 13.6754C2.5609 13.249 2.5609 10.751 4.31731 10.3246C5.45193 10.0492 5.99037 8.74926 5.38285 7.75218C4.44239 6.2087 6.2087 4.44239 7.75219 5.38285C8.74926 5.99037 10.0492 5.45193 10.3246 4.31731Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 font-medium">Settings</span>
|
||||
</a>
|
||||
|
||||
<hr class="my-6 dark:border-gray-600" />
|
||||
|
||||
<a class="flex items-center mt-5 py-2 px-4 text-gray-600 dark:text-gray-400 rounded hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
|
||||
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 5V7M15 11V13M15 17V19M5 5C3.89543 5 3 5.89543 3 7V10C4.10457 10 5 10.8954 5 12C5 13.1046 4.10457 14 3 14V17C3 18.1046 3.89543 19 5 19H19C20.1046 19 21 18.1046 21 17V14C19.8954 14 19 13.1046 19 12C19 10.8954 19.8954 10 21 10V7C21 5.89543 20.1046 5 19 5H5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 font-medium">Tickets</span>
|
||||
</a>
|
||||
|
||||
<a class="flex items-center mt-5 py-2 px-4 text-gray-600 dark:text-gray-400 rounded hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
|
||||
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.3246 4.31731C10.751 2.5609 13.249 2.5609 13.6754 4.31731C13.9508 5.45193 15.2507 5.99038 16.2478 5.38285C17.7913 4.44239 19.5576 6.2087 18.6172 7.75218C18.0096 8.74925 18.5481 10.0492 19.6827 10.3246C21.4391 10.751 21.4391 13.249 19.6827 13.6754C18.5481 13.9508 18.0096 15.2507 18.6172 16.2478C19.5576 17.7913 17.7913 19.5576 16.2478 18.6172C15.2507 18.0096 13.9508 18.5481 13.6754 19.6827C13.249 21.4391 10.751 21.4391 10.3246 19.6827C10.0492 18.5481 8.74926 18.0096 7.75219 18.6172C6.2087 19.5576 4.44239 17.7913 5.38285 16.2478C5.99038 15.2507 5.45193 13.9508 4.31731 13.6754C2.5609 13.249 2.5609 10.751 4.31731 10.3246C5.45193 10.0492 5.99037 8.74926 5.38285 7.75218C4.44239 6.2087 6.2087 4.44239 7.75219 5.38285C8.74926 5.99037 10.0492 5.45193 10.3246 4.31731Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 font-medium">Settings</span>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<div class="flex items-center -mx-2 px-4">
|
||||
<img class="mx-2 h-9 w-9 rounded-full object-cover" src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="avatar">
|
||||
<h4 class="mx-2 text-gray-800 dark:text-gray-200 font-medium hover:underline">John Doe</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -41,7 +41,11 @@ export default [
|
|||
},
|
||||
{
|
||||
name: "Forms",
|
||||
components: [{ name: "Simple" }, { name: "Newsletter" }],
|
||||
components: [
|
||||
{ name: "Simple" },
|
||||
{ name: "Contact" },
|
||||
{ name: "Newsletter" },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Dropdowns",
|
||||
|
|
@ -61,10 +65,15 @@ export default [
|
|||
components: [
|
||||
{ name: "ECommerce" },
|
||||
{ name: "WithImage" },
|
||||
{ name: "WithSideImage" },
|
||||
{ name: "WithBGImage" },
|
||||
{ name: "WithPattern" },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Sidebars",
|
||||
components: [{ name: "WithSearch" }],
|
||||
},
|
||||
{
|
||||
name: "Sections",
|
||||
components: [
|
||||
|
|
|
|||
Loading…
Reference in a new issue