From 5d162cb8e0f5d594905a56a9b16f4f68df5f6631 Mon Sep 17 00:00:00 2001
From: Leonardo Bishop <me@leonardobishop.com>
Date: Tue, 21 Jan 2025 01:21:09 +0000
Subject: Improve frontend

---
 components/Panel.vue | 29 ++++++++++++++++++++++++++---
 1 file changed, 26 insertions(+), 3 deletions(-)

(limited to 'components/Panel.vue')

diff --git a/components/Panel.vue b/components/Panel.vue
index 007d2b6..8e72414 100644
--- a/components/Panel.vue
+++ b/components/Panel.vue
@@ -1,15 +1,38 @@
+<script setup lang="ts">
+import { defineProps, type PropType } from 'vue';
+
+defineProps({
+  kind: {
+    type: String as PropType<"normal" | "error" | "success">,
+    required: false,
+    default: 'normal',
+  },
+});
+</script>
 <template>
-  <div class="card">
+  <div class="card" :class="kind">
     <slot />
   </div>
 </template>
 
 <style>
 .card {
-  background-color: white;
   padding: 1rem; 
   border-radius: 0.5rem; 
-  /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06); */
+}
+
+.normal {
+  background-color: white;
   border: 0.1rem solid var(--color-border);
 }
+
+.error {
+  background-color: var(--color-error);
+  border: 0.1rem solid var(--color-border-error);
+}
+
+.success {
+  background-color: var(--color-success);
+  border: 0.1rem solid var(--color-border-success);
+}
 </style>
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2