@dcrackel/hematournamentui 1.0.7 → 1.0.8

package/src/stories/Templates/Menu/Admin/AdminLeftMenu.stories.js

@@ -0,0 +1,28 @@
+import AdminLeftMenu from './AdminLeftMenu.vue';
+
+export default {
+    title: 'Templates/Admin/AdminLeftMenu',
+    component: AdminLeftMenu,
+    tags: ['autodocs']
+};
+const Template = args => ({
+    components: { AdminLeftMenu },
+    setup() {
+        return { args };
+    },
+    methods: {
+        onMenuClick(index) {
+            alert(`Button ${index + 1} clicked!`);
+        }
+    }
+});
+
+export const Default = {
+    args: {
+        items: [
+            { text: 'Home', link: '/' },
+            { text: 'Category', link: '/category' },
+            { text: 'Product', link: '' }
+        ]
+    }
+};

package/src/stories/Templates/Menu/Admin/AdminLeftMenu.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="bg-secondary w-64 h-screen flex flex-col justify-between">
+    <section class="h-28 border-b border-neutral">
+      <div class="flex flex-col justify-center h-28">
+        <div class="ml-8">
+          <img class="w-32" src="https://ferrotas.com/assets/ferrotas-white-small-720502db.png"  alt="logo"/>
+        </div>
+      </div>
+    </section>
+    <section class="flex flex-col p-2 h-full">
+      <BaseButton
+          v-for="button in buttons"
+          :label="button.label"
+          iconClass="fa-solid fa-trophy text-white"
+          type="admin"
+          hover="admin"
+          @click="handleButtonClick(button)"
+      />
+    </section>
+    <section class="flex flex-col justify-end p-2 flex-grow">
+      <div class="border-t border-neutral pt-2">
+        <BaseButton
+            iconClass="fa-solid fa-circle-user text-textSecondary"
+            label="Account"
+            type="adminSecondary"
+            @click="handleButtonClick(button)"
+        />
+        <BaseButton
+            iconClass="fa-solid fa-right-to-bracket fa-rotate-180 text-textSecondary"
+            label="Log Out"
+            type="adminSecondary"
+            @click="handleButtonClick(button)"
+        />
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+import BaseButton from "../../../Molecules/Button/BaseButton.vue";
+
+export default {
+  name: 'AdminLeftMenu',
+  components: { BaseButton },
+  props: {
+    buttons: {
+      type: Array,
+      default: () => []
+    }
+  },
+  methods: {
+    handleButtonClick(button) {
+      this.$emit('button-click', button);
+    }
+  }
+};
+</script>

package/tailwind/output.css

@@ -436,6 +436,20 @@ video {
   display: none;
 }
 
