Merge pull request #10 from merakiui/components

Components

src/App.vue

@@ -16,4 +16,4 @@ export default {
 }
 </script>
 
-<style src="./assets/css/tailwind.css"></style>
+<style src="./assets/css/app.css"></style>

src/Models/data.js

@@ -7,21 +7,28 @@ export default [
 
         ],
     },
-    // {
-    //     name: 'Cards',
-    //     components: [
-    //         { name: 'Article Card' },
-    //         { name: 'Product' },
-    //         { name: 'Product Evaluation' },
-    //         { name: 'Testimonial' },
-    //         { name: 'User Details' },
-    //     ],
-    // },
-    // {
-    //     name: 'Forms',
-    //     components: [
-    //         {name: 'Login'},
-    //         {name: 'Subscribe'},
-    //     ],
-    // },
+    {
+        name: 'Heroes',
+        components: [
+            { name: 'Hero With Pattern' },
+        ],
+    },
+    {
+        name: 'Cards',
+        components: [
+            { name: 'Article Card' },
+            { name: 'Article Card With Image' },
+            { name: 'Product' },
+            { name: 'Product Evaluation' },
+            { name: 'Testimonial' },
+            { name: 'User Details' },
+        ],
+    },
+    {
+        name: 'Forms',
+        components: [
+            {name: 'Login'},
+            {name: 'Subscribe'},
+        ],
+    },
 ];

src/components/Master.vue

@@ -18,7 +18,7 @@
                         </button>
                         <span v-for="category in categories" :key="category.name">
                             <button @click="searchText = category.name"
-                                    class="ml-2 px-3 py-1 cursor-pointer hover:bg-gray-700 hover:text-gray-200 rounded text-sm focus:outline-none"
+                                    class="ml-2 mt-2 px-3 py-1 cursor-pointer hover:bg-gray-700 hover:text-gray-200 rounded text-sm focus:outline-none"
                                     :class="category.name === searchText? 'bg-gray-700 text-gray-200' : 'bg-gray-200 text-gray-700'">{{ category.name }}</button>
                         </span>
                     </div>
@@ -47,10 +47,14 @@
     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";
     import Subscribe from "./UI/Forms/Subscribe";
+    import HeroWithPattern from "./UI/Heroes/HeroWithPattern";
+
+
     import Component from "../Models/Component";
     import ViewComponent from "./Utilities/ViewComponent";
 
@@ -61,10 +65,12 @@
             UserDetails,
             Testimonial,
             ArticleCard,
+            ArticleCardWithImage,
             Product,
             ProductEvaluation,
             Login,
             Subscribe,
+            HeroWithPattern,
             ViewComponent
         },
         data() {

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>

src/components/UI/Heroes/HeroWithPattern.vue

@@ -0,0 +1,57 @@
+<template>
+    <div :id="name | toId">
+        <div class="w-ful pattern bg-gray-900">
+            <!--
+                on the {pattern} class but your pattern background
+                We are using https://www.heropatterns.com/ give it a try
+             -->
+            <div class="px-4 md:px-12 container mx-auto">
+                <nav class="py-4 flex justify-between items-center flex-col md:flex-row text-gray-100">
+                    <a href="#" class="text-2xl font-semibold">Brand</a>
+                    <div class="flex items-center -mx-2 mt-2 md:mt-0">
+                        <a href="#" class="px-4 py-1 border-2 border-white font-semibold rounded">Sign in</a>
+                        <a href="#" class="px-4 py-2 mx-2 font-semibold bg-black rounded">Sign up</a>
+                    </div>
+                </nav>
+                <div class="flex items-center flex-col md:flex-row mt-12 pb-12">
+                    <div class="md:w-1/2">
+                        <h1 class="text-4xl font-semibold text-gray-100">Brand</h1>
+                        <p class="text-2xl font-semibold text-gray-100">Hello <span class="text-indigo-400">Guest</span>
+                        </p>
+                        <p class="text-gray-100 mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
+                    </div>
+                    <div class="md:w-1/2 flex md:justify-end mt-8 md:mt-0">
+                        <div class="max-w-sm bg-white rounded-lg">
+                            <div class="p-5 text-center">
+                                <h2 class="text-2xl font-semibold text-gray-700 fo">Sign in</h2>
+                                <form action="#">
+                                    <div class="mt-4">
+                                        <input class="bg-gray-100 px-4 py-2 border border-gray-300 rounded w-full"
+                                               type="email" placeholder="Email address">
+                                        <input class="bg-gray-100 px-4 py-2 border border-gray-300 rounded w-full mt-3"
+                                               type="password" placeholder="Password">
+                                    </div>
+                                    <div class="mt-4 flex items-center justify-between">
+                                        <a href="#" class="text-gray-500 text-sm">Forget Password?</a>
+                                        <button class="px-4 py-2 font-semibold bg-black rounded text-gray-100">Login</button>
+                                    </div>
+                                </form>
+
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'Hero With Pattern'
+            }
+        }
+    }
+</script>

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({