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

docs: update to new showcase format for tabs, textarea, toggle

Browse Source
This commit is contained in:
axzilla 2024-11-28 14:04:38 +07:00
parent 0543784665
commit 3059248145
20 changed files with 292 additions and 272 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
assets/css/output.css
View File

@ -1022,10 +1022,6 @@ body {
max-width: 80rem;
}
.max-w-lg {
max-width: 32rem;
}
.max-w-md {
max-width: 28rem;
}

1
internals/ui/pages/slider.templ
View File

@ -12,7 +12,6 @@ templ Slider() {
Name: "Slider",
Description: templ.Raw("An input where the user selects a value from within a given range."),
}) {
// default, with value, with label, with steps, with label and value, disabled
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "Default",
ShowcaseFile: showcase.SliderDefault(),

36
internals/ui/pages/tabs.templ
View File

@ -4,37 +4,19 @@ import (
"github.com/axzilla/goilerplate/internals/ui/layouts"
"github.com/axzilla/goilerplate/internals/ui/modules"
"github.com/axzilla/goilerplate/internals/ui/showcase"
"github.com/axzilla/goilerplate/pkg/components"
)
templ Tabs() {
@layouts.DocsLayout() {
<div>
<div class="mb-16">
<h1 class="text-3xl font-bold mb-2">Tabs</h1>
<p class="mb-4 text-muted-foreground">A set of layered sections of content—known as tab panels—that are displayed one at a time.</p>
</div>
@components.Tabs(components.TabsProps{
Tabs: []components.Tab{
{
ID: "preview",
Title: "Preview",
Content: showcase.TabsShowcase(),
},
{
ID: "code",
Title: "Code",
Content: modules.CodeSnippetFromEmbedded("tabs.templ", "go", showcase.TemplFiles),
},
{
ID: "component",
Title: "Component",
Content: modules.CodeSnippetFromEmbedded("tabs.templ", "go", components.TemplFiles),
},
},
TabsContainerClass: "md:w-1/2",
ContentContainerClass: "w-full",
@modules.PageWrapper(modules.PageWrapperProps{
Name: "Tabs",
Description: templ.Raw("A set of layered sections of content—known as tab panels—that are displayed one at a time."),
}) {
@modules.ExampleWrapper(modules.ExampleWrapperProps{
ShowcaseFile: showcase.Tabs(),
PreviewCodeFile: "tabs.templ",
ComponentCodeFile: "tabs.templ",
})
</div>
}
}
}

85
internals/ui/pages/textarea.templ
View File

@ -4,37 +4,68 @@ import (
"github.com/axzilla/goilerplate/internals/ui/layouts"
"github.com/axzilla/goilerplate/internals/ui/modules"
"github.com/axzilla/goilerplate/internals/ui/showcase"
"github.com/axzilla/goilerplate/pkg/components"
)
templ Textarea() {
@layouts.DocsLayout() {
<div>
<div class="mb-16">
<h1 class="text-3xl font-bold mb-2">Textarea</h1>
<p class="mb-4 text-muted-foreground">A multi-line text input field that allows users to enter longer text content.</p>
</div>
@components.Tabs(components.TabsProps{
Tabs: []components.Tab{
{
ID: "preview",
Title: "Preview",
Content: showcase.TextareaShowcase(),
},
{
ID: "code",
Title: "Code",
Content: modules.CodeSnippetFromEmbedded("textarea.templ", "go", showcase.TemplFiles),
},
{
ID: "component",
Title: "Component",
Content: modules.CodeSnippetFromEmbedded("textarea.templ", "go", components.TemplFiles),
},
},
TabsContainerClass: "md:w-1/2",
ContentContainerClass: "w-full",
@modules.PageWrapper(modules.PageWrapperProps{
Name: "Textarea",
Description: templ.Raw("A multi-line text input field that allows users to enter longer text content."),
}) {
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "Default",
ShowcaseFile: showcase.TextareaDefault(),
ShowcaseClass: "w-96",
PreviewCodeFile: "textarea_default.templ",
ComponentCodeFile: "textarea.templ",
})
</div>
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "With Rows",
ShowcaseFile: showcase.TextareaWithRows(),
ShowcaseClass: "w-96",
PreviewCodeFile: "textarea_with_rows.templ",
ComponentCodeFile: "textarea.templ",
})
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "With Label",
ShowcaseFile: showcase.TextareaWithLabel(),
ShowcaseClass: "w-96",
PreviewCodeFile: "textarea_with_label.templ",
ComponentCodeFile: "textarea.templ",
})
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "With Description",
ShowcaseFile: showcase.TextareaWithDescription(),
ShowcaseClass: "w-96",
PreviewCodeFile: "textarea_with_description.templ",
ComponentCodeFile: "textarea.templ",
})
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "With Error",
ShowcaseFile: showcase.TextareaWithError(),
ShowcaseClass: "w-96",
PreviewCodeFile: "textarea_with_error.templ",
ComponentCodeFile: "textarea.templ",
})
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "Auto Resize",
ShowcaseFile: showcase.TextareaAutoResize(),
ShowcaseClass: "w-96",
PreviewCodeFile: "textarea_auto_resize.templ",
ComponentCodeFile: "textarea.templ",
})
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "Disabled",
ShowcaseFile: showcase.TextareaDisabled(),
ShowcaseClass: "w-96",
PreviewCodeFile: "textarea_disabled.templ",
ComponentCodeFile: "textarea.templ",
})
}
}
}

