vikingowl
49033560fa
- Add dynamic MR12/MR15 halftime calculation to RoundTimeline component - Fix TrackPlayerModal API signature (remove shareCode, change isOpen to open binding) - Update Player types for string IDs and add ban fields (vac_count, vac_date, game_ban_count, game_ban_date) - Add target/rel props to Button component for external links - Enhance homepage with processing matches indicator - Update preferences store for string player IDs - Document Phase 5 progress and TypeScript fixes in TODO.md 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
61 lines
1.7 KiB
Svelte
61 lines
1.7 KiB
Svelte
<script lang="ts">
|
|
import type { Snippet } from 'svelte';
|
|
|
|
interface Props {
|
|
variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
|
|
size?: 'sm' | 'md' | 'lg';
|
|
href?: string;
|
|
type?: 'button' | 'submit' | 'reset';
|
|
disabled?: boolean;
|
|
class?: string;
|
|
onclick?: () => void;
|
|
target?: string;
|
|
rel?: string;
|
|
children: Snippet;
|
|
}
|
|
|
|
let {
|
|
variant = 'primary',
|
|
size = 'md',
|
|
href,
|
|
type = 'button',
|
|
disabled = false,
|
|
class: className = '',
|
|
onclick,
|
|
target,
|
|
rel,
|
|
children
|
|
}: Props = $props();
|
|
|
|
const baseClasses =
|
|
'inline-flex items-center justify-center font-semibold transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-base-100 disabled:opacity-50 disabled:cursor-not-allowed';
|
|
|
|
const variantClasses = {
|
|
primary:
|
|
'bg-primary text-white hover:bg-primary-focus focus:ring-primary shadow-sm hover:shadow-lg hover:shadow-primary/30',
|
|
secondary:
|
|
'bg-secondary text-white hover:bg-secondary-focus focus:ring-secondary shadow-sm hover:shadow-lg hover:shadow-secondary/30',
|
|
ghost:
|
|
'bg-transparent border border-base-300 text-base-content hover:bg-base-300 hover:border-primary focus:ring-primary',
|
|
danger: 'bg-error text-white hover:bg-error/90 focus:ring-error shadow-sm hover:shadow-lg'
|
|
};
|
|
|
|
const sizeClasses = {
|
|
sm: 'px-3 py-1.5 text-sm rounded',
|
|
md: 'px-4 py-2 text-base rounded-md',
|
|
lg: 'px-6 py-3 text-lg rounded-lg'
|
|
};
|
|
|
|
const classes = `${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${className}`;
|
|
</script>
|
|
|
|
{#if href}
|
|
<a {href} {target} {rel} class={classes} aria-disabled={disabled}>
|
|
{@render children()}
|
|
</a>
|
|
{:else}
|
|
<button {type} {disabled} {onclick} class={classes}>
|
|
{@render children()}
|
|
</button>
|
|
{/if}
|