34 lines
845 B
Svelte
34 lines
845 B
Svelte
<script lang="ts">
|
|
/**
|
|
* BackButton component - Reusable back navigation button
|
|
*
|
|
* @req: UR-007 - Navigate media in library
|
|
* @req: DR-007 - Library browsing screens (navigation)
|
|
*/
|
|
|
|
interface Props {
|
|
onClick: () => void;
|
|
label?: string;
|
|
size?: "sm" | "md" | "lg";
|
|
className?: string;
|
|
}
|
|
|
|
let { onClick, label = "Back", size = "md", className = "" }: Props = $props();
|
|
|
|
const sizeMap = {
|
|
sm: "w-5 h-5",
|
|
md: "w-6 h-6",
|
|
lg: "w-8 h-8",
|
|
};
|
|
</script>
|
|
|
|
<button
|
|
onclick={onClick}
|
|
aria-label={label}
|
|
class={`text-gray-400 hover:text-white transition-colors ${className}`}
|
|
>
|
|
<svg class={`${sizeMap[size]} fill-none stroke-current`} stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
|
|
</svg>
|
|
</button>
|