coderplex-org · pbteja1998 · Sep 7, 2019 · Sep 1, 2019 · Sep 7, 2019 · Sep 7, 2019
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -11,6 +11,7 @@ module.exports = {
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'import/extensions': 'off',
+    'import/no-cycle': 'off'
   },
   parserOptions: {
     parser: 'babel-eslint',

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,11 +9,13 @@
   },
   "dependencies": {
     "@mdi/font": "^3.6.95",
+    "axios": "^0.19.0",
     "codemirror": "^5.48.4",
     "core-js": "^2.6.5",
     "roboto-fontface": "*",
     "vue": "^2.6.10",
     "vue-codemirror": "^4.0.6",
+    "vue-fragment": "^1.5.1",
     "vue-router": "^3.0.3",
     "vuetify": "^2.0.0",
     "vuex": "^3.0.1",

diff --git a/src/App.vue b/src/App.vue
@@ -1,26 +1,17 @@
 <template>
 <Layout>
-  <template v-slot:navigation>
-    <v-btn
-      text
-      href="https://github.com/vuetifyjs/vuetify/releases/latest"
-      target="_blank"
-    >
-      <span class="mr-2">Latest Release</span>
-    </v-btn>
-  </template>
-  <HelloWorld />
+  <v-container>
+    <router-view></router-view>
+  </v-container>
 </Layout>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld';
 import Layout from './components/layout';
 
 export default {
   name: 'App',
   components: {
-    HelloWorld,
     Layout,
   },
   data: () => ({

diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/assets/logo.svg b/src/assets/logo.svg
diff --git a/src/components/Card.vue b/src/components/Card.vue
@@ -0,0 +1,27 @@
+<template>
+  <v-card
+    :loading="false"
+    class="mx-auto my-12"
+  >
+    <v-card-title>
+      <slot name="title"></slot>
+    </v-card-title>
+    <v-card-text>
+      <slot></slot>
+    </v-card-text>
+    <v-divider class="mx-4"></v-divider>
+    <v-card-actions>
+      <slot name="actions"></slot>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script>
+export default {
+  name: 'Card',
+};
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/FormAlerts.vue b/src/components/FormAlerts.vue
@@ -0,0 +1,27 @@
+<template>
+  <fragment>
+    <v-alert
+      v-for="({type, message}, index) in alerts"
+      dismissible
+      :type="type"
+      class="mb-4"
+      :value="!!message"
+      :key="index"
+    >
+      {{ message }}
+    </v-alert>
+  </fragment>
+</template>
+
+<script>
+export default {
+  name: 'FormAlerts',
+  props: {
+    alerts: Array,
+  },
+};
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/FormButtons.vue b/src/components/FormButtons.vue
@@ -0,0 +1,27 @@
+<template>
+  <fragment>
+    <v-btn
+      v-for="({ icon, value, click }, index) in buttons"
+      color="deep-purple accent-4"
+      text
+      @click="click"
+      :key="index"
+    >
+      <v-icon left>{{ icon }}</v-icon>
+      {{ value }}
+    </v-btn>
+  </fragment>
+</template>
+
+<script>
+export default {
+  name: 'FormButtons',
+  props: {
+    buttons: Array,
+  },
+};
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/FormFields.vue b/src/components/FormFields.vue
@@ -0,0 +1,28 @@
+<template>
+  <fragment>
+    <v-text-field
+      v-for="({ label, placeholder, type, icon, value, input }, index) in fields"
+      :label="label"
+      :placeholder="placeholder"
+      :type="type"
+      :prepend-icon="icon"
+      :value="value"
+      @input="input"
+      :key="index"
+    >
+    </v-text-field>
+  </fragment>
+</template>
+
+<script>
+export default {
+  name: 'FormFields',
+  props: {
+    fields: Array,
+  },
+};
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
@@ -15,128 +15,19 @@
 
       <v-flex mb-4>
         <h1 class="display-2 font-weight-bold mb-3">
-          Welcome to Vuetify
+          Welcome to OpenRank
         </h1>
         <p class="subheading font-weight-regular">
-          For help and collaboration with other Vuetify developers,
+          For help and collaboration with other OpenRank developers,
           <br>please join our online
-          <a href="https://community.vuetifyjs.com" target="_blank">Discord Community</a>
+          <a href="https://discord.gg/qEA8vxd" target="_blank">Discord Community</a>
         </p>
       </v-flex>
-
-      <v-flex
-        mb-5
-        xs12
-      >
-        <h2 class="headline font-weight-bold mb-3">What's next?</h2>
-
-        <v-layout justify-center>
-          <a
-            v-for="(next, i) in whatsNext"
-            :key="i"
-            :href="next.href"
-            class="subheading mx-3"
-            target="_blank"
-          >
-            {{ next.text }}
-          </a>
-        </v-layout>
-      </v-flex>
-
-      <v-flex
-        xs12
-        mb-5
-      >
-        <h2 class="headline font-weight-bold mb-3">Important Links</h2>
-
-        <v-layout justify-center>
-          <a
-            v-for="(link, i) in importantLinks"
-            :key="i"
-            :href="link.href"
-            class="subheading mx-3"
-            target="_blank"
-          >
-            {{ link.text }}
-          </a>
-        </v-layout>
-      </v-flex>
-
-      <v-flex
-        xs12
-        mb-5
-      >
-        <h2 class="headline font-weight-bold mb-3">Ecosystem</h2>
-
-        <v-layout justify-center>
-          <a
-            v-for="(eco, i) in ecosystem"
-            :key="i"
-            :href="eco.href"
-            class="subheading mx-3"
-            target="_blank"
-          >
-            {{ eco.text }}
-          </a>
-        </v-layout>
-      </v-flex>
     </v-layout>
   </v-container>
 </template>
 
 <script>
 export default {
-  data: () => ({
-    ecosystem: [
-      {
-        text: 'vuetify-loader',
-        href: 'https://github.com/vuetifyjs/vuetify-loader',
-      },
-      {
-        text: 'github',
-        href: 'https://github.com/vuetifyjs/vuetify',
-      },
-      {
-        text: 'awesome-vuetify',
-        href: 'https://github.com/vuetifyjs/awesome-vuetify',
-      },
-    ],
-    importantLinks: [
-      {
-        text: 'Documentation',
-        href: 'https://vuetifyjs.com',
-      },
-      {
-        text: 'Chat',
-        href: 'https://community.vuetifyjs.com',
-      },
-      {
-        text: 'Made with Vuetify',
-        href: 'https://madewithvuejs.com/vuetify',
-      },
-      {
-        text: 'Twitter',
-        href: 'https://twitter.com/vuetifyjs',
-      },
-      {
-        text: 'Articles',
-        href: 'https://medium.com/vuetify',
-      },
-    ],
-    whatsNext: [
-      {
-        text: 'Explore components',
-        href: 'https://vuetifyjs.com/components/api-explorer',
-      },
-      {
-        text: 'Select a layout',
-        href: 'https://vuetifyjs.com/layout/pre-defined',
-      },
-      {
-        text: 'Frequently Asked Questions',
-        href: 'https://vuetifyjs.com/getting-started/frequently-asked-questions',
-      },
-    ],
-  }),
 };
 </script>
diff --git a/src/components/index.js b/src/components/index.js
@@ -0,0 +1,5 @@
+export { default as HelloWorld } from './HelloWorld';
+export { default as Card } from './Card';
+export { default as FormAlerts } from './FormAlerts';
+export { default as FormFields } from './FormFields';
+export { default as FormButtons } from './FormButtons';