GOAT Stack Examples

templ Button(text string, classes string) {
    <button class={ "px-4 py-2 rounded hover:opacity-80 transition duration-300 " + classes }>{ text }</button>
}

// Usage in another template:
@Button("Primary", "bg-blue-500 text-white")
@Button("Secondary", "bg-gray-200 text-gray-800")
@Button("Outline", "border border-gray-300 text-gray-700")

templ ToggleSwitch(label string) {
    <div x-data="{ isOn: false }" class="flex items-center space-x-4">
        <span class="text-sm font-medium text-gray-900 dark:text-gray-300">{ label }</span>
        <button 
            @click="isOn = !isOn" 
            :class="isOn ? 'bg-blue-600' : 'bg-gray-200'"
            class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
        >
            <span 
                :class="isOn ? 'translate-x-5' : 'translate-x-0'"
                class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
            ></span>
        </button>
        <span x-text="isOn ? 'ON' : 'OFF'" class="text-sm font-medium text-gray-900 dark:text-gray-300"></span>
    </div>
}

// Usage in another template:
@ToggleSwitch("Toggle Me")

templ Counter() {
    <div x-data="{ count: 0 }" class="text-center">
        <p class="text-2xl font-bold mb-4">Count: <span x-text="count"></span></p>
        <div class="space-x-2">
            <button @click="count++" class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 transition duration-300">Increment</button>
            <button @click="count--" class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600 transition duration-300">Decrement</button>
        </div>
    </div>
}

// Usage in another template:
@Counter()

templ Modal(buttonText, title, content string) {
    <div x-data="{ isOpen: false }">
        <button @click="isOpen = true" class="bg-purple-500 text-white px-4 py-2 rounded hover:bg-purple-600 transition duration-300">{ buttonText }</button>
        
        <div x-show="isOpen" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center" style="display: none;">
            <div class="bg-white p-6 rounded-lg shadow-lg">
                <h3 class="text-lg font-semibold mb-2">{ title }</h3>
                <p class="mb-4">{ content }</p>
                <button @click="isOpen = false" class="bg-gray-300 text-gray-800 px-4 py-2 rounded hover:bg-gray-400 transition duration-300">Close</button>
            </div>
        </div>
    </div>
}

// Usage in another template:
@Modal("Open Modal", "Modal Title", "This is the modal content.")