Initial commit

frontend/src/components/layout/PageContainer.vue

@@ -0,0 +1,47 @@
+<template>
+  <div :class="containerClasses">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'
+  padding?: 'none' | 'sm' | 'md' | 'lg'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  maxWidth: '2xl',
+  padding: 'md',
+})
+
+const containerClasses = computed(() => {
+  const classes = ['w-full mx-auto']
+
+  // Max width
+  const maxWidthMap = {
+    sm: 'max-w-screen-sm',
+    md: 'max-w-screen-md',
+    lg: 'max-w-screen-lg',
+    xl: 'max-w-screen-xl',
+    '2xl': 'max-w-screen-2xl',
+    full: 'max-w-full',
+  }
+  classes.push(maxWidthMap[props.maxWidth])
+
+  // Padding
+  const paddingMap = {
+    none: '',
+    sm: 'px-4 py-4',
+    md: 'px-4 py-6 sm:px-6 lg:px-8',
+    lg: 'px-6 py-8 sm:px-8 lg:px-12',
+  }
+  if (props.padding !== 'none') {
+    classes.push(paddingMap[props.padding])
+  }
+
+  return classes.join(' ')
+})
+</script>