From 3e58e977a1d0afc8bc4dba2f58ddc8c977c0a89f Mon Sep 17 00:00:00 2001
From: khatabwedaa <khatabwedaa@gmail.com>
Date: Sun, 12 Jul 2020 18:32:43 +0200
Subject: [PATCH] Add new card

---
 src/components/categories/Cards.vue           |  3 +
 src/components/ui/Cards/ArticleWithImage.vue  |  4 +-
 .../ui/Cards/ArticleWithSMIcons.vue           | 82 +++++++++++++------
 3 files changed, 62 insertions(+), 27 deletions(-)

diff --git a/src/components/categories/Cards.vue b/src/components/categories/Cards.vue
index f990698..6403979 100644
--- a/src/components/categories/Cards.vue
+++ b/src/components/categories/Cards.vue
@@ -3,6 +3,7 @@
         <h1 class="text-2xl text-gray-800 font-semibold capitalize mb-6">Cards</h1>
 
         <Article></Article>
+        <article-with-s-m-icons></article-with-s-m-icons>
         <article-with-image></article-with-image>
         <product></product>
         <product-with-evaluation></product-with-evaluation>
@@ -16,6 +17,7 @@
 <script>
 import Article from "../ui/Cards/Article";
 import ArticleWithImage from "../ui/Cards/ArticleWithImage";
+import ArticleWithSMIcons from "../ui/Cards/ArticleWithSMIcons";
 import Product from "../ui/Cards/Product";
 import ProductWithEvaluation from "../ui/Cards/ProductWithEvaluation";
 import SimpleProduct from "../ui/Cards/SimpleProduct";
