mirror of
https://github.com/bakateam/merakiui.git
synced 2025-12-08 22:53:24 +00:00
Add all categories
This commit is contained in:
khatabwedaa
@@ -7,15 +7,17 @@
|
||||
<h1 class="text-xl md:text-3xl text-gray-800 font-medium">Discover new components. Build amazing things 🔥</h1>
|
||||
</div>
|
||||
|
||||
<div class="max-w-2xl mx-auto mt-6">
|
||||
<div class="max-w-2xl mx-auto mt-4">
|
||||
<span class="ml-2" v-for="route in routes" :key="route.path">
|
||||
<router-link class="inline-block px-3 py-1 rounded text-sm cursor-pointer hover:bg-gray-700 hover:text-gray-200" :class="currentPage == route.path ? 'bg-gray-700 text-gray-200' : 'bg-gray-200 text-gray-700'" :to="route.path">
|
||||
<router-link class="inline-block mt-2 px-3 py-1 rounded text-sm cursor-pointer hover:bg-gray-700 hover:text-gray-200" :class="currentPage == route.path ? 'bg-gray-700 text-gray-200' : 'bg-gray-200 text-gray-700'" :to="route.path">
|
||||
{{ route.name }}
|
||||
</router-link>
|
||||
</span>
|
||||
|
||||
<p class="mt-8 text-gray-700 text-center">Headers components require simple <span class="font-semibold">- don't panic please 😎 -</span> <a href="https://gist.github.com/Miaababikir/052e31b345781c0f73180b80a285781b" target="_blank" class="text-blue-600 hover:underline">configuration</a></p>
|
||||
</div>
|
||||
|
||||
<div class="mt-20">
|
||||
<div class="mt-16">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
20
src/components/categories/Footers.vue
Normal file
20
src/components/categories/Footers.vue
Normal file
@@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<div class="w-full max-w-5xl mx-auto my-10">
|
||||
<h1 class="text-2xl text-gray-800 font-semibold capitalize mb-6">Footers</h1>
|
||||
|
||||
<simple></simple>
|
||||
<with-subscribe-form></with-subscribe-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Simple from "../ui/Footers/Simple";
|
||||
import WithSubscribeForm from "../ui/Footers/WithSubscribeForm";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Simple,
|
||||
WithSubscribeForm,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
20
src/components/categories/Headers.vue
Normal file
20
src/components/categories/Headers.vue
Normal file
@@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<div class="w-full max-w-5xl mx-auto my-10">
|
||||
<h1 class="text-2xl text-gray-800 font-semibold capitalize mb-6">Headers</h1>
|
||||
|
||||
<with-image></with-image>
|
||||
<with-pattern></with-pattern>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import WithImage from "../ui/Headers/WithImage";
|
||||
import WithPattern from "../ui/Headers/WithPattern";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
WithImage,
|
||||
WithPattern,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
23
src/components/categories/Navbars.vue
Normal file
23
src/components/categories/Navbars.vue
Normal file
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<div class="w-full max-w-5xl mx-auto my-10">
|
||||
<h1 class="text-2xl text-gray-800 font-semibold capitalize mb-6">Navbars</h1>
|
||||
|
||||
<simple></simple>
|
||||
<with-search></with-search>
|
||||
<with-avatar-and-alert-icon></with-avatar-and-alert-icon>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Simple from "../ui/Navbars/Simple";
|
||||
import WithSearch from "../ui/Navbars/WithSearch";
|
||||
import WithAvatarAndAlertIcon from "../ui/Navbars/WithAvatarAndAlertIcon";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Simple,
|
||||
WithSearch,
|
||||
WithAvatarAndAlertIcon,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
17
src/components/categories/Paginations.vue
Normal file
17
src/components/categories/Paginations.vue
Normal file
@@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<div class="w-full max-w-5xl mx-auto my-10">
|
||||
<h1 class="text-2xl text-gray-800 font-semibold capitalize mb-6">Paginations</h1>
|
||||
|
||||
<simple></simple>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Simple from "../ui/Paginations/Simple";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Simple,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
23
src/components/categories/Sections.vue
Normal file
23
src/components/categories/Sections.vue
Normal file
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<div class="w-full max-w-5xl mx-auto my-10">
|
||||
<h1 class="text-2xl text-gray-800 font-semibold capitalize mb-6">Sections</h1>
|
||||
|
||||
<about-me></about-me>
|
||||
<our-team></our-team>
|
||||
<paragraph-with-image></paragraph-with-image>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AboutMe from "../ui/Sections/AboutMe";
|
||||
import OurTeam from "../ui/Sections/OurTeam";
|
||||
import ParagraphWithImage from "../ui/Sections/ParagraphWithImage";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AboutMe,
|
||||
OurTeam,
|
||||
ParagraphWithImage,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -3,6 +3,7 @@
|
||||
<div class="px-3 py-6" slot="component">
|
||||
<div class="flex max-w-sm w-full bg-white shadow-md rounded-lg overflow-hidden mx-auto">
|
||||
<div class="w-2 bg-gray-800"></div>
|
||||
|
||||
<div class="flex items-center px-2 py-3">
|
||||
<img class="w-10 h-10 object-cover rounded-full" alt="User avatar" src="https://images.unsplash.com/photo-1477118476589-bff2c5c4cfbb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=200">
|
||||
|
||||
@@ -23,6 +24,7 @@
|
||||
code: `
|
||||
<div class="flex max-w-sm w-full bg-white shadow-md rounded-lg overflow-hidden mx-auto">
|
||||
<div class="w-2 bg-gray-800"></div>
|
||||
|
||||
<div class="flex items-center px-2 py-3">
|
||||
<img class="w-10 h-10 object-cover rounded-full" alt="User avatar" src="https://images.unsplash.com/photo-1477118476589-bff2c5c4cfbb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=200">
|
||||
|
||||
|
||||
@@ -23,7 +23,20 @@
|
||||
data() {
|
||||
return {
|
||||
name: 'Product',
|
||||
code: ``,
|
||||
code: `
|
||||
<div class="max-w-xs mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
|
||||
<div class="px-4 py-2">
|
||||
<h1 class="text-gray-900 font-bold text-3xl uppercase">NIKE AIR</h1>
|
||||
<p class="text-gray-600 text-sm mt-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi quos quidem sequi illum facere recusandae voluptatibus</p>
|
||||
</div>
|
||||
|
||||
<img class="h-48 w-full object-cover mt-2" src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=320&q=80" alt="NIKE AIR">
|
||||
|
||||
<div class="flex items-center justify-between px-4 py-2 bg-gray-900">
|
||||
<h1 class="text-gray-200 font-bold text-lg">$129</h1>
|
||||
<button class="px-2 py-1 bg-gray-200 text-xs text-gray-900 font-semibold rounded uppercase hover:bg-gray-400 focus:bg-gray-400">Add to cart</button>
|
||||
</div>
|
||||
</div>`,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,7 +6,6 @@
|
||||
|
||||
<div class="py-5 text-center">
|
||||
<a href="#" class="block text-2xl text-gray-800 font-bold">John Doe</a>
|
||||
|
||||
<span class="text-sm text-gray-700">Software Engineer</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -25,7 +24,6 @@
|
||||
|
||||
<div class="py-5 text-center">
|
||||
<a href="#" class="block text-2xl text-gray-800 font-bold">John Doe</a>
|
||||
|
||||
<span class="text-sm text-gray-700">Software Engineer</span>
|
||||
</div>
|
||||
</div>`
|
||||
|
||||
@@ -1,46 +0,0 @@
|
||||
<template>
|
||||
<div :id="name | toId">
|
||||
<footer class="flex justify-center px-4 text-gray-100 bg-gray-800">
|
||||
<div class="container py-6">
|
||||
<h1 class="text-center text-lg font-bold lg:text-2xl">
|
||||
Join 31,000+ other and never miss <br> out on new tips, tutorials, and more.
|
||||
</h1>
|
||||
|
||||
<div class="flex justify-center mt-6">
|
||||
<div class="bg-white rounded-md">
|
||||
<div class="flex flex-wrap justify-between md:flex-row">
|
||||
<input type="email" class="m-1 p-2 appearance-none text-gray-700 text-sm focus:outline-none focus:placeholder-white" placeholder="Enter your email" aria-label="Enter your email">
|
||||
<button class="w-full m-1 p-2 text-sm bg-gray-800 rounded font-semibold uppercase lg:w-auto hover:bg-gray-700">subscribe</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="h-px mt-6 bg-gray-700 border-none">
|
||||
|
||||
<div class="flex flex-col items-center justify-between mt-6 md:flex-row">
|
||||
<div>
|
||||
<a href="#" class="text-xl font-bold">Brand</a>
|
||||
</div>
|
||||
<div class="flex mt-4 md:m-0">
|
||||
<div class="-mx-4">
|
||||
<a href="#" class="px-4 text-sm">About</a>
|
||||
<a href="#" class="px-4 text-sm">Blog</a>
|
||||
<a href="#" class="px-4 text-sm">News</a>
|
||||
<a href="#" class="px-4 text-sm">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Footer With Subscribe Form',
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
67
src/components/ui/Footers/Simple.vue
Normal file
67
src/components/ui/Footers/Simple.vue
Normal file
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<view-component :name="name" :code="code">
|
||||
<div class="py-6" slot="component">
|
||||
<footer class="flex flex-col justify-between items-center px-6 py-2 bg-gray-800 text-gray-100 sm:flex-row">
|
||||
<a href="#" class="text-xl font-bold">Brand</a>
|
||||
|
||||
<p class="py-2 sm:py-0">All rights reserved</p>
|
||||
|
||||
<div class="flex -mx-2">
|
||||
<a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Linkden">
|
||||
<svg class="h-4 w-4 fill-current" viewBox="0 0 512 512">
|
||||
<path d="M444.17,32H70.28C49.85,32,32,46.7,32,66.89V441.61C32,461.91,49.85,480,70.28,480H444.06C464.6,480,480,461.79,480,441.61V66.89C480.12,46.7,464.6,32,444.17,32ZM170.87,405.43H106.69V205.88h64.18ZM141,175.54h-.46c-20.54,0-33.84-15.29-33.84-34.43,0-19.49,13.65-34.42,34.65-34.42s33.85,14.82,34.31,34.42C175.65,160.25,162.35,175.54,141,175.54ZM405.43,405.43H341.25V296.32c0-26.14-9.34-44-32.56-44-17.74,0-28.24,12-32.91,23.69-1.75,4.2-2.22,9.92-2.22,15.76V405.43H209.38V205.88h64.18v27.77c9.34-13.3,23.93-32.44,57.88-32.44,42.13,0,74,27.77,74,87.64Z"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Facebook">
|
||||
<svg class="h-4 w-4 fill-current" viewBox="0 0 512 512">
|
||||
<path d="M455.27,32H56.73A24.74,24.74,0,0,0,32,56.73V455.27A24.74,24.74,0,0,0,56.73,480H256V304H202.45V240H256V189c0-57.86,40.13-89.36,91.82-89.36,24.73,0,51.33,1.86,57.51,2.68v60.43H364.15c-28.12,0-33.48,13.3-33.48,32.9V240h67l-8.75,64H330.67V480h124.6A24.74,24.74,0,0,0,480,455.27V56.73A24.74,24.74,0,0,0,455.27,32Z"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Twitter">
|
||||
<svg class="h-4 w-4 fill-current" viewBox="0 0 512 512">
|
||||
<path d="M496,109.5a201.8,201.8,0,0,1-56.55,15.3,97.51,97.51,0,0,0,43.33-53.6,197.74,197.74,0,0,1-62.56,23.5A99.14,99.14,0,0,0,348.31,64c-54.42,0-98.46,43.4-98.46,96.9a93.21,93.21,0,0,0,2.54,22.1,280.7,280.7,0,0,1-203-101.3A95.69,95.69,0,0,0,36,130.4C36,164,53.53,193.7,80,211.1A97.5,97.5,0,0,1,35.22,199v1.2c0,47,34,86.1,79,95a100.76,100.76,0,0,1-25.94,3.4,94.38,94.38,0,0,1-18.51-1.8c12.51,38.5,48.92,66.5,92.05,67.3A199.59,199.59,0,0,1,39.5,405.6,203,203,0,0,1,16,404.2,278.68,278.68,0,0,0,166.74,448c181.36,0,280.44-147.7,280.44-275.8,0-4.2-.11-8.4-.31-12.5A198.48,198.48,0,0,0,496,109.5Z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</view-component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Simple',
|
||||
code: `
|
||||
<footer class="flex flex-col justify-between items-center px-6 py-2 bg-gray-800 text-gray-100 sm:flex-row">
|
||||
<a href="#" class="text-xl font-bold">Brand</a>
|
||||
|
||||
<p class="py-2 sm:py-0">All rights reserved</p>
|
||||
|
||||
<div class="flex -mx-2">
|
||||
<a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Linkden">
|
||||
<svg class="h-4 w-4 fill-current" viewBox="0 0 512 512">
|
||||
<path d="M444.17,32H70.28C49.85,32,32,46.7,32,66.89V441.61C32,461.91,49.85,480,70.28,480H444.06C464.6,480,480,461.79,480,441.61V66.89C480.12,46.7,464.6,32,444.17,32ZM170.87,405.43H106.69V205.88h64.18ZM141,175.54h-.46c-20.54,0-33.84-15.29-33.84-34.43,0-19.49,13.65-34.42,34.65-34.42s33.85,14.82,34.31,34.42C175.65,160.25,162.35,175.54,141,175.54ZM405.43,405.43H341.25V296.32c0-26.14-9.34-44-32.56-44-17.74,0-28.24,12-32.91,23.69-1.75,4.2-2.22,9.92-2.22,15.76V405.43H209.38V205.88h64.18v27.77c9.34-13.3,23.93-32.44,57.88-32.44,42.13,0,74,27.77,74,87.64Z"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Facebook">
|
||||
<svg class="h-4 w-4 fill-current" viewBox="0 0 512 512">
|
||||
<path d="M455.27,32H56.73A24.74,24.74,0,0,0,32,56.73V455.27A24.74,24.74,0,0,0,56.73,480H256V304H202.45V240H256V189c0-57.86,40.13-89.36,91.82-89.36,24.73,0,51.33,1.86,57.51,2.68v60.43H364.15c-28.12,0-33.48,13.3-33.48,32.9V240h67l-8.75,64H330.67V480h124.6A24.74,24.74,0,0,0,480,455.27V56.73A24.74,24.74,0,0,0,455.27,32Z"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Twitter">
|
||||
<svg class="h-4 w-4 fill-current" viewBox="0 0 512 512">
|
||||
<path d="M496,109.5a201.8,201.8,0,0,1-56.55,15.3,97.51,97.51,0,0,0,43.33-53.6,197.74,197.74,0,0,1-62.56,23.5A99.14,99.14,0,0,0,348.31,64c-54.42,0-98.46,43.4-98.46,96.9a93.21,93.21,0,0,0,2.54,22.1,280.7,280.7,0,0,1-203-101.3A95.69,95.69,0,0,0,36,130.4C36,164,53.53,193.7,80,211.1A97.5,97.5,0,0,1,35.22,199v1.2c0,47,34,86.1,79,95a100.76,100.76,0,0,1-25.94,3.4,94.38,94.38,0,0,1-18.51-1.8c12.51,38.5,48.92,66.5,92.05,67.3A199.59,199.59,0,0,1,39.5,405.6,203,203,0,0,1,16,404.2,278.68,278.68,0,0,0,166.74,448c181.36,0,280.44-147.7,280.44-275.8,0-4.2-.11-8.4-.31-12.5A198.48,198.48,0,0,0,496,109.5Z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</footer>`,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,35 +0,0 @@
|
||||
<template>
|
||||
<div :id="name | toId">
|
||||
<footer class="flex flex-col justify-between items-center px-6 py-2 bg-gray-800 text-gray-100 sm:flex-row">
|
||||
<a href="#" class="text-xl font-bold">Brand</a>
|
||||
<p class="py-2 sm:py-0">All rights reserved</p>
|
||||
<div class="flex -mx-2">
|
||||
<a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Linkden">
|
||||
<svg class="h-4 w-4 fill-current" viewBox="0 0 512 512">
|
||||
<path d="M444.17,32H70.28C49.85,32,32,46.7,32,66.89V441.61C32,461.91,49.85,480,70.28,480H444.06C464.6,480,480,461.79,480,441.61V66.89C480.12,46.7,464.6,32,444.17,32ZM170.87,405.43H106.69V205.88h64.18ZM141,175.54h-.46c-20.54,0-33.84-15.29-33.84-34.43,0-19.49,13.65-34.42,34.65-34.42s33.85,14.82,34.31,34.42C175.65,160.25,162.35,175.54,141,175.54ZM405.43,405.43H341.25V296.32c0-26.14-9.34-44-32.56-44-17.74,0-28.24,12-32.91,23.69-1.75,4.2-2.22,9.92-2.22,15.76V405.43H209.38V205.88h64.18v27.77c9.34-13.3,23.93-32.44,57.88-32.44,42.13,0,74,27.77,74,87.64Z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Facebook">
|
||||
<svg class="h-4 w-4 fill-current" viewBox="0 0 512 512">
|
||||
<path d="M455.27,32H56.73A24.74,24.74,0,0,0,32,56.73V455.27A24.74,24.74,0,0,0,56.73,480H256V304H202.45V240H256V189c0-57.86,40.13-89.36,91.82-89.36,24.73,0,51.33,1.86,57.51,2.68v60.43H364.15c-28.12,0-33.48,13.3-33.48,32.9V240h67l-8.75,64H330.67V480h124.6A24.74,24.74,0,0,0,480,455.27V56.73A24.74,24.74,0,0,0,455.27,32Z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Twitter">
|
||||
<svg class="h-4 w-4 fill-current" viewBox="0 0 512 512">
|
||||
<path d="M496,109.5a201.8,201.8,0,0,1-56.55,15.3,97.51,97.51,0,0,0,43.33-53.6,197.74,197.74,0,0,1-62.56,23.5A99.14,99.14,0,0,0,348.31,64c-54.42,0-98.46,43.4-98.46,96.9a93.21,93.21,0,0,0,2.54,22.1,280.7,280.7,0,0,1-203-101.3A95.69,95.69,0,0,0,36,130.4C36,164,53.53,193.7,80,211.1A97.5,97.5,0,0,1,35.22,199v1.2c0,47,34,86.1,79,95a100.76,100.76,0,0,1-25.94,3.4,94.38,94.38,0,0,1-18.51-1.8c12.51,38.5,48.92,66.5,92.05,67.3A199.59,199.59,0,0,1,39.5,405.6,203,203,0,0,1,16,404.2,278.68,278.68,0,0,0,166.74,448c181.36,0,280.44-147.7,280.44-275.8,0-4.2-.11-8.4-.31-12.5A198.48,198.48,0,0,0,496,109.5Z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Simple Footer',
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
83
src/components/ui/Footers/WithSubscribeForm.vue
Normal file
83
src/components/ui/Footers/WithSubscribeForm.vue
Normal file
@@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<view-component :name="name" :code="code">
|
||||
<div class="py-6" slot="component">
|
||||
<footer class="flex justify-center px-4 text-gray-100 bg-gray-800">
|
||||
<div class="container py-6">
|
||||
<h1 class="text-center text-lg font-bold lg:text-2xl">
|
||||
Join 31,000+ other and never miss <br> out on new tips, tutorials, and more.
|
||||
</h1>
|
||||
|
||||
<div class="flex justify-center mt-6">
|
||||
<div class="bg-white rounded-md">
|
||||
<div class="flex flex-wrap justify-between md:flex-row">
|
||||
<input type="email" class="m-1 p-2 appearance-none text-gray-700 text-sm focus:outline-none focus:placeholder-white" placeholder="Enter your email" aria-label="Enter your email">
|
||||
<button class="w-full m-1 p-2 text-sm bg-gray-800 rounded font-semibold uppercase lg:w-auto hover:bg-gray-700">subscribe</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="h-px mt-6 bg-gray-700 border-none">
|
||||
|
||||
<div class="flex flex-col items-center justify-between mt-6 md:flex-row">
|
||||
<div>
|
||||
<a href="#" class="text-xl font-bold">Brand</a>
|
||||
</div>
|
||||
|
||||
<div class="flex mt-4 md:m-0">
|
||||
<div class="-mx-4">
|
||||
<a href="#" class="px-4 text-sm">About</a>
|
||||
<a href="#" class="px-4 text-sm">Blog</a>
|
||||
<a href="#" class="px-4 text-sm">News</a>
|
||||
<a href="#" class="px-4 text-sm">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</view-component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Footer With Subscribe Form',
|
||||
code: `
|
||||
<footer class="flex justify-center px-4 text-gray-100 bg-gray-800">
|
||||
<div class="container py-6">
|
||||
<h1 class="text-center text-lg font-bold lg:text-2xl">
|
||||
Join 31,000+ other and never miss <br> out on new tips, tutorials, and more.
|
||||
</h1>
|
||||
|
||||
<div class="flex justify-center mt-6">
|
||||
<div class="bg-white rounded-md">
|
||||
<div class="flex flex-wrap justify-between md:flex-row">
|
||||
<input type="email" class="m-1 p-2 appearance-none text-gray-700 text-sm focus:outline-none focus:placeholder-white" placeholder="Enter your email" aria-label="Enter your email">
|
||||
<button class="w-full m-1 p-2 text-sm bg-gray-800 rounded font-semibold uppercase lg:w-auto hover:bg-gray-700">subscribe</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="h-px mt-6 bg-gray-700 border-none">
|
||||
|
||||
<div class="flex flex-col items-center justify-between mt-6 md:flex-row">
|
||||
<div>
|
||||
<a href="#" class="text-xl font-bold">Brand</a>
|
||||
</div>
|
||||
|
||||
<div class="flex mt-4 md:m-0">
|
||||
<div class="-mx-4">
|
||||
<a href="#" class="px-4 text-sm">About</a>
|
||||
<a href="#" class="px-4 text-sm">Blog</a>
|
||||
<a href="#" class="px-4 text-sm">News</a>
|
||||
<a href="#" class="px-4 text-sm">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,69 +0,0 @@
|
||||
<template>
|
||||
<div :id="name | toId">
|
||||
<div>
|
||||
<nav class="bg-white">
|
||||
<div class="px-6 py-2">
|
||||
<div class="md:flex items-center justify-between">
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<a href="#" class="text-xl font-bold text-gray-800 hover:text-gray-700 md:text-2xl">Brand</a>
|
||||
</div>
|
||||
|
||||
<div class="md:hidden">
|
||||
<button type="button" @click="isOpen = !isOpen"
|
||||
class="block text-gray-700 hover:text-gray-600 focus:text-gray-600 focus:outline-none" aria-label="Toggle menu">
|
||||
<svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
|
||||
<path
|
||||
d="M16.24 14.83a1 1 0 0 1-1.41 1.41L12 13.41l-2.83 2.83a1 1 0 0 1-1.41-1.41L10.59 12 7.76 9.17a1 1 0 0 1 1.41-1.41L12 10.59l2.83-2.83a1 1 0 0 1 1.41 1.41L13.41 12l2.83 2.83z"
|
||||
class="hidden"></path>
|
||||
<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>
|
||||
|
||||
<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 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Home</a>
|
||||
<a href="#" class="py-2 px-2 text-sm text-gray-800 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">About</a>
|
||||
<a href="#" class="py-2 px-2 text-sm text-gray-800 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="flex bg-white py-8 md:py-0 md:h-96">
|
||||
<div class="flex items-center justify-center px-6 lg:w-1/2">
|
||||
<div class="max-w-xl">
|
||||
<h2 class="text-2xl font-semibold text-gray-800 md:text-3xl">Build Your New <span class="text-indigo-600">Idea</span></h2>
|
||||
|
||||
<p class="mt-2 text-sm text-gray-500 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-gray-200 text-xs font-semibold rounded hover:bg-gray-800">Get Started</a>
|
||||
<a href="#" class="mx-4 px-3 py-2 block bg-gray-300 text-gray-900 text-xs font-semibold rounded hover:bg-gray-400">Learn More</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hidden lg:block lg:w-1/2">
|
||||
<div class="h-full object-cover object-center" 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 bg-black opacity-25"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Header With Image',
|
||||
isOpen: false,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,59 +0,0 @@
|
||||
<template>
|
||||
<div :id="name | toId">
|
||||
<div class="pattern bg-gray-900">
|
||||
<div class="container mx-auto px-6">
|
||||
<nav class="flex flex-col py-2 sm:flex-row sm:justify-between sm:items-center">
|
||||
<div>
|
||||
<a href="#" class="text-2xl font-semibold text-white hover:text-gray-300">Brand</a>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center -mx-2 mt-2 sm:mt-0">
|
||||
<a href="#" class="px-3 py-1 border-2 font-semibold rounded text-sm text-white hover:bg-gray-700">Sign In</a>
|
||||
<a href="#" class="mx-2 px-3 py-2 font-semibold bg-black rounded text-sm text-white hover:bg-gray-800">Sign Up</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="flex items-center flex-col py-6 md:h-96 md:flex-row">
|
||||
<div class="md:w-1/2">
|
||||
<h1 class="text-4xl font-semibold text-gray-100">Brand</h1>
|
||||
<p class="text-2xl font-semibold text-gray-100">
|
||||
Hello <span class="text-indigo-400">Guest</span>
|
||||
</p>
|
||||
<p class="text-gray-100 mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
|
||||
</div>
|
||||
|
||||
<div class="md:w-1/2 flex md:justify-end mt-8 md:mt-0">
|
||||
<div class="max-w-sm bg-white rounded-lg">
|
||||
<div class="p-5 text-center">
|
||||
<h2 class="text-2xl font-semibold text-gray-700 fo">Sign In</h2>
|
||||
|
||||
<form action="#">
|
||||
<div class="mt-4">
|
||||
<input class="w-full py-2 px-4 bg-gray-100 border border-gray-300 rounded focus:outline-none focus:bg-white" type="email" placeholder="Email address" aria-label="Email address">
|
||||
<input class="w-full mt-4 py-2 px-4 bg-gray-100 border border-gray-300 rounded focus:outline-none focus:bg-white" type="password" placeholder="Password" aria-label="Password">
|
||||
</div>
|
||||
|
||||
<div class="mt-4 flex items-center justify-between">
|
||||
<a href="#" class="text-gray-600 text-sm hover:underline">Forget Password?</a>
|
||||
|
||||
<button class="px-4 py-2 font-semibold bg-gray-900 rounded text-white hover:bg-gray-800">Login</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Header With Pattern'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
114
src/components/ui/Headers/WithImage.vue
Normal file
114
src/components/ui/Headers/WithImage.vue
Normal file
@@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<view-component :name="name" :code="code">
|
||||
<div class="py-6" slot="component">
|
||||
<header class="bg-white">
|
||||
<nav class="px-6 py-2 shadow">
|
||||
<div class="md:flex items-center justify-between">
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<a href="#" class="text-xl font-bold text-gray-800 hover:text-gray-700 md:text-2xl">Brand</a>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu button -->
|
||||
<div class="md:hidden">
|
||||
<button type="button" @click="isOpen = !isOpen" class="block text-gray-700 hover:text-gray-600 focus:text-gray-600 focus:outline-none" 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 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Home</a>
|
||||
<a href="#" class="py-2 px-2 text-sm text-gray-800 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">About</a>
|
||||
<a href="#" class="py-2 px-2 text-sm text-gray-800 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="flex py-8 md:py-0 md:h-96">
|
||||
<div class="flex items-center justify-center px-6 lg:w-1/2">
|
||||
<div class="max-w-xl">
|
||||
<h2 class="text-2xl font-semibold text-gray-800 md:text-3xl">Build Your New <span class="text-indigo-600">Idea</span></h2>
|
||||
|
||||
<p class="mt-2 text-sm text-gray-500 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-gray-200 text-xs font-semibold rounded hover:bg-gray-800">Get Started</a>
|
||||
<a href="#" class="mx-4 px-3 py-2 block bg-gray-300 text-gray-900 text-xs font-semibold rounded hover:bg-gray-400">Learn More</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hidden lg:block lg:w-1/2">
|
||||
<div class="h-full object-cover object-center" 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 bg-black opacity-25"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
</view-component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Header With Image',
|
||||
isOpen: false,
|
||||
code: `
|
||||
<header class="bg-white">
|
||||
<nav class="px-6 py-2 shadow">
|
||||
<div class="md:flex items-center justify-between">
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<a href="#" class="text-xl font-bold text-gray-800 hover:text-gray-700 md:text-2xl">Brand</a>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu button -->
|
||||
<div class="md:hidden">
|
||||
<button type="button" class="block text-gray-700 hover:text-gray-600 focus:text-gray-600 focus:outline-none" 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 hidden md:mt-0 md:flex-row md:block">
|
||||
<a href="#" class="py-2 px-2 text-sm text-gray-800 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Home</a>
|
||||
<a href="#" class="py-2 px-2 text-sm text-gray-800 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">About</a>
|
||||
<a href="#" class="py-2 px-2 text-sm text-gray-800 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="flex py-8 md:py-0 md:h-96">
|
||||
<div class="flex items-center justify-center px-6 lg:w-1/2">
|
||||
<div class="max-w-xl">
|
||||
<h2 class="text-2xl font-semibold text-gray-800 md:text-3xl">Build Your New <span class="text-indigo-600">Idea</span></h2>
|
||||
|
||||
<p class="mt-2 text-sm text-gray-500 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-gray-200 text-xs font-semibold rounded hover:bg-gray-800">Get Started</a>
|
||||
<a href="#" class="mx-4 px-3 py-2 block bg-gray-300 text-gray-900 text-xs font-semibold rounded hover:bg-gray-400">Learn More</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hidden lg:block lg:w-1/2">
|
||||
<div class="h-full object-cover object-center" 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 bg-black opacity-25"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>`,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
111
src/components/ui/Headers/WithPattern.vue
Normal file
111
src/components/ui/Headers/WithPattern.vue
Normal file
@@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<view-component :name="name" :code="code">
|
||||
<div class="py-6" slot="component">
|
||||
<header class="pattern bg-gray-900">
|
||||
<div class="container mx-auto px-6">
|
||||
<nav class="flex flex-col py-2 sm:flex-row sm:justify-between sm:items-center">
|
||||
<div>
|
||||
<a href="#" class="text-2xl font-semibold text-white hover:text-gray-300">Brand</a>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center -mx-2 mt-2 sm:mt-0">
|
||||
<a href="#" class="px-3 py-1 border-2 font-semibold rounded text-sm text-white hover:bg-gray-700">Sign In</a>
|
||||
<a href="#" class="mx-2 px-3 py-2 font-semibold bg-black rounded text-sm text-white hover:bg-gray-800">Sign Up</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="flex items-center flex-col py-6 md:h-96 md:flex-row">
|
||||
<div class="md:w-1/2">
|
||||
<h2 class="text-4xl font-semibold text-gray-100">Brand</h2>
|
||||
|
||||
<h3 class="text-2xl font-semibold text-gray-100">
|
||||
Hello <span class="text-indigo-400">Guest</span>
|
||||
</h3>
|
||||
|
||||
<p class="text-gray-100 mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
|
||||
</div>
|
||||
|
||||
<div class="md:w-1/2 flex md:justify-end mt-8 md:mt-0">
|
||||
<div class="max-w-sm bg-white rounded-lg">
|
||||
<div class="p-5 text-center">
|
||||
<h2 class="text-2xl font-semibold text-gray-700 fo">Sign In</h2>
|
||||
|
||||
<form action="#">
|
||||
<div class="mt-4">
|
||||
<input class="w-full py-2 px-4 bg-gray-100 border border-gray-300 rounded focus:outline-none focus:bg-white" type="email" placeholder="Email address" aria-label="Email address">
|
||||
<input class="w-full mt-4 py-2 px-4 bg-gray-100 border border-gray-300 rounded focus:outline-none focus:bg-white" type="password" placeholder="Password" aria-label="Password">
|
||||
</div>
|
||||
|
||||
<div class="mt-4 flex items-center justify-between">
|
||||
<a href="#" class="text-gray-600 text-sm hover:underline">Forget Password?</a>
|
||||
|
||||
<button class="px-4 py-2 font-semibold bg-gray-900 rounded text-white hover:bg-gray-800">Login</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
</view-component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Header With Pattern',
|
||||
code: `
|
||||
<header class="pattern bg-gray-900">
|
||||
<div class="container mx-auto px-6">
|
||||
<nav class="flex flex-col py-2 sm:flex-row sm:justify-between sm:items-center">
|
||||
<div>
|
||||
<a href="#" class="text-2xl font-semibold text-white hover:text-gray-300">Brand</a>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center -mx-2 mt-2 sm:mt-0">
|
||||
<a href="#" class="px-3 py-1 border-2 font-semibold rounded text-sm text-white hover:bg-gray-700">Sign In</a>
|
||||
<a href="#" class="mx-2 px-3 py-2 font-semibold bg-black rounded text-sm text-white hover:bg-gray-800">Sign Up</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="flex items-center flex-col py-6 md:h-96 md:flex-row">
|
||||
<div class="md:w-1/2">
|
||||
<h2 class="text-4xl font-semibold text-gray-100">Brand</h2>
|
||||
|
||||
<h3 class="text-2xl font-semibold text-gray-100">
|
||||
Hello <span class="text-indigo-400">Guest</span>
|
||||
</h3>
|
||||
|
||||
<p class="text-gray-100 mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
|
||||
</div>
|
||||
|
||||
<div class="md:w-1/2 flex md:justify-end mt-8 md:mt-0">
|
||||
<div class="max-w-sm bg-white rounded-lg">
|
||||
<div class="p-5 text-center">
|
||||
<h2 class="text-2xl font-semibold text-gray-700 fo">Sign In</h2>
|
||||
|
||||
<form action="#">
|
||||
<div class="mt-4">
|
||||
<input class="w-full py-2 px-4 bg-gray-100 border border-gray-300 rounded focus:outline-none focus:bg-white" type="email" placeholder="Email address" aria-label="Email address">
|
||||
<input class="w-full mt-4 py-2 px-4 bg-gray-100 border border-gray-300 rounded focus:outline-none focus:bg-white" type="password" placeholder="Password" aria-label="Password">
|
||||
</div>
|
||||
|
||||
<div class="mt-4 flex items-center justify-between">
|
||||
<a href="#" class="text-gray-600 text-sm hover:underline">Forget Password?</a>
|
||||
|
||||
<button class="px-4 py-2 font-semibold bg-gray-900 rounded text-white hover:bg-gray-800">Login</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>`,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,40 +0,0 @@
|
||||
<template>
|
||||
<div :id="name | toId">
|
||||
<nav class="bg-white shadow">
|
||||
<div class="container py-3 px-6 mx-auto">
|
||||
<div class="md:flex justify-between items-center">
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<a href="#" class="text-gray-800 text-xl font-bold hover:text-gray-700 md:text-2xl">Brand</a>
|
||||
</div>
|
||||
|
||||
<div class="flex md:hidden">
|
||||
<button @click="isOpen = !isOpen" type="button" class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600" 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>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div :class="!isOpen ? 'hidden' : ''" class="flex flex-col mt-3 md:flex-row md:mt-0 md:block">
|
||||
<a href="#" class="text-gray-800 text-sm hover:font-medium md:mx-4">Home</a>
|
||||
<a href="#" class="text-gray-800 text-sm hover:font-medium md:mx-4">Contact</a>
|
||||
<a href="#" class="text-gray-800 text-sm hover:font-medium md:mx-4">About Us</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Navbar',
|
||||
isOpen: false,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,59 +0,0 @@
|
||||
<template>
|
||||
<div :id="name | toId">
|
||||
<nav class="bg-white shadow">
|
||||
<div class="container mx-auto px-6 py-3">
|
||||
<div class="md:flex md:items-center md:justify-between">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="text-xl font-semibold text-gray-700">
|
||||
<a href="#" class="text-gray-800 text-xl font-bold hover:text-gray-700 md:text-2xl">Brand</a>
|
||||
</div>
|
||||
|
||||
<div class="flex md:hidden">
|
||||
<button @click="isOpen = !isOpen" type="button" class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600" 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>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div :class="!isOpen ? 'hidden' : ''" 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 font-medium rounded-md hover:bg-gray-300">Join Slack</a>
|
||||
<a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 font-medium rounded-md hover:bg-gray-300">Browse Topics</a>
|
||||
<a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 font-medium rounded-md hover:bg-gray-300">Random Item</a>
|
||||
<a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 font-medium rounded-md hover:bg-gray-300">Experts</a>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center mt-4 md:mt-0">
|
||||
<button class="mx-4 hidden md:block text-gray-600 hover:text-gray-700 focus:text-gray-700 focus:outline-none" aria-label="show notifications">
|
||||
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 17H20L18.5951 15.5951C18.2141 15.2141 18 14.6973 18 14.1585V11C18 8.38757 16.3304 6.16509 14 5.34142V5C14 3.89543 13.1046 3 12 3C10.8954 3 10 3.89543 10 5V5.34142C7.66962 6.16509 6 8.38757 6 11V14.1585C6 14.6973 5.78595 15.2141 5.40493 15.5951L4 17H9M15 17V18C15 19.6569 13.6569 21 12 21C10.3431 21 9 19.6569 9 18V17M15 17H9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button type="button" class="flex items-center focus:outline-none" aria-label="toggle profile dropdown">
|
||||
<div class="h-8 w-8 overflow-hidden rounded-full border-2 border-gray-400">
|
||||
<img src="https://lh3.googleusercontent.com/a-/AOh14Gi0DgItGDTATTFV6lPiVrqtja6RZ_qrY91zg42o-g" class="h-full w-full object-cover" alt="avatar">
|
||||
</div>
|
||||
|
||||
<h3 class="mx-2 text-sm text-gray-700 font-medium md:hidden">Khatab wedaa</h3>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Navbar With Avatar',
|
||||
isOpen: false,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,44 +0,0 @@
|
||||
<template>
|
||||
<div :id="name | toId">
|
||||
<nav class="bg-white shadow">
|
||||
<div class="container mx-auto px-6 py-3 md:flex">
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<a href="#" class="text-gray-800 text-xl font-bold hover:text-gray-700 md:text-2xl">Brand</a>
|
||||
</div>
|
||||
|
||||
<div class="flex md:hidden">
|
||||
<button @click="isOpen = !isOpen" type="button" class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600" 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>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div :class="!isOpen ? 'hidden' : ''" class="w-full md:flex md:items-center md:justify-between md:block">
|
||||
<div class="flex flex-col -mx-4 px-2 py-3 md:flex-row md:mx-0 md:py-0">
|
||||
<a href="#" class="py-1 px-2 text-gray-800 rounded text-sm hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Home</a>
|
||||
<a href="#" class="py-1 px-2 text-gray-800 rounded text-sm hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">About</a>
|
||||
<a href="#" class="py-1 px-2 text-gray-800 rounded text-sm hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Contact</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="text" class="w-full px-4 py-3 leading-tight text-sm text-gray-100 bg-gray-800 rounded placeholder-gray-200 focus:outline-none focus:bg-gray-700" placeholder="Search" aria-label="Search">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Navbar With Search',
|
||||
isOpen: false,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
72
src/components/ui/Navbars/Simple.vue
Normal file
72
src/components/ui/Navbars/Simple.vue
Normal file
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<view-component :name="name" :code="code">
|
||||
<div class="py-6" slot="component">
|
||||
<nav class="bg-white shadow">
|
||||
<div class="container py-3 px-6 mx-auto">
|
||||
<div class="md:flex justify-between items-center">
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<a href="#" class="text-gray-800 text-xl font-bold hover:text-gray-700 md:text-2xl">Brand</a>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu button -->
|
||||
<div class="flex md:hidden">
|
||||
<button @click="isOpen = !isOpen" type="button" class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600" 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>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
|
||||
<div :class="!isOpen ? 'hidden' : ''" class="flex flex-col mt-3 md:flex-row md:mt-0 md:block">
|
||||
<a href="#" class="text-gray-800 text-sm hover:font-medium md:mx-4">Home</a>
|
||||
<a href="#" class="text-gray-800 text-sm hover:font-medium md:mx-4">Contact</a>
|
||||
<a href="#" class="text-gray-800 text-sm hover:font-medium md:mx-4">About Us</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</view-component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Simple',
|
||||
isOpen: false,
|
||||
code: `
|
||||
<nav class="bg-white shadow">
|
||||
<div class="container py-3 px-6 mx-auto">
|
||||
<div class="md:flex justify-between items-center">
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<a href="#" class="text-gray-800 text-xl font-bold hover:text-gray-700 md:text-2xl">Brand</a>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu button -->
|
||||
<div class="flex md:hidden">
|
||||
<button type="button" class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600" 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>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
|
||||
<div class="flex flex-col mt-3 hidden md:flex-row md:mt-0 md:block">
|
||||
<a href="#" class="text-gray-800 text-sm hover:font-medium md:mx-4">Home</a>
|
||||
<a href="#" class="text-gray-800 text-sm hover:font-medium md:mx-4">Contact</a>
|
||||
<a href="#" class="text-gray-800 text-sm hover:font-medium md:mx-4">About Us</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>`,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
110
src/components/ui/Navbars/WithAvatarAndAlertIcon.vue
Normal file
110
src/components/ui/Navbars/WithAvatarAndAlertIcon.vue
Normal file
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<view-component :name="name" :code="code">
|
||||
<div class="py-6" slot="component">
|
||||
<nav class="bg-white shadow">
|
||||
<div class="container mx-auto px-6 py-3">
|
||||
<div class="md:flex md:items-center md:justify-between">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="text-xl font-semibold text-gray-700">
|
||||
<a href="#" class="text-gray-800 text-xl font-bold hover:text-gray-700 md:text-2xl">Brand</a>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu button -->
|
||||
<div class="flex md:hidden">
|
||||
<button @click="isOpen = !isOpen" type="button" class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600" 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>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
|
||||
<div :class="!isOpen ? 'hidden' : ''" 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 font-medium rounded-md hover:bg-gray-300">Join Slack</a>
|
||||
<a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 font-medium rounded-md hover:bg-gray-300">Browse Topics</a>
|
||||
<a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 font-medium rounded-md hover:bg-gray-300">Random Item</a>
|
||||
<a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 font-medium rounded-md hover:bg-gray-300">Experts</a>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center mt-4 md:mt-0">
|
||||
<button class="mx-4 hidden md:block text-gray-600 hover:text-gray-700 focus:text-gray-700 focus:outline-none" aria-label="show notifications">
|
||||
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 17H20L18.5951 15.5951C18.2141 15.2141 18 14.6973 18 14.1585V11C18 8.38757 16.3304 6.16509 14 5.34142V5C14 3.89543 13.1046 3 12 3C10.8954 3 10 3.89543 10 5V5.34142C7.66962 6.16509 6 8.38757 6 11V14.1585C6 14.6973 5.78595 15.2141 5.40493 15.5951L4 17H9M15 17V18C15 19.6569 13.6569 21 12 21C10.3431 21 9 19.6569 9 18V17M15 17H9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button type="button" class="flex items-center focus:outline-none" aria-label="toggle profile dropdown">
|
||||
<div class="h-8 w-8 overflow-hidden rounded-full border-2 border-gray-400">
|
||||
<img src="https://lh3.googleusercontent.com/a-/AOh14Gi0DgItGDTATTFV6lPiVrqtja6RZ_qrY91zg42o-g" class="h-full w-full object-cover" alt="avatar">
|
||||
</div>
|
||||
|
||||
<h3 class="mx-2 text-sm text-gray-700 font-medium md:hidden">Khatab wedaa</h3>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</view-component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Navbar With Avatar',
|
||||
isOpen: false,
|
||||
code: `
|
||||
<nav class="bg-white shadow">
|
||||
<div class="container mx-auto px-6 py-3">
|
||||
<div class="md:flex md:items-center md:justify-between">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="text-xl font-semibold text-gray-700">
|
||||
<a href="#" class="text-gray-800 text-xl font-bold hover:text-gray-700 md:text-2xl">Brand</a>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu button -->
|
||||
<div class="flex md:hidden">
|
||||
<button type="button" class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600" 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>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
|
||||
<div class="hidden 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 font-medium rounded-md hover:bg-gray-300">Join Slack</a>
|
||||
<a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 font-medium rounded-md hover:bg-gray-300">Browse Topics</a>
|
||||
<a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 font-medium rounded-md hover:bg-gray-300">Random Item</a>
|
||||
<a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 font-medium rounded-md hover:bg-gray-300">Experts</a>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center mt-4 md:mt-0">
|
||||
<button class="mx-4 hidden md:block text-gray-600 hover:text-gray-700 focus:text-gray-700 focus:outline-none" aria-label="show notifications">
|
||||
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 17H20L18.5951 15.5951C18.2141 15.2141 18 14.6973 18 14.1585V11C18 8.38757 16.3304 6.16509 14 5.34142V5C14 3.89543 13.1046 3 12 3C10.8954 3 10 3.89543 10 5V5.34142C7.66962 6.16509 6 8.38757 6 11V14.1585C6 14.6973 5.78595 15.2141 5.40493 15.5951L4 17H9M15 17V18C15 19.6569 13.6569 21 12 21C10.3431 21 9 19.6569 9 18V17M15 17H9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button type="button" class="flex items-center focus:outline-none" aria-label="toggle profile dropdown">
|
||||
<div class="h-8 w-8 overflow-hidden rounded-full border-2 border-gray-400">
|
||||
<img src="https://lh3.googleusercontent.com/a-/AOh14Gi0DgItGDTATTFV6lPiVrqtja6RZ_qrY91zg42o-g" class="h-full w-full object-cover" alt="avatar">
|
||||
</div>
|
||||
|
||||
<h3 class="mx-2 text-sm text-gray-700 font-medium md:hidden">Khatab wedaa</h3>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>`,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
80
src/components/ui/Navbars/WithSearch.vue
Normal file
80
src/components/ui/Navbars/WithSearch.vue
Normal file
@@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<view-component :name="name" :code="code">
|
||||
<div class="py-6" slot="component">
|
||||
<nav class="bg-white shadow">
|
||||
<div class="container mx-auto px-6 py-3 md:flex">
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<a href="#" class="text-gray-800 text-xl font-bold hover:text-gray-700 md:text-2xl">Brand</a>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu button -->
|
||||
<div class="flex md:hidden">
|
||||
<button @click="isOpen = !isOpen" type="button" class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600" 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>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
|
||||
<div :class="!isOpen ? 'hidden' : ''" class="w-full md:flex md:items-center md:justify-between md:block">
|
||||
<div class="flex flex-col -mx-4 px-2 py-3 md:flex-row md:mx-0 md:py-0">
|
||||
<a href="#" class="py-1 px-2 text-gray-800 rounded text-sm hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Home</a>
|
||||
<a href="#" class="py-1 px-2 text-gray-800 rounded text-sm hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">About</a>
|
||||
<a href="#" class="py-1 px-2 text-gray-800 rounded text-sm hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Contact</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="text" class="w-full px-4 py-3 leading-tight text-sm text-gray-100 bg-gray-800 rounded placeholder-gray-200 focus:outline-none focus:bg-gray-700" placeholder="Search" aria-label="Search">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</view-component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'With Search',
|
||||
isOpen: false,
|
||||
code: `
|
||||
<nav class="bg-white shadow">
|
||||
<div class="container mx-auto px-6 py-3 md:flex">
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<a href="#" class="text-gray-800 text-xl font-bold hover:text-gray-700 md:text-2xl">Brand</a>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu button -->
|
||||
<div class="flex md:hidden">
|
||||
<button type="button" class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600" 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>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
|
||||
<div class="w-full hidden md:flex md:items-center md:justify-between md:block">
|
||||
<div class="flex flex-col -mx-4 px-2 py-3 md:flex-row md:mx-0 md:py-0">
|
||||
<a href="#" class="py-1 px-2 text-gray-800 rounded text-sm hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Home</a>
|
||||
<a href="#" class="py-1 px-2 text-gray-800 rounded text-sm hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">About</a>
|
||||
<a href="#" class="py-1 px-2 text-gray-800 rounded text-sm hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Contact</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="text" class="w-full px-4 py-3 leading-tight text-sm text-gray-100 bg-gray-800 rounded placeholder-gray-200 focus:outline-none focus:bg-gray-700" placeholder="Search" aria-label="Search">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>`,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,37 +0,0 @@
|
||||
<template>
|
||||
<div class="flex justify-center items-center">
|
||||
<div :id="name | toId">
|
||||
<ul class="flex">
|
||||
<li class="mx-1 px-3 py-2 bg-gray-200 text-gray-500 rounded-lg">
|
||||
<a href="#" class="flex items-center font-bold cursor-not-allowed">
|
||||
<span class="mx-1">previous</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="mx-1 px-3 py-2 bg-gray-200 text-gray-700 hover:bg-gray-700 hover:text-gray-200 rounded-lg">
|
||||
<a href="#" class="font-bold">1</a>
|
||||
</li>
|
||||
<li class="mx-1 px-3 py-2 bg-gray-200 text-gray-700 hover:bg-gray-700 hover:text-gray-200 rounded-lg">
|
||||
<a href="#" class="font-bold">2</a>
|
||||
</li>
|
||||
<li class="mx-1 px-3 py-2 bg-gray-200 text-gray-700 hover:bg-gray-700 hover:text-gray-200 rounded-lg">
|
||||
<a href="#" class="font-bold">3</a>
|
||||
</li>
|
||||
<li class="mx-1 px-3 py-2 bg-gray-200 text-gray-700 hover:bg-gray-700 hover:text-gray-200 rounded-lg">
|
||||
<a href="#" class="flex items-center font-bold">
|
||||
<span class="mx-1">Next</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Pagination',
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
69
src/components/ui/Paginations/Simple.vue
Normal file
69
src/components/ui/Paginations/Simple.vue
Normal file
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<view-component :name="name" :code="code">
|
||||
<div class="px-3 py-6" slot="component">
|
||||
<div class="flex justify-center items-center">
|
||||
<ul class="flex">
|
||||
<li class="mx-1 px-3 py-2 bg-gray-200 text-gray-500 rounded-lg">
|
||||
<a href="#" class="flex items-center font-bold cursor-not-allowed">
|
||||
<span class="mx-1">previous</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="mx-1 px-3 py-2 bg-gray-200 text-gray-700 hover:bg-gray-700 hover:text-gray-200 rounded-lg">
|
||||
<a href="#" class="font-bold">1</a>
|
||||
</li>
|
||||
|
||||
<li class="mx-1 px-3 py-2 bg-gray-200 text-gray-700 hover:bg-gray-700 hover:text-gray-200 rounded-lg">
|
||||
<a href="#" class="font-bold">2</a>
|
||||
</li>
|
||||
|
||||
<li class="mx-1 px-3 py-2 bg-gray-200 text-gray-700 hover:bg-gray-700 hover:text-gray-200 rounded-lg">
|
||||
<a href="#" class="font-bold">3</a>
|
||||
</li>
|
||||
|
||||
<li class="mx-1 px-3 py-2 bg-gray-200 text-gray-700 hover:bg-gray-700 hover:text-gray-200 rounded-lg">
|
||||
<a href="#" class="flex items-center font-bold">
|
||||
<span class="mx-1">Next</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</view-component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Pagination',
|
||||
code: `
|
||||
<ul class="flex">
|
||||
<li class="mx-1 px-3 py-2 bg-gray-200 text-gray-500 rounded-lg">
|
||||
<a href="#" class="flex items-center font-bold cursor-not-allowed">
|
||||
<span class="mx-1">previous</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="mx-1 px-3 py-2 bg-gray-200 text-gray-700 hover:bg-gray-700 hover:text-gray-200 rounded-lg">
|
||||
<a href="#" class="font-bold">1</a>
|
||||
</li>
|
||||
|
||||
<li class="mx-1 px-3 py-2 bg-gray-200 text-gray-700 hover:bg-gray-700 hover:text-gray-200 rounded-lg">
|
||||
<a href="#" class="font-bold">2</a>
|
||||
</li>
|
||||
|
||||
<li class="mx-1 px-3 py-2 bg-gray-200 text-gray-700 hover:bg-gray-700 hover:text-gray-200 rounded-lg">
|
||||
<a href="#" class="font-bold">3</a>
|
||||
</li>
|
||||
|
||||
<li class="mx-1 px-3 py-2 bg-gray-200 text-gray-700 hover:bg-gray-700 hover:text-gray-200 rounded-lg">
|
||||
<a href="#" class="flex items-center font-bold">
|
||||
<span class="mx-1">Next</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,7 +1,65 @@
|
||||
<template>
|
||||
<div :id="name | toId">
|
||||
<div class="bg-gray-800">
|
||||
<div class="container mx-auto px-6 py-8">
|
||||
<view-component :name="name" :code="code">
|
||||
<div class="py-6" slot="component">
|
||||
<section class="bg-gray-800">
|
||||
<div class="container mx-auto px-6 py-8">
|
||||
<div class="lg:flex items-center">
|
||||
<div class="lg:w-1/2">
|
||||
<h2 class="text-gray-100 text-3xl font-bold">Who I am</h2>
|
||||
|
||||
<p class="text-gray-400 lg:max-w-md mt-4">
|
||||
Hi I am jane , software engineer <a class="text-indigo-300 font-bold" href="#">@BakaTeam</a> , Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum in sed non alias, fugiat, commodi nemo ut fugit corrupti dolorem sequi ex veniam consequuntur id, maiores beatae ipsa omnis aliquam?
|
||||
</p>
|
||||
|
||||
<div class="flex items-center -mx-2 mt-6">
|
||||
<a class="mx-2" href="#" aria-label="Twitter">
|
||||
<svg class="fill-current text-gray-300 hover:text-gray-500 h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path d="M492 109.5c-17.4 7.7-36 12.9-55.6 15.3 20-12 35.4-31 42.6-53.6-18.7 11.1-39.4 19.2-61.5 23.5C399.8 75.8 374.6 64 346.8 64c-53.5 0-96.8 43.4-96.8 96.9 0 7.6.8 15 2.5 22.1-80.5-4-151.9-42.6-199.6-101.3-8.3 14.3-13.1 31-13.1 48.7 0 33.6 17.2 63.3 43.2 80.7-16-.4-31-4.8-44-12.1v1.2c0 47 33.4 86.1 77.7 95-8.1 2.2-16.7 3.4-25.5 3.4-6.2 0-12.3-.6-18.2-1.8 12.3 38.5 48.1 66.5 90.5 67.3-33.1 26-74.9 41.5-120.3 41.5-7.8 0-15.5-.5-23.1-1.4C62.8 432 113.7 448 168.3 448 346.6 448 444 300.3 444 172.2c0-4.2-.1-8.4-.3-12.5C462.6 146 479 129 492 109.5z"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a class="mx-2" href="#" aria-label="Facebook">
|
||||
<svg class="fill-current text-gray-300 hover:text-gray-500 h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path d="M426.8 64H85.2C73.5 64 64 73.5 64 85.2v341.6c0 11.7 9.5 21.2 21.2 21.2H256V296h-45.9v-56H256v-41.4c0-49.6 34.4-76.6 78.7-76.6 21.2 0 44 1.6 49.3 2.3v51.8h-35.3c-24.1 0-28.7 11.4-28.7 28.2V240h57.4l-7.5 56H320v152h106.8c11.7 0 21.2-9.5 21.2-21.2V85.2c0-11.7-9.5-21.2-21.2-21.2z"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a class="mx-2" href="#" aria-label="Linkden">
|
||||
<svg class="fill-current text-gray-300 hover:text-gray-500 h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path d="M417.2 64H96.8C79.3 64 64 76.6 64 93.9V415c0 17.4 15.3 32.9 32.8 32.9h320.3c17.6 0 30.8-15.6 30.8-32.9V93.9C448 76.6 434.7 64 417.2 64zM183 384h-55V213h55v171zm-25.6-197h-.4c-17.6 0-29-13.1-29-29.5 0-16.7 11.7-29.5 29.7-29.5s29 12.7 29.4 29.5c0 16.4-11.4 29.5-29.7 29.5zM384 384h-55v-93.5c0-22.4-8-37.7-27.9-37.7-15.2 0-24.2 10.3-28.2 20.3-1.5 3.6-1.9 8.5-1.9 13.5V384h-55V213h55v23.8c8-11.4 20.5-27.8 49.6-27.8 36.1 0 63.4 23.8 63.4 75.1V384z"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a class="mx-2" href="#" aria-label="Github">
|
||||
<svg class="fill-current text-gray-300 hover:text-gray-500 h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path d="M256 32C132.3 32 32 134.9 32 261.7c0 101.5 64.2 187.5 153.2 217.9 1.4.3 2.6.4 3.8.4 8.3 0 11.5-6.1 11.5-11.4 0-5.5-.2-19.9-.3-39.1-8.4 1.9-15.9 2.7-22.6 2.7-43.1 0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1 1.4-14.1h.1c22.5 2 34.3 23.8 34.3 23.8 11.2 19.6 26.2 25.1 39.6 25.1 10.5 0 20-3.4 25.6-6 2-14.8 7.8-24.9 14.2-30.7-49.7-5.8-102-25.5-102-113.5 0-25.1 8.7-45.6 23-61.6-2.3-5.8-10-29.2 2.2-60.8 0 0 1.6-.5 5-.5 8.1 0 26.4 3.1 56.6 24.1 17.9-5.1 37-7.6 56.1-7.7 19 .1 38.2 2.6 56.1 7.7 30.2-21 48.5-24.1 56.6-24.1 3.4 0 5 .5 5 .5 12.2 31.6 4.5 55 2.2 60.8 14.3 16.1 23 36.6 23 61.6 0 88.2-52.4 107.6-102.3 113.3 8 7.1 15.2 21.1 15.2 42.5 0 30.7-.3 55.5-.3 63 0 5.4 3.1 11.5 11.4 11.5 1.2 0 2.6-.1 4-.4C415.9 449.2 480 363.1 480 261.7 480 134.9 379.7 32 256 32z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 lg:mt-0 lg:w-1/2">
|
||||
<div class="flex items-center justify-center lg:justify-end">
|
||||
<div class="max-w-lg">
|
||||
<img class="w-full h-64 object-cover object-center rounded-md" src="https://images.unsplash.com/photo-1484627147104-f5197bcd6651?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</view-component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'About Me',
|
||||
code: `
|
||||
<section class="bg-gray-800">
|
||||
<div class="container mx-auto px-6 py-8">
|
||||
<div class="lg:flex items-center">
|
||||
<div class="lg:w-1/2">
|
||||
<h2 class="text-gray-100 text-3xl font-bold">Who I am</h2>
|
||||
@@ -40,22 +98,13 @@
|
||||
<div class="mt-8 lg:mt-0 lg:w-1/2">
|
||||
<div class="flex items-center justify-center lg:justify-end">
|
||||
<div class="max-w-lg">
|
||||
|
||||
<img class="w-full h-64 object-cover object-center rounded-md" src="https://images.unsplash.com/photo-1484627147104-f5197bcd6651?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="">
|
||||
<img class="w-full h-64 object-cover object-center rounded-md" src="https://images.unsplash.com/photo-1484627147104-f5197bcd6651?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'About Me'
|
||||
</section>`
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,125 +0,0 @@
|
||||
<template>
|
||||
<div :id="name | toId">
|
||||
<div class="bg-white container mx-auto px-6 py-8">
|
||||
<h2 class="text-gray-800 font-medium capitalize text-xl md:text-2xl">Our Master Photographers</h2>
|
||||
|
||||
<div class="flex items-center justify-center">
|
||||
<div class="grid gap-12 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mt-8 md:mt-10">
|
||||
<div class="max-w-xs w-full text-center">
|
||||
<div class="mb-3">
|
||||
<img class="h-48 w-full object-cover object-center mx-auto rounded-lg" src="https://images.unsplash.com/photo-1493863641943-9b68992a8d07?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=739&q=80" alt="avatar"/>
|
||||
</div>
|
||||
|
||||
<h2 class="text-lg font-medium text-gray-700">Ahmed Omer</h2>
|
||||
|
||||
<div class="flex item-center justify-center mt-2">
|
||||
<svg class="w-5 h-5 fill-current text-yellow-500" viewBox="0 0 24 24">
|
||||
<path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
|
||||
</svg>
|
||||
<svg class="w-5 h-5 fill-current text-yellow-500" viewBox="0 0 24 24">
|
||||
<path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
|
||||
</svg>
|
||||
<svg class="w-5 h-5 fill-current text-yellow-500" viewBox="0 0 24 24">
|
||||
<path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
|
||||
</svg>
|
||||
<svg class="w-5 h-5 fill-current text-gray-500" viewBox="0 0 24 24">
|
||||
<path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
|
||||
</svg>
|
||||
<svg class="w-5 h-5 fill-current text-gray-500" viewBox="0 0 24 24">
|
||||
<path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="max-w-xs w-full text-center">
|
||||
<div class="mb-3">
|
||||
<img class="h-48 w-full object-cover object-center mx-auto rounded-lg" src="https://images.unsplash.com/photo-1475274226786-e636f48a5645?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1460&q=80" alt="avatar"/>
|
||||
</div>
|
||||
|
||||
<h2 class="text-lg font-medium text-gray-700">Hassan Ahmed</h2>
|
||||
|
||||
<div class="flex item-center justify-center mt-2">
|
||||
<svg class="w-5 h-5 fill-current text-yellow-500" viewBox="0 0 24 24">
|
||||
<path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
|
||||
</svg>
|
||||
<svg class="w-5 h-5 fill-current text-yellow-500" viewBox="0 0 24 24">
|
||||
<path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
|
||||
</svg>
|
||||
<svg class="w-5 h-5 fill-current text-yellow-500" viewBox="0 0 24 24">
|
||||
<path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
|
||||
</svg>
|
||||
<svg class="w-5 h-5 fill-current text-yellow-500" viewBox="0 0 24 24">
|
||||
<path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
|
||||
</svg>
|
||||
<svg class="w-5 h-5 fill-current text-gray-500" viewBox="0 0 24 24">
|
||||
<path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="max-w-xs w-full text-center">
|
||||
<div class="mb-3">
|
||||
<img class="h-48 w-full object-cover object-center mx-auto rounded-lg" src="https://images.unsplash.com/photo-1473433657392-e7e31b785bc2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="avatar"/>
|
||||
</div>
|
||||
|
||||
<h2 class="text-lg font-medium text-gray-700">Khaild Mohamed</h2>
|
||||
|
||||
<div class="flex item-center justify-center mt-2">
|
||||
<svg class="w-5 h-5 fill-current text-yellow-500" viewBox="0 0 24 24">
|
||||
<path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
|
||||
</svg>
|
||||
<svg class="w-5 h-5 fill-current text-yellow-500" viewBox="0 0 24 24">
|
||||
<path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
|
||||
</svg>
|
||||
<svg class="w-5 h-5 fill-current text-yellow-500" viewBox="0 0 24 24">
|
||||
<path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
|
||||
</svg>
|
||||
<svg class="w-5 h-5 fill-current text-gray-500" viewBox="0 0 24 24">
|
||||
<path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
|
||||
</svg>
|
||||
<svg class="w-5 h-5 fill-current text-gray-500" viewBox="0 0 24 24">
|
||||
<path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="max-w-xs w-full text-center">
|
||||
<div class="mb-3">
|
||||
<img class="h-48 w-full object-cover object-center mx-auto rounded-lg" src="https://images.unsplash.com/photo-1547363484-c07b94906964?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar"/>
|
||||
</div>
|
||||
|
||||
<h2 class="text-lg font-medium text-gray-700">Ali Omer</h2>
|
||||
|
||||
<div class="flex item-center justify-center mt-2">
|
||||
<svg class="w-5 h-5 fill-current text-yellow-500" viewBox="0 0 24 24">
|
||||
<path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
|
||||
</svg>
|
||||
<svg class="w-5 h-5 fill-current text-yellow-500" viewBox="0 0 24 24">
|
||||
<path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
|
||||
</svg>
|
||||
<svg class="w-5 h-5 fill-current text-yellow-500" viewBox="0 0 24 24">
|
||||
<path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
|
||||
</svg>
|
||||
<svg class="w-5 h-5 fill-current text-yellow-500" viewBox="0 0 24 24">
|
||||
<path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
|
||||
</svg>
|
||||
<svg class="w-5 h-5 fill-current text-yellow-500" viewBox="0 0 24 24">
|
||||
<path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Cards List'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
103
src/components/ui/Sections/OurTeam.vue
Normal file
103
src/components/ui/Sections/OurTeam.vue
Normal file
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<view-component :name="name" :code="code">
|
||||
<div class="py-6" slot="component">
|
||||
<section class="bg-white container mx-auto p-6">
|
||||
<h2 class="text-gray-800 font-medium capitalize text-xl md:text-2xl">Our Team</h2>
|
||||
|
||||
<div class="flex items-center justify-center">
|
||||
<div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mt-8">
|
||||
<div class="max-w-xs w-full text-center">
|
||||
<img class="h-48 w-full object-cover object-center mx-auto rounded-lg" src="https://images.unsplash.com/photo-1493863641943-9b68992a8d07?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=739&q=80" alt="avatar"/>
|
||||
|
||||
<div class="mt-2">
|
||||
<h3 class="text-lg font-medium text-gray-700">Ahmed Omer</h3>
|
||||
<span class="mt-1 font-medium text-gray-600">CEO</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="max-w-xs w-full text-center">
|
||||
<img class="h-48 w-full object-cover object-center mx-auto rounded-lg" src="https://images.unsplash.com/photo-1516756587022-7891ad56a8cd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar"/>
|
||||
|
||||
<div class="mt-2">
|
||||
<h3 class="text-lg font-medium text-gray-700">Jane Doe</h3>
|
||||
<span class="mt-1 font-medium text-gray-600">Co-founder</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="max-w-xs w-full text-center">
|
||||
<img class="h-48 w-full object-cover object-center mx-auto rounded-lg" src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=731&q=80" alt="avatar"/>
|
||||
|
||||
<div class="mt-2">
|
||||
<h3 class="text-lg font-medium text-gray-700">Steve Ben</h3>
|
||||
<span class="mt-1 font-medium text-gray-600">UI/UX</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="max-w-xs w-full text-center">
|
||||
<img class="h-48 w-full object-cover object-center mx-auto rounded-lg" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar"/>
|
||||
|
||||
<div class="mt-2">
|
||||
<h3 class="text-lg font-medium text-gray-700">Patterson Johnson</h3>
|
||||
<span class="mt-1 font-medium text-gray-600">Software Engineer</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</view-component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Our Team',
|
||||
code: `
|
||||
<section class="bg-white container mx-auto p-6">
|
||||
<h2 class="text-gray-800 font-medium capitalize text-xl md:text-2xl">Our Team</h2>
|
||||
|
||||
<div class="flex items-center justify-center">
|
||||
<div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mt-8">
|
||||
<div class="max-w-xs w-full text-center">
|
||||
<img class="h-48 w-full object-cover object-center mx-auto rounded-lg" src="https://images.unsplash.com/photo-1493863641943-9b68992a8d07?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=739&q=80" alt="avatar"/>
|
||||
|
||||
<div class="mt-2">
|
||||
<h3 class="text-lg font-medium text-gray-700">Ahmed Omer</h3>
|
||||
<span class="mt-1 font-medium text-gray-600">CEO</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="max-w-xs w-full text-center">
|
||||
<img class="h-48 w-full object-cover object-center mx-auto rounded-lg" src="https://images.unsplash.com/photo-1516756587022-7891ad56a8cd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar"/>
|
||||
|
||||
<div class="mt-2">
|
||||
<h3 class="text-lg font-medium text-gray-700">Jane Doe</h3>
|
||||
<span class="mt-1 font-medium text-gray-600">Co-founder</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="max-w-xs w-full text-center">
|
||||
<img class="h-48 w-full object-cover object-center mx-auto rounded-lg" src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=731&q=80" alt="avatar"/>
|
||||
|
||||
<div class="mt-2">
|
||||
<h3 class="text-lg font-medium text-gray-700">Steve Ben</h3>
|
||||
<span class="mt-1 font-medium text-gray-600">UI/UX</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="max-w-xs w-full text-center">
|
||||
<img class="h-48 w-full object-cover object-center mx-auto rounded-lg" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar"/>
|
||||
|
||||
<div class="mt-2">
|
||||
<h3 class="text-lg font-medium text-gray-700">Patterson Johnson</h3>
|
||||
<span class="mt-1 font-medium text-gray-600">Software Engineer</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,29 +1,48 @@
|
||||
<template>
|
||||
<div :id="name | toId">
|
||||
<div>
|
||||
<div class="bg-gray-100 lg:py-12 lg:flex lg:justify-center">
|
||||
<view-component :name="name" :code="code">
|
||||
<div class="py-6" slot="component">
|
||||
<section class="bg-gray-100 lg:py-12 lg:flex lg:justify-center">
|
||||
<div class="bg-white lg:mx-8 lg:flex lg:max-w-5xl lg:shadow-lg lg:rounded-lg">
|
||||
<div class="lg:w-1/2">
|
||||
<div class="h-64 bg-cover lg:rounded-lg lg:h-full" style="background-image:url('https://images.unsplash.com/photo-1497493292307-31c376b6e479?ixlib=rb-1.2.1&auto=format&fit=crop&w=1351&q=80')"></div>
|
||||
</div>
|
||||
|
||||
<div class="py-12 px-6 max-w-xl lg:max-w-5xl lg:w-1/2">
|
||||
<h2 class="text-2xl text-gray-800 font-bold md:text-3xl">Build Your New <span class="text-indigo-600">Idea</span></h2>
|
||||
<p class="mt-4 text-gray-600">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem modi reprehenderit vitae exercitationem aliquid dolores ullam temporibus enim expedita aperiam mollitia iure consectetur dicta tenetur, porro consequuntur saepe accusantium consequatur.</p>
|
||||
|
||||
<div class="mt-8">
|
||||
<a href="#" class="bg-gray-900 text-gray-100 px-5 py-3 font-semibold rounded">Start Now</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</view-component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Paragraph With Image'
|
||||
name: 'Paragraph With Image',
|
||||
code: `
|
||||
<section class="bg-gray-100 lg:py-12 lg:flex lg:justify-center">
|
||||
<div class="bg-white lg:mx-8 lg:flex lg:max-w-5xl lg:shadow-lg lg:rounded-lg">
|
||||
<div class="lg:w-1/2">
|
||||
<div class="h-64 bg-cover lg:rounded-lg lg:h-full" style="background-image:url('https://images.unsplash.com/photo-1497493292307-31c376b6e479?ixlib=rb-1.2.1&auto=format&fit=crop&w=1351&q=80')"></div>
|
||||
</div>
|
||||
|
||||
<div class="py-12 px-6 max-w-xl lg:max-w-5xl lg:w-1/2">
|
||||
<h2 class="text-2xl text-gray-800 font-bold md:text-3xl">Build Your New <span class="text-indigo-600">Idea</span></h2>
|
||||
<p class="mt-4 text-gray-600">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem modi reprehenderit vitae exercitationem aliquid dolores ullam temporibus enim expedita aperiam mollitia iure consectetur dicta tenetur, porro consequuntur saepe accusantium consequatur.</p>
|
||||
|
||||
<div class="mt-8">
|
||||
<a href="#" class="bg-gray-900 text-gray-100 px-5 py-3 font-semibold rounded">Start Now</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section> `
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,21 +1,24 @@
|
||||
import VueRouter from "vue-router";
|
||||
|
||||
const Alerts = () =>
|
||||
import("./components/categories/Alerts");
|
||||
|
||||
const Cards = () =>
|
||||
import("./components/categories/Cards");
|
||||
|
||||
const Forms = () =>
|
||||
import("./components/categories/Forms");
|
||||
|
||||
const Alerts = () => import("./components/categories/Alerts");
|
||||
const Cards = () => import("./components/categories/Cards");
|
||||
const Forms = () => import("./components/categories/Forms");
|
||||
const Navbars = () => import("./components/categories/Navbars");
|
||||
const Headers = () => import("./components/categories/Headers");
|
||||
const Sections = () => import("./components/categories/Sections");
|
||||
const Paginations = () => import("./components/categories/Paginations");
|
||||
const Footers = () => import("./components/categories/Footers");
|
||||
|
||||
export default new VueRouter({
|
||||
mode: 'history',
|
||||
routes: [
|
||||
// { path: '/', redirect: '/alerts' },
|
||||
{ path: "/alerts", component: Alerts, name: "Alerts" },
|
||||
{ path: "/cards", component: Cards, name: "Cards" },
|
||||
{ path: "/forms", component: Forms, name: "Forms" },
|
||||
{ path: "/navbars", component: Navbars, name: "Navbars" },
|
||||
{ path: "/headers", component: Headers, name: "Headers" },
|
||||
{ path: "/sections", component: Sections, name: "Sections" },
|
||||
{ path: "/paginations", component: Paginations, name: "Paginations" },
|
||||
{ path: "/footers", component: Footers, name: "Footers" },
|
||||
],
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user