From 9d9a5fd9d29be4086ef380ed956c70226ca080d0 Mon Sep 17 00:00:00 2001
From: James Collins <james.collins@outlook.com.au>
Date: Tue, 18 Apr 2023 13:01:56 +1000
Subject: [PATCH] added narrow option

---
 resources/js/components/SMContainer.vue | 23 ++++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/resources/js/components/SMContainer.vue b/resources/js/components/SMContainer.vue
index fe8283b..5cb256c 100644
--- a/resources/js/components/SMContainer.vue
+++ b/resources/js/components/SMContainer.vue
@@ -1,7 +1,11 @@
 <template>
-    <div :class="['sm-container', { full: full, 'my-auto': center }]">
+    <div
+        :class="[
+            'container',
+            { full: full, narrow: narrow, 'my-auto': center },
+        ]">
         <slot v-if="slots.default"></slot>
-        <div v-if="slots.inner" class="sm-container-inner">
+        <div v-if="slots.inner" class="container-inner">
             <slot name="inner"></slot>
         </div>
     </div>
@@ -10,12 +14,17 @@
 <script setup lang="ts">
 import { useSlots } from "vue";
 
-const props = defineProps({
+defineProps({
     full: {
         type: Boolean,
         default: false,
         required: false,
     },
+    narrow: {
+        type: Boolean,
+        default: false,
+        required: false,
+    },
     center: {
         type: Boolean,
         default: false,
@@ -27,7 +36,7 @@ const slots = useSlots();
 </script>
 
 <style lang="scss">
-.sm-container {
+.container {
     display: flex;
     width: 100%;
     flex-direction: column;
@@ -38,7 +47,7 @@ const slots = useSlots();
         padding: 0;
         max-width: 100%;
 
-        .sm-container-inner {
+        .container-inner {
             padding-left: 1rem;
             padding-right: 1rem;
             width: 100%;
@@ -46,5 +55,9 @@ const slots = useSlots();
             margin: 0 auto;
         }
     }
+
+    &.narrow {
+        max-width: 800px;
+    }
 }
 </style>