From c8bd5283bc0f94f0b8f20a0a687d10c8275333d8 Mon Sep 17 00:00:00 2001
From: OCDkirby <mangacreeperyt@gmail.com>
Date: Sun, 9 Jul 2023 12:34:04 -0500
Subject: [PATCH] Add components

---
 src/components/PitchItem.vue  |  26 ++++++
 src/components/TheWelcome.vue | 155 ++++++++++++++++++----------------
 src/components/TopBarMenu.vue |  91 ++++++++++++++++++++
 3 files changed, 198 insertions(+), 74 deletions(-)
 create mode 100644 src/components/PitchItem.vue
 create mode 100644 src/components/TopBarMenu.vue

diff --git a/src/components/PitchItem.vue b/src/components/PitchItem.vue
new file mode 100644
index 0000000..6ad427e
--- /dev/null
+++ b/src/components/PitchItem.vue
@@ -0,0 +1,26 @@
+<template>
+    <div class="wrapper">
+        <n-icon>
+            <slot name="icon" class="pitch-item-icon" />
+        </n-icon>
+        <slot class="body-text"></slot>
+    </div>
+</template>
+
+<style scoped>
+    .pitch-item-icon {
+        font-size: 50px;
+    }
+
+    .wrapper {
+        display: inline-block;
+        
+    }
+
+</style>
+
+<script>
+import './assets/text-styles.css'
+
+
+</script>
\ No newline at end of file
diff --git a/src/components/TheWelcome.vue b/src/components/TheWelcome.vue
index 0231ea7..33a810d 100644
--- a/src/components/TheWelcome.vue
+++ b/src/components/TheWelcome.vue
@@ -3,93 +3,100 @@
 </script>
 
 <template>
-  <FeatureListItem>
-    <template #icon>
-      <n-icon size="30">
-        <book />
-      </n-icon>
-    </template>
-    <template #heading>Documentation</template>
+  <div>
+    <FeatureListItem>
+      <template #icon>
+        <n-icon size="30">
+          <book />
+        </n-icon>
+      </template>
+      <template #heading>Documentation</template>
 
-    Vue’s
-    <a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
-    provides you with all information you need to get started.
-  </FeatureListItem>
+      Vue’s
+      <a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
+      provides you with all information you need to get started.
+    </FeatureListItem>
 
-  <FeatureListItem>
-    <template #icon>
-      <n-icon size="30">
-        <tool-box />
-      </n-icon>
-    </template>
-    <template #heading>Tooling</template>
+    <FeatureListItem>
+      <template #icon>
+        <n-icon size="30">
+          <tool-box />
+        </n-icon>
+      </template>
+      <template #heading>Tooling</template>
 
-    This project is served and bundled with
-    <a href="https://vitejs.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
-    recommended IDE setup is
-    <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a> +
-    <a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If
-    you need to test your components and web pages, check out
-    <a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a> and
-    <a href="https://on.cypress.io/component" target="_blank">Cypress Component Testing</a>.
+      This project is served and bundled with
+      <a href="https://vitejs.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
+      recommended IDE setup is
+      <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a> +
+      <a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If
+      you need to test your components and web pages, check out
+      <a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a> and
+      <a href="https://on.cypress.io/component" target="_blank">Cypress Component Testing</a>.
 
-    <br />
+      <br />
 
-    More instructions are available in <code>README.md</code>.
-  </FeatureListItem>
+      More instructions are available in <code>README.md</code>.
+    </FeatureListItem>
 
-  <FeatureListItem>
-    <template #icon>
-      <n-icon size="30">
-        <category />
-      </n-icon>
-    </template>
-    <template #heading>Ecosystem</template>
+    <FeatureListItem>
+      <template #icon>
+        <n-icon size="30">
+          <category />
+        </n-icon>
+      </template>
+      <template #heading>Ecosystem</template>
 
-    Get official tools and libraries for your project:
-    <a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
-    <a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
-    <a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
-    <a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
-    you need more resources, we suggest paying
-    <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
-    a visit.
-  </FeatureListItem>
+      Get official tools and libraries for your project:
+      <a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
+      <a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
+      <a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
+      <a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
+      you need more resources, we suggest paying
+      <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
+      a visit.
+    </FeatureListItem>
 
-  <FeatureListItem>
-    <template #icon>
-      <n-icon size="30">
-        <chat />
-      </n-icon>
-    </template>
-    <template #heading>Community</template>
+    <FeatureListItem>
+      <template #icon>
+        <n-icon size="30">
+          <chat />
+        </n-icon>
+      </template>
+      <template #heading>Community</template>
 
