Notifications (#52)

* Notifications

* fix docs

docs/.vitepress/config.js

@@ -42,12 +42,13 @@ export default {
           { text: 'Promotion', link: '/components/promotion' },
           { text: 'Markdown', link: '/components/markdown' },
           { text: 'Copy Code', link: '/components/copy-code' },
+          { text: 'Notifications', link: '/components/notifications' },
         ],
       },
     ],
     footer: {
       message:
-        'Released under the <a href="https://github.com/modrinth/omoprhia/blob/main/LICENSE">GPLv3 License</a>.',
+        'Released under the <a href="https://github.com/modrinth/omoprhia/blob/main/LICENSE">AGPLv3 License</a>.',
       copyright: 'Copyright © 2023-present <a href="https://modrinth.com">Rinth, Inc.</a>',
     },
   },

docs/components/notifications.md

@@ -0,0 +1,46 @@
+# Notifications
+
+<script setup>
+import { ref } from "vue";
+
+const notifsContainer = ref(null);
+
+function addNotification(type) {
+  console.log(notifsContainer);
+  notifsContainer.value.addNotification({
+    title: 'Test Notification',
+    text: 'This is a test! Random number: ' + Math.random(),
+    type,
+  });
+}
+</script>
+<DemoContainer>
+  <Notifications ref="notifsContainer" />
+  <Button color="primary" @click="addNotification('success')">Success</Button>
+  <Button color="highlight" @click="addNotification('warn')">Warning</Button>
+  <Button color="danger" @click="addNotification('error')">Error</Button>
+  <Button @click="addNotification('info')">Info</Button>
+</DemoContainer>
+
+```vue
+<script setup>
+import { ref } from "vue";
+
+const notifsContainer = ref(null);
+
+function addNotification(type) {
+  console.log(notifsContainer);
+  notifsContainer.value.addNotification({
+    title: 'Test Notification',
+    text: 'This is a test! Random number: ' + Math.random(),
+    type,
+  });
+}
+</script>
+
+<Notifications ref="notifsContainer" />
+<Button color="primary" @click="addNotification('success')">Success</Button>
+<Button color="highlight" @click="addNotification('warn')">Warning</Button>
+<Button color="danger" @click="addNotification('error')">Error</Button>
+<Button @click="addNotification('info')">Info</Button>
+```