Files
sonr/internal/gui/elements/inputs.templ
T
228adb7f93 master -> develop (#20)
* Squash merge develop into master

* feat: add automated production release workflow

* feat: add Gitflow workflow for syncing branches

* ci: update workflow runner to latest ubuntu version

* feat: enable buf.build publishing on master and develop branches

---------

Co-authored-by: Prad Nukala <prad@sonr.io>
2024-09-23 12:39:59 -04:00

30 lines
1.9 KiB
Templ

package elements
type InputState int
const (
InputStateDefault InputState = iota
InputStateError
InputStateSuccess
)
templ TextInput(state InputState, label string, placeholder string) {
switch (state) {
case InputStateDefault:
<div class="flex flex-col space-y-1.5 p-6">
<label class="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="name">{ label }</label>
<input type="text" placeholder="{label}" id="name" value="{value}" class="flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-neutral-300 ring-offset-background placeholder:text-neutral-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50"/>
</div>
case InputStateError:
<div class="flex flex-col space-y-1.5 p-6">
<label class="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="name">{ label }</label>
<input type="text" placeholder="{label}" id="name" value="{value}" class="flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-neutral-300 ring-offset-background placeholder:text-neutral-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50"/>
</div>
case InputStateSuccess:
<div class="flex flex-col space-y-1.5 p-6">
<label class="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="name">{ label }</label>
<input type="text" placeholder="{label}" id="name" value="{value}" class="flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-neutral-300 ring-offset-background placeholder:text-neutral-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50"/>
</div>
}
}