beenull/merakiui
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

wip

Browse source
This commit is contained in:
khatabwedaa 2020-07-12 18:24:20 +02:00
parent 363c9c1267
commit 30456db397
3 changed files with 59 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
src/components/ui/Cards/ArticleWithSMIcons.vue Normal file
View file

@ -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>

2
src/components/ui/Headers/ECommerce.vue
View file

@ -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">

4
src/components/utilities/ViewComponent.vue
View file

@ -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