-    Got stuck? Ask your question on
-    <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>, our official
-    Discord server, or
-    <a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
-      >StackOverflow</a
-    >. You should also subscribe to
-    <a href="https://news.vuejs.org" target="_blank" rel="noopener">our mailing list</a> and follow
-    the official
-    <a href="https://twitter.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
-    twitter account for latest news in the Vue world.
-  </FeatureListItem>
+      Got stuck? Ask your question on
+      <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>, our official
+      Discord server, or
+      <a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
+        >StackOverflow</a
+      >. You should also subscribe to
+      <a href="https://news.vuejs.org" target="_blank" rel="noopener">our mailing list</a> and follow
+      the official
+      <a href="https://twitter.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
+      twitter account for latest news in the Vue world.
+    </FeatureListItem>
 
-  <FeatureListItem>
-    <template #icon>
-      <n-icon size="30">
-        <currency-dollar />
-      </n-icon>
-    </template>
-    <template #heading>Support Vue</template>
+    <FeatureListItem>
+      <template #icon>
+        <n-icon size="30">
+          <currency-dollar />
+        </n-icon>
+      </template>
+      <template #heading>Support Vue</template>
 
-    As an independent project, Vue relies on community backing for its sustainability. You can help
-    us by
-    <a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
-  </FeatureListItem>
+      As an independent project, Vue relies on community backing for its sustainability. You can help
+      us by
+      <a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
+    </FeatureListItem>
+  </div>
 </template>
 
+<style>
+
+
+</style>
+
 <script>
   import { Book, ToolBox, CurrencyDollar, Chat, Category } from "@vicons/carbon";
 </script>
\ No newline at end of file
diff --git a/src/components/TopBarMenu.vue b/src/components/TopBarMenu.vue
new file mode 100644
index 0000000..e63f717
--- /dev/null
+++ b/src/components/TopBarMenu.vue
@@ -0,0 +1,91 @@
+<template>
+  <div class="wrapper">
+    <darkModeButtonIcon/>
+    <n-button
+    quaternary
+    tag="a"
+    href="https://rpcsx.github.io/rpcsx-site/">
+      <img alt="Vue logo" class="logo" :src="getCoverURI()" width="32" height="32" />
+    </n-button>
+    <n-menu v-model:value="activeKey" mode="horizontal" :options="menuOptions" />
+    <n-button tertiary @click="toggleTheme()">
+      <template #icon>
+        <n-icon>
+          <Moon />
+        </n-icon>
+      </template>
+    </n-button>
+  </div>
+</template>
+
+<style scoped>
+.wrapper {
+  display: inline-block;
+  margin: 8px;
+}
+</style>
+  
+<script lang="ts">
+  import { NIcon } from 'naive-ui'
+  import {
+    Code as CodeIcon,
+    Book as BookIcon,
+    LogoDiscord as DiscordIcon,
+    Moon, Sun
+  } from '@vicons/carbon'
+  
+  function renderIcon (icon: Component) {
+    return () => h(NIcon, null, { default: () => h(icon) })
+  }
+  
+  const menuOptions: MenuOption[] = [
+    {
+      label: () =>
+        h(
+          'a',
+          {
+            href: 'https://github.com/RPCSX/rpcsx',
+            target: '_blank',
+            rel: 'noopenner noreferrer'
+          },
+          'development'
+        ),
+      key: 'development',
+      icon: renderIcon(CodeIcon)
+    },
+    {
+      label: 'wiki',
+      key: 'wiki',
+      icon: renderIcon(BookIcon),
+      children: [
+        {
+          // TODO: populate
+        }
+      ]
+    },
+    {
+      label: 'discuss',
+      key: 'discuss',
+      icon: renderIcon(DiscordIcon)
+    }
+  ]
+  
+  export default defineComponent({
+    methods: {
+      toggleTheme: function() {
+        this.darkModeButtonIcon = this.darkModeButtonIcon == Moon ? Sun : Moon;
+        this.$emit('toggle-darkmode');
+      },
+      getCoverURI() {
+        return this.$parent.theme === null ? './assets/logo-light.png' : './assets/logo-dark.png';
+      }
+    },
+    setup () {
+      return {
+        activeKey: ref<string | null>(null),
+        darkModeButtonIcon: ref(Moon),
+        menuOptions
+      }
+    }
+  })
+</script>
\ No newline at end of file