beenull/merakiui
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Merge pull request #40 from bakateam/may-updates

Browse source 
May Updates
This commit is contained in:
khatab Wedaa 2021-05-27 12:08:38 -07:00 committed by GitHub
parent 99254666b1 e7c4bc7bd4
commit 4525270d2f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 1020 additions and 867 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
components/Footer.vue Normal file
View file

@ -0,0 +1,9 @@
<template>
<div class="container px-6 mx-auto">
<div class="flex flex-col items-center border-t border-gray-200 dark:border-gray-800">
<div class="py-6 text-center">
<p class="text-gray-500 dark:text-gray-300">© <a href="https://github.com/bakateam" target="_blank" class="text-blue-500 hover:underline">Baka Team</a> {{ (new Date().getFullYear()) }} - All rights reserved</p>
</div>
</div>
</div>
</template>

21
components/Header.vue
View file

@ -4,14 +4,22 @@
<div class="container px-6 py-4 mx-auto">
<div class="flex items-center justify-between">
<a href="/" class="inline-flex items-center text-xl font-bold text-white md:text-2xl hover:text-blue-400">
<img class="w-10 h-10 mr-1" src="../assets/svg/logo.svg" alt="logo"> Meraki <span class="text-blue-400">UI</span>
<img class="w-10 h-10 mr-1" src="../assets/svg/logo.svg" alt="logo"> <span class="hidden sm:inline">Meraki <span class="text-blue-400">UI</span></span>
</a>
<div class="flex items-center">
<a :href="SHARE_LINK" class="font-medium text-white hover:underline">Share on twitter</a>
<div class="flex items-center space-x-4 sm:space-x-6">
<a :href="SHARE_LINK" class="flex items-center space-x-3 font-medium text-white hover:text-blue-400 hover:underline">
<svg class="w-5 h-5 sm:w-6 sm:h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.995 6.68799C20.8914 6.15208 21.5622 5.30823 21.882 4.31399C21.0397 4.81379 20.118 5.16587 19.157 5.35499C17.8246 3.94552 15.7135 3.60251 14.0034 4.51764C12.2933 5.43277 11.4075 7.37948 11.841 9.26999C8.39062 9.09676 5.17598 7.4669 2.99702 4.78599C1.85986 6.74741 2.44097 9.25477 4.32502 10.516C3.64373 10.4941 2.97754 10.3096 2.38202 9.97799C2.38202 9.99599 2.38202 10.014 2.38202 10.032C2.38241 12.0751 3.82239 13.8351 5.82502 14.24C5.19308 14.4119 4.53022 14.4372 3.88702 14.314C4.45022 16.0613 6.06057 17.2583 7.89602 17.294C6.37585 18.4871 4.49849 19.1342 2.56602 19.131C2.22349 19.1315 1.88123 19.1118 1.54102 19.072C3.50341 20.333 5.78739 21.0023 8.12002 21C11.3653 21.0223 14.484 19.7429 16.7787 17.448C19.0734 15.1531 20.3526 12.0342 20.33 8.78899C20.33 8.60299 20.3257 8.41799 20.317 8.23399C21.1575 7.62659 21.8828 6.87414 22.459 6.01199C21.676 6.35905 20.8455 6.58691 19.995 6.68799Z" fill="currentColor"></path>
</svg>
<a class="ml-4 text-white hover:text-blue-500" href="https://github.com/bakateam/merakiui" target="_blink">
<svg class="w-6 h-6 fill-current" viewBox="0 0 30 30">
<span>Share on twitter</span>
</a>
<dark-mode />
<a class="text-white hover:text-blue-400" href="https://github.com/bakateam/merakiui" target="_blink">
<svg class="w-5 h-5 fill-current sm:w-6 sm:h-6" viewBox="0 0 30 30">
<path d="M15 1.875C7.75195 1.875 1.875 7.9043 1.875 15.334C1.875 21.2812 5.63672 26.3203 10.8516 28.1016C10.9247 28.1175 10.9994 28.1253 11.0742 28.125C11.5605 28.125 11.748 27.7676 11.748 27.457C11.748 27.1348 11.7363 26.291 11.7305 25.166C11.2963 25.2678 10.8522 25.3209 10.4062 25.3242C7.88086 25.3242 7.30664 23.3613 7.30664 23.3613C6.70898 21.8086 5.84766 21.3926 5.84766 21.3926C4.70508 20.5898 5.8418 20.5664 5.92969 20.5664H5.93555C7.25391 20.6836 7.94531 21.9609 7.94531 21.9609C8.60156 23.1094 9.48047 23.4316 10.2656 23.4316C10.7848 23.4213 11.2959 23.3015 11.7656 23.0801C11.8828 22.2129 12.2227 21.6211 12.5977 21.2812C9.68555 20.9414 6.62109 19.7871 6.62109 14.6309C6.62109 13.1602 7.13086 11.959 7.96875 11.0215C7.83398 10.6816 7.38281 9.31055 8.09766 7.45898C8.19354 7.43604 8.29209 7.42619 8.39062 7.42969C8.86523 7.42969 9.9375 7.61133 11.707 8.8418C13.8572 8.24022 16.1311 8.24022 18.2812 8.8418C20.0508 7.61133 21.123 7.42969 21.5977 7.42969C21.6962 7.42619 21.7947 7.43604 21.8906 7.45898C22.6055 9.31055 22.1543 10.6816 22.0195 11.0215C22.8574 11.9648 23.3672 13.166 23.3672 14.6309C23.3672 19.7988 20.2969 20.9355 17.373 21.2695C17.8418 21.6855 18.2637 22.5059 18.2637 23.7598C18.2637 25.5586 18.2461 27.0117 18.2461 27.4512C18.2461 27.7676 18.4277 28.125 18.9141 28.125C18.9928 28.1253 19.0713 28.1175 19.1484 28.1016C24.3691 26.3203 28.125 21.2754 28.125 15.334C28.125 7.9043 22.248 1.875 15 1.875Z"/>
</svg>
</a>
@ -67,7 +75,10 @@
</template>
<script>
import DarkMode from './utilities/DarkMode.vue';
export default {
components: { DarkMode },
data() {
return {
components_count: 51,

2
components/Main.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="container px-6 pb-12 mx-auto">
<div class="container px-6 mx-auto">
<div class="py-16 text-center">
<h1 class="text-xl font-medium text-gray-800 md:text-3xl dark:text-white">Discover new components. Build amazing things 🔥</h1>
<div class="max-w-2xl mx-auto">

4
components/ui/Cards/Testimonial.vue
View file

@ -1,7 +1,7 @@
<template>
<view-component :name="name" :code="code">
<div class="px-3 pt-16 pb-6" slot="component">
<div class="max-w-md px-8 py-4 mx-auto bg-white rounded-lg shadow-lg dark:bg-gray-800">
<div class="max-w-md px-8 py-4 mx-auto mt-16 bg-white rounded-lg shadow-lg dark:bg-gray-800">
<div class="flex justify-center -mt-16 md:justify-end">
<img class="object-cover w-20 h-20 border-2 border-indigo-500 rounded-full dark:border-indigo-400" alt="Testimonial avatar" src="https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=76&q=80">
</div>
@ -24,7 +24,7 @@
return {
name: 'Testimonial',
code: `
<div class="max-w-md px-8 py-4 mx-auto bg-white rounded-lg shadow-lg dark:bg-gray-800">
<div class="max-w-md px-8 py-4 mx-auto mt-16 bg-white rounded-lg shadow-lg dark:bg-gray-800">
<div class="flex justify-center -mt-16 md:justify-end">
<img class="object-cover w-20 h-20 border-2 border-indigo-500 rounded-full dark:border-indigo-400" alt="Testimonial avatar" src="https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=76&q=80">
</div>

2
components/ui/Dropdowns/Notification.vue
View file

@ -1,7 +1,7 @@
<template>
<view-component :name="name" :code="code">
<div class="flex justify-end px-3 pt-6 pb-96 md:justify-center" slot="component">
<div class="relative">
<div class="relative inline-block">
<!-- Dropdown toggle button -->
<button @click="dropdownOpen = !dropdownOpen" class="relative z-10 block p-2 bg-white rounded-md dark:bg-gray-800 focus:outline-none">
<svg class="w-5 h-5 text-gray-800 dark:text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">

2
components/ui/Dropdowns/Simple.vue
View file

@ -1,7 +1,7 @@
<template>
<view-component :name="name" :code="code">
<div class="flex justify-end px-3 pt-6 pb-56 sm:justify-center" slot="component">
<div class="relative">
<div class="relative inline-block">
<!-- Dropdown toggle button -->
<button @click="dropdownOpen = !dropdownOpen" class="relative z-10 block p-2 bg-white rounded-md dark:bg-gray-800 focus:outline-none">
<svg class="w-5 h-5 text-gray-800 dark:text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">

62
components/ui/Heros/ECommerce.vue
View file

@ -2,39 +2,37 @@
<view-component :name="name" :code="code">
<div class="py-6" slot="component">
<header class="bg-white dark:bg-gray-800">
<nav class="shadow">
<div class="container px-6 py-3 mx-auto md:flex md:justify-between md:items-center">
<div class="flex items-center justify-between">
<div>
<a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
</div>
<div class="flex md:hidden">
<button @click="isOpen = !isOpen" 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="w-6 h-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>
<nav class="container px-6 py-4 mx-auto md:flex md:justify-between md:items-center">
<div class="flex items-center justify-between">
<div>
<a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
</div>
<div :class="isOpen ? '' : 'hidden'" class="items-center md:flex">
<div class="flex flex-col md:flex-row md:mx-6">
<a class="my-1 text-sm font-medium text-gray-700 dark:text-gray-200 hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Home</a>
<a class="my-1 text-sm font-medium text-gray-700 dark:text-gray-200 hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Shop</a>
<a class="my-1 text-sm font-medium text-gray-700 dark:text-gray-200 hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Contact</a>
<a class="my-1 text-sm font-medium text-gray-700 dark:text-gray-200 hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">About</a>
</div>
<div class="flex md:hidden">
<button @click="isOpen = !isOpen" 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="w-6 h-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="flex justify-center md:block">
<a class="relative text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300" href="#">
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 3H5L5.4 5M7 13H17L21 5H5.4M7 13L5.4 5M7 13L4.70711 15.2929C4.07714 15.9229 4.52331 17 5.41421 17H17M17 17C15.8954 17 15 17.8954 15 19C15 20.1046 15.8954 21 17 21C18.1046 21 19 20.1046 19 19C19 17.8954 18.1046 17 17 17ZM9 19C9 20.1046 8.10457 21 7 21C5.89543 21 5 20.1046 5 19C5 17.8954 5.89543 17 7 17C8.10457 17 9 17.8954 9 19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div :class="isOpen ? '' : 'hidden'" class="items-center md:flex">
<div class="flex flex-col md:flex-row md:mx-6">
<a class="my-1 text-sm font-medium text-gray-700 dark:text-gray-200 hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Home</a>
<a class="my-1 text-sm font-medium text-gray-700 dark:text-gray-200 hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Shop</a>
<a class="my-1 text-sm font-medium text-gray-700 dark:text-gray-200 hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Contact</a>
<a class="my-1 text-sm font-medium text-gray-700 dark:text-gray-200 hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">About</a>
</div>
<span class="absolute top-0 left-0 p-1 text-xs text-white bg-indigo-500 rounded-full"></span>
</a>
</div>
<div class="flex justify-center md:block">
<a class="relative text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300" href="#">
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 3H5L5.4 5M7 13H17L21 5H5.4M7 13L5.4 5M7 13L4.70711 15.2929C4.07714 15.9229 4.52331 17 5.41421 17H17M17 17C15.8954 17 15 17.8954 15 19C15 20.1046 15.8954 21 17 21C18.1046 21 19 20.1046 19 19C19 17.8954 18.1046 17 17 17ZM9 19C9 20.1046 8.10457 21 7 21C5.89543 21 5 20.1046 5 19C5 17.8954 5.89543 17 7 17C8.10457 17 9 17.8954 9 19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="absolute top-0 left-0 p-1 text-xs text-white bg-indigo-500 rounded-full"></span>
</a>
</div>
</div>
</nav>
@ -67,16 +65,16 @@
isOpen: false,
code: `
<header class="bg-white dark:bg-gray-800">
<nav class="shadow">
<nav>
<div class="container px-6 py-3 mx-auto md:flex md:justify-between md:items-center">
<div class="flex items-center justify-between">
<div>
<a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
<a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
</div>
<!-- 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="w-6 h-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>

8
components/ui/Heros/WithBGImage.vue
View file

@ -3,11 +3,11 @@
<div class="py-6" slot="component">
<header>
<nav class="bg-white shadow dark:bg-gray-800">
<div class="container px-6 py-3 mx-auto ">
<div class="container px-6 py-4 mx-auto">
<div class="md:flex md:items-center md:justify-between">
<div class="flex items-center justify-between">
<div class="text-xl font-semibold text-gray-700">
<a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
<a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
</div>
<div class="flex md:hidden">
@ -51,11 +51,11 @@
code: `
<header>
<nav class="bg-white shadow dark:bg-gray-800">
<div class="container px-6 py-3 mx-auto ">
<div class="container px-6 py-4 mx-auto">
<div class="md:flex md:items-center md:justify-between">
<div class="flex items-center justify-between">
<div class="text-xl font-semibold text-gray-700">
<a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
<a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
</div>
<!-- Mobile menu button -->

4
components/ui/Heros/WithImage.vue
View file

@ -6,7 +6,7 @@
<div class="container px-6 py-4 mx-auto md:flex md:justify-between md:items-center">
<div class="flex items-center justify-between">
<div>
<a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
<a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
</div>
<!-- Mobile menu button -->
@ -113,7 +113,7 @@
<div class="container px-6 py-4 mx-auto md:flex md:justify-between md:items-center">
<div class="flex items-center justify-between">
<div>
<a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
<a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
</div>
<!-- Mobile menu button -->

8
components/ui/Heros/WithSideImage.vue
View file

@ -2,11 +2,11 @@
<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">
<nav class="px-6 py-4 shadow">
<div class="items-center justify-between md:flex">
<div class="flex items-center justify-between">
<div>
<a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
<a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
</div>
<!-- Mobile menu button -->
@ -61,11 +61,11 @@
isOpen: false,
code: `
<header class="bg-white dark:bg-gray-800">
<nav class="px-6 py-3 shadow">
<nav class="px-6 py-4 shadow">
<div class="items-center justify-between md:flex">
<div class="flex items-center justify-between">
<div>
<a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
<a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
</div>
<!-- Mobile menu button -->

8
components/ui/Navbars/ECommerce.vue
View file

@ -2,10 +2,10 @@
<view-component :name="name" :code="code">
<div class="py-6" slot="component">
<nav class="bg-white shadow dark:bg-gray-800">
<div class="container px-6 py-3 mx-auto md:flex md:justify-between md:items-center">
<div class="container px-6 py-4 mx-auto md:flex md:justify-between md:items-center">
<div class="flex items-center justify-between">
<div>
<a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
<a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
</div>
<div class="flex md:hidden">
@ -49,10 +49,10 @@
isOpen: false,
code: `
<nav class="bg-white shadow dark:bg-gray-800">
<div class="container px-6 py-3 mx-auto md:flex md:justify-between md:items-center">
<div class="container px-6 py-4 mx-auto md:flex md:justify-between md:items-center">
<div class="flex items-center justify-between">
<div>
<a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
<a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
</div>
<!-- Mobile menu button -->

12
components/ui/Navbars/WithAvatar.vue
View file

@ -2,11 +2,11 @@
<view-component :name="name" :code="code">
<div class="py-6" slot="component">
<nav class="bg-white shadow dark:bg-gray-800">
<div class="container px-6 py-3 mx-auto">
<div class="container px-6 py-4 mx-auto">
<div class="md:flex md:items-center md:justify-between">
<div class="flex items-center justify-between">
<div class="text-xl font-semibold text-gray-700">
<a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
<a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
</div>
<!-- Mobile menu button -->
@ -37,7 +37,7 @@
<button type="button" class="flex items-center focus:outline-none" aria-label="toggle profile dropdown">
<div class="w-8 h-8 overflow-hidden border-2 border-gray-400 rounded-full">
<img src="https://lh3.googleusercontent.com/a-/AOh14Gi0DgItGDTATTFV6lPiVrqtja6RZ_qrY91zg42o-g" class="object-cover w-full h-full" alt="avatar">
<img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" class="object-cover w-full h-full" alt="avatar">
</div>
<h3 class="mx-2 text-sm font-medium text-gray-700 dark:text-gray-200 md:hidden">Khatab wedaa</h3>
@ -59,11 +59,11 @@
isOpen: false,
code: `
<nav class="bg-white shadow dark:bg-gray-800">
<div class="container px-6 py-3 mx-auto">
<div class="container px-6 py-4 mx-auto">
<div class="md:flex md:items-center md:justify-between">
<div class="flex items-center justify-between">
<div class="text-xl font-semibold text-gray-700">
<a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
<a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
</div>
<!-- Mobile menu button -->
@ -94,7 +94,7 @@
<button type="button" class="flex items-center focus:outline-none" aria-label="toggle profile dropdown">
<div class="w-8 h-8 overflow-hidden border-2 border-gray-400 rounded-full">
<img src="https://lh3.googleusercontent.com/a-/AOh14Gi0DgItGDTATTFV6lPiVrqtja6RZ_qrY91zg42o-g" class="object-cover w-full h-full" alt="avatar">
<img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" class="object-cover w-full h-full" alt="avatar">
</div>
<h3 class="mx-2 text-sm font-medium text-gray-700 dark:text-gray-200 md:hidden">Khatab wedaa</h3>

4
components/ui/Navbars/WithCategories.vue
View file

@ -6,7 +6,7 @@
<div class="flex flex-col md:flex-row md:justify-between md:items-center">
<div class="flex items-center justify-between">
<div class="flex items-center">
<a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
<a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
<!-- Search input on desktop screen -->
<div class="hidden mx-10 md:block">
@ -109,7 +109,7 @@
<div class="flex flex-col md:flex-row md:justify-between md:items-center">
<div class="flex items-center justify-between">
<div class="flex items-center">
<a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
<a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
<!-- Search input on desktop screen -->
<div class="hidden mx-10 md:block">

4
components/ui/Navbars/WithSearch.vue
View file

@ -5,7 +5,7 @@
<div class="container px-6 py-3 mx-auto md:flex">
<div class="flex items-center justify-between">
<div>
<a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
<a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
</div>
<!-- Mobile menu button -->
@ -53,7 +53,7 @@
<div class="container px-6 py-3 mx-auto md:flex">
<div class="flex items-center justify-between">
<div>
<a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
<a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
</div>
<!-- Mobile menu button -->

42
components/utilities/DarkMode.vue Normal file
View file

@ -0,0 +1,42 @@
<template>
<button @click="toggle" class="text-white hover:text-blue-400 focus:outline-none" aria-label="Color Mode">
<svg v-if="darkMode" class="w-5 h-5 sm:w-6 sm:h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd" />
</svg>
<svg v-if="!darkMode" class="w-5 h-5 sm:w-6 sm:h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
</svg>
</button>
</template>
<script>
export default {
data() {
return {
darkMode: false,
}
},
created() {
this.darkMode = JSON.parse(localStorage.getItem('darkMode'))
this.set()
},
methods: {
toggle() {
this.darkMode = ! this.darkMode
localStorage.setItem('darkMode', this.darkMode)
this.set()
},
set() {
if (this.darkMode) {
document.querySelector('html').classList.add('dark')
return
}
document.querySelector('html').classList.remove('dark')
}
}
}
</script>

48
components/utilities/ViewComponent.vue
View file

@ -1,35 +1,33 @@
<template>
<div class="mb-12 overflow-hidden bg-gray-300 border rounded-lg dark:bg-gray-600 dark:border-gray-600">
<div class="px-4 py-2 bg-white border-b dark:bg-gray-800 dark:border-gray-600">
<div class="flex flex-col items-center justify-between md:flex-row">
<div class="flex items-center">
<h3 class="font-medium text-gray-700 capitalize dark:text-gray-200 md:text-lg">{{ name }}</h3>
</div>
<div class="mb-16">
<div class="flex flex-col items-center justify-between md:flex-row">
<div class="flex items-center">
<h3 class="text-gray-700 capitalize dark:text-gray-200 md:text-lg">{{ name }}</h3>
</div>
<div class="mt-4 md:mt-0">
<app-button @click="rtl =! rtl" class="p-1 rounded-md hover:text-gray-700 hover:bg-gray-400 dark:hover:bg-gray-500 dark:hover:text-gray-200 focus:outline-none" :class="rtl? 'bg-gray-400 text-gray-700 dark:bg-gray-500 dark:text-gray-200' : 'bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-200'" aria-label="Rtl">
<svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" fill="none">
<path d="M16 13V11.5H10V9.5H16V8L19 10.5L16 13Z" fill="currentColor" />
<path d="M8 17V15.5H14V13.5H8V12L5 14.5L8 17Z" fill="currentColor" />
</svg>
</app-button>
<div class="mt-4 md:mt-0">
<app-button @click="rtl =! rtl" class="p-1 rounded-md hover:text-gray-700 hover:bg-gray-400 dark:hover:bg-gray-500 dark:hover:text-gray-200 focus:outline-none" :class="rtl? 'bg-gray-400 text-gray-700 dark:bg-gray-500 dark:text-gray-200' : 'bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-200'" aria-label="Rtl">
<svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" fill="none">
<path d="M16 13V11.5H10V9.5H16V8L19 10.5L16 13Z" fill="currentColor" />
<path d="M8 17V15.5H14V13.5H8V12L5 14.5L8 17Z" fill="currentColor" />
</svg>
</app-button>
<app-button @click="viewCode =! viewCode" class="p-1 mx-4 rounded-md hover:text-gray-700 hover:bg-gray-400 dark:hover:bg-gray-500 dark:hover:text-gray-200 focus:outline-none" :class="viewCode? 'bg-gray-400 text-gray-700 dark:bg-gray-500 dark:text-gray-200' : 'bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-200'" aria-label="View code snippet">
<svg class="w-6 h-6" 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="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
</svg>
</app-button>
<app-button @click="viewCode =! viewCode" class="p-1 mx-4 rounded-md hover:text-gray-700 hover:bg-gray-400 dark:hover:bg-gray-500 dark:hover:text-gray-200 focus:outline-none" :class="viewCode? 'bg-gray-400 text-gray-700 dark:bg-gray-500 dark:text-gray-200' : 'bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-200'" aria-label="View code snippet">
<svg class="w-6 h-6" 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="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
</svg>
</app-button>
<app-button v-clipboard:success="onCopy" v-clipboard:copy="code" class="p-1 text-gray-600 bg-gray-200 rounded-md dark:bg-gray-700 dark:text-gray-200 hover:text-gray-700 hover:bg-gray-400 dark:hover:bg-gray-500 dark:hover:text-gray-200 focus:outline-none" aria-label="Copy">
<svg class="w-6 h-6" 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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
</svg>
</app-button>
</div>
<app-button v-clipboard:success="onCopy" v-clipboard:copy="code" class="p-1 text-gray-600 bg-gray-200 rounded-md dark:bg-gray-700 dark:text-gray-200 hover:text-gray-700 hover:bg-gray-400 dark:hover:bg-gray-500 dark:hover:text-gray-200 focus:outline-none" aria-label="Copy">
<svg class="w-6 h-6" 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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
</svg>
</app-button>
</div>
</div>
<div class="flex items-center justify-center">
<div class="flex items-center justify-center mt-4 overflow-hidden bg-gray-300 border rounded-lg dark:border-gray-600 dark:bg-gray-600">
<div class="relative w-full" :dir="rtl? 'rtl' : 'ltr'">
<slot class="absolute top-0 left-0 w-full h-full" name="component"></slot>

9
package.json
View file

@ -14,15 +14,14 @@
"nuxt": "^2.14.12"
},
"devDependencies": {
"@nuxtjs/tailwindcss": "^3.4.2",
"@tailwindcss/postcss7-compat": "^2.0.3",
"autoprefixer": "^9",
"@nuxtjs/tailwindcss": "^4.1.2",
"autoprefixer": "^10.2.6",
"highlight.js": "^10.6.0",
"husky": "^5.0.9",
"lint-staged": "^10.5.4",
"postcss": "^7",
"postcss": "^8.3.0",
"prettier": "^2.2.1",
"tailwindcss": "npm:@tailwindcss/postcss7-compat",
"tailwindcss": "^2.1.2",
"vue-backtotop": "^1.6.1",
"vue-clipboard2": "^0.3.1"
},

44
pages/index.vue
View file

@ -1,26 +1,16 @@
<template>
<div :class="{ 'dark' : darkMode }">
<div class="bg-white dark:bg-gray-900 font-roboto">
<header-component></header-component>
<main-component></main-component>
<div class="bg-white dark:bg-gray-900 font-roboto">
<header-component />
<main-component />
<footer-component />
<back-to-top visibleoffset="800">
<app-button class="fixed bottom-0 right-0 p-2 mx-10 my-10 text-white bg-gray-800 rounded-md hover:bg-gray-900 dark:hover:bg-gray-700 focus:outline-none" aria-label="Back to top">
<svg class="w-6 h-6" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"/>
</svg>
</app-button>
</back-to-top>
<app-button @click="darkMode = !darkMode" class="fixed bottom-0 right-0 z-50 p-2 mx-10 my-24 text-white bg-gray-800 rounded-md hover:bg-gray-900 dark:hover:bg-gray-700 focus:outline-none" aria-label="Color Mode">
<svg v-if="darkMode" class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd" />
</svg>
<svg v-if="!darkMode" class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
<back-to-top visibleoffset="800">
<app-button class="fixed bottom-0 right-0 p-2 mx-10 my-10 text-white bg-gray-800 rounded-md hover:bg-gray-900 dark:hover:bg-gray-700 focus:outline-none" aria-label="Back to top">
<svg class="w-6 h-6" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"/>
</svg>
</app-button>
</div>
</back-to-top>
</div>
</template>
@ -28,22 +18,10 @@
import AppButton from "~/components/utilities/AppButton.vue";
import HeaderComponent from "~/components/Header";
import MainComponent from "~/components/Main";
import FooterComponent from "~/components/Footer";
import BackToTop from "vue-backtotop";
export default {
components: { AppButton, HeaderComponent, MainComponent, BackToTop },
data() {
return {
darkMode: JSON.parse(localStorage.getItem("darkMode")) || false,
};
},
watch: {
darkMode() {
localStorage.setItem("darkMode", this.darkMode);
console.log('Night Mode: ' + this.darkMode);
}
},
components: { AppButton, HeaderComponent, MainComponent, FooterComponent, BackToTop }
};
</script>

3
tailwind.config.js
View file

@ -1,10 +1,11 @@
module.exports = {
purge: [
'./components/**/*.{vue,js}',
'./layouts/**/*.vue',
'./pages/**/*.vue',
'./plugins/**/*.{js,ts}',
'./nuxt.config.{js,ts}',
],
mode: 'jit',
darkMode: "class",
theme: {
extend: {

1591
yarn.lock
View file

File diff suppressed because it is too large Load diff