goose.art
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.
1<script lang="ts">
2 interface Props {
3 variant?: 'primary' | 'secondary' | 'ghost';
4 size?: 'default' | 'small' | 'large';
5 disabled?: boolean;
6 onclick?: (e: MouseEvent) => void;
7 type?: 'button' | 'submit';
8 class?: string;
9 children?: any;
10 }
11
12 let {
13 variant = 'primary',
14 size = 'default',
15 disabled = false,
16 onclick,
17 type = 'button',
18 class: className = '',
19 children
20 }: Props = $props();
21</script>
22
23<button
24 {type}
25 {disabled}
26 {onclick}
27 class="btn btn-{variant} btn-{size} {className}"
28>
29 {@render children?.()}
30</button>
31
32<style>
33 .btn {
34 border: none;
35 border-radius: 0.5rem;
36 font-weight: 600;
37 cursor: pointer;
38 transition: all 0.6s ease;
39 font-family: var(--font-heading);
40 }
41
42 .btn:disabled {
43 opacity: 0.5;
44 cursor: not-allowed;
45 }
46
47 .btn-default {
48 padding: 0.875rem 1.75rem;
49 font-size: 1rem;
50 }
51
52 .btn-small {
53 padding: 0.5rem 1rem;
54 font-size: 0.875rem;
55 }
56
57 .btn-large {
58 padding: 1rem 2rem;
59 font-size: 1.125rem;
60 }
61
62 .btn-primary {
63 background: linear-gradient(135deg, var(--sky-apricot-dark) 0%, var(--sky-apricot) 100%);
64 color: white;
65 box-shadow: 0 2px 8px rgba(229, 168, 120, 0.3);
66 }
67
68 .btn-primary:hover:not(:disabled) {
69 transform: translateY(-3px);
70 box-shadow: 0 6px 16px rgba(229, 168, 120, 0.5);
71 filter: brightness(1.05);
72 }
73
74 .btn-secondary {
75 background: var(--sky-cloud);
76 color: var(--sky-slate);
77 border: 1px solid var(--sky-blue-pale);
78 }
79
80 .btn-secondary:hover:not(:disabled) {
81 background: var(--sky-blue-pale);
82 color: var(--sky-slate-dark);
83 transform: translateY(-2px);
84 }
85
86 .btn-ghost {
87 background: none;
88 color: var(--sky-slate);
89 border: none;
90 }
91
92 .btn-ghost:hover:not(:disabled) {
93 background: var(--sky-cloud);
94 color: var(--sky-slate-dark);
95 }
96</style>