63
internals/ui/pages/toggle.templ
View File

@ -4,39 +4,44 @@ import (
"github.com/axzilla/goilerplate/internals/ui/layouts"
"github.com/axzilla/goilerplate/internals/ui/modules"
"github.com/axzilla/goilerplate/internals/ui/showcase"
"github.com/axzilla/goilerplate/pkg/components"
)
templ Toggle() {
@layouts.DocsLayout() {
<div>
<div class="mb-16">
<h1 class="text-3xl font-bold mb-2">Toggle</h1>
<p class="mb-4 text-muted-foreground">
A control that allows users to toggle between two states, typically used for enabling or disabling features.
</p>
</div>
@components.Tabs(components.TabsProps{
Tabs: []components.Tab{
{
ID: "preview",
Title: "Preview",
Content: showcase.ToggleShowcase(),
},
{
ID: "code",
Title: "Code",
Content: modules.CodeSnippetFromEmbedded("toggle.templ", "go", showcase.TemplFiles),
},
{
ID: "component",
Title: "Component",
Content: modules.CodeSnippetFromEmbedded("toggle.templ", "go", components.TemplFiles),
},
},
TabsContainerClass: "md:w-1/2",
ContentContainerClass: "w-full",
@modules.PageWrapper(modules.PageWrapperProps{
Name: "Toggle",
Description: templ.Raw("A control that allows users to toggle between two states, typically used for enabling or disabling features."),
}) {
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "Default",
ShowcaseFile: showcase.ToggleDefault(),
PreviewCodeFile: "toggle_default.templ",
ComponentCodeFile: "toggle.templ",
})
</div>
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "Label Left",
ShowcaseFile: showcase.ToggleLabelLeft(),
PreviewCodeFile: "toggle_label_left.templ",
ComponentCodeFile: "toggle.templ",
})
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "Label Right",
ShowcaseFile: showcase.ToggleLabelRight(),
PreviewCodeFile: "toggle_label_right.templ",
ComponentCodeFile: "toggle.templ",
})
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "Checked",
ShowcaseFile: showcase.ToggleChecked(),
PreviewCodeFile: "toggle_checked.templ",
ComponentCodeFile: "toggle.templ",
})
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "Disabled",
ShowcaseFile: showcase.ToggleDisabled(),
PreviewCodeFile: "toggle_disabled.templ",
ComponentCodeFile: "toggle.templ",
})
}
}
}

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

