refactor: rebuild with `vuetify`

16 files changed, 250 insertions, 0 deletions

diff --git a/src/App.vue b/src/App.vue
new file mode 100644
index 0000000..61d0851
--- /dev/null
+++ b/src/App.vue
@@ -0,0 +1,7 @@
+<template>
+  <router-view />
+</template>
+
+<script lang="ts" setup>
+  //
+</script>
diff --git a/src/assets/logo.png b/src/assets/logo.png
new file mode 100644
index 0000000..a5f23ae
--- /dev/null
+++ b/src/assets/logo.png
diff --git a/src/assets/logo.svg b/src/assets/logo.svg
new file mode 100644
index 0000000..d57771c
--- /dev/null
+++ b/src/assets/logo.svg
@@ -0,0 +1,6 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M261.126 140.65L164.624 307.732L256.001 466L377.028 256.5L498.001 47H315.192L261.126 140.65Z" fill="#1697F6"/>
+<path d="M135.027 256.5L141.365 267.518L231.64 111.178L268.731 47H256H14L135.027 256.5Z" fill="#AEDDFF"/>
+<path d="M315.191 47C360.935 197.446 256 466 256 466L164.624 307.732L315.191 47Z" fill="#1867C0"/>
+<path d="M268.731 47C76.0026 47 141.366 267.518 141.366 267.518L268.731 47Z" fill="#7BC6FF"/>
+</svg>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
new file mode 100644
index 0000000..2927e27
--- /dev/null
+++ b/src/components/HelloWorld.vue
@@ -0,0 +1,75 @@
+<template>
+  <v-container class="fill-height">
+    <v-responsive class="align-center text-center fill-height">
+      <v-img height="300" src="@/assets/logo.svg" />
+
+      <div class="text-body-2 font-weight-light mb-n1">Welcome to</div>
+
+      <h1 class="text-h2 font-weight-bold">Vuetify</h1>
+
+      <div class="py-14" />
+
+      <v-row class="d-flex align-center justify-center">
+        <v-col cols="auto">
+          <v-btn
+            href="https://vuetifyjs.com/components/all/"
+            min-width="164"
+            rel="noopener noreferrer"
+            target="_blank"
+            variant="text"
+          >
+            <v-icon
+              icon="mdi-view-dashboard"
+              size="large"
+              start
+            />
+
+            Components
+          </v-btn>
+        </v-col>
+
+        <v-col cols="auto">
+          <v-btn
+            color="primary"
+            href="https://vuetifyjs.com/introduction/why-vuetify/#feature-guides"
+            min-width="228"
+            rel="noopener noreferrer"
+            size="x-large"
+            target="_blank"
+            variant="flat"
+          >
+            <v-icon
+              icon="mdi-speedometer"
+              size="large"
+              start
+            />
+
+            Get Started
+          </v-btn>
+        </v-col>
+
+        <v-col cols="auto">
+          <v-btn
+            href="https://community.vuetifyjs.com/"
+            min-width="164"
+            rel="noopener noreferrer"
+            target="_blank"
+            variant="text"
+          >
+            <v-icon
+              icon="mdi-account-group"
+              size="large"
+              start
+            />
+
+            Community
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-responsive>
+  </v-container>
+</template>
+
+<script lang="ts" setup>
+  //
+</script>
diff --git a/src/layouts/default/AppBar.vue b/src/layouts/default/AppBar.vue
new file mode 100644
index 0000000..4d0660e
--- /dev/null
+++ b/src/layouts/default/AppBar.vue
@@ -0,0 +1,13 @@
+<template>
+  <v-app-bar flat>
+    <v-app-bar-title>
+      <v-icon icon="mdi-circle-slice-6" />
+
+      Essentials Preset
+    </v-app-bar-title>
+  </v-app-bar>
+</template>
+
+<script lang="ts" setup>
+  //
+</script>
diff --git a/src/layouts/default/Default.vue b/src/layouts/default/Default.vue
new file mode 100644
index 0000000..e642631
--- /dev/null
+++ b/src/layouts/default/Default.vue
@@ -0,0 +1,12 @@
+<template>
+  <v-app>
+    <default-bar />
+
+    <default-view />
+  </v-app>
+</template>
+
+<script lang="ts" setup>
+  import DefaultBar from './AppBar.vue'
+  import DefaultView from './View.vue'
+</script>
diff --git a/src/layouts/default/View.vue b/src/layouts/default/View.vue
new file mode 100644
index 0000000..8e9e414
--- /dev/null
+++ b/src/layouts/default/View.vue
@@ -0,0 +1,9 @@
+<template>
+  <v-main>
+    <router-view />
+  </v-main>
+</template>
+
+<script lang="ts" setup>
+  //
+</script>
diff --git a/src/main.ts b/src/main.ts
new file mode 100644
index 0000000..f11674d
--- /dev/null
+++ b/src/main.ts
@@ -0,0 +1,20 @@
+/**
+ * main.ts
+ *
+ * Bootstraps Vuetify and other plugins then mounts the App`
+ */
+
+// Components
+import App from './App.vue'
+
+// Composables
+import { createApp } from 'vue'
+
+// Plugins
+import { registerPlugins } from '@/plugins'
+
+const app = createApp(App)
+
+registerPlugins(app)
+
+app.mount('#app')
diff --git a/src/plugins/index.ts b/src/plugins/index.ts
new file mode 100644
index 0000000..baa02f3
--- /dev/null
+++ b/src/plugins/index.ts
@@ -0,0 +1,20 @@
+/**
+ * plugins/index.ts
+ *
+ * Automatically included in `./src/main.ts`
+ */
+
+// Plugins
+import vuetify from './vuetify'
+import pinia from '../store'
+import router from '../router'
+
+// Types
+import type { App } from 'vue'
+
+export function registerPlugins (app: App) {
+  app
+    .use(vuetify)
+    .use(router)
+    .use(pinia)
+}
diff --git a/src/plugins/vuetify.ts b/src/plugins/vuetify.ts
new file mode 100644
index 0000000..c276519
--- /dev/null
+++ b/src/plugins/vuetify.ts
@@ -0,0 +1,26 @@
+/**
+ * plugins/vuetify.ts
+ *
+ * Framework documentation: https://vuetifyjs.com`
+ */
+
+// Styles
+import '@mdi/font/css/materialdesignicons.css'
+import 'vuetify/styles'
+
+// Composables
+import { createVuetify } from 'vuetify'
+
+// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
+export default createVuetify({
+  theme: {
+    themes: {
+      light: {
+        colors: {
+          primary: '#1867C0',
+          secondary: '#5CBBF6',
+        },
+      },
+    },
+  },
+})
diff --git a/src/router/index.ts b/src/router/index.ts
new file mode 100644
index 0000000..65353da
--- /dev/null
+++ b/src/router/index.ts
@@ -0,0 +1,26 @@
+// Composables
+import { createRouter, createWebHistory } from 'vue-router'
+
+const routes = [
+  {
+    path: '/',
+    component: () => import('@/layouts/default/Default.vue'),
+    children: [
+      {
+        path: '',
+        name: 'Home',
+        // route level code-splitting
+        // this generates a separate chunk (about.[hash].js) for this route
+        // which is lazy-loaded when the route is visited.
+        component: () => import(/* webpackChunkName: "home" */ '@/views/Home.vue'),
+      },
+    ],
+  },
+]
+
+const router = createRouter({
+  history: createWebHistory(process.env.BASE_URL),
+  routes,
+})
+
+export default router
diff --git a/src/store/app.ts b/src/store/app.ts
new file mode 100644
index 0000000..7429543
--- /dev/null
+++ b/src/store/app.ts
@@ -0,0 +1,8 @@
+// Utilities
+import { defineStore } from 'pinia'
+
+export const useAppStore = defineStore('app', {
+  state: () => ({
+    //
+  }),
+})
diff --git a/src/store/index.ts b/src/store/index.ts
new file mode 100644
index 0000000..1536252
--- /dev/null
+++ b/src/store/index.ts
@@ -0,0 +1,4 @@
+// Utilities
+import { createPinia } from 'pinia'
+
+export default createPinia()
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
new file mode 100644
index 0000000..3e36a27
--- /dev/null
+++ b/src/styles/settings.scss
@@ -0,0 +1,10 @@
+/**
+ * src/styles/settings.scss
+ *
+ * Configures SASS variables and Vuetify overwrites
+ */
+
+// https://vuetifyjs.com/features/sass-variables/`
+// @use 'vuetify/settings' with (
+//   $color-pack: false
+// );
diff --git a/src/views/Home.vue b/src/views/Home.vue
new file mode 100644
index 0000000..7646ab7
--- /dev/null
+++ b/src/views/Home.vue
@@ -0,0 +1,7 @@
+<template>
+  <HelloWorld />
+</template>
+
+<script lang="ts" setup>
+  import HelloWorld from '@/components/HelloWorld.vue'
+</script>
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000..323c78a
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}