phishingclub/frontend/src/lib/components/IconButton.svelte

<script>
	export let variant = 'blue'; // blue, green, orange, red, gray
	export let icon = 'edit'; // edit, close, anonymize, export, upload, delete, copy, view
	export let disabled = false;
	export let type = 'button';

	// color mappings for variants
	const variantClasses = {
		blue: 'bg-blue-600 hover:bg-blue-700 focus:ring-blue-500',
		green: 'bg-green-700 hover:bg-green-800 focus:ring-green-600',
		orange: 'bg-orange-600 hover:bg-orange-700 focus:ring-orange-500',
		red: 'bg-red-600 hover:bg-red-700 focus:ring-red-500',
		gray: 'bg-gray-600 hover:bg-gray-700 focus:ring-gray-500'
	};

	$: colorClass = variantClasses[variant] || variantClasses.blue;
</script>

<button
	{type}
	{disabled}
	on:click
	class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white {colorClass} focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
>
	{#if icon === 'edit'}
		<svg
			xmlns="http://www.w3.org/2000/svg"
			class="h-4 w-4 mr-2"
			fill="none"
			viewBox="0 0 24 24"
			stroke="currentColor"
		>
			<path
				stroke-linecap="round"
				stroke-linejoin="round"
				stroke-width="2"
				d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
			/>
		</svg>
	{:else if icon === 'close'}
		<svg
			xmlns="http://www.w3.org/2000/svg"
			class="h-4 w-4 mr-2"
			fill="none"
			viewBox="0 0 24 24"
			stroke="currentColor"
		>
			<path
				stroke-linecap="round"
				stroke-linejoin="round"
				stroke-width="2"
				d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
			/>
		</svg>
	{:else if icon === 'anonymize'}
		<svg
			xmlns="http://www.w3.org/2000/svg"
			class="h-4 w-4 mr-2"
			fill="none"
			viewBox="0 0 24 24"
			stroke="currentColor"
		>
			<path
				stroke-linecap="round"
				stroke-linejoin="round"
				stroke-width="2"
				d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
			/>
		</svg>
	{:else if icon === 'export'}
		<svg
			xmlns="http://www.w3.org/2000/svg"
			class="h-4 w-4 mr-2"
			fill="none"
			viewBox="0 0 24 24"
			stroke="currentColor"
		>
			<path
				stroke-linecap="round"
				stroke-linejoin="round"
				stroke-width="2"
				d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
			/>
		</svg>
	{:else if icon === 'upload'}
		<svg
			xmlns="http://www.w3.org/2000/svg"
			class="h-4 w-4 mr-2"
			fill="none"
			viewBox="0 0 24 24"
			stroke="currentColor"
		>
			<path
				stroke-linecap="round"
				stroke-linejoin="round"
				stroke-width="2"
				d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
			/>
		</svg>
	{:else if icon === 'delete'}
		<svg
			xmlns="http://www.w3.org/2000/svg"
			class="h-4 w-4 mr-2"
			fill="none"
			viewBox="0 0 24 24"
			stroke="currentColor"
		>
			<path
				stroke-linecap="round"
				stroke-linejoin="round"
				stroke-width="2"
				d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
			/>
		</svg>
	{:else if icon === 'copy'}
		<svg
			xmlns="http://www.w3.org/2000/svg"
			class="h-4 w-4 mr-2"
			fill="none"
			viewBox="0 0 24 24"
			stroke="currentColor"
		>
			<path
				stroke-linecap="round"
				stroke-linejoin="round"
				stroke-width="2"
				d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
			/>
		</svg>
	{:else if icon === 'view'}
		<svg
			xmlns="http://www.w3.org/2000/svg"
			class="h-4 w-4 mr-2"
			fill="none"
			viewBox="0 0 24 24"
			stroke="currentColor"
		>
			<path
				stroke-linecap="round"
				stroke-linejoin="round"
				stroke-width="2"
				d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
			/>
			<path
				stroke-linecap="round"
				stroke-linejoin="round"
				stroke-width="2"
				d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
			/>
		</svg>
	{/if}
	<slot />
</button>