Mirroring/merakiui
1
0
Fork 0
mirror of https://github.com/bakateam/merakiui.git synced 2025-12-08 22:53:24 +00:00
Code Issues Projects Releases Wiki Activity

Redesigning some things at home page

Browse Source
This commit is contained in:
Mosab Ibrahim
2020-05-05 00:34:11 +02:00
parent 5d101c386e
commit 95f6dd06a8
12 changed files with 60 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="font-inter" id="app">
<div class="bg-gray-100 font-inter" id="app">
<Header></Header>
<master-component></master-component>
</div>

0
src/views/CodeSnippet.vue → src/components/CodeSnippet.vue
View File

83
src/components/Master.vue
View File

@@ -1,28 +1,43 @@
<template>
<div class="flex h-screen container mx-auto px-6">
<div class="w-64 border-r py-8">
List
<div class="min-h-screen container mx-auto px-6">
<div class="container mx-auto px-6 py-16 text-center">
<h1 class="text-2xl sm:text-3xl text-gray-800">Discover new components. Build amazing things 🔥</h1>
<input class="w-11/12 mt-6 px-6 py-4 bg-gray-200 border border-gray-300 text-gray-800 rounded-lg focus:outline-none focus:bg-white placeholder-gray-700" type="text" placeholder="search..">
</div>
<div class="flex-1 py-12 overflow-y-auto">
<div class="container mx-auto px-6">
<div class="py-8">
<h1 class="text-2xl text-gray-800 font-semibold mb-6">Alert</h1>
<notification-pop></notification-pop>
</div>
<div class="py-8">
<h1 class="text-2xl text-gray-800 font-semibold mb-6">Cards</h1>
<user-details></user-details>
<testimonial class="mt-10"></testimonial>
<artical class="mt-10"></artical>
<product class="mt-10"></product>
<product-evaluation class="mt-10"></product-evaluation>
</div>
<div class="flex">
<div class="hidden sm:w-64">
<h2 class="text-gray-800 text-2xl font-semibold">Categories</h2>
<ul class="flex flex-col mt-4">
<li class="text-gray-600 hover:text-gray-800 cursor-pointer text-lg">All Components</li>
<li class="text-gray-600 hover:text-gray-800 cursor-pointer text-lg">Alerts</li>
<li class="text-gray-600 hover:text-gray-800 cursor-pointer text-lg">Cards</li>
<li class="text-gray-600 hover:text-gray-800 cursor-pointer text-lg">Forms</li>
<li class="text-gray-600 hover:text-gray-800 cursor-pointer text-lg">Layouts</li>
</ul>
</div>
<div class="w-full sm:flex-1">
<div class="container mx-auto px-6">
<div class="pb-8">
<h1 class="text-2xl text-gray-800 font-semibold mb-6">Alert</h1>
<notification-pop></notification-pop>
</div>
<div class="py-8">
<h1 class="text-2xl text-gray-800 font-semibold mb-6">Forms</h1>
<login></login>
<subscribe class="my-10"></subscribe>
<div class="py-8">
<h1 class="text-2xl text-gray-800 font-semibold mb-6">Cards</h1>
<user-details></user-details>
<testimonial class="mt-10"></testimonial>
<artical class="mt-10"></artical>
<product class="mt-10"></product>
<product-evaluation class="mt-10"></product-evaluation>
</div>
<div class="py-8">
<h1 class="text-2xl text-gray-800 font-semibold mb-6">Forms</h1>
<login></login>
<subscribe class="my-10"></subscribe>
</div>
</div>
</div>
</div>
@@ -30,22 +45,22 @@
</template>
<script>
import NotificationPop from "./Alert/NotificationPop";
import UserDetails from "./Cards/UserDetails";
import Testimonial from "./Cards/Testimonial";
import Artical from "./Cards/Artical";
import Product from "./Cards/Product";
import ProductEvaluation from "./Cards/ProductWithEvaluation";
import Login from "./Forms/Login";
import Subscribe from "./Forms/Subscribe";
import NotificationPop from "./UI/Alert/NotificationPop";
import UserDetails from "./UI/Cards/UserDetails";
import Testimonial from "./UI/Cards/Testimonial";
import Artical from "./UI/Cards/Artical";
import Product from "./UI/Cards/Product";
import ProductEvaluation from "./UI/Cards/ProductWithEvaluation";
import Login from "./UI/Forms/Login";
import Subscribe from "./UI/Forms/Subscribe";
export default {
components: {
NotificationPop ,
UserDetails ,
Testimonial ,
Artical ,
Product ,
NotificationPop ,
UserDetails ,
Testimonial ,
Artical ,
Product ,
ProductEvaluation,
Login,
Subscribe

2
src/components/Alert/NotificationPop.vue → src/components/UI/Alert/NotificationPop.vue
View File

@@ -16,7 +16,7 @@
</template>
<script>
import ViewComponent from "../../views/ViewComponent";
import ViewComponent from "../../../views/ViewComponent";
export default {
components: {

2
src/components/Cards/Artical.vue → src/components/UI/Cards/Artical.vue
View File

@@ -25,7 +25,7 @@
</template>
<script>
import ViewComponent from "../../views/ViewComponent";
import ViewComponent from "../../../views/ViewComponent";
export default {
components: {

2
src/components/Cards/Product.vue → src/components/UI/Cards/Product.vue
View File

@@ -19,7 +19,7 @@
</template>
<script>
import ViewComponent from "../../views/ViewComponent";
import ViewComponent from "../../../views/ViewComponent";
export default {
components: {

2
src/components/Cards/ProductWithEvaluation.vue → src/components/UI/Cards/ProductWithEvaluation.vue
View File

@@ -35,7 +35,7 @@
</template>
<script>
import ViewComponent from "../../views/ViewComponent";
import ViewComponent from "../../../views/ViewComponent";
export default {
components: {

2
src/components/Cards/Testimonial.vue → src/components/UI/Cards/Testimonial.vue
View File

@@ -18,7 +18,7 @@
</template>
<script>
import ViewComponent from "../../views/ViewComponent";
import ViewComponent from "../../../views/ViewComponent";
export default {
components: {

2
src/components/Cards/UserDetails.vue → src/components/UI/Cards/UserDetails.vue
View File

@@ -37,7 +37,7 @@
</template>
<script>
import ViewComponent from "../../views/ViewComponent";
import ViewComponent from "../../../views/ViewComponent";
export default {
components: {

2
src/components/Forms/Login.vue → src/components/UI/Forms/Login.vue
View File

@@ -48,7 +48,7 @@
</template>
<script>
import ViewComponent from "../../views/ViewComponent";
import ViewComponent from "../../../views/ViewComponent";
export default {
components: {

2
src/components/Forms/Subscribe.vue → src/components/UI/Forms/Subscribe.vue
View File

@@ -22,7 +22,7 @@
</template>
<script>
import ViewComponent from "../../views/ViewComponent";
import ViewComponent from "../../../views/ViewComponent";
export default {
components: {

4
src/views/ViewComponent.vue
View File

@@ -2,7 +2,7 @@
<div class="bg-gray-300 border rounded-md overflow-hidden">
<div class="bg-white p-4 border-b">
<div class="flex justify-between items-center">
<div class="text-gray-700 font-medium text-lg">{{ name }}</div>
<div class="text-gray-700 font-medium text-sm sm:text-lg">{{ name }}</div>
<div>
<button @click="viewCode =! viewCode" class="mx-4 bg-gray-200 rounded-md p-1 text-gray-600 hover:text-gray-700 hover:bg-gray-400 focus:outline-none">
<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -33,7 +33,7 @@
</template>
<script>
import CodeSnippet from "./CodeSnippet";
import CodeSnippet from "../components/CodeSnippet";
export default {
props: ['name' , 'code'],