From 9744f9b326eca54b13ce19cfc7a36da288a60a83 Mon Sep 17 00:00:00 2001
From: khatabwedaa <khatabwedaa@gmail.com>
Date: Thu, 27 May 2021 20:49:44 +0200
Subject: [PATCH] Update components

---
 components/ui/Dropdowns/Notification.vue |  2 +-
 components/ui/Dropdowns/Simple.vue       |  2 +-
 components/ui/Heros/ECommerce.vue        | 58 ++++++++++++------------
 components/ui/Heros/WithBGImage.vue      |  4 +-
 components/ui/Heros/WithSideImage.vue    |  4 +-
 components/ui/Navbars/ECommerce.vue      |  4 +-
 components/ui/Navbars/WithAvatar.vue     |  6 +--
 7 files changed, 39 insertions(+), 41 deletions(-)

diff --git a/components/ui/Dropdowns/Notification.vue b/components/ui/Dropdowns/Notification.vue
index b0b25e5..3a4c683 100644
--- a/components/ui/Dropdowns/Notification.vue
+++ b/components/ui/Dropdowns/Notification.vue
@@ -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">
diff --git a/components/ui/Dropdowns/Simple.vue b/components/ui/Dropdowns/Simple.vue
index 9ad1947..cb0e4af 100644
--- a/components/ui/Dropdowns/Simple.vue
+++ b/components/ui/Dropdowns/Simple.vue
@@ -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">
diff --git a/components/ui/Heros/ECommerce.vue b/components/ui/Heros/ECommerce.vue
index e622d22..38eb8af 100644
--- a/components/ui/Heros/ECommerce.vue
+++ b/components/ui/Heros/ECommerce.vue
@@ -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-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">
-                                <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,7 +65,7 @@
                 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>
diff --git a/components/ui/Heros/WithBGImage.vue b/components/ui/Heros/WithBGImage.vue
index cdb76a3..95b0770 100644
--- a/components/ui/Heros/WithBGImage.vue
+++ b/components/ui/Heros/WithBGImage.vue
@@ -3,7 +3,7 @@
         <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">
@@ -51,7 +51,7 @@
                 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">
diff --git a/components/ui/Heros/WithSideImage.vue b/components/ui/Heros/WithSideImage.vue
index 34a7434..d57693d 100644
--- a/components/ui/Heros/WithSideImage.vue
+++ b/components/ui/Heros/WithSideImage.vue
@@ -2,7 +2,7 @@
     <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>
@@ -61,7 +61,7 @@
                 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>
diff --git a/components/ui/Navbars/ECommerce.vue b/components/ui/Navbars/ECommerce.vue
index 3122e78..2e86fef 100644
--- a/components/ui/Navbars/ECommerce.vue
+++ b/components/ui/Navbars/ECommerce.vue
@@ -2,7 +2,7 @@
     <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-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
@@ -49,7 +49,7 @@
                 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-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
diff --git a/components/ui/Navbars/WithAvatar.vue b/components/ui/Navbars/WithAvatar.vue
index d9cd47f..e18c325 100644
--- a/components/ui/Navbars/WithAvatar.vue
+++ b/components/ui/Navbars/WithAvatar.vue
@@ -2,7 +2,7 @@
     <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">
@@ -59,7 +59,7 @@
                 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">
@@ -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>