From bb170627de5c19e99fe106d2961d8b1b4bd08e21 Mon Sep 17 00:00:00 2001
From: Mosab Ibrahim <miaababikir@gmail.com>
Date: Wed, 6 May 2020 13:11:53 +0200
Subject: [PATCH] Adding article component

---
 src/Models/data.js                            | 29 +++++++--------
 src/components/Master.vue                     |  2 ++
 .../UI/Cards/ArticleCardWithImage.vue         | 35 +++++++++++++++++++
 src/main.js                                   |  2 +-
 4 files changed, 53 insertions(+), 15 deletions(-)
 create mode 100644 src/components/UI/Cards/ArticleCardWithImage.vue

diff --git a/src/Models/data.js b/src/Models/data.js
index 9d33042..e284d19 100644
--- a/src/Models/data.js
+++ b/src/Models/data.js
@@ -1,22 +1,23 @@
 export default [
-    {
-        name: 'Alert',
-        components: [
-            { name: 'Notification Pop' },
-            { name: 'Alert' },
-
-        ],
-    },
     // {
-    //     name: 'Cards',
+    //     name: 'Alert',
     //     components: [
-    //         { name: 'Article Card' },
-    //         { name: 'Product' },
-    //         { name: 'Product Evaluation' },
-    //         { name: 'Testimonial' },
-    //         { name: 'User Details' },
+    //         { name: 'Notification Pop' },
+    //         { name: 'Alert' },
+    //
     //     ],
     // },
+    {
+        name: 'Cards',
+        components: [
+            { name: 'Article Card' },
+            { name: 'Article Card With Image' },
+            // { name: 'Product' },
+            // { name: 'Product Evaluation' },
+            // { name: 'Testimonial' },
+            // { name: 'User Details' },
+        ],
+    },
     // {
     //     name: 'Forms',
     //     components: [
diff --git a/src/components/Master.vue b/src/components/Master.vue
index c2bb372..7bf438a 100644
--- a/src/components/Master.vue
+++ b/src/components/Master.vue
@@ -45,6 +45,7 @@
     import UserDetails from "./UI/Cards/UserDetails";
     import Testimonial from "./UI/Cards/Testimonial";
     import ArticleCard from "./UI/Cards/ArticleCard";
+    import ArticleCardWithImage from "./UI/Cards/ArticleCardWithImage";
     import Product from "./UI/Cards/Product";
     import ProductEvaluation from "./UI/Cards/ProductWithEvaluation";
     import Login from "./UI/Forms/Login";
@@ -59,6 +60,7 @@
             UserDetails,
             Testimonial,
             ArticleCard,
+            ArticleCardWithImage,
             Product,
             ProductEvaluation,
             Login,
diff --git a/src/components/UI/Cards/ArticleCardWithImage.vue b/src/components/UI/Cards/ArticleCardWithImage.vue
new file mode 100644
index 0000000..8197c61
--- /dev/null
+++ b/src/components/UI/Cards/ArticleCardWithImage.vue
@@ -0,0 +1,35 @@
+<template>
+    <div :id="name | toId">
+        <div class="max-w-2xl mx-auto bg-white overflow-hidden shadow rounded-lg">
+            <div>
+                <img class="w-full object-cover h-64 shadow-lg" src="https://images.unsplash.com/photo-1550439062-609e1531270e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
+                     alt="Article">
+            </div>
+            <div class="p-6">
+                <div>
+                    <span class="text-blue-600 text-xs uppercase">Product</span>
+                    <h2 class="text-gray-800 font-semibold text-xl mt-2">I Built A Successful Blog In One Year</h2>
+                    <p class="text-sm text-gray-600 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Molestie parturient et sem ipsum volutpat vel. Natoque sem et aliquam mauris egestas quam volutpat viverra. In pretium nec senectus erat. Et malesuada lobortis.</p>
+                </div>
+                <div class="flex mt-4 items-center">
+                    <img class="h-12 h-12 rounded-full" src="https://images.unsplash.com/photo-1586287011575-a23134f797f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
+                         alt="Avatar">
+                    <div class="flex items-center mx-4">
+                        <a href="#" class="text-gray-700 font-semibold">Jone Doe</a>
+                        <span class="text-gray-600 mx-1 text-xs">21 SEP 2015</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'Article Card With Image'
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index ca5519a..0eb8261 100644
--- a/src/main.js
+++ b/src/main.js
@@ -7,7 +7,7 @@ Vue.config.productionTip = false;
 Vue.use(VueClipboard);
 
 Vue.filter('toId', (componentName) => {
-  return componentName.toLowerCase().replace(' ', '-')
+  return componentName.toLowerCase().replace(/ /g, '-')
 });
 
 new Vue({