vikingowl
6dc12f0c35
- Convert matches page from DaisyUI to neon esports design system - Add colored left borders to cards for instant win/loss/tie scanning - Add player count badges and demo status icons to match cards - Implement filter state preservation across navigation - Add staggered card animations and skeleton loading states - Add slide transition for filter panel - Make cards compact with horizontal layout for better density - Update grid to 4 columns on xl screens - Style DataTable, ShareCodeInput with neon theme - Add external link support to NeonButton 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
77 lines
2.1 KiB
Svelte
77 lines
2.1 KiB
Svelte
<script lang="ts">
|
|
import type { Snippet } from 'svelte';
|
|
|
|
interface Props {
|
|
href?: string;
|
|
variant?: 'blue' | 'gold' | 'red' | 'green';
|
|
size?: 'sm' | 'md' | 'lg';
|
|
children: Snippet;
|
|
onclick?: () => void;
|
|
class?: string;
|
|
external?: boolean;
|
|
}
|
|
|
|
let {
|
|
href,
|
|
variant = 'blue',
|
|
size = 'md',
|
|
children,
|
|
onclick,
|
|
class: className = '',
|
|
external = false
|
|
}: Props = $props();
|
|
|
|
const variantClasses = {
|
|
blue: {
|
|
bg: 'bg-neon-blue',
|
|
text: 'text-void',
|
|
glow: 'hover:shadow-[0_0_30px_rgba(0,212,255,0.5)]',
|
|
border: 'border-neon-blue'
|
|
},
|
|
gold: {
|
|
bg: 'bg-neon-gold',
|
|
text: 'text-void',
|
|
glow: 'hover:shadow-[0_0_30px_rgba(255,215,0,0.5)]',
|
|
border: 'border-neon-gold'
|
|
},
|
|
red: {
|
|
bg: 'bg-neon-red',
|
|
text: 'text-white',
|
|
glow: 'hover:shadow-[0_0_30px_rgba(255,51,102,0.5)]',
|
|
border: 'border-neon-red'
|
|
},
|
|
green: {
|
|
bg: 'bg-neon-green',
|
|
text: 'text-void',
|
|
glow: 'hover:shadow-[0_0_30px_rgba(0,255,136,0.5)]',
|
|
border: 'border-neon-green'
|
|
}
|
|
};
|
|
|
|
const sizeClasses = {
|
|
sm: 'px-4 py-2 text-sm',
|
|
md: 'px-6 py-3 text-base',
|
|
lg: 'px-8 py-4 text-lg'
|
|
};
|
|
|
|
const classes = variantClasses[variant];
|
|
const sizeClass = sizeClasses[size];
|
|
</script>
|
|
|
|
{#if href}
|
|
<a
|
|
{href}
|
|
class="inline-flex items-center justify-center rounded-lg font-semibold transition-all duration-300 hover:scale-105 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-void motion-reduce:transition-none motion-reduce:hover:scale-100 {classes.bg} {classes.text} {classes.glow} {sizeClass} {className}"
|
|
{...external ? { target: '_blank', rel: 'noopener noreferrer' } : {}}
|
|
>
|
|
{@render children()}
|
|
</a>
|
|
{:else}
|
|
<button
|
|
{onclick}
|
|
class="inline-flex items-center justify-center rounded-lg font-semibold transition-all duration-300 hover:scale-105 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-void motion-reduce:transition-none motion-reduce:hover:scale-100 {classes.bg} {classes.text} {classes.glow} {sizeClass} {className}"
|
|
>
|
|
{@render children()}
|
|
</button>
|
|
{/if}
|