@dcrackel/hematournamentui 1.0.0 → 1.0.1

package/dist/my-library.es.js

@@ -1,10 +1,10 @@
-import { withDirectives as Q, openBlock as l, createElementBlock as o, vModelText as I, reactive as b, computed as m, normalizeClass as y, toDisplayString as C, resolveComponent as A, createCommentVNode as k, createVNode as d, createElementVNode as s, normalizeStyle as D, Fragment as x, renderList as B, createBlock as p, resolveDynamicComponent as E } from "vue";
-const g = (t, e) => {
-  const r = t.__vccOpts || t;
-  for (const [c, u] of e)
-    r[c] = u;
+import { withDirectives as I, openBlock as s, createElementBlock as c, vModelText as Q, reactive as p, computed as m, normalizeClass as h, toDisplayString as k, resolveComponent as g, createCommentVNode as w, createVNode as d, createElementVNode as i, normalizeStyle as D, Fragment as B, renderList as x, createBlock as f, resolveDynamicComponent as E } from "vue";
+const A = (e, t) => {
+  const r = e.__vccOpts || e;
+  for (const [o, u] of t)
+    r[o] = u;
   return r;
-}, Y = {
+}, S = {
   name: "BaseInput",
   props: {
     placeholder: {
@@ -23,29 +23,29 @@ const g = (t, e) => {
     };
   },
   watch: {
-    value(t) {
-      this.internalValue = t;
+    value(e) {
+      this.internalValue = e;
     }
   },
   methods: {
     onInput() {
       clearTimeout(this.timeout), this.timeout = setTimeout(() => {
-        this.$emit("update:value", this.internalValue);
+        console.log("this.internalValue", this.internalValue), this.$emit("update:value", this.internalValue);
       }, 300);
     }
   }
-}, M = ["placeholder"];
-function v(t, e, r, c, u, i) {
-  return Q((l(), o("input", {
-    class: "appearance-none focus:outline-none w-full",
+}, Y = ["placeholder"];
+function v(e, t, r, o, u, n) {
+  return I((s(), c("input", {
+    class: "appearance-none focus:outline-none w-full text-sm",
     placeholder: r.placeholder,
-    "onUpdate:modelValue": e[0] || (e[0] = (a) => u.internalValue = a),
-    onInput: e[1] || (e[1] = (...a) => i.onInput && i.onInput(...a))
-  }, null, 40, M)), [
-    [I, u.internalValue]
+    "onUpdate:modelValue": t[0] || (t[0] = (a) => u.internalValue = a),
+    onInput: t[1] || (t[1] = (...a) => n.onInput && n.onInput(...a))
+  }, null, 40, Y)), [
+    [Q, u.internalValue]
   ]);
 }
-const G = /* @__PURE__ */ g(Y, [["render", v]]), S = {
+const M = /* @__PURE__ */ A(S, [["render", v]]), G = {
   name: "BaseText",
   props: {
     text: {
@@ -55,28 +55,28 @@ const G = /* @__PURE__ */ g(Y, [["render", v]]), S = {
     weight: {
       type: String,
       default: "normal",
-      validator: function(t) {
-        return ["light", "normal", "medium", "semi-bold", "bold", "extra-bold"].indexOf(t) !== -1;
+      validator: function(e) {
+        return ["light", "normal", "medium", "semi-bold", "bold", "extra-bold"].indexOf(e) !== -1;
       }
     },
     size: {
       type: String,
       default: "small",
-      validator: function(t) {
-        return ["xs", "small", "medium", "large", "xl", "2xl", "3xl"].indexOf(t) !== -1;
+      validator: function(e) {
+        return ["xs", "small", "medium", "large", "xl", "2xl", "3xl"].indexOf(e) !== -1;
       }
     },
     color: {
       type: String,
       default: "primary",
-      validator: function(t) {
-        return ["neutral", "quaternary", "tertiary", "secondary", "primary", "bright"].indexOf(t) !== -1;
+      validator: function(e) {
+        return ["neutral", "quaternary", "tertiary", "secondary", "primary", "bright", "primaryHighlight"].indexOf(e) !== -1;
       }
     },
     hoverColor: {
       type: String,
       default: "none",
-      validator: function(t) {
+      validator: function(e) {
         return [
           "primary",
           "secondary",
@@ -85,119 +85,122 @@ const G = /* @__PURE__ */ g(Y, [["render", v]]), S = {
           "neutral",
           "bright",
           "none"
-        ].indexOf(t) !== -1;
+        ].indexOf(e) !== -1;
       }
     }
   },
-  setup(t) {
-    return t = b(t), {
+  setup(e) {
+    return e = p(e), {
       classes: m(() => {
-        let e = "inline-block font-sans";
-        switch (t.color) {
+        let t = "inline-block font-sans";
+        switch (e.color) {
           case "neutral":
-            e += " text-neutral";
+            t += " text-neutral";
             break;
           case "tertiary":
-            e += " text-tertiary";
+            t += " text-tertiary";
             break;
           case "secondary":
-            e += " text-secondary";
+            t += " text-secondary";
             break;
           case "quaternary":
-            e += " text-quaternary";
+            t += " text-quaternary";
             break;
           case "primary":
-            e += " text-primary";
+            t += " text-primary";
+            break;
+          case "primaryHighlight":
+            t += " text-primaryHighlight";
             break;
           case "bright":
-            e += " text-bright";
+            t += " text-bright";
             break;
         }
-        switch (t.hoverColor) {
+        switch (e.hoverColor) {
           case "neutral":
-            e += " hover:text-neutral";
+            t += " hover:text-neutral";
             break;
           case "tertiary":
-            e += " hover:text-tertiary";
+            t += " hover:text-tertiary";
             break;
           case "secondary":
-            e += " hover:text-secondary";
+            t += " hover:text-secondary";
             break;
           case "quaternary":
-            e += " hover:text-quaternary";
+            t += " hover:text-quaternary";
             break;
           case "primary":
-            e += " hover:text-primary";
+            t += " hover:text-primary";
             break;
           case "bright":
-            e += " hover:text-bright";
+            t += " hover:text-bright";
             break;
           case "none":
-            e += "";
+            t += "";
             break;
         }
-        switch (t.weight) {
+        switch (e.weight) {
           case "light":
-            e += " font-light";
+            t += " font-light";
             break;
           case "normal":
-            e += " font-normal";
+            t += " font-normal";
             break;
           case "medium":
-            e += " font-medium";
+            t += " font-medium";
             break;
           case "semi-bold":
-            e += " font-semibold";
+            t += " font-semibold";
             break;
           case "bold":
-            e += " font-bold";
+            t += " font-bold";
             break;
           case "extra-bold":
-            e += " font-extrabold";
+            t += " font-extrabold";
             break;
           default:
-            e += " font-normal";
+            t += " font-normal";
             break;
         }
-        switch (t.size) {
+        switch (e.size) {
           case "xs":
-            e += " text-xs";
+            t += " text-xs";
             break;
           case "small":
-            e += " text-sm";
+            t += " text-sm";
             break;
           case "medium":
-            e += " text-md";
+            t += " text-md";
             break;
           case "large":
-            e += " text-lg";
+            t += " text-lg";
             break;
           case "xl":
-            e += " text-xl";
+            t += " text-xl";
             break;
           case "2xl":
-            e += " text-2xl";
+            t += " text-2xl";
             break;
           case "3xl":
-            e += " text-3xl";
+            t += " text-3xl";
             break;
           default:
-            e += " text-sm";
+            t += " text-sm";
             break;
         }
-        return e;
+        return t;
       })
     };
   }
 };
-function q(t, e, r, c, u, i) {
-  return l(), o("div", {
-    class: y(c.classes)
-  }, C(r.text), 3);
+function q(e, t, r, o, u, n) {
+  return s(), c("div", {
+    class: h(o.classes)
+  }, k(r.text), 3);
 }
-const h = /* @__PURE__ */ g(S, [["render", q]]), U = {
+const b = /* @__PURE__ */ A(G, [["render", q]]), U = {
   name: "base-button",
-  components: { DefaultText: h },
+  components: { DefaultText: b },
   props: {
     label: {
       type: String,
@@ -209,41 +212,41 @@ const h = /* @__PURE__ */ g(S, [["render", q]]), U = {
     },
     size: {
       type: String,
-      validator: function(t) {
-        return ["xs", "small", "medium", "large", "xl"].indexOf(t) !== -1;
+      validator: function(e) {
+        return ["xs", "small", "medium", "large", "xl"].indexOf(e) !== -1;
       }
     },
     type: {
       type: String,
       default: "primary",
-      validator: function(t) {
-        return ["primary", "secondary", "tertiary", "bright", "admin", "adminSecondary"].indexOf(t) !== -1;
+      validator: function(e) {
+        return ["primary", "secondary", "tertiary", "bright", "admin", "adminSecondary"].indexOf(e) !== -1;
       }
     }
   },
   emits: ["click"],
-  setup(t, { emit: e }) {
-    return t = b(t), {
+  setup(e, { emit: t }) {
+    return e = p(e), {
       textColor: m(() => {
-        switch (t.type) {
+        switch (e.type) {
           case "primary":
-            return "text-primary";
+            return "primary";
           case "secondary":
-            return "text-secondary";
+            return "secondary";
           case "tertiary":
-            return "text-tertiary";
+            return "tertiary";
           case "bright":
-            return "text-bright";
+            return "bright";
           case "admin":
-            return "text-neutral";
+            return "neutral";
           case "adminSecondary":
-            return "text-secondary";
+            return "secondary";
           default:
-            return "text-primary";
+            return "primary";
         }
       }),
       hoverClass: m(() => {
-        switch (t.type) {
+        switch (e.type) {
           case "admin":
             return "hover:text-secondary";
           case "adminSecondary":
@@ -253,7 +256,7 @@ const h = /* @__PURE__ */ g(S, [["render", q]]), U = {
         }
       }),
       hoverColor: m(() => {
-        switch (t.type) {
+        switch (e.type) {
           case "admin":
             return "text-secondary";
           case "adminSecondary":
@@ -264,7 +267,7 @@ const h = /* @__PURE__ */ g(S, [["render", q]]), U = {
       }),
       classes: m(() => {
         let r = "py-2 px-2.5 mx-2 inline-flex ";
-        switch (t.type) {
+        switch (e.type) {
           case "primary":
             r += " items-center gap-2.5 rounded-md text-center shadow border border-skeleton justify-center bg-neutral hover:bg-tertiary";
             break;
@@ -284,7 +287,7 @@ const h = /* @__PURE__ */ g(S, [["render", q]]), U = {
             r += " items-center gap-2.5 text-center my-1 border-b border-secondary hover:border-b hover:border-neutral w-11/12 text-neutral";
             break;
         }
-        switch (t.size) {
+        switch (e.size) {
           case "xs":
             r += " text-xs";
             break;
@@ -307,31 +310,31 @@ const h = /* @__PURE__ */ g(S, [["render", q]]), U = {
         return r;
       }),
       onClick() {
-        console.log("Click!"), e("click");
+        console.log("Click!"), t("click");
       }
     };
   }
 };
-function $(t, e, r, c, u, i) {
-  const a = A("DefaultText");
-  return l(), o("button", {
-    class: y(c.classes),
+function V(e, t, r, o, u, n) {
+  const a = g("DefaultText");
+  return s(), c("button", {
+    class: h(o.classes),
     type: "button",
-    onClick: e[0] || (e[0] = (...n) => c.onClick && c.onClick(...n))
+    onClick: t[0] || (t[0] = (...l) => o.onClick && o.onClick(...l))
   }, [
-    r.iconClass ? (l(), o("i", {
+    r.iconClass ? (s(), c("i", {
       key: 0,
-      class: y([r.iconClass, "mr-2 hover:text-highlightedClass"])
-    }, null, 2)) : k("", !0),
+      class: h([r.iconClass, "mr-2 hover:text-highlightedClass"])
+    }, null, 2)) : w("", !0),
     d(a, {
-      color: c.textColor,
+      color: o.textColor,
       size: r.size,
       text: r.label,
       weight: "normal"
     }, null, 8, ["color", "size", "text"])
   ], 2);
 }
-const _ = /* @__PURE__ */ g(U, [["render", $]]), V = {
+const _ = /* @__PURE__ */ A(U, [["render", V]]), $ = {
   name: "base-tag",
   props: {
     label: {
@@ -340,46 +343,46 @@ const _ = /* @__PURE__ */ g(U, [["render", $]]), V = {
     },
     backgroundColor: {
       type: String,
-      validator: function(t) {
-        return ["primary", "secondary", "tertiary", "neutral", "bright"].indexOf(t) !== -1;
+      validator: function(e) {
+        return ["primary", "secondary", "tertiary", "neutral", "bright"].indexOf(e) !== -1;
       }
     }
   },
-  setup(t) {
-    return t = b(t), {
+  setup(e) {
+    return e = p(e), {
       classes: m(() => {
-        let e = "cursor-pointer inline-block py-1 px-3 my-2 ml-3 text-xs font-normal rounded-full text-neutral";
-        switch (t.backgroundColor) {
+        let t = "cursor-pointer inline-block py-1 px-3 my-2 ml-3 text-xs font-normal rounded-full text-neutral";
+        switch (e.backgroundColor) {
           case "primary":
-            e += " bg-primary";
+            t += " bg-primary";
             break;
           case "secondary":
-            e += " bg-secondary";
+            t += " bg-secondary";
             break;
           case "tertiary":
-            e += " bg-tertiary";
+            t += " bg-tertiary";
             break;
           case "neutral":
-            e += " bg-neutral";
+            t += " bg-neutral";
             break;
           case "bright":
-            e += " bg-bright";
+            t += " bg-bright";
             break;
           default:
-            e += " bg-primary";
+            t += " bg-primary";
             break;
         }
-        return e;
+        return t;
       })
     };
   }
 };
-function T(t, e, r, c, u, i) {
-  return l(), o("div", {
-    class: y(c.classes)
-  }, C(r.label), 3);
+function T(e, t, r, o, u, n) {
+  return s(), c("div", {
+    class: h(o.classes)
+  }, k(r.label), 3);
 }
-const W = /* @__PURE__ */ g(V, [["render", T]]), f = "data:image/png;base64,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", K = {
+const W = /* @__PURE__ */ A($, [["render", T]]), C = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAADICAYAAABS39xVAAAAAXNSR0IArs4c6QAABdlJREFUeF7t1AEJACAQBEGNaiOzWkDBFgvzCY655+ba5w5HgACBgMA0WIGWRCRA4AsYLI9AgEBGwGBlqhKUAAGD5QcIEMgIGKxMVYISIGCw/AABAhkBg5WpSlACBAyWHyBAICNgsDJVCUqAgMHyAwQIZAQMVqYqQQkQMFh+gACBjIDBylQlKAECBssPECCQETBYmaoEJUDAYPkBAgQyAgYrU5WgBAgYLD9AgEBGwGBlqhKUAAGD5QcIEMgIGKxMVYISIGCw/AABAhkBg5WpSlACBAyWHyBAICNgsDJVCUqAgMHyAwQIZAQMVqYqQQkQMFh+gACBjIDBylQlKAECBssPECCQETBYmaoEJUDAYPkBAgQyAgYrU5WgBAgYLD9AgEBGwGBlqhKUAAGD5QcIEMgIGKxMVYISIGCw/AABAhkBg5WpSlACBAyWHyBAICNgsDJVCUqAgMHyAwQIZAQMVqYqQQkQMFh+gACBjIDBylQlKAECBssPECCQETBYmaoEJUDAYPkBAgQyAgYrU5WgBAgYLD9AgEBGwGBlqhKUAAGD5QcIEMgIGKxMVYISIGCw/AABAhkBg5WpSlACBAyWHyBAICNgsDJVCUqAgMHyAwQIZAQMVqYqQQkQMFh+gACBjIDBylQlKAECBssPECCQETBYmaoEJUDAYPkBAgQyAgYrU5WgBAgYLD9AgEBGwGBlqhKUAAGD5QcIEMgIGKxMVYISIGCw/AABAhkBg5WpSlACBAyWHyBAICNgsDJVCUqAgMHyAwQIZAQMVqYqQQkQMFh+gACBjIDBylQlKAECBssPECCQETBYmaoEJUDAYPkBAgQyAgYrU5WgBAgYLD9AgEBGwGBlqhKUAAGD5QcIEMgIGKxMVYISIGCw/AABAhkBg5WpSlACBAyWHyBAICNgsDJVCUqAgMHyAwQIZAQMVqYqQQkQMFh+gACBjIDBylQlKAECBssPECCQETBYmaoEJUDAYPkBAgQyAgYrU5WgBAgYLD9AgEBGwGBlqhKUAAGD5QcIEMgIGKxMVYISIGCw/AABAhkBg5WpSlACBAyWHyBAICNgsDJVCUqAgMHyAwQIZAQMVqYqQQkQMFh+gACBjIDBylQlKAECBssPECCQETBYmaoEJUDAYPkBAgQyAgYrU5WgBAgYLD9AgEBGwGBlqhKUAAGD5QcIEMgIGKxMVYISIGCw/AABAhkBg5WpSlACBAyWHyBAICNgsDJVCUqAgMHyAwQIZAQMVqYqQQkQMFh+gACBjIDBylQlKAECBssPECCQETBYmaoEJUDAYPkBAgQyAgYrU5WgBAgYLD9AgEBGwGBlqhKUAAGD5QcIEMgIGKxMVYISIGCw/AABAhkBg5WpSlACBAyWHyBAICNgsDJVCUqAgMHyAwQIZAQMVqYqQQkQMFh+gACBjIDBylQlKAECBssPECCQETBYmaoEJUDAYPkBAgQyAgYrU5WgBAgYLD9AgEBGwGBlqhKUAAGD5QcIEMgIGKxMVYISIGCw/AABAhkBg5WpSlACBAyWHyBAICNgsDJVCUqAgMHyAwQIZAQMVqYqQQkQMFh+gACBjIDBylQlKAECBssPECCQETBYmaoEJUDAYPkBAgQyAgYrU5WgBAgYLD9AgEBGwGBlqhKUAAGD5QcIEMgIGKxMVYISIGCw/AABAhkBg5WpSlACBAyWHyBAICNgsDJVCUqAgMHyAwQIZAQMVqYqQQkQMFh+gACBjIDBylQlKAECBssPECCQETBYmaoEJUDAYPkBAgQyAgYrU5WgBAgYLD9AgEBGwGBlqhKUAAGD5QcIEMgIGKxMVYISIGCw/AABAhkBg5WpSlACBAyWHyBAICNgsDJVCUqAgMHyAwQIZAQMVqYqQQkQMFh+gACBjIDBylQlKAECBssPECCQETBYmaoEJUDAYPkBAgQyAgYrU5WgBAgYLD9AgEBGwGBlqhKUAAGD5QcIEMgIGKxMVYISIGCw/AABAhkBg5WpSlACBB4p/0F3nyMcxwAAAABJRU5ErkJggg==", K = {
   name: "tournament-card-header",
   components: {
     BaseTag: W
@@ -388,7 +391,7 @@ const W = /* @__PURE__ */ g(V, [["render", T]]), f = "data:image/png;base64,iVBO
     artwork: {
       type: String,
       required: !0,
-      default: f
+      default: C
     },
     tags: {
       type: Array,
@@ -397,31 +400,31 @@ const W = /* @__PURE__ */ g(V, [["render", T]]), f = "data:image/png;base64,iVBO
   },
   computed: {
     backgroundStyle() {
-      return `background-image: url('${this.artwork || f}');`;
+      return `background-image: url('${this.artwork || C}');`;
     }
   }
-}, H = { class: "rounded-t-xl w-full" }, P = { class: "flex flex-row" };
-function J(t, e, r, c, u, i) {
-  const a = A("BaseTag");
-  return l(), o("div", H, [
-    s("div", {
-      style: D(i.backgroundStyle),
+}, H = { class: "rounded-t-xl w-full" }, J = { class: "flex flex-row" };
+function F(e, t, r, o, u, n) {
+  const a = g("BaseTag");
+  return s(), c("div", H, [
+    i("div", {
+      style: D(n.backgroundStyle),
       class: "h-36 w-full flex flex-col justify-end rounded-t-xl bg-cover bg-no-repeat bg-center"
     }, [
-      s("div", P, [
-        (l(!0), o(x, null, B(r.tags, (n) => (l(), p(a, {
-          key: n,
-          label: n
+      i("div", J, [
+        (s(!0), c(B, null, x(r.tags, (l) => (s(), f(a, {
+          key: l,
+          label: l
         }, null, 8, ["label"]))), 128))
       ])
     ], 4)
   ]);
 }
-const j = /* @__PURE__ */ g(K, [["render", J]]), z = {
+const j = /* @__PURE__ */ A(K, [["render", F]]), P = {
   name: "tournament-card-details",
   components: {
     BaseButton: _,
-    BaseText: h
+    BaseText: b
   },
   props: {
     detail: {
@@ -435,38 +438,38 @@ const j = /* @__PURE__ */ g(K, [["render", J]]), z = {
       })
     }
   }
-}, F = { class: "flex flex-col w-full pt-4 pb-3 px-3" }, N = { class: "mt-4 flex flex-col" }, L = { class: "flex flex-row w-full justify-end" };
-function O(t, e, r, c, u, i) {
-  const a = A("BaseText"), n = A("BaseButton");
-  return l(), o("div", F, [
+}, O = { class: "flex flex-col w-full pt-4 pb-3 px-3" }, z = { class: "mt-4 flex flex-col" }, L = { class: "flex flex-row w-full justify-end" };
+function N(e, t, r, o, u, n) {
+  const a = g("BaseText"), l = g("BaseButton");
+  return s(), c("div", O, [
     d(a, {
       text: r.detail.name,
-      color: "textPrimary",
+      color: "primary",
       size: "xl",
       weight: "semi-bold"
     }, null, 8, ["text"]),
     d(a, {
       text: r.detail.location,
-      color: "textPrimary",
+      color: "primary",
       size: "small",
       weight: "normal"
     }, null, 8, ["text"]),
-    s("div", N, [
+    i("div", z, [
       d(a, {
         text: `${r.detail.date}`,
-        color: "textPrimary",
+        color: "primaryHighlight",
         size: "small",
         weight: "light"
       }, null, 8, ["text"]),
       d(a, {
         text: `${r.detail.closes}`,
-        color: "textPrimary",
+        color: "primaryHighlight",
         size: "small",
         weight: "light"
       }, null, 8, ["text"])
     ]),
-    s("div", L, [
-      d(n, {
+    i("div", L, [
+      d(l, {
         label: "Edit",
         class: "mt-2",
         primary: ""
@@ -474,7 +477,7 @@ function O(t, e, r, c, u, i) {
     ])
   ]);
 }
-const Z = /* @__PURE__ */ g(z, [["render", O]]), R = {
+const Z = /* @__PURE__ */ A(P, [["render", N]]), R = {
   name: "TournamentCard",
   components: {
     TournamentHeader: j,
@@ -496,56 +499,19 @@ const Z = /* @__PURE__ */ g(z, [["render", O]]), R = {
     }
   }
 }, X = { class: "rounded-xl w-72 shadow" };
-function ee(t, e, r, c, u, i) {
-  const a = A("TournamentHeader"), n = A("TournamentDetail");
-  return l(), o("div", X, [
+function ee(e, t, r, o, u, n) {
+  const a = g("TournamentHeader"), l = g("TournamentDetail");
+  return s(), c("div", X, [
     d(a, {
       artwork: r.detail.artwork,
       tags: r.detail.tags
     }, null, 8, ["artwork", "tags"]),
-    d(n, { detail: r.detail }, null, 8, ["detail"])
+    d(l, { detail: r.detail }, null, 8, ["detail"])
   ]);
 }
-const te = /* @__PURE__ */ g(R, [["render", ee]]), re = {
-  name: "GridContainer",
-  components: {
-    BaseText: h,
-    TournamentCard: te
-  },
-  props: {
-    items: {
-      type: Array,
-      default: () => []
-    },
-    component: {
-      type: String,
-      required: !0
-    }
-  }
-}, ae = { class: "border border-cloudy rounded-lg p-9 bg-white" }, ne = { class: "w-full text-center mb-9" }, le = { class: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-6 w-full" };
-function se(t, e, r, c, u, i) {
-  const a = A("BaseText");
-  return l(), o("div", ae, [
-    s("h1", ne, [
-      d(a, {
-        color: "primary",
-        size: "2xl",
-        text: "Upcoming Tournaments",
-        weight: "normal"
-      })
-    ]),
-    s("div", le, [
-      (l(!0), o(x, null, B(r.items, (n) => (l(), o("div", {
-        key: n.id
-      }, [
-        (l(), p(E(r.component), { detail: n }, null, 8, ["detail"]))
-      ]))), 128))
-    ])
-  ]);
-}
-const De = /* @__PURE__ */ g(re, [["render", se]]), oe = {
+const te = /* @__PURE__ */ A(R, [["render", ee]]), re = {
   name: "DropDownMenu",
-  components: { BaseText: h },
+  components: { BaseText: b },
   props: {
     label: {
       type: String
@@ -559,21 +525,21 @@ const De = /* @__PURE__ */ g(re, [["render", se]]), oe = {
     isDropDownOpen: !1
   }),
   methods: {
-    handleClick(t) {
-      this.isDropDownOpen = !1, console.log(`menu item clicked ${t}`);
+    handleClick(e) {
+      this.isDropDownOpen = !1, this.$emit("update:selectedItem", e);
     },
     handleDropDown() {
       this.isDropDownOpen = !this.isDropDownOpen;
     }
   }
-}, ce = { class: "flex flex-row" }, ie = { class: "mr-2 pt-1" }, de = /* @__PURE__ */ s("i", { class: "fa-solid fa-chevron-down text-xs" }, null, -1), ue = {
+}, ae = { class: "flex flex-row" }, ne = { class: "mr-2 pt-1" }, le = /* @__PURE__ */ i("i", { class: "fa-solid fa-chevron-down text-xs" }, null, -1), se = {
   key: 0,
-  class: "flex flex-col w-32 shadow mt-2 z-10 rounded-xl py-1 absolute"
-}, Ae = ["onClick"];
-function ge(t, e, r, c, u, i) {
-  const a = A("BaseText");
-  return l(), o("div", ce, [
-    s("span", ie, [
+  class: "flex flex-col w-32 shadow mt-2 z-10 rounded-xl py-1 absolute bg-white"
+}, oe = ["onClick"];
+function ie(e, t, r, o, u, n) {
+  const a = g("BaseText");
+  return s(), c("div", ae, [
+    i("span", ne, [
       d(a, {
         text: r.label,
         color: "quaternary",
@@ -581,41 +547,46 @@ function ge(t, e, r, c, u, i) {
         weight: "normal"
       }, null, 8, ["text"])
     ]),
-    s("span", null, [
-      s("div", {
+    i("span", null, [
+      i("div", {
         class: "z-10 rounded-lg shadow px-2 py-2 w-32 flex flex-row justify-between",
-        onClick: e[0] || (e[0] = (n) => i.handleDropDown())
+        onClick: t[0] || (t[0] = (l) => n.handleDropDown())
       }, [
         d(a, {
           text: r.selectedItem.text,
           color: "secondary",
-          size: "xs",
+          size: "sm",
           weight: "normal"
         }, null, 8, ["text"]),
-        de
+        le
       ]),
-      t.isDropDownOpen ? (l(), o("div", ue, [
-        (l(!0), o(x, null, B(r.items, (n) => (l(), o("a", {
-          key: n.id,
-          onClick: (w) => i.handleClick(n),
+      e.isDropDownOpen ? (s(), c("div", se, [
+        (s(!0), c(B, null, x(r.items, (l) => (s(), c("a", {
+          key: l.id,
+          onClick: (y) => n.handleClick(l),
           class: "hover:bg-dropdownSelect py-1 px-2 border-b border-dropdownSelect last:border-0"
         }, [
           d(a, {
-            text: n.text,
+            text: l.text,
             color: "primary",
             size: "xs",
             weight: "normal"
           }, null, 8, ["text"])
-        ], 8, Ae))), 128))
-      ])) : k("", !0)
+        ], 8, oe))), 128))
+      ])) : w("", !0)
     ])
   ]);
 }
-const me = /* @__PURE__ */ g(oe, [["render", ge]]), ye = {
+const ce = /* @__PURE__ */ A(re, [["render", ie]]), de = {
   name: "FilterAndSortBar",
   components: {
-    DropDownMenu: me,
-    BaseInput: G
+    DropDownMenu: ce,
+    BaseInput: M
+  },
+  data() {
+    return {
+      filterText: ""
+    };
   },
   props: {
     label: {
@@ -628,31 +599,131 @@ const me = /* @__PURE__ */ g(oe, [["render", ge]]), ye = {
     selectedItem: null
   },
   methods: {
-    handleButtonClick(t) {
-      this.$emit("button-click", t);
+    handleFilter(e) {
+      this.$emit("filterbar", e);
+    },
+    handleSelectedItem(e) {
+      this.$emit("sort", e), console.log("handleSelectedItem", e);
     }
   }
-}, xe = { class: "flex flex-row w-full justify-between" }, Be = { class: "rounded-lg shadow px-2 py-1 w-1/2 flex flex-row mt-0.5" }, he = /* @__PURE__ */ s("i", { class: "fa-solid fa-magnifying-glass text-primaryHighlight w-6 mt-1" }, null, -1);
-function be(t, e, r, c, u, i) {
-  const a = A("BaseInput"), n = A("DropDownMenu");
-  return l(), o("section", xe, [
-    s("div", Be, [
-      he,
+}, ue = { class: "flex flex-row w-full justify-between" }, ge = { class: "rounded-lg shadow px-2 py-1 w-1/2 flex flex-row mt-0.5" }, Ae = /* @__PURE__ */ i("i", { class: "fa-solid fa-magnifying-glass text-primaryHighlight w-6 mt-1" }, null, -1);
+function me(e, t, r, o, u, n) {
+  const a = g("BaseInput"), l = g("DropDownMenu");
+  return s(), c("section", ue, [
+    i("div", ge, [
+      Ae,
       d(a, {
         placeholder: "Search on Name, Location, or Date",
-        class: "text-quaternary"
-      })
+        class: "text-quaternary",
+        value: u.filterText,
+        "onUpdate:value": n.handleFilter
+      }, null, 8, ["value", "onUpdate:value"])
     ]),
-    s("div", null, [
-      d(n, {
+    i("div", null, [
+      d(l, {
         label: r.label,
         items: r.items,
-        selectedItem: r.selectedItem
-      }, null, 8, ["label", "items", "selectedItem"])
+        selectedItem: r.selectedItem,
+        "onUpdate:selectedItem": n.handleSelectedItem
+      }, null, 8, ["label", "items", "selectedItem", "onUpdate:selectedItem"])
+    ])
+  ]);
+}
+const ye = /* @__PURE__ */ A(de, [["render", me]]), he = {
+  name: "GridContainer",
+  components: {
+    FilterAndSortBar: ye,
+    BaseText: b,
+    TournamentCard: te
+  },
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    },
+    component: {
+      type: String,
+      required: !0
+    },
+    label: {
+      type: String
+    },
+    dropdownItems: {
+      type: Array,
+      default: () => []
+    },
+    selectedItem: null
+  },
+  data() {
+    return {
+      filterOn: "",
+      sortCriteria: "Date"
+    };
+  },
+  computed: {
+    filteredItems() {
+      let e = this.items;
+      if (this.filterOn.trim()) {
+        const t = this.filterOn.toLowerCase();
+        e = e.filter(
+          (r) => Object.values(r).some(
+            (o) => typeof o == "string" && o.toLowerCase().includes(t)
+          )
+        );
+      }
+      switch (this.sortCriteria) {
+        case "Date":
+          e = [...e].sort((t, r) => new Date(t.date) - new Date(r.date));
+          break;
+        case "Name":
+          e = [...e].sort((t, r) => t.name.localeCompare(r.name));
+          break;
+        case "Location":
+          e = [...e].sort((t, r) => t.location.localeCompare(r.location));
+          break;
+      }
+      return e;
+    }
+  },
+  methods: {
+    handleFilter(e) {
+      this.filterOn = e;
+    },
+    handleSort(e) {
+      this.sortCriteria = e.text;
+    }
+  }
+}, Be = { class: "border border-dropdownSelect rounded-lg p-9 bg-white" }, xe = { class: "w-full text-center mb-9" }, be = { class: "my-4" }, pe = { class: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-6 w-full" };
+function fe(e, t, r, o, u, n) {
+  const a = g("BaseText"), l = g("FilterAndSortBar");
+  return s(), c("div", Be, [
+    i("h1", xe, [
+      d(a, {
+        color: "primaryHighlight",
+        size: "2xl",
+        text: "Upcoming Tournaments",
+        weight: "normal"
+      })
+    ]),
+    i("div", be, [
+      d(l, {
+        items: r.dropdownItems,
+        label: r.label,
+        selectedItem: r.selectedItem,
+        onFilterbar: n.handleFilter,
+        onSort: n.handleSort
+      }, null, 8, ["items", "label", "selectedItem", "onFilterbar", "onSort"])
+    ]),
+    i("div", pe, [
+      (s(!0), c(B, null, x(n.filteredItems, (y) => (s(), c("div", {
+        key: y.id
+      }, [
+        (s(), f(E(r.component), { detail: y }, null, 8, ["detail"]))
+      ]))), 128))
     ])
   ]);
 }
-const Ee = /* @__PURE__ */ g(ye, [["render", be]]), pe = {
+const Se = /* @__PURE__ */ A(he, [["render", fe]]), Ce = {
   name: "AdminLeftMenu",
   components: { BaseButton: _ },
   props: {
@@ -662,61 +733,61 @@ const Ee = /* @__PURE__ */ g(ye, [["render", be]]), pe = {
     }
   },
   methods: {
-    handleButtonClick(t) {
-      this.$emit("button-click", t);
+    handleButtonClick(e) {
+      this.$emit("button-click", e);
     }
   }
-}, fe = { class: "bg-backgroundSecondary w-64 h-screen flex flex-col justify-between bg-secondary" }, Ce = /* @__PURE__ */ s("section", { class: "h-28 border-b-2 border-borderPrimary" }, [
-  /* @__PURE__ */ s("div", { class: "flex flex-col justify-center h-28" }, [
-    /* @__PURE__ */ s("div", { class: "ml-8" }, [
-      /* @__PURE__ */ s("img", {
+}, ke = { class: "bg-secondary w-64 h-screen flex flex-col justify-between" }, we = /* @__PURE__ */ i("section", { class: "h-28 border-b-2 border-neutral" }, [
+  /* @__PURE__ */ i("div", { class: "flex flex-col justify-center h-28" }, [
+    /* @__PURE__ */ i("div", { class: "ml-8" }, [
+      /* @__PURE__ */ i("img", {
         class: "w-32",
         src: "https://ferrotas.com/assets/ferrotas-white-small-720502db.png"
       })
     ])
   ])
-], -1), ke = { class: "flex flex-col p-2 h-full" }, _e = { class: "flex flex-col justify-end p-2 h-full" }, we = { class: "border-t-2 border-borderPrimary pt-2" };
-function Qe(t, e, r, c, u, i) {
-  const a = A("BaseButton");
-  return l(), o("div", fe, [
-    Ce,
-    s("section", ke, [
-      (l(!0), o(x, null, B(r.buttons, (n) => (l(), p(a, {
-        label: n.label,
+], -1), _e = { class: "flex flex-col p-2 h-full" }, Ie = { class: "flex flex-col justify-end p-2 h-full" }, Qe = { class: "border-t-2 border-neutral pt-2" };
+function De(e, t, r, o, u, n) {
+  const a = g("BaseButton");
+  return s(), c("div", ke, [
+    we,
+    i("section", _e, [
+      (s(!0), c(B, null, x(r.buttons, (l) => (s(), f(a, {
+        label: l.label,
         iconClass: "fa-solid fa-trophy text-white",
         type: "admin",
         hover: "admin",
-        onClick: (w) => i.handleButtonClick(n)
+        onClick: (y) => n.handleButtonClick(l)
       }, null, 8, ["label", "onClick"]))), 256))
     ]),
-    s("section", _e, [
-      s("div", we, [
+    i("section", Ie, [
+      i("div", Qe, [
         d(a, {
           iconClass: "fa-solid fa-circle-user text-textSecondary",
           label: "Account",
           type: "adminSecondary",
-          onClick: e[0] || (e[0] = (n) => i.handleButtonClick(t.button))
+          onClick: t[0] || (t[0] = (l) => n.handleButtonClick(e.button))
         }),
         d(a, {
           iconClass: "fa-solid fa-right-to-bracket fa-rotate-180 text-textSecondary",
           label: "Log Out",
           type: "adminSecondary",
-          onClick: e[1] || (e[1] = (n) => i.handleButtonClick(t.button))
+          onClick: t[1] || (t[1] = (l) => n.handleButtonClick(e.button))
         })
       ])
     ])
   ]);
 }
-const Ye = /* @__PURE__ */ g(pe, [["render", Qe]]);
+const Ye = /* @__PURE__ */ A(Ce, [["render", De]]);
 export {
   Ye as AdminLeftMenu,
   _ as BaseButton,
-  G as BaseInput,
+  M as BaseInput,
   W as BaseTag,
-  h as BaseText,
-  me as DropDownMenu,
-  Ee as FilterAndSortBar,
-  De as GridContainer,
+  b as BaseText,
+  ce as DropDownMenu,
+  ye as FilterAndSortBar,
+  Se as GridContainer,
   te as TournamentCard,
   Z as TournamentCardDetails,
   j as TournamentCardHeader