@@ -27,6 +29,7 @@ export default {
     components: { 
         Article,
         ArticleWithImage,
+        ArticleWithSMIcons,
         Product,
         ProductWithEvaluation,
         SimpleProduct,
diff --git a/src/components/ui/Cards/ArticleWithImage.vue b/src/components/ui/Cards/ArticleWithImage.vue
index 6eb5809..e21ff6c 100644
--- a/src/components/ui/Cards/ArticleWithImage.vue
+++ b/src/components/ui/Cards/ArticleWithImage.vue
@@ -14,7 +14,7 @@
                     <div class="mt-4">
                         <div class="flex items-center">
                             <div class="flex items-center">
-                                <img class="h-10 h-10 object-cover rounded-full" src="https://images.unsplash.com/photo-1586287011575-a23134f797f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=48&q=60" alt="Avatar">
+                                <img class="h-10 object-cover rounded-full" src="https://images.unsplash.com/photo-1586287011575-a23134f797f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=48&q=60" alt="Avatar">
                                 <a href="#" class="mx-2 text-gray-700 font-semibold">Jone Doe</a>
                             </div>
                             <span class="mx-1 text-gray-600 text-xs">21 SEP 2015</span>
@@ -45,7 +45,7 @@
                 <div class="mt-4">
                     <div class="flex items-center">
                         <div class="flex items-center">
-                            <img class="h-10 h-10 object-cover rounded-full" src="https://images.unsplash.com/photo-1586287011575-a23134f797f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=48&q=60" alt="Avatar">
+                            <img class="h-10 object-cover rounded-full" src="https://images.unsplash.com/photo-1586287011575-a23134f797f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=48&q=60" alt="Avatar">
                             <a href="#" class="mx-2 text-gray-700 font-semibold">Jone Doe</a>
                         </div>
                         <span class="mx-1 text-gray-600 text-xs">21 SEP 2015</span>
diff --git a/src/components/ui/Cards/ArticleWithSMIcons.vue b/src/components/ui/Cards/ArticleWithSMIcons.vue
index b37237f..a7af8cd 100644
--- a/src/components/ui/Cards/ArticleWithSMIcons.vue
+++ b/src/components/ui/Cards/ArticleWithSMIcons.vue
@@ -1,23 +1,39 @@
 <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="max-w-sm mx-auto w-full px-4 py-3 bg-white shadow-md rounded-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>
+                    <span class="text-sm font-light text-gray-800">Courses and MOOCs</span>
+                    <span class="bg-indigo-200 text-indigo-800 px-3 py-1 rounded-full uppercase text-xs">psychology</span>
                 </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>
+                    <h1 class="text-lg font-semibold text-gray-800 mt-2">AP® Psychology - Course 5: Health and Behavior</h1>
+                    <p class="text-gray-600 text-sm mt-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio eligendi similique exercitationem optio libero vitae accusamus cupiditate laborum eos.</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 class="flex items-center mt-2 text-gray-700">
+                        <span>Visit on:</span>
+                        <a class="text-blue-600 cursor-pointer mx-2 hover:underline">edx.org</a>
+                        <span>or</span>
+                        <a class="text-blue-600 cursor-pointer mx-2 hover:underline">classcentral.com</a>
+                    </div>
+
+                    <div class="flex items-center justify-center mt-4">
+                        <a class="mr-2 text-gray-800 hover:text-gray-700 cursor-pointer">
+                            <svg class="h-5 w-5 fill-current" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'>
+                                <path d='M496,109.5a201.8,201.8,0,0,1-56.55,15.3,97.51,97.51,0,0,0,43.33-53.6,197.74,197.74,0,0,1-62.56,23.5A99.14,99.14,0,0,0,348.31,64c-54.42,0-98.46,43.4-98.46,96.9a93.21,93.21,0,0,0,2.54,22.1,280.7,280.7,0,0,1-203-101.3A95.69,95.69,0,0,0,36,130.4C36,164,53.53,193.7,80,211.1A97.5,97.5,0,0,1,35.22,199v1.2c0,47,34,86.1,79,95a100.76,100.76,0,0,1-25.94,3.4,94.38,94.38,0,0,1-18.51-1.8c12.51,38.5,48.92,66.5,92.05,67.3A199.59,199.59,0,0,1,39.5,405.6,203,203,0,0,1,16,404.2,278.68,278.68,0,0,0,166.74,448c181.36,0,280.44-147.7,280.44-275.8,0-4.2-.11-8.4-.31-12.5A198.48,198.48,0,0,0,496,109.5Z'/>
+                            </svg>
+                        </a>
+
+                        <a class="mr-2 text-gray-800 hover:text-gray-700 cursor-pointer">
+                            <svg class="h-5 w-5 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M14.8283 12L16.2426 13.4142L19.071 10.5858C20.6331 9.02365 20.6331 6.49099 19.071 4.9289C17.5089 3.3668 14.9762 3.3668 13.4141 4.9289L10.5857 7.75732L11.9999 9.17154L14.8283 6.34311C15.6094 5.56206 16.8757 5.56206 17.6568 6.34311C18.4378 7.12416 18.4378 8.39049 17.6568 9.17154L14.8283 12Z"/>
+                                <path d="M12 14.8285L13.4142 16.2427L10.5858 19.0711C9.02365 20.6332 6.49099 20.6332 4.9289 19.0711C3.3668 17.509 3.3668 14.9764 4.9289 13.4143L7.75732 10.5858L9.17154 12L6.34311 14.8285C5.56206 15.6095 5.56206 16.8758 6.34311 17.6569C7.12416 18.4379 8.39049 18.4379 9.17154 17.6569L12 14.8285Z"/>
+                                <path d="M14.8284 10.5857C15.2189 10.1952 15.2189 9.56199 14.8284 9.17147C14.4379 8.78094 13.8047 8.78094 13.4142 9.17147L9.17154 13.4141C8.78101 13.8046 8.78101 14.4378 9.17154 14.8283C9.56206 15.2188 10.1952 15.2188 10.5857 14.8283L14.8284 10.5857Z"/>
+                            </svg>
+                        </a>
                     </div>
                 </div>
             </div>
@@ -29,25 +45,41 @@
     export default {
         data() {
             return {
-                name: 'Article',
+                name: 'Article With SM icons',
                 code: `
-        <div class="max-w-2xl mx-auto px-8 py-4 bg-white rounded-lg shadow-md">
+        <div class="max-w-sm mx-auto w-full px-4 py-3 bg-white shadow-md rounded-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>
+                <span class="text-sm font-light text-gray-800">Courses and MOOCs</span>
+                <span class="bg-indigo-200 text-indigo-800 px-3 py-1 rounded-full uppercase text-xs">psychology</span>
             </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>
+                <h1 class="text-lg font-semibold text-gray-800 mt-2">AP® Psychology - Course 5: Health and Behavior</h1>
+                <p class="text-gray-600 text-sm mt-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio eligendi similique exercitationem optio libero vitae accusamus cupiditate laborum eos.</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 class="flex items-center mt-2 text-gray-700">
+                    <span>Visit on:</span>
+                    <a class="text-blue-600 cursor-pointer mx-2 hover:underline">edx.org</a>
+                    <span>or</span>
+                    <a class="text-blue-600 cursor-pointer mx-2 hover:underline">classcentral.com</a>
+                </div>
+
+                <div class="flex items-center justify-center mt-4">
+                    <a class="mr-2 text-gray-800 hover:text-gray-700 cursor-pointer">
+                        <svg class="h-5 w-5 fill-current" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'>
+                            <path d='M496,109.5a201.8,201.8,0,0,1-56.55,15.3,97.51,97.51,0,0,0,43.33-53.6,197.74,197.74,0,0,1-62.56,23.5A99.14,99.14,0,0,0,348.31,64c-54.42,0-98.46,43.4-98.46,96.9a93.21,93.21,0,0,0,2.54,22.1,280.7,280.7,0,0,1-203-101.3A95.69,95.69,0,0,0,36,130.4C36,164,53.53,193.7,80,211.1A97.5,97.5,0,0,1,35.22,199v1.2c0,47,34,86.1,79,95a100.76,100.76,0,0,1-25.94,3.4,94.38,94.38,0,0,1-18.51-1.8c12.51,38.5,48.92,66.5,92.05,67.3A199.59,199.59,0,0,1,39.5,405.6,203,203,0,0,1,16,404.2,278.68,278.68,0,0,0,166.74,448c181.36,0,280.44-147.7,280.44-275.8,0-4.2-.11-8.4-.31-12.5A198.48,198.48,0,0,0,496,109.5Z'/>
+                        </svg>
+                    </a>
+
+                    <a class="mr-2 text-gray-800 hover:text-gray-700 cursor-pointer">
+                        <svg class="h-5 w-5 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M14.8283 12L16.2426 13.4142L19.071 10.5858C20.6331 9.02365 20.6331 6.49099 19.071 4.9289C17.5089 3.3668 14.9762 3.3668 13.4141 4.9289L10.5857 7.75732L11.9999 9.17154L14.8283 6.34311C15.6094 5.56206 16.8757 5.56206 17.6568 6.34311C18.4378 7.12416 18.4378 8.39049 17.6568 9.17154L14.8283 12Z"/>
+                            <path d="M12 14.8285L13.4142 16.2427L10.5858 19.0711C9.02365 20.6332 6.49099 20.6332 4.9289 19.0711C3.3668 17.509 3.3668 14.9764 4.9289 13.4143L7.75732 10.5858L9.17154 12L6.34311 14.8285C5.56206 15.6095 5.56206 16.8758 6.34311 17.6569C7.12416 18.4379 8.39049 18.4379 9.17154 17.6569L12 14.8285Z"/>
+                            <path d="M14.8284 10.5857C15.2189 10.1952 15.2189 9.56199 14.8284 9.17147C14.4379 8.78094 13.8047 8.78094 13.4142 9.17147L9.17154 13.4141C8.78101 13.8046 8.78101 14.4378 9.17154 14.8283C9.56206 15.2188 10.1952 15.2188 10.5857 14.8283L14.8284 10.5857Z"/>
+                        </svg>
+                    </a>
                 </div>
             </div>
         </div>`