refactor: enhance pedidos UI by integrating reusable components for layout and styling, improving code maintainability and user experience across various pages

apps/web/src/lib/components/layout/PageHeader.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		title: string;
+		subtitle?: string;
+
+		icon?: Snippet;
+		actions?: Snippet;
+
+		class?: string;
+	}
+
+	let {
+		title,
+		subtitle,
+		icon,
+		actions,
+		class: className = ''
+	}: Props = $props();
+</script>
+
+<div class={['mb-6', className].filter(Boolean)}>
+	<div class="flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
+		<div class="flex items-center gap-4">
+			{#if icon}
+				<div class="bg-primary/10 rounded-xl p-3">
+					<div class="text-primary [&_svg]:h-8 [&_svg]:w-8">
+						{@render icon()}
+					</div>
+				</div>
+			{/if}
+
+			<div>
+				<h1 class="text-primary text-3xl font-bold">{title}</h1>
+				{#if subtitle}
+					<p class="text-base-content/70">{subtitle}</p>
+				{/if}
+			</div>
+		</div>
+
+		{#if actions}
+			<div class="flex items-center gap-2">
+				{@render actions()}
+			</div>
+		{/if}
+	</div>
+</div>
+
+