From 2eb02642bad18983603e19926b1858780d5a3392 Mon Sep 17 00:00:00 2001
From: khatabwedaa <khatabwedaa@gmail.com>
Date: Mon, 4 May 2020 15:00:06 +0200
Subject: [PATCH] create view for components

---
 src/App.vue                              |  4 +-
 src/components/Alert/NotificationPop.vue | 41 ++++++++++++++++++
 src/components/Master.vue                | 18 ++++++++
 src/views/CodeSnippet.vue                | 11 +++++
 src/views/Header.vue                     |  2 +-
 src/views/ViewComponet.vue               | 53 ++++++++++++++++++++++++
 6 files changed, 127 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Alert/NotificationPop.vue
 create mode 100644 src/components/Master.vue
 create mode 100644 src/views/CodeSnippet.vue
 create mode 100644 src/views/ViewComponet.vue

diff --git a/src/App.vue b/src/App.vue
index 25f509c..38095de 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,15 +1,17 @@
 <template>
   <div class="font-inter" id="app">
     <Header></Header>
+    <master-component></master-component>
   </div>
 </template>
 
 <script>
 import Header from "./views/Header";
+import MasterComponent from "./components/Master";
 
 export default {
   components: {
-    Header
+    Header , MasterComponent
   }
 }
 </script>
