csgowtf/src/lib/components/ui/Card.svelte

<script lang="ts">
	import type { Snippet } from 'svelte';

	interface Props {
		variant?: 'default' | 'elevated' | 'interactive';
		padding?: 'none' | 'sm' | 'md' | 'lg';
		class?: string;
		onclick?: () => void;
		children: Snippet;
	}

	let {
		variant = 'default',
		padding = 'md',
		class: className = '',
		onclick,
		children
	}: Props = $props();

	const baseClasses = 'bg-base-200 border border-base-300 rounded-md transition-all duration-200';

	const variantClasses = {
		default: 'shadow-sm',
		elevated: 'shadow-lg shadow-black/10',
		interactive:
			'cursor-pointer hover:border-primary hover:shadow-lg hover:shadow-primary/20 hover:-translate-y-0.5'
	};

	const paddingClasses = {
		none: '',
		sm: 'p-3',
		md: 'p-4',
		lg: 'p-6'
	};

	const classes =
		`${baseClasses} ${variantClasses[variant]} ${paddingClasses[padding]} ${className}` +
		(onclick ? ' cursor-pointer' : '');
</script>

{#if onclick}
	<button class={classes} {onclick}>
		{@render children()}
	</button>
{:else}
	<div class={classes}>
		{@render children()}
	</div>
{/if}