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/Breadcrumbs.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	export type BreadcrumbItem = {
+		label: string;
+		href?: string;
+	};
+
+	interface Props {
+		items: BreadcrumbItem[];
+		class?: string;
+	}
+
+	let { items, class: className = '' }: Props = $props();
+</script>
+
+<div class={['breadcrumbs mb-4 text-sm', className].filter(Boolean)}>
+	<ul>
+		{#each items as item (item.label)}
+			<li>
+				{#if item.href}
+					<a href={item.href} class="text-primary hover:underline">{item.label}</a>
+				{:else}
+					{item.label}
+				{/if}
+			</li>
+		{/each}
+	</ul>
+</div>
+
+