An AI agent built to do Ralph loops - plan mode for planning and ralph mode for implementing.
dathagerty.com
feat(web): add shared StatusBadge, PriorityBadge, LoadingSpinner, ErrorMessage components
1<script lang="ts">
2 /**
3 * LoadingSpinner component.
4 * A simple CSS-based spinner animation.
5 * Accepts optional size prop (default: 24px).
6 */
7
8 type Props = {
9 size?: string;
10 };
11
12 let { size = '24px' }: Props = $props();
13</script>
14
15<div class="spinner" style="width: {size}; height: {size}">
16 <div class="spinner-inner"></div>
17</div>
18
19<style>
20 .spinner {
21 display: inline-block;
22 }
23
24 .spinner-inner {
25 width: 100%;
26 height: 100%;
27 border: 3px solid #4b5563;
28 border-top-color: #3b82f6;
29 border-radius: 50%;
30 animation: spin 1s linear infinite;
31 }
32
33 @keyframes spin {
34 to {
35 transform: rotate(360deg);
36 }
37 }
38</style>