diff --git a/src/components/Alert/NotificationPop.vue b/src/components/Alert/NotificationPop.vue
new file mode 100644
index 0000000..a24fb0a
--- /dev/null
+++ b/src/components/Alert/NotificationPop.vue
@@ -0,0 +1,41 @@
+<template>
+    <view-componet :name="name" :code="code">
+        <div slot="component">
+            <div class="flex max-w-md bg-white shadow-lg 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-12 h-12 object-cover rounded-full" src="https://images.unsplash.com/photo-1477118476589-bff2c5c4cfbb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
+                    <div class="mx-3">
+                        <h2 class="text-xl font-semibold text-gray-800">Hello john</h2>
+                        <p class="text-gray-600">Sara was replied on the <a href="#" class="text-blue-500">Upload Image</a>.</p>
+                    </div>
+                </div>
+            </div>
+        </div>   
+    </view-componet>
+</template>
+
+<script>
+import ViewComponet from "../../views/ViewComponet";
+
+export default {
+    components: {
+        ViewComponet
+    },
+    data() {
+        return {
+            name: 'Notification Pop',
+            code: `<div class="flex max-w-md bg-white shadow-lg rounded-lg overflow-hidden">
+                        <div class="w-2 bg-gray-800"></div>
+                        <div class="flex items-center px-2 py-3">
+                            <img class="w-12 h-12 object-cover rounded-full" src="https://images.unsplash.com/photo-1477118476589-bff2c5c4cfbb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
+                            <div class="mx-3">
+                                <h2 class="text-xl font-semibold text-gray-800">Hello john</h2>
+                                <p class="text-gray-600">Sara was replied on the <a href="#" class="text-blue-500">Upload Image</a>.</p>
+                            </div>
+                        </div>
+                    </div>`
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/Master.vue b/src/components/Master.vue
new file mode 100644
index 0000000..7703049
--- /dev/null
+++ b/src/components/Master.vue
@@ -0,0 +1,18 @@
+<template>
+    <div class="py-12">
+        <div class="container mx-auto px-6">
+            <h1 class="text-2xl text-gray-800 font-semibold mb-6">Alert</h1>
+            <notification-pop></notification-pop>
+        </div>
+    </div>
+</template>
+
+<script>
+import NotificationPop  from "./Alert/NotificationPop";
+
+export default {
+    components: {
+        NotificationPop
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/CodeSnippet.vue b/src/views/CodeSnippet.vue
new file mode 100644
index 0000000..0b98980
--- /dev/null
+++ b/src/views/CodeSnippet.vue
@@ -0,0 +1,11 @@
+<template>
+    <div>
+        {{ code }}
+    </div>
+</template>
+
+<script>
+export default {
+    props: ['code'],
+}
+</script>
\ No newline at end of file
diff --git a/src/views/Header.vue b/src/views/Header.vue
index 5d32c64..9c7e5c4 100644
--- a/src/views/Header.vue
+++ b/src/views/Header.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="bg-gray-900 border-t-4 border-blue-500">
+    <div class="bg-gray-900 border-t-8 border-blue-500">
         <div class="container mx-auto px-6">
             <div class="md:flex md:h-96 py-16 md:py-0">
                 <div class="flex items-center w-full w-1/2">
diff --git a/src/views/ViewComponet.vue b/src/views/ViewComponet.vue
new file mode 100644
index 0000000..a7d933b
--- /dev/null
+++ b/src/views/ViewComponet.vue
@@ -0,0 +1,53 @@
+<template>
+    <div class="bg-gray-300 border rounded-md overflow-hidden">
+        <div class="bg-white p-4 border-b">
+            <div class="flex justify-between items-center">
+                <div class="text-gray-700 font-medium text-lg">{{ name }}</div>
+               <div>
+                    <button @click="viewCode =! viewCode" class="mx-4 bg-gray-200 rounded-md p-1 text-gray-600 hover:text-gray-700 hover:bg-gray-400 focus:outline-none">
+                        <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M13.3252 3.05011L8.66765 20.4323L10.5995 20.9499L15.257 3.56775L13.3252 3.05011Z"/>
+                            <path d="M7.61222 18.3608L8.97161 16.9124L8.9711 16.8933L3.87681 12.1121L8.66724 7.00798L7.20892 5.63928L1.0498 12.2017L7.61222 18.3608Z"/>
+                            <path d="M16.3883 18.3608L15.0289 16.9124L15.0294 16.8933L20.1237 12.1121L15.3333 7.00798L16.7916 5.63928L22.9507 12.2017L16.3883 18.3608Z"/>
+                        </svg>
+                    </button>
+                    <button v-clipboard:copy="code" class="bg-gray-200 rounded-md p-1 text-gray-600 hover:text-gray-700 hover:bg-gray-400 focus:outline-none">
+                        <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M8 11C7.44772 11 7 11.4477 7 12C7 12.5523 7.44772 13 8 13H15.9595C16.5118 13 16.9595 12.5523 16.9595 12C16.9595 11.4477 16.5118 11 15.9595 11H8Z"/>
+                            <path d="M8.04053 15.0665C7.48824 15.0665 7.04053 15.5142 7.04053 16.0665C7.04053 16.6188 7.48824 17.0665 8.04053 17.0665H16C16.5523 17.0665 17 16.6188 17 16.0665C17 15.5142 16.5523 15.0665 16 15.0665H8.04053Z"/>
+                            <path fill-rule="evenodd" clip-rule="evenodd" d="M5 3C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3H5ZM7 5H5L5 19H19V5H17V6C17 7.65685 15.6569 9 14 9H10C8.34315 9 7 7.65685 7 6V5ZM9 5V6C9 6.55228 9.44772 7 10 7H14C14.5523 7 15 6.55228 15 6V5H9Z"/>
+                        </svg>
+                    </button>
+               </div>
+            </div>
+        </div>
+
+        <div class="flex justify-center items-center p-6">
+            <div class="w-full">
+                <slot name="component"></slot> 
+            </div>
+        </div>
+
+        <div v-if="viewCode" class="flex justify-center items-center p-6">
+            <code-snippet :code="code"></code-snippet>
+        </div>
+    </div>    
+</template>
+
+<script>
+import CodeSnippet from "./CodeSnippet";
+
+export default {
+    props: ['name' , 'code'],
+
+    components: {
+        CodeSnippet
+    },
+
+    data() {
+        return {
+            viewCode: false
+        }
+    }
+}
+</script>
\ No newline at end of file