Add components

resources/css/presets/tailwind.config.preset.js

@@ -3,6 +3,14 @@ import typography from '@tailwindcss/typography';
 
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: ['./resources/**/*.blade.php', './app/View/**/*.php', './src/**/*.php', './vendor/foxws/wireuse/**/*.blade.php'],
+  content: ['./resources/**/*.blade.php', './app/View/**/*.php', './src/**/*.php', './vendor/foxws/wireuse/**/*.php', './vendor/foxws/wireuse/**/*.blade.php'],
   plugins: [forms, typography],
+  theme: {
+    extend: {
+      container: {
+        center: true,
+        padding: '2rem',
+      }
+    }
+  }
 };

resources/views/components/layout/container.blade.php

@@ -0,0 +1,16 @@
+@props([
+    'fluid' => false,
+])
+
+<div {{ $attributes
+    ->cssClass([
+        'layer' => 'container',
+        'width' => 'w-full max-w-4xl xl:max-w-5xl',
+    ])
+    ->classMerge([
+        'layer',
+        'width' => ! $fluid,
+    ]);
+}}>
+    {{ $slot }}
+</div>

resources/views/components/layout/join.blade.php

@@ -0,0 +1,18 @@
+@props([
+    'vertical' => false,
+])
+
+<div {{ $attributes
+    ->cssClass([
+        'layer' => 'flex items-center',
+        'horizontal' => 'flex-row flex-wrap sm:flex-nowrap',
+        'vertical' => 'flex-col',
+    ])
+    ->classMerge([
+        'layer',
+        'horizontal' => ! $vertical,
+        'vertical' => $vertical,
+    ])
+}}>
+    {{ $slot }}
+</div>

resources/views/components/navigation/navbar.blade.php

@@ -0,0 +1,32 @@
+@props([
+    'start' => null,
+    'end' => null,
+])
+
+<nav {{ $attributes
+    ->cssClass([
+        'base' => 'flex flex-nowrap items-stretch justify-between leading-none',
+        'start' => 'inline-flex w-2/4 items-center justify-start',
+        'center' => 'inline-flex shrink-0 items-center',
+        'end' => 'inline-flex w-2/4 items-center justify-end',
+    ])
+    ->classMerge(['base', 'padding'])
+}}>
+    @if ($start)
+        <div {{ $attributes->classFor('start') }}>
+            {{ $start }}
+        </div>
+    @endif
+
+    @if ($slot->hasActualContent())
+        <div class="{{ $attributes->classFor('center') }}">
+            {{ $slot }}
+        </div>
+    @endif
+
+    @if ($end)
+        <div class="{{ $attributes->classFor('end') }}">
+            {{ $end }}
+        </div>
+    @endif
+</nav>