wip

src/components/ui/Cards/ArticleWithSMIcons.vue

@@ -0,0 +1,57 @@
+<template>
+    <view-component :name="name" :code="code">
+        <div class="px-3 py-6" slot="component">
+            <div class="max-w-2xl mx-auto px-8 py-4 bg-white rounded-lg shadow-md">
+                <div class="flex justify-between items-center">
+                    <span class="font-light text-gray-600 text-sm">Mar 10, 2019</span>
+                    <a class="px-3 py-1 bg-gray-600 text-gray-100 text-sm font-bold rounded hover:bg-gray-500">Design</a>
+                </div>
+
+                <div class="mt-2">
+                    <a href="#" class="text-2xl text-gray-700 font-bold hover:text-gray-600 hover:underline">Accessibility tools for designers and developers</a>
+                    <p class="mt-2 text-gray-600">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora expedita dicta totam aspernatur doloremque. Excepturi iste iusto eos enim reprehenderit nisi, accusamus delectus nihil quis facere in modi ratione libero!</p>
+                </div>
+                
+                <div class="flex justify-between items-center mt-4">
+                    <a href="#" class="text-blue-600 hover:underline">Read more</a>
+
+                    <div class="flex items-center">
+                        <img class="mx-4 w-10 h-10 object-cover rounded-full hidden sm:block" src="https://images.unsplash.com/photo-1502980426475-b83966705988?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=40&q=80" alt="avatar">
+                        <a class="text-gray-700 font-bold cursor-pointer">Khatab wedaa</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'Article',
+                code: `
+        <div class="max-w-2xl mx-auto px-8 py-4 bg-white rounded-lg shadow-md">
+            <div class="flex justify-between items-center">
+                <span class="font-light text-gray-600 text-sm">Mar 10, 2019</span>
+                <a class="px-3 py-1 bg-gray-600 text-gray-100 text-sm font-bold rounded hover:bg-gray-500">Design</a>
+            </div>
+
+            <div class="mt-2">
+                <a href="#" class="text-2xl text-gray-700 font-bold hover:text-gray-600 hover:underline">Accessibility tools for designers and developers</a>
+                <p class="mt-2 text-gray-600">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora expedita dicta totam aspernatur doloremque. Excepturi iste iusto eos enim reprehenderit nisi, accusamus delectus nihil quis facere in modi ratione libero!</p>
+            </div>
+            
+            <div class="flex justify-between items-center mt-4">
+                <a href="#" class="text-blue-600 hover:underline">Read more</a>
+
+                <div class="flex items-center">
+                    <img class="mx-4 w-10 h-10 object-cover rounded-full hidden sm:block" src="https://images.unsplash.com/photo-1502980426475-b83966705988?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=40&q=80" alt="avatar">
+                    <a class="text-gray-700 font-bold cursor-pointer">Khatab wedaa</a>
+                </div>
+            </div>
+        </div>`
+            }
+        }
+    }
+</script>

src/components/ui/Headers/ECommerce.vue

@@ -1,5 +1,5 @@
 <template>
-    <view-component :mark="true" :name="name" :code="code">
+    <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
             <header class="bg-white">
                 <nav class="shadow">

src/components/utilities/ViewComponent.vue

@@ -4,8 +4,6 @@
             <div class="flex flex-col md:flex-row justify-between items-center">
                 <div class="flex items-center">
                     <h3 class="text-gray-700 font-medium capitalize md:text-lg">{{ name }}</h3>
-
-                    <span v-if="mark" class="mx-4 px-2 text-xs rounded-full bg-green-300 text-green-600">New</span>
                 </div>
 
                 <div class="mt-4 md:mt-0">
@@ -60,7 +58,7 @@
 import CodeSnippet from "./CodeSnippet";
 
 export default {
-    props: ['name' , 'code' , 'mark'],
+    props: ['name' , 'code'],
 
     components: {
         CodeSnippet