package showcase
import (
"github.com/templui/templui/internal/components/card"
"github.com/templui/templui/internal/components/label"
switchcomp "github.com/templui/templui/internal/components/switch"
)
templ SwitchDefault() {
<div class="flex flex-col gap-6">
<!-- Basic switch -->
<div class="flex items-center gap-2">
@switchcomp.Switch(switchcomp.Props{
ID: "airplane-mode",
})
@label.Label(label.Props{
For: "airplane-mode",
}) {
Airplane Mode
}
</div>
<!-- Switch with description -->
<div class="flex items-start gap-3">
@switchcomp.Switch(switchcomp.Props{
ID: "marketing",
Checked: true,
})
<div class="grid gap-1.5 leading-none">
@label.Label(label.Props{
For: "marketing",
}) {
Marketing emails
}
<p class="text-sm text-muted-foreground">
Receive emails about new products, features, and more.
</p>
</div>
</div>
<!-- Disabled switch -->
<div class="flex items-center gap-2">
@switchcomp.Switch(switchcomp.Props{
ID: "disabled",
Disabled: true,
})
@label.Label(label.Props{
For: "disabled",
Class: "opacity-50",
}) {
Disabled Switch
}
</div>
<!-- Switch in a card (Settings-like) -->
@label.Label(label.Props{
For: "notifications",
Class: "block cursor-pointer",
}) {
@card.Card(card.Props{
Class: "hover:bg-muted/50 transition-colors",
}) {
@card.Content(card.ContentProps{
Class: "flex items-center justify-between p-4",
}) {
<div class="space-y-0.5">
<div class="text-sm font-medium">Push Notifications</div>
<div class="text-sm text-muted-foreground">
Receive notifications about your account activity.
</div>
</div>
@switchcomp.Switch(switchcomp.Props{
ID: "notifications",
})
}
}
}
</div>
}