@ -2,25 +2,23 @@ package showcase
import "github.com/axzilla/goilerplate/pkg/components"
templ TabsShowcase() {
<div class="flex justify-center items-center border rounded-md py-16 px-4">
@components.Tabs(components.TabsProps{
Tabs: []components.Tab{
{
ID: "account",
Title: "Account",
Content: AccountTab(),
},
{
ID: "password",
Title: "Password",
Content: PasswordTab(),
},
templ Tabs() {
@components.Tabs(components.TabsProps{
Tabs: []components.Tab{
{
ID: "account",
Title: "Account",
Content: AccountTab(),
},
TabsContainerClass: "w-full max-w-xs",
ContentContainerClass: "w-full max-w-xs",
})
</div>
{
ID: "password",
Title: "Password",
Content: PasswordTab(),
},
},
TabsContainerClass: "w-full max-w-xs",
ContentContainerClass: "w-full max-w-xs",
})
}
templ AccountTab() {
@ -34,25 +32,21 @@ templ AccountTab() {
}
}
@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.InputTypeText,
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.InputTypeText,
Placeholder: "Username",
ID: "username",
Value: "@johndoe",
})
</div>
<div class="flex flex-col gap-4">
@components.Input(components.InputProps{
Type: components.InputTypeText,
Placeholder: "Name",
ID: "name",
Value: "John Doe",
Label: "Name",
})
@components.Input(components.InputProps{
Type: components.InputTypeText,
Placeholder: "Username",
ID: "username",
Value: "@johndoe",
Label: "Username",
})
</div>
}
@components.CardFooter() {
@ -72,27 +66,19 @@ templ PasswordTab() {
}
}
@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.InputTypePassword,
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.InputTypePassword,
Placeholder: "New Password",
ID: "new_password",
})
</div>
<div class="flex flex-col gap-4">
@components.Input(components.InputProps{
Type: components.InputTypePassword,
Placeholder: "Current Password",
ID: "current_password",
Label: "Current Password",
})
@components.Input(components.InputProps{
Type: components.InputTypePassword,
Placeholder: "New Password",
ID: "new_password",
Label: "New Password",
})
</div>
}
@components.CardFooter() {

71
internals/ui/showcase/textarea.templ
View File

@ -1,71 +0,0 @@
package showcase
import "github.com/axzilla/goilerplate/pkg/components"
templ TextareaShowcase() {
<div class="flex justify-center items-center border rounded-md py-16 px-4">
<div class="space-y-8 w-full max-w-lg">
<div>
<h2 class="font-semibold mb-4">Default Textarea (3 rows)</h2>
@components.Textarea(components.TextareaProps{
ID: "default",
Name: "default",
Placeholder: "Type your message here.",
})
</div>
<div>
<h2 class="font-semibold mb-4">Tall Textarea (6 rows)</h2>
@components.Textarea(components.TextareaProps{
ID: "tall",
Name: "tall",
Placeholder: "Type your message here.",
Rows: 6,
})
</div>
<div>
<h2 class="font-semibold mb-4">With Label & Description</h2>
@components.Textarea(components.TextareaProps{
ID: "with-label",
Name: "with-label",
Label: "Your Message",
Description: "Write a detailed description of your request.",
Placeholder: "Type your message here.",
Rows: 4,
})
</div>
<div>
<h2 class="font-semibold mb-4">With Error</h2>
@components.Textarea(components.TextareaProps{
ID: "with-error",
Name: "with-error",
Label: "Your Message",
Error: "Message is required",
Placeholder: "Type your message here.",
})
</div>
<div>
<h2 class="font-semibold mb-4">Auto-resize</h2>
@components.Textarea(components.TextareaProps{
ID: "auto-resize",
Name: "auto-resize",
Label: "Auto-resizing Textarea",
Description: "This textarea will grow as you type.",
Placeholder: "Start typing to see the magic...",
Rows: 3,
AutoResize: true,
})
</div>
<div>
<h2 class="font-semibold mb-4">Disabled</h2>
@components.Textarea(components.TextareaProps{
ID: "disabled",
Name: "disabled",
Label: "Disabled Textarea",
Value: "This textarea is disabled",
Rows: 3,
Attributes: templ.Attributes{"disabled": "true"},
})
</div>
</div>
</div>
}

15
internals/ui/showcase/textarea_auto_resize.templ Normal file
View File

@ -0,0 +1,15 @@
package showcase
import "github.com/axzilla/goilerplate/pkg/components"
templ TextareaAutoResize() {
@components.Textarea(components.TextareaProps{
ID: "auto-resize",
Name: "auto-resize",
Label: "Your Message",
Description: "This textarea will grow as you type.",
Placeholder: "Start typing to see the magic...",
Rows: 3,
AutoResize: true,
})
}

11
internals/ui/showcase/textarea_default.templ Normal file
View File

@ -0,0 +1,11 @@
package showcase
import "github.com/axzilla/goilerplate/pkg/components"
templ TextareaDefault() {
@components.Textarea(components.TextareaProps{
ID: "default",
Name: "default",
Placeholder: "Type your message here.",
})
}

14
internals/ui/showcase/textarea_disabled.templ Normal file
View File

@ -0,0 +1,14 @@
package showcase
import "github.com/axzilla/goilerplate/pkg/components"
templ TextareaDisabled() {
@components.Textarea(components.TextareaProps{
ID: "disabled",
Name: "disabled",
Label: "Disabled Textarea",
Value: "This textarea is disabled",
Rows: 3,
Attributes: templ.Attributes{"disabled": "true"},
})
}

13
internals/ui/showcase/textarea_with_description.templ Normal file
View File

@ -0,0 +1,13 @@
package showcase
import "github.com/axzilla/goilerplate/pkg/components"
templ TextareaWithDescription() {
@components.Textarea(components.TextareaProps{
ID: "with-label",
Name: "with-label",
Label: "Your Message",
Description: "Write a detailed description of your request.",
Rows: 4,
})
}

13
internals/ui/showcase/textarea_with_error.templ Normal file
View File

@ -0,0 +1,13 @@
package showcase
import "github.com/axzilla/goilerplate/pkg/components"
templ TextareaWithError() {
@components.Textarea(components.TextareaProps{
ID: "with-error",
Name: "with-error",
Label: "Your Message",
Error: "Message is required",
Placeholder: "Type your message here.",
})
}

13
internals/ui/showcase/textarea_with_label.templ Normal file
View File

@ -0,0 +1,13 @@
package showcase
import "github.com/axzilla/goilerplate/pkg/components"
templ TextareaWithLabel() {
@components.Textarea(components.TextareaProps{
ID: "with-label",
Name: "with-label",
Label: "Your Message",
Placeholder: "Type your message here.",
Rows: 4,
})
}

12
internals/ui/showcase/textarea_with_rows.templ Normal file
View File

@ -0,0 +1,12 @@
package showcase
import "github.com/axzilla/goilerplate/pkg/components"
templ TextareaWithRows() {
@components.Textarea(components.TextareaProps{
ID: "tall",
Name: "tall",
Placeholder: "Type your message here.",
Rows: 6,
})
}

55
internals/ui/showcase/toggle.templ
View File

@ -1,55 +0,0 @@
package showcase
import "github.com/axzilla/goilerplate/pkg/components"
templ ToggleShowcase() {
<div class="flex justify-center items-center border rounded-md py-16 px-4">
<div>
<div class="mb-8">
<h2 class="font-semibold mb-2">Without Label</h2>
@components.Toggle(components.ToggleProps{
ID: "toggle",
Name: "toggle",
})
</div>
<div class="mb-8">
<h2 class="font-semibold mb-2">Label Placements</h2>
<div class="flex flex-col gap-2">
@components.Toggle(components.ToggleProps{
ID: "toggle-right",
Name: "toggle-right",
LabelRight: "Label Right",
})
@components.Toggle(components.ToggleProps{
ID: "toggle-left",
Name: "toggle-left",
LabelLeft: "Label Left",
})
</div>
</div>
<div>
<h2 class="font-semibold mb-4">States</h2>
<div class="flex flex-col gap-2" x-data="{'xxx': ''}">
@components.Toggle(components.ToggleProps{
ID: "toggle-checked",
Name: "toggle-checked",
LabelRight: "Checked Toggle",
Attributes: templ.Attributes{"x-bind:checked": "true"},
})
@components.Toggle(components.ToggleProps{
ID: "toggle-disabled",
Name: "toggle-disabled",
LabelRight: "Disabled Toggle",
Attributes: templ.Attributes{"disabled": "true"},
})
@components.Toggle(components.ToggleProps{
ID: "toggle-disabled-checked",
Name: "toggle-disabled-checked",
LabelRight: "Disabled Checked Toggle",
Attributes: templ.Attributes{"checked": "true", "disabled": true},
})
</div>
</div>
</div>
</div>
}

12
internals/ui/showcase/toggle_checked.templ Normal file
View File

@ -0,0 +1,12 @@
package showcase
import "github.com/axzilla/goilerplate/pkg/components"
templ ToggleChecked() {
@components.Toggle(components.ToggleProps{
ID: "toggle-checked",
Name: "toggle-checked",
LabelRight: "Checked Toggle",
Attributes: templ.Attributes{"x-bind:checked": "true"},
})
}

10
internals/ui/showcase/toggle_default.templ Normal file
View File

@ -0,0 +1,10 @@
package showcase
import "github.com/axzilla/goilerplate/pkg/components"
templ ToggleDefault() {
@components.Toggle(components.ToggleProps{
ID: "toggle",
Name: "toggle",
})
}

12
internals/ui/showcase/toggle_disabled.templ Normal file
View File

@ -0,0 +1,12 @@
package showcase
import "github.com/axzilla/goilerplate/pkg/components"
templ ToggleDisabled() {
@components.Toggle(components.ToggleProps{
ID: "toggle-disabled",
Name: "toggle-disabled",
LabelRight: "Disabled Toggle",
Attributes: templ.Attributes{"disabled": "true"},
})
}

11
internals/ui/showcase/toggle_label_left.templ Normal file
View File

@ -0,0 +1,11 @@
package showcase
import "github.com/axzilla/goilerplate/pkg/components"
templ ToggleLabelLeft() {
@components.Toggle(components.ToggleProps{
ID: "toggle-left",
Name: "toggle-left",
LabelLeft: "Label Left",
})
}

11
internals/ui/showcase/toggle_label_right.templ Normal file
View File

@ -0,0 +1,11 @@
package showcase
import "github.com/axzilla/goilerplate/pkg/components"
templ ToggleLabelRight() {
@components.Toggle(components.ToggleProps{
ID: "toggle-right",
Name: "toggle-right",
LabelRight: "Label Right",
})
}