mirror of
https://github.com/bakateam/merakiui.git
synced 2025-12-08 14:43:23 +00:00
Merge pull request #36 from bakateam/components/jan-2021
Jan Components & Improvments
This commit is contained in:
khatab Wedaa
GitHub
@@ -35,7 +35,7 @@ export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
darkMode: JSON.parse(localStorage.getItem("merakiuiDarkMode")) || false,
|
||||
darkMode: JSON.parse(localStorage.getItem("darkMode")) || false,
|
||||
og: "https://merakiui.com" + require("./assets/merakiui-og.png"),
|
||||
};
|
||||
},
|
||||
@@ -70,7 +70,7 @@ export default {
|
||||
|
||||
watch: {
|
||||
darkMode() {
|
||||
localStorage.setItem("merakiuiDarkMode", this.darkMode);
|
||||
localStorage.setItem("darkMode", this.darkMode);
|
||||
console.log('Night Mode: ' + this.darkMode);
|
||||
}
|
||||
},
|
||||
|
||||
1
src/assets/svg/hero-pattern.svg
Normal file
1
src/assets/svg/hero-pattern.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 7.3 KiB |
@@ -20,47 +20,45 @@
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div>
|
||||
<div class="container mx-auto px-6 py-8 md:py-0">
|
||||
<div class="md:flex">
|
||||
<div class="flex items-center w-full md:w-1/2 md:h-112">
|
||||
<div class="max-w-lg text-white">
|
||||
<div class="text-xs font-light">Simple UI Starter</div>
|
||||
<div class="container mx-auto px-6 py-8 md:py-0">
|
||||
<div class="md:flex">
|
||||
<div class="flex items-center w-full md:w-1/2 md:h-128">
|
||||
<div class="max-w-lg text-white">
|
||||
<div class="text-xs font-light">Simple UI Starter</div>
|
||||
|
||||
<h1 class="font-semibold text-2xl mt-3 text-white md:text-3xl">Meraki <span class="text-blue-400">UI </span> Components</h1>
|
||||
|
||||
<p class="mt-3 text-gray-300">
|
||||
Beautiful <a href="https://tailwindcss.com" class="text-blue-400 hover:underline font-normal">Tailwindcss</a>
|
||||
components that support RTL languages & fully responsive based on Flexbox & CSS Grid. Built by
|
||||
<a href="https://twitter.com/khatabwedaa" class="text-blue-400 hover:underline">@khatabwedaa</a> &
|
||||
<a href="https://twitter.com/miaababikir" class="text-blue-400 hover:underline">@miaababikir</a>
|
||||
</p>
|
||||
<h1 class="font-semibold text-2xl mt-3 text-white md:text-3xl">Meraki <span class="text-blue-400">UI </span> Components</h1>
|
||||
|
||||
<p class="mt-3 text-gray-300">
|
||||
Beautiful <a href="https://tailwindcss.com" class="text-blue-400 hover:underline font-normal">Tailwindcss</a>
|
||||
components that support RTL languages & fully responsive based on Flexbox & CSS Grid. Built by
|
||||
<a href="https://twitter.com/khatabwedaa" class="text-blue-400 hover:underline">@khatabwedaa</a> &
|
||||
<a href="https://twitter.com/miaababikir" class="text-blue-400 hover:underline">@miaababikir</a>
|
||||
</p>
|
||||
|
||||
<div class="flex flex-wrap items-center mt-4">
|
||||
<a class="flex text-white hover:underline cursor-pointer">
|
||||
<svg class="h-5 w-5 text-gray-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<div class="flex flex-wrap items-center mt-4">
|
||||
<a class="flex text-white hover:underline cursor-pointer">
|
||||
<svg class="h-5 w-5 text-gray-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<p class="mx-2 text-sm">{{ components_count }} Components</p>
|
||||
</a>
|
||||
<p class="mx-2 text-sm">{{ components_count }} Components</p>
|
||||
</a>
|
||||
|
||||
<a class="flex text-white hover:underline ml-2" href="https://github.com/merakiui/merakiui/blob/master/LICENSE">
|
||||
<svg class="h-5 w-5 text-gray-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1.323l3.954 1.582 1.599-.8a1 1 0 01.894 1.79l-1.233.616 1.738 5.42a1 1 0 01-.285 1.05A3.989 3.989 0 0115 15a3.989 3.989 0 01-2.667-1.019 1 1 0 01-.285-1.05l1.715-5.349L11 6.477V16h2a1 1 0 110 2H7a1 1 0 110-2h2V6.477L6.237 7.582l1.715 5.349a1 1 0 01-.285 1.05A3.989 3.989 0 015 15a3.989 3.989 0 01-2.667-1.019 1 1 0 01-.285-1.05l1.738-5.42-1.233-.617a1 1 0 01.894-1.788l1.599.799L9 4.323V3a1 1 0 011-1zm-5 8.274l-.818 2.552c.25.112.526.174.818.174.292 0 .569-.062.818-.174L5 10.274zm10 0l-.818 2.552c.25.112.526.174.818.174.292 0 .569-.062.818-.174L15 10.274z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<p class="mx-2 text-sm">MIT Licensed</p>
|
||||
</a>
|
||||
</div>
|
||||
<a class="flex text-white hover:underline ml-2" href="https://github.com/merakiui/merakiui/blob/master/LICENSE">
|
||||
<svg class="h-5 w-5 text-gray-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1.323l3.954 1.582 1.599-.8a1 1 0 01.894 1.79l-1.233.616 1.738 5.42a1 1 0 01-.285 1.05A3.989 3.989 0 0115 15a3.989 3.989 0 01-2.667-1.019 1 1 0 01-.285-1.05l1.715-5.349L11 6.477V16h2a1 1 0 110 2H7a1 1 0 110-2h2V6.477L6.237 7.582l1.715 5.349a1 1 0 01-.285 1.05A3.989 3.989 0 015 15a3.989 3.989 0 01-2.667-1.019 1 1 0 01-.285-1.05l1.738-5.42-1.233-.617a1 1 0 01.894-1.788l1.599.799L9 4.323V3a1 1 0 011-1zm-5 8.274l-.818 2.552c.25.112.526.174.818.174.292 0 .569-.062.818-.174L5 10.274zm10 0l-.818 2.552c.25.112.526.174.818.174.292 0 .569-.062.818-.174L15 10.274z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<p class="mx-2 text-sm">MIT Licensed</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mt-6 w-full md:w-1/2 flex justify-center md:justify-end items-center md:mt-0">
|
||||
<div class="w-full max-w-md">
|
||||
<img src="../assets/svg/Responsive-bro.svg" alt="moon">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 w-full md:w-1/2 flex justify-center md:justify-end items-center md:mt-0">
|
||||
<div class="w-full max-w-md">
|
||||
<img src="../assets/svg/Responsive-bro.svg" alt="moon">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -72,7 +70,7 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
components_count: 43,
|
||||
components_count: 49,
|
||||
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')}`
|
||||
|
||||
@@ -68,7 +68,10 @@ import DropdownsSimple from "./ui/Dropdowns/Simple";
|
||||
import DropdownsNotification from "./ui/Dropdowns/Notification";
|
||||
// Forms
|
||||
import FormsNewsletter from "./ui/Forms/Newsletter";
|
||||
import FormsSimpleNewsletter from "./ui/Forms/SimpleNewsletter";
|
||||
import FormsSimple from "./ui/Forms/Simple";
|
||||
import FormsSearch from "./ui/Forms/Search";
|
||||
import FormsContact from "./ui/Forms/Contact";
|
||||
// Navbars
|
||||
import NavbarsECommerce from "./ui/Navbars/ECommerce";
|
||||
import NavbarsWithAvatar from "./ui/Navbars/WithAvatar";
|
||||
@@ -77,8 +80,12 @@ 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";
|
||||
import SidebarsWithAvatar from "./ui/Sidebars/WithAvatar";
|
||||
// Sections
|
||||
import SectionsAboutMe from "./ui/Sections/AboutMe";
|
||||
import SectionsFeature from "./ui/Sections/Feature";
|
||||
@@ -122,15 +129,21 @@ export default {
|
||||
DropdownsSimple,
|
||||
DropdownsNotification,
|
||||
FormsNewsletter,
|
||||
FormsSimpleNewsletter,
|
||||
FormsSimple,
|
||||
FormsSearch,
|
||||
FormsContact,
|
||||
NavbarsECommerce,
|
||||
NavbarsWithAvatar,
|
||||
NavbarsWithCategories,
|
||||
NavbarsWithSearch,
|
||||
HerosECommerce,
|
||||
HerosWithImage,
|
||||
HerosWithSideImage,
|
||||
HerosWithBGImage,
|
||||
HerosWithPattern,
|
||||
SidebarsWithAvatar,
|
||||
SidebarsWithSearch,
|
||||
SectionsAboutMe,
|
||||
SectionsFeature,
|
||||
SectionsOurTeam,
|
||||
|
||||
@@ -70,7 +70,7 @@
|
||||
name: 'Login With Side Image',
|
||||
code: `
|
||||
<div class="flex max-w-sm mx-auto bg-white dark:bg-gray-800 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-1602610411365-76e8c2a88e18?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=333&q=80')"></div>
|
||||
<div class="hidden lg:block lg:w-1/2 bg-cover" style="background-image:url('https://images.unsplash.com/photo-1606660265514-358ebbadc80d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1575&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 dark:text-white text-center">Brand</h2>
|
||||
@@ -109,7 +109,7 @@
|
||||
<a href="#" class="text-xs text-gray-500 dark:text-gray-300 hover:underline">Forget Password?</a>
|
||||
</div>
|
||||
|
||||
<input id="loggingPassword" 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="password">
|
||||
<input id="loggingPassword" class="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="password">
|
||||
</div>
|
||||
|
||||
<div class="mt-8">
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<view-component :name="name" :code="code">
|
||||
<div class="px-3 py-8 flex items-center justify-center" slot="component">
|
||||
<button class="flex items-center py-2 px-4 capitalize tracking-wide bg-blue-600 dark:bg-gray-800 text-white font-medium rounded hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700">
|
||||
<button class="py-2 px-4 capitalize tracking-wide bg-blue-600 dark:bg-gray-800 text-white font-medium rounded hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700">
|
||||
Primary
|
||||
</button>
|
||||
</div>
|
||||
@@ -14,7 +14,7 @@
|
||||
return {
|
||||
name: 'Primary',
|
||||
code: `
|
||||
<button class="flex items-center py-2 px-4 capitalize tracking-wide bg-blue-600 dark:bg-gray-800 text-white font-medium rounded hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700">
|
||||
<button class="py-2 px-4 capitalize tracking-wide bg-blue-600 dark:bg-gray-800 text-white font-medium rounded hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700">
|
||||
Primary
|
||||
</button>`
|
||||
}
|
||||
|
||||
@@ -59,7 +59,7 @@
|
||||
</button>
|
||||
|
||||
<!-- Dropdown menu -->
|
||||
<div class="absolute right-0 mt-2 w-80 bg-white dark:bg-gray-800 rounded-md shadow-lg overflow-hidden z-20" style="width:20rem;">
|
||||
<div class="absolute right-0 mt-2 w-80 bg-white dark:bg-gray-800 rounded-md shadow-lg overflow-hidden z-20">
|
||||
<div class="py-2">
|
||||
<a href="#" class="flex items-center px-4 py-3 border-b hover:bg-gray-100 dark:hover:bg-gray-700 dark:border-gray-700 -mx-2">
|
||||
<img class="h-8 w-8 rounded-full object-cover mx-1" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar">
|
||||
|
||||
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">
|
||||
<section 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-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-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-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>
|
||||
</section>
|
||||
</div>
|
||||
</view-component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Contact',
|
||||
code: `
|
||||
<section 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-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-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-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>
|
||||
</section>`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,7 +1,7 @@
|
||||
<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 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden md:flex-row md:h-48">
|
||||
<section class="flex flex-col max-w-4xl mx-auto bg-white dark:bg-gray-800 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 md:dark:bg-gray-800">
|
||||
<div class="py-6 px-6 md:px-8 md:py-0">
|
||||
<h2 class="text-gray-700 dark:text-white text-lg font-bold md:text-gray-100">Sign Up For <span class="text-blue-600 dark:text-blue-400 md:text-blue-300">Project</span> Updates</h2>
|
||||
@@ -19,7 +19,7 @@
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</view-component>
|
||||
</template>
|
||||
@@ -30,7 +30,7 @@
|
||||
return {
|
||||
name: 'Newsletter',
|
||||
code: `
|
||||
<div class="flex flex-col max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden md:flex-row md:h-48">
|
||||
<section class="flex flex-col max-w-4xl mx-auto bg-white dark:bg-gray-800 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 md:dark:bg-gray-800">
|
||||
<div class="py-6 px-6 md:px-8 md:py-0">
|
||||
<h2 class="text-gray-700 dark:text-white text-lg font-bold md:text-gray-100">Sign Up For <span class="text-blue-600 dark:text-blue-400 md:text-blue-300">Project</span> Updates</h2>
|
||||
@@ -48,7 +48,7 @@
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>`
|
||||
</section>`
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
96
src/components/ui/Forms/Search.vue
Normal file
96
src/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="max-w-md w-full mx-auto px-5 py-4 relative rounded-md">
|
||||
<div class="relative">
|
||||
<span class="absolute inset-y-0 left-0 pl-3 flex items-center">
|
||||
<svg class="h-5 w-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="pl-10 pr-4 py-3 w-full bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md 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 mt-4 mx-5 px-6 py-3 max-h-72 overflow-y-auto bg-white dark:bg-gray-800 border border-gray-300 dark:border-transparent rounded-md">
|
||||
<a v-for="job in jobsSearch" :key="job.title" href="#" class="block py-1">
|
||||
<h3 class="text-gray-700 dark:text-gray-100 font-medium hover:underline" v-text="job.title"></h3>
|
||||
<p class="mt-2 text-gray-500 dark:text-gray-400 text-sm" 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="max-w-md w-full mx-auto px-5 py-4 relative rounded-md">
|
||||
<div class="relative">
|
||||
<span class="absolute inset-y-0 left-0 pl-3 flex items-center">
|
||||
<svg class="h-5 w-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="pl-10 pr-4 py-3 w-full bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Search">
|
||||
</div>
|
||||
|
||||
<div class="absolute inset-x-0 mt-4 mx-5 px-6 py-3 max-h-72 overflow-y-auto bg-white dark:bg-gray-800 border border-gray-300 dark:border-transparent rounded-md">
|
||||
<a href="#" class="block py-1">
|
||||
<h3 class="text-gray-700 dark:text-gray-100 font-medium hover:underline">Software engineer</h3>
|
||||
<p class="mt-2 text-gray-500 dark:text-gray-400 text-sm">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>
|
||||
@@ -1,7 +1,7 @@
|
||||
<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 dark:bg-gray-800 rounded-md shadow-md">
|
||||
<section class="max-w-4xl p-6 mx-auto bg-white dark:bg-gray-800 rounded-md shadow-md">
|
||||
<h2 class="text-lg text-gray-700 dark:text-white font-semibold capitalize">Account settings</h2>
|
||||
|
||||
<form>
|
||||
@@ -31,7 +31,7 @@
|
||||
<button class="bg-gray-700 text-white py-2 px-4 rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600">Update Account Information</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</view-component>
|
||||
</template>
|
||||
@@ -42,7 +42,7 @@
|
||||
return {
|
||||
name: 'Simple',
|
||||
code: `
|
||||
<div class="max-w-4xl p-6 mx-auto bg-white dark:bg-gray-800 rounded-md shadow-md">
|
||||
<section class="max-w-4xl p-6 mx-auto bg-white dark:bg-gray-800 rounded-md shadow-md">
|
||||
<h2 class="text-lg text-gray-700 dark:text-white font-semibold capitalize">Account settings</h2>
|
||||
|
||||
<form>
|
||||
@@ -72,7 +72,7 @@
|
||||
<button class="bg-gray-700 text-white py-2 px-4 rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600">Update Account Information</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>`
|
||||
</section>`
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
45
src/components/ui/Forms/SimpleNewsletter.vue
Normal file
45
src/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 mx-auto px-6 py-16 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 space-y-3 sm:space-y-0 sm:flex-row sm:justify-center sm:space-x-4 mt-8">
|
||||
<input id="email" type="text" class="py-2 px-4 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Email Address">
|
||||
|
||||
<button class="py-2 px-4 capitalize tracking-wide bg-indigo-700 text-sm text-white font-medium 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 mx-auto px-6 py-16 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 space-y-3 sm:space-y-0 sm:flex-row sm:justify-center sm:space-x-4 mt-8">
|
||||
<input id="email" type="text" class="py-2 px-4 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Email Address">
|
||||
|
||||
<button class="py-2 px-4 capitalize tracking-wide bg-indigo-700 text-sm text-white font-medium rounded-md hover:bg-indigo-600 focus:outline-none focus:bg-indigo-600">
|
||||
Get Started
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>`
|
||||
}
|
||||
}
|
||||
}
|
||||
</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-96 md:w-1/2">
|
||||
<img class="max-w-2xl w-full h-full rounded object-cover" src="https://images.unsplash.com/photo-1555181126-cf46a03827c0?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&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-96 md:w-1/2">
|
||||
<img class="max-w-2xl w-full h-full rounded object-cover" src="https://images.unsplash.com/photo-1555181126-cf46a03827c0?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="glasses photo">
|
||||
</div>
|
||||
</div>
|
||||
</header>`,
|
||||
|
||||
File diff suppressed because one or more lines are too long
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>
|
||||
@@ -57,7 +57,7 @@
|
||||
|
||||
<!-- Mobile menu button -->
|
||||
<div 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">
|
||||
<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 fill-rule="evenodd" 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>
|
||||
|
||||
@@ -77,7 +77,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
|
||||
<div class="hidden md:flex md:items-center md:justify-between flex-1">
|
||||
<div class="md:flex md:items-center md:justify-between flex-1">
|
||||
<div class="flex flex-col -mx-4 md:flex-row md:items-center md:mx-8">
|
||||
<a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 dark:text-gray-200 font-medium rounded-md hover:bg-gray-300 dark:hover:bg-gray-700">Join Slack</a>
|
||||
<a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 dark:text-gray-200 font-medium rounded-md hover:bg-gray-300 dark:hover:bg-gray-700">Browse Topics</a>
|
||||
|
||||
@@ -10,7 +10,15 @@
|
||||
|
||||
<!-- Search input on desktop screen -->
|
||||
<div class="mx-10 hidden md:block">
|
||||
<input type="text" class="w-32 lg:w-64 px-4 py-3 leading-tight text-sm text-gray-700 dark:text-gray-200 bg-gray-200 dark:bg-gray-900 rounded-md placeholder-gray-500 dark:placeholder-gray-200 border border-transparent focus:outline-none focus:bg-white focus:ring focus:border-blue-400" placeholder="Search" aria-label="Search">
|
||||
<div class="relative">
|
||||
<span class="absolute inset-y-0 left-0 pl-3 flex items-center">
|
||||
<svg class="h-5 w-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="pl-10 pr-4 py-2 w-full bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Search">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -40,7 +48,15 @@
|
||||
|
||||
<!-- Search input on mobile screen -->
|
||||
<div class="mt-3 md:hidden">
|
||||
<input type="text" class="w-full px-4 py-3 leading-tight text-sm text-gray-700 bg-gray-100 rounded-md placeholder-gray-500 focus:outline-none focus:bg-white focus:shadow-outline" placeholder="Search" aria-label="Search">
|
||||
<div class="relative">
|
||||
<span class="absolute inset-y-0 left-0 pl-3 flex items-center">
|
||||
<svg class="h-5 w-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="pl-10 pr-4 py-2 w-full bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Search">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -97,7 +113,15 @@
|
||||
|
||||
<!-- Search input on desktop screen -->
|
||||
<div class="mx-10 hidden md:block">
|
||||
<input type="text" class="w-32 lg:w-64 px-4 py-3 leading-tight text-sm text-gray-700 dark:text-gray-200 bg-gray-200 dark:bg-gray-900 rounded-md placeholder-gray-500 dark:placeholder-gray-200 border border-transparent focus:outline-none focus:bg-white focus:ring focus:border-blue-400" placeholder="Search" aria-label="Search">
|
||||
<div class="relative">
|
||||
<span class="absolute inset-y-0 left-0 pl-3 flex items-center">
|
||||
<svg class="h-5 w-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="pl-10 pr-4 py-2 w-full bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Search">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -112,7 +136,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
|
||||
<div class="hidden md:flex items-center">
|
||||
<div class="md:flex items-center">
|
||||
<div class="flex flex-col mt-2 md:flex-row md:mt-0 md:mx-1">
|
||||
<a class="my-1 text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:mx-4 md:my-0" href="#">Home</a>
|
||||
<a class="my-1 text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:mx-4 md:my-0" href="#">Blog</a>
|
||||
@@ -127,7 +151,15 @@
|
||||
|
||||
<!-- Search input on mobile screen -->
|
||||
<div class="mt-3 md:hidden">
|
||||
<input type="text" class="w-full px-4 py-3 leading-tight text-sm text-gray-700 bg-gray-100 rounded-md placeholder-gray-500 focus:outline-none focus:bg-white focus:shadow-outline" placeholder="Search" aria-label="Search">
|
||||
<div class="relative">
|
||||
<span class="absolute inset-y-0 left-0 pl-3 flex items-center">
|
||||
<svg class="h-5 w-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="pl-10 pr-4 py-2 w-full bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Search">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -25,9 +25,15 @@
|
||||
<a href="#" class="py-1 px-2 text-gray-700 dark:text-gray-200 rounded text-sm font-medium hover:bg-gray-900 hover:text-gray-100 md:mx-2">About</a>
|
||||
<a href="#" class="py-1 px-2 text-gray-700 dark:text-gray-200 rounded text-sm font-medium hover:bg-gray-900 hover:text-gray-100 md:mx-2">Contact</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="text" class="w-full lg:w-64 px-4 py-3 leading-tight text-sm text-gray-700 dark:text-gray-200 bg-gray-200 dark:bg-gray-900 rounded-md placeholder-gray-500 dark:placeholder-gray-200 border border-transparent focus:outline-none focus:bg-white focus:ring focus:border-blue-400" placeholder="Search" aria-label="Search">
|
||||
|
||||
<div class="relative">
|
||||
<span class="absolute inset-y-0 left-0 pl-3 flex items-center">
|
||||
<svg class="h-5 w-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="pl-10 pr-4 py-2 w-full bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Search">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -61,15 +67,21 @@
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
|
||||
<div class="w-full hidden md:flex md:items-center md:justify-between">
|
||||
<div class="w-full md:flex md:items-center md:justify-between">
|
||||
<div class="flex flex-col -mx-4 px-2 py-3 md:flex-row md:mx-0 md:py-0">
|
||||
<a href="#" class="py-1 px-2 text-gray-700 dark:text-gray-200 rounded text-sm font-medium hover:bg-gray-900 hover:text-gray-100 md:mx-2">Home</a>
|
||||
<a href="#" class="py-1 px-2 text-gray-700 dark:text-gray-200 rounded text-sm font-medium hover:bg-gray-900 hover:text-gray-100 md:mx-2">About</a>
|
||||
<a href="#" class="py-1 px-2 text-gray-700 dark:text-gray-200 rounded text-sm font-medium hover:bg-gray-900 hover:text-gray-100 md:mx-2">Contact</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="text" class="w-full lg:w-64 px-4 py-3 leading-tight text-sm text-gray-700 dark:text-gray-200 bg-gray-200 dark:bg-gray-900 rounded-md placeholder-gray-500 dark:placeholder-gray-200 border border-transparent focus:outline-none focus:bg-white focus:ring focus:border-blue-400" placeholder="Search" aria-label="Search">
|
||||
<div class="relative">
|
||||
<span class="absolute inset-y-0 left-0 pl-3 flex items-center">
|
||||
<svg class="h-5 w-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="pl-10 pr-4 py-3 w-full bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Search">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
111
src/components/ui/Sidebars/WithAvatar.vue
Normal file
111
src/components/ui/Sidebars/WithAvatar.vue
Normal file
@@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<view-component :name="name" :code="code">
|
||||
<div slot="component">
|
||||
<div class="flex flex-col w-64 h-screen border-r bg-white dark:bg-gray-800 dark:border-gray-600 py-8">
|
||||
<h2 class="text-3xl font-semibold text-center text-gray-800 dark:text-white">Brand</h2>
|
||||
|
||||
<div class="flex flex-col items-center -mx-2 mt-6">
|
||||
<img class="mx-2 h-24 w-24 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="mt-2 mx-2 text-gray-800 dark:text-gray-200 font-medium hover:underline">John Doe</h4>
|
||||
<p class="mt-1 mx-2 text-gray-600 dark:text-gray-400 text-sm font-medium hover:underline">john@example.com</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col justify-between flex-1 mt-6">
|
||||
<nav>
|
||||
<a class="flex items-center 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 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 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 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>
|
||||
</div>
|
||||
</div>
|
||||
</view-component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'With Avatar',
|
||||
code: `
|
||||
<div class="flex flex-col w-64 h-screen border-r bg-white dark:bg-gray-800 dark:border-gray-600 py-8">
|
||||
<h2 class="text-3xl font-semibold text-center text-gray-800 dark:text-white">Brand</h2>
|
||||
|
||||
<div class="flex flex-col items-center -mx-2 mt-6">
|
||||
<img class="mx-2 h-24 w-24 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="mt-2 mx-2 text-gray-800 dark:text-gray-200 font-medium hover:underline">John Doe</h4>
|
||||
<p class="mt-1 mx-2 text-gray-600 dark:text-gray-400 text-sm font-medium hover:underline">john@example.com</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col justify-between flex-1 mt-6">
|
||||
<nav>
|
||||
<a class="flex items-center 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 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 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 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>
|
||||
</div>`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
167
src/components/ui/Sidebars/WithSearch.vue
Normal file
167
src/components/ui/Sidebars/WithSearch.vue
Normal file
@@ -0,0 +1,167 @@
|
||||
<template>
|
||||
<view-component :name="name" :code="code">
|
||||
<div slot="component">
|
||||
<div class="flex flex-col w-64 h-screen border-r bg-white dark:bg-gray-800 dark:border-gray-600 px-4 py-8">
|
||||
<h2 class="text-3xl font-semibold text-gray-800 dark:text-white">Brand</h2>
|
||||
|
||||
<div class="relative mt-6">
|
||||
<span class="absolute inset-y-0 left-0 pl-3 flex items-center">
|
||||
<svg class="h-5 w-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="pl-10 pr-4 py-2 w-full bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Search">
|
||||
</div>
|
||||
|
||||
<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 border-r bg-white dark:bg-gray-800 dark:border-gray-600 px-4 py-8">
|
||||
<h2 class="text-3xl font-semibold text-gray-800 dark:text-white">Brand</h2>
|
||||
|
||||
<div class="relative mt-6">
|
||||
<span class="absolute inset-y-0 left-0 pl-3 flex items-center">
|
||||
<svg class="h-5 w-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="pl-10 pr-4 py-3 w-full bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Search">
|
||||
</div>
|
||||
|
||||
<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,13 @@ export default [
|
||||
},
|
||||
{
|
||||
name: "Forms",
|
||||
components: [{ name: "Simple" }, { name: "Newsletter" }],
|
||||
components: [
|
||||
{ name: "Simple" },
|
||||
{ name: "Search" },
|
||||
{ name: "Contact" },
|
||||
{ name: "SimpleNewsletter" },
|
||||
{ name: "Newsletter" },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Dropdowns",
|
||||
@@ -61,10 +67,15 @@ export default [
|
||||
components: [
|
||||
{ name: "ECommerce" },
|
||||
{ name: "WithImage" },
|
||||
{ name: "WithSideImage" },
|
||||
{ name: "WithBGImage" },
|
||||
{ name: "WithPattern" },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Sidebars",
|
||||
components: [{ name: "WithSearch" }, { name: "WithAvatar" }],
|
||||
},
|
||||
{
|
||||
name: "Sections",
|
||||
components: [
|
||||
|
||||
@@ -7,9 +7,6 @@ module.exports = {
|
||||
roboto: ["Roboto"],
|
||||
},
|
||||
spacing: {
|
||||
80: "20rem",
|
||||
96: "24rem",
|
||||
112: "28rem",
|
||||
128: "32rem",
|
||||
},
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user