extremely claude-assisted go game based on atproto! working on cleaning up and giving a more unique design, still has a bit of a slop vibe to it.
Something went wrong. Try again.
1.9 kB · 96 lines
Svelte
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697<script lang="ts"> interface Props { variant?: 'primary' | 'secondary' | 'ghost'; size?: 'default' | 'small' | 'large'; disabled?: boolean; onclick?: (e: MouseEvent) => void; type?: 'button' | 'submit'; class?: string; children?: any; }
let { variant = 'primary', size = 'default', disabled = false, onclick, type = 'button', class: className = '', children }: Props = $props();</script>
<button {type} {disabled} {onclick} class="btn btn-{variant} btn-{size} {className}"> {@render children?.()}</button>
<style> .btn { border: none; border-radius: 0.5rem; font-weight: 600; cursor: pointer; transition: all 0.6s ease; font-family: var(--font-heading); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-default { padding: 0.875rem 1.75rem; font-size: 1rem; }
.btn-small { padding: 0.5rem 1rem; font-size: 0.875rem; }
.btn-large { padding: 1rem 2rem; font-size: 1.125rem; }
.btn-primary { background: linear-gradient(135deg, var(--sky-apricot-dark) 0%, var(--sky-apricot) 100%); color: white; box-shadow: 0 2px 8px rgba(229, 168, 120, 0.3); }
.btn-primary:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(229, 168, 120, 0.5); filter: brightness(1.05); }
.btn-secondary { background: var(--sky-cloud); color: var(--sky-slate); border: 1px solid var(--sky-blue-pale); }
.btn-secondary:hover:not(:disabled) { background: var(--sky-blue-pale); color: var(--sky-slate-dark); transform: translateY(-2px); }
.btn-ghost { background: none; color: var(--sky-slate); border: none; }
.btn-ghost:hover:not(:disabled) { background: var(--sky-cloud); color: var(--sky-slate-dark); }</style>