H0llyW00dzZ/templui
H0llyW00dzZ/templui
1
0
Fork 0
mirror of https://github.com/axzilla/templui.git synced 2025-02-21 00:32:58 +00:00
Code

change: use own input components on tabs example

Browse Source
This commit is contained in:
“axzilla” 2024-10-07 09:02:02 +02:00
parent d29ab2eb3e
commit 4034004050
2 changed files with 69 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -4,6 +4,7 @@
- Added: Input component
- Changed: Add button type prop
- Changed: Use own input component on tabs example
## 2024-10-06

102
internals/ui/showcase/tabs.templ
View File

@ -26,45 +26,79 @@ templ TabsShowcase() {
}
templ AccountTab() {
<div class="border border-border rounded-lg shadow-sm bg-card text-card-foreground">
<div class="flex flex-col space-y-1.5 p-6">
<h3 class="text-lg font-semibold leading-none tracking-tight">Account</h3>
<p class="text-sm text-muted-foreground">Make changes to your account here. Click save when you're done.</p>
</div>
<div class="p-6 pt-0 space-y-2">
<div class="space-y-1">
<label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="name">Name</label>
<input type="text" placeholder="Name" id="name" value="John Doe" class="flex w-full h-10 px-3 py-2 text-sm bg-background border border-input rounded-md ring-offset-background placeholder:text-muted-foreground focus:border-ring focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"/>
@components.Card(components.CardProps{}) {
@components.CardHeader() {
@components.CardTitle() {
Account
}
@components.CardDescription() {
Make changes to your account here. Click save when you're done.
}
}
@components.CardContent() {
<div class="space-y-2">
<div class="space-y-1">
<label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="name">Name</label>
@components.Input(components.InputProps{
Type: components.Text,
Placeholder: "Name",
ID: "name",
Value: "John Doe",
})
</div>
<div class="space-y-1">
<label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="username">Username</label>
@components.Input(components.InputProps{
Type: components.Text,
Placeholder: "Username",
ID: "username",
Value: "@johndoe",
})
</div>
</div>
<div class="space-y-1">
<label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="username">Username</label>
<input type="text" placeholder="Username" id="username" value="@johndoe" class="flex w-full h-10 px-3 py-2 text-sm bg-background border border-input rounded-md ring-offset-background placeholder:text-muted-foreground focus:border-ring focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"/>
</div>
</div>
<div class="flex items-center p-6 pt-0">
}
@components.CardFooter() {
@components.Button(components.ButtonProps{Text: "Save changes"})
</div>
</div>
}
}
}
templ PasswordTab() {
<div class="border border-border rounded-lg shadow-sm bg-card text-card-foreground">
<div class="flex flex-col space-y-1.5 p-6">
<h3 class="text-lg font-semibold leading-none tracking-tight">Password</h3>
<p class="text-sm text-muted-foreground">Change your password here. After saving, you'll be logged out.</p>
</div>
<div class="p-6 pt-0 space-y-2">
<div class="space-y-1">
<label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="current_password">Current Password</label>
<input type="password" placeholder="Current Password" id="current_password" class="flex w-full h-10 px-3 py-2 text-sm bg-background border border-input rounded-md ring-offset-background placeholder:text-muted-foreground focus:border-ring focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"/>
@components.Card(components.CardProps{}) {
@components.CardHeader() {
@components.CardTitle() {
Password
}
@components.CardDescription() {
Change your password here. After saving, you'll be logged out.
}
}
@components.CardContent() {
<div class="space-y-2">
<div class="space-y-1">
<label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="current_password">
Current Password
</label>
@components.Input(components.InputProps{
Type: components.Password,
Placeholder: "Current Password",
ID: "current_password",
})
</div>
<div class="space-y-1">
<label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="new_password">
New Password
</label>
@components.Input(components.InputProps{
Type: components.Password,
Placeholder: "New Password",
ID: "new_password",
})
</div>
</div>
<div class="space-y-1">
<label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="new_password">New Password</label>
<input type="password" placeholder="New Password" id="new_password" class="flex w-full h-10 px-3 py-2 text-sm bg-background border border-input rounded-md ring-offset-background placeholder:text-muted-foreground focus:border-ring focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"/>
</div>
</div>
<div class="flex items-center p-6 pt-0">
}
@components.CardFooter() {
@components.Button(components.ButtonProps{Text: "Save password"})
</div>
</div>
}
}
}