+h1{
+  font-size: 1.875rem;
+}
+
+h2{
+  font-size: 1.5rem;
+  line-height: 1.5;
+}
+
+h3{
+  font-size: 1.25rem;
+  line-height: 1.75;
+}
+
 *, ::before, ::after{
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
@@ -564,6 +578,22 @@ video {
   margin-bottom: 1rem;
 }
 
+.mb-1{
+  margin-bottom: 0.25rem;
+}
+
+.mb-2{
+  margin-bottom: 0.5rem;
+}
+
+.mb-3{
+  margin-bottom: 0.75rem;
+}
+
+.ml-1{
+  margin-left: 0.25rem;
+}
+
 .ml-3{
   margin-left: 0.75rem;
 }
@@ -572,6 +602,10 @@ video {
   margin-left: 2rem;
 }
 
+.mr-1{
+  margin-right: 0.25rem;
+}
+
 .mr-2{
   margin-right: 0.5rem;
 }
@@ -624,6 +658,10 @@ video {
   height: 9rem;
 }
 
+.h-40{
+  height: 10rem;
+}
+
 .h-8{
   height: 2rem;
 }
@@ -636,6 +674,10 @@ video {
   height: 100vh;
 }
 
+.w-1\/3{
+  width: 33.333333%;
+}
+
 .w-1\/4{
   width: 25%;
 }
@@ -652,6 +694,10 @@ video {
   width: 8rem;
 }
 
+.w-40{
+  width: 10rem;
+}
+
 .w-6{
   width: 1.5rem;
 }
@@ -664,6 +710,10 @@ video {
   width: 18rem;
 }
 
+.w-96{
+  width: 24rem;
+}
+
 .w-full{
   width: 100%;
 }
@@ -710,6 +760,10 @@ video {
   justify-content: space-between;
 }
 
+.justify-around{
+  justify-content: space-around;
+}
+
 .gap-2{
   gap: 0.5rem;
 }
@@ -722,6 +776,10 @@ video {
   gap: 1.5rem;
 }
 
+.overflow-auto{
+  overflow: auto;
+}
+
 .rounded-full{
   border-radius: 9999px;
 }
@@ -747,14 +805,31 @@ video {
   border-width: 1px;
 }
 
+.border-2{
+  border-width: 2px;
+}
+
 .border-b{
   border-bottom-width: 1px;
 }
 
+.border-r{
+  border-right-width: 1px;
+}
+
 .border-t{
   border-top-width: 1px;
 }
 
+.border-dashed{
+  border-style: dashed;
+}
+
+.border-alarm{
+  --tw-border-opacity: 1;
+  border-color: rgb(253 84 111 / var(--tw-border-opacity));
+}
+
 .border-dropdownSelect{
   --tw-border-opacity: 1;
   border-color: rgb(213 228 238 / var(--tw-border-opacity));
@@ -772,7 +847,7 @@ video {
 
 .bg-bright{
   --tw-bg-opacity: 1;
-  background-color: rgb(160 177 236 / var(--tw-bg-opacity));
+  background-color: rgb(97 144 242 / var(--tw-bg-opacity));
 }
 
 .bg-dropdownSelect{
@@ -800,6 +875,11 @@ video {
   background-color: rgb(246 250 253 / var(--tw-bg-opacity));
 }
 
+.bg-white{
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
 .bg-cover{
   background-size: cover;
 }
@@ -816,10 +896,23 @@ video {
   padding: 0.5rem;
 }
 
+.p-3{
+  padding: 0.75rem;
+}
+
+.p-4{
+  padding: 1rem;
+}
+
 .p-9{
   padding: 2.25rem;
 }
 
+.px-1{
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+
 .px-2{
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -867,6 +960,22 @@ video {
   padding-bottom: 0.75rem;
 }
 
+.pb-4{
+  padding-bottom: 1rem;
+}
+
+.pl-2{
+  padding-left: 0.5rem;
+}
+
+.pr-2{
+  padding-right: 0.5rem;
+}
+
+.pr-4{
+  padding-right: 1rem;
+}
+
 .pt-2{
   padding-top: 0.5rem;
 }
@@ -879,10 +988,6 @@ video {
   text-align: center;
 }
 
-.font-sans{
-  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont;
-}
-
 .text-2xl{
   font-size: 1.5rem;
   line-height: 2rem;
@@ -893,6 +998,11 @@ video {
   line-height: 2.25rem;
 }
 
+.text-4xl{
+  font-size: 2.25rem;
+  line-height: 2.5rem;
+}
+
 .text-lg{
   font-size: 1.125rem;
   line-height: 1.75rem;
@@ -937,9 +1047,23 @@ video {
   font-weight: 600;
 }
 
+.italic{
+  font-style: italic;
+}
+
+.text-alarm{
+  --tw-text-opacity: 1;
+  color: rgb(253 84 111 / var(--tw-text-opacity));
+}
+
+.text-alarmText{
+  --tw-text-opacity: 1;
+  color: rgb(249 2 41 / var(--tw-text-opacity));
+}
+
 .text-bright{
   --tw-text-opacity: 1;
-  color: rgb(160 177 236 / var(--tw-text-opacity));
+  color: rgb(97 144 242 / var(--tw-text-opacity));
 }
 
 .text-neutral{
@@ -991,6 +1115,16 @@ video {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
+.placeholder\:text-xs::-moz-placeholder{
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.placeholder\:text-xs::placeholder{
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
 .last\:border-0:last-child{
   border-width: 0px;
 }
@@ -1026,7 +1160,7 @@ video {
 
 .hover\:text-bright:hover{
   --tw-text-opacity: 1;
-  color: rgb(160 177 236 / var(--tw-text-opacity));
+  color: rgb(97 144 242 / var(--tw-text-opacity));
 }
 
 .hover\:text-neutral:hover{
@@ -1054,6 +1188,12 @@ video {
   color: rgb(246 250 253 / var(--tw-text-opacity));
 }
 
+.focus\:shadow-none:focus{
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .focus\:outline-none:focus{
   outline: 2px solid transparent;
   outline-offset: 2px;

package/tailwind.config.js

@@ -9,17 +9,42 @@ export default {
       fontFamily: {
         sans: ['Inter', 'system-ui', '-apple-system', 'BlinkMacSystemFont']
       },
+      lineHeight: {
+        'h1': '1.25',
+        'h2': '1.5',
+        'h3': '1.75'
+      },
       colors: {
         primary: '#141B33',
         primaryHighlight: '#52586C',
         secondary: '#2B324B',
-        tertiary: '#F6FAFD',
         quaternary: '#8991AC',
+        tertiary: '#F6FAFD',
         dropdownSelect: '#D5E4EE',
         neutral: '#FFFFFF',
-        bright: '#A0B1EC'
+        bright: '#6190f2',
+        alarm: '#FD546F',
+        alarmText: '#F90229',
+        alert: '#FFD255'
       }
     },
   },
-  plugins: [],
+  plugins: [
+    function ({ addBase, theme }) {
+      addBase({
+        h1: {
+          fontSize: theme('fontSize.3xl'),
+          lineHeight: theme('lineHeight.leading-h1'),
+        },
+        h2: {
+          fontSize: theme('fontSize.2xl'),
+          lineHeight: theme('lineHeight.h2'),
+        },
+        h3: {
+          fontSize: theme('fontSize.xl'),
+          lineHeight: theme('lineHeight.h3'),
+        },
+      });
+    },
+  ],
 }