mirror of
https://github.com/axzilla/templui.git
synced 2025-02-21 01:13:05 +00:00
refactor: Make showcase code more modular
- Restructure parts of showcase code - Update documentation on alert, accordion, avatar and button
This commit is contained in:
axzilla
parent
2f68e5d9b8
commit
42cf063537
50
internals/ui/modules/example_wrapper.templ
Normal file
50
internals/ui/modules/example_wrapper.templ
Normal file
@ -0,0 +1,50 @@
|
||||
package modules
|
||||
|
||||
import (
|
||||
"github.com/axzilla/goilerplate/internals/ui/showcase"
|
||||
"github.com/axzilla/goilerplate/pkg/components"
|
||||
)
|
||||
|
||||
type showcaseWrapperProps struct {
|
||||
Content templ.Component
|
||||
}
|
||||
|
||||
templ showcaseWrapper(p showcaseWrapperProps) {
|
||||
<div class="flex justify-center items-center border rounded-md py-16 px-4">
|
||||
@p.Content
|
||||
</div>
|
||||
}
|
||||
|
||||
type ExampleWrapperProps struct {
|
||||
SectionName string
|
||||
ShowcaseFile templ.Component
|
||||
PreviewCodeFile string
|
||||
ComponentCodeFile string
|
||||
}
|
||||
|
||||
templ ExampleWrapper(p ExampleWrapperProps) {
|
||||
<div>
|
||||
<p class="mb-2 font-bold text-muted-foreground">{ p.SectionName }</p>
|
||||
@components.Tabs(components.TabsProps{
|
||||
Tabs: []components.Tab{
|
||||
{
|
||||
ID: "preview",
|
||||
Title: "Preview",
|
||||
Content: showcaseWrapper(showcaseWrapperProps{Content: p.ShowcaseFile}),
|
||||
},
|
||||
{
|
||||
ID: "code",
|
||||
Title: "Code",
|
||||
Content: CodeSnippetFromEmbedded(p.PreviewCodeFile, "go", showcase.TemplFiles),
|
||||
},
|
||||
{
|
||||
ID: "component",
|
||||
Title: "Component",
|
||||
Content: CodeSnippetFromEmbedded(p.ComponentCodeFile, "go", components.TemplFiles),
|
||||
},
|
||||
},
|
||||
TabsContainerClass: "md:w-1/2",
|
||||
ContentContainerClass: "w-full",
|
||||
})
|
||||
</div>
|
||||
}
|
||||
16
internals/ui/modules/page_wrapper.templ
Normal file
16
internals/ui/modules/page_wrapper.templ
Normal file
@ -0,0 +1,16 @@
|
||||
package modules
|
||||
|
||||
type PageWrapperProps struct {
|
||||
Name string
|
||||
Description string
|
||||
}
|
||||
|
||||
templ PageWrapper(p PageWrapperProps) {
|
||||
<div class="mb-16">
|
||||
<h1 class="text-3xl font-bold mb-2">{ p.Name }</h1>
|
||||
<p class="mb-4 text-muted-foreground">{ p.Description }</p>
|
||||
</div>
|
||||
<div class="space-y-8">
|
||||
{ children... }
|
||||
</div>
|
||||
}
|
||||
@ -5,37 +5,20 @@ 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 Accordion() {
|
||||
@layouts.DocsLayout() {
|
||||
<div>
|
||||
<div class="mb-16">
|
||||
<h1 class="text-3xl font-bold mb-2">Accordion</h1>
|
||||
<p class="mb-4 text-muted-foreground">A vertically stacked set of interactive headings that each reveal a section of content.</p>
|
||||
</div>
|
||||
@components.Tabs(components.TabsProps{
|
||||
Tabs: []components.Tab{
|
||||
{
|
||||
ID: "preview",
|
||||
Title: "Preview",
|
||||
Content: showcase.AccordionShowcase(),
|
||||
},
|
||||
{
|
||||
ID: "code",
|
||||
Title: "Code",
|
||||
Content: modules.CodeSnippetFromEmbedded("accordion.templ", "go", showcase.TemplFiles),
|
||||
},
|
||||
{
|
||||
ID: "component",
|
||||
Title: "Component",
|
||||
Content: modules.CodeSnippetFromEmbedded("accordion.templ", "go", components.TemplFiles),
|
||||
},
|
||||
},
|
||||
TabsContainerClass: "md:w-1/2",
|
||||
ContentContainerClass: "w-full",
|
||||
@modules.PageWrapper(modules.PageWrapperProps{
|
||||
Name: "Accordion",
|
||||
Description: "A vertically ds stacked set of interactive headings that each reveal a section of content.",
|
||||
}) {
|
||||
@modules.ExampleWrapper(modules.ExampleWrapperProps{
|
||||
SectionName: "",
|
||||
ShowcaseFile: showcase.Accordion(),
|
||||
PreviewCodeFile: "accordion.templ",
|
||||
ComponentCodeFile: "accordion.templ",
|
||||
})
|
||||
</div>
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,37 +4,26 @@ 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 Alert() {
|
||||
@layouts.DocsLayout() {
|
||||
<div>
|
||||
<div class="mb-16">
|
||||
<h1 class="text-3xl font-bold mb-2">Alert</h1>
|
||||
<p class="mb-4 text-muted-foreground">Displays a callout for user attention, often used for notifications, warnings, or important messages.</p>
|
||||
</div>
|
||||
@components.Tabs(components.TabsProps{
|
||||
Tabs: []components.Tab{
|
||||
{
|
||||
ID: "preview",
|
||||
Title: "Preview",
|
||||
Content: showcase.AlertShowcase(),
|
||||
},
|
||||
{
|
||||
ID: "code",
|
||||
Title: "Code",
|
||||
Content: modules.CodeSnippetFromEmbedded("alert.templ", "go", showcase.TemplFiles),
|
||||
},
|
||||
{
|
||||
ID: "component",
|
||||
Title: "Component",
|
||||
Content: modules.CodeSnippetFromEmbedded("alert.templ", "go", components.TemplFiles),
|
||||
},
|
||||
},
|
||||
TabsContainerClass: "md:w-1/2",
|
||||
ContentContainerClass: "w-full",
|
||||
@modules.PageWrapper(modules.PageWrapperProps{
|
||||
Name: "Alert",
|
||||
Description: "Displays a callout for user attention, often used for notifications, warnings, or important messages.",
|
||||
}) {
|
||||
@modules.ExampleWrapper(modules.ExampleWrapperProps{
|
||||
SectionName: "Default",
|
||||
ShowcaseFile: showcase.AlertDefault(),
|
||||
PreviewCodeFile: "alert_default.templ",
|
||||
ComponentCodeFile: "alert.templ",
|
||||
})
|
||||
</div>
|
||||
@modules.ExampleWrapper(modules.ExampleWrapperProps{
|
||||
SectionName: "Destructive",
|
||||
ShowcaseFile: showcase.AlertDestructive(),
|
||||
PreviewCodeFile: "alert_destructive.templ",
|
||||
ComponentCodeFile: "alert.templ",
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,37 +4,32 @@ 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 Avatar() {
|
||||
@layouts.DocsLayout() {
|
||||
<div>
|
||||
<div class="mb-16">
|
||||
<h1 class="text-3xl font-bold mb-2">Avatar</h1>
|
||||
<p class="mb-4 text-muted-foreground">An image element with a fallback for representing the user.</p>
|
||||
</div>
|
||||
@components.Tabs(components.TabsProps{
|
||||
Tabs: []components.Tab{
|
||||
{
|
||||
ID: "preview",
|
||||
Title: "Preview",
|
||||
Content: showcase.AvatarShowcase(),
|
||||
},
|
||||
{
|
||||
ID: "code",
|
||||
Title: "Code",
|
||||
Content: modules.CodeSnippetFromEmbedded("avatar.templ", "go", showcase.TemplFiles),
|
||||
},
|
||||
{
|
||||
ID: "component",
|
||||
Title: "Component",
|
||||
Content: modules.CodeSnippetFromEmbedded("avatar.templ", "go", components.TemplFiles),
|
||||
},
|
||||
},
|
||||
TabsContainerClass: "md:w-1/2",
|
||||
ContentContainerClass: "w-full",
|
||||
@modules.PageWrapper(modules.PageWrapperProps{
|
||||
Name: "Avatar",
|
||||
Description: "An image element with a fallback for representing the user.",
|
||||
}) {
|
||||
@modules.ExampleWrapper(modules.ExampleWrapperProps{
|
||||
SectionName: "With Image",
|
||||
ShowcaseFile: showcase.AvatarWithImage(),
|
||||
PreviewCodeFile: "avatar_with_image.templ",
|
||||
ComponentCodeFile: "avatar.templ",
|
||||
})
|
||||
</div>
|
||||
@modules.ExampleWrapper(modules.ExampleWrapperProps{
|
||||
SectionName: "With Placeholder",
|
||||
ShowcaseFile: showcase.AvatarWithPlaceholder(),
|
||||
PreviewCodeFile: "avatar_with_placeholder.templ",
|
||||
ComponentCodeFile: "avatar.templ",
|
||||
})
|
||||
@modules.ExampleWrapper(modules.ExampleWrapperProps{
|
||||
SectionName: "With Sizes",
|
||||
ShowcaseFile: showcase.AvatarWithSizes(),
|
||||
PreviewCodeFile: "avatar_with_sizes.templ",
|
||||
ComponentCodeFile: "avatar.templ",
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,37 +4,38 @@ 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 Button() {
|
||||
@layouts.DocsLayout() {
|
||||
<div>
|
||||
<div class="mb-16">
|
||||
<h1 class="text-3xl font-bold mb-2">Button</h1>
|
||||
<p class="mb-4 text-muted-foreground">Displays a button or a component that looks like a button.</p>
|
||||
</div>
|
||||
@components.Tabs(components.TabsProps{
|
||||
Tabs: []components.Tab{
|
||||
{
|
||||
ID: "preview",
|
||||
Title: "Preview",
|
||||
Content: showcase.ButtonShowcase(),
|
||||
},
|
||||
{
|
||||
ID: "code",
|
||||
Title: "Code",
|
||||
Content: modules.CodeSnippetFromEmbedded("button.templ", "go", showcase.TemplFiles),
|
||||
},
|
||||
{
|
||||
ID: "component",
|
||||
Title: "Component",
|
||||
Content: modules.CodeSnippetFromEmbedded("button.templ", "go", components.TemplFiles),
|
||||
},
|
||||
},
|
||||
TabsContainerClass: "md:w-1/2",
|
||||
ContentContainerClass: "w-full",
|
||||
@modules.PageWrapper(modules.PageWrapperProps{
|
||||
Name: "Button",
|
||||
Description: "Displays a button or a component that looks like a button.",
|
||||
}) {
|
||||
@modules.ExampleWrapper(modules.ExampleWrapperProps{
|
||||
SectionName: "Variants",
|
||||
ShowcaseFile: showcase.ButtonVariants(),
|
||||
PreviewCodeFile: "button_variants.templ",
|
||||
ComponentCodeFile: "button.templ",
|
||||
})
|
||||
</div>
|
||||
@modules.ExampleWrapper(modules.ExampleWrapperProps{
|
||||
SectionName: "Sizes",
|
||||
ShowcaseFile: showcase.ButtonSizes(),
|
||||
PreviewCodeFile: "button_sizes.templ",
|
||||
ComponentCodeFile: "button.templ",
|
||||
})
|
||||
@modules.ExampleWrapper(modules.ExampleWrapperProps{
|
||||
SectionName: "States",
|
||||
ShowcaseFile: showcase.ButtonStates(),
|
||||
PreviewCodeFile: "button_states.templ",
|
||||
ComponentCodeFile: "button.templ",
|
||||
})
|
||||
@modules.ExampleWrapper(modules.ExampleWrapperProps{
|
||||
SectionName: "Icons",
|
||||
ShowcaseFile: showcase.ButtonIcons(),
|
||||
PreviewCodeFile: "button_icons.templ",
|
||||
ComponentCodeFile: "button.templ",
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,27 +3,25 @@ package showcase
|
||||
|
||||
import "github.com/axzilla/goilerplate/pkg/components"
|
||||
|
||||
templ AccordionShowcase() {
|
||||
<div class="flex justify-center items-center border rounded-md py-16 px-4">
|
||||
@components.Accordion(components.AccordionProps{
|
||||
Items: []components.AccordionItem{
|
||||
{
|
||||
ID: "item-1",
|
||||
Trigger: templ.Raw("Is it accessible?"),
|
||||
Content: templ.Raw("Yes. It adheres to the WAI-ARIA design pattern."),
|
||||
},
|
||||
{
|
||||
ID: "item-2",
|
||||
Trigger: templ.Raw("Is it styled?"),
|
||||
Content: templ.Raw("Yes. It comes with default styles that match the other components' aesthetic."),
|
||||
},
|
||||
{
|
||||
ID: "item-3",
|
||||
Trigger: templ.Raw("Is it animated?"),
|
||||
Content: templ.Raw("Yes. It's animated by default, but you can disable it if you prefer."),
|
||||
},
|
||||
templ Accordion() {
|
||||
@components.Accordion(components.AccordionProps{
|
||||
Items: []components.AccordionItem{
|
||||
{
|
||||
ID: "item-1",
|
||||
Trigger: templ.Raw("Is it accessible?"),
|
||||
Content: templ.Raw("Yes. It adheres to the WAI-ARIA design pattern."),
|
||||
},
|
||||
Class: "w-full sm:max-w-[70%]",
|
||||
})
|
||||
</div>
|
||||
{
|
||||
ID: "item-2",
|
||||
Trigger: templ.Raw("Is it styled?"),
|
||||
Content: templ.Raw("Yes. It comes with default styles that match the other components' aesthetic."),
|
||||
},
|
||||
{
|
||||
ID: "item-3",
|
||||
Trigger: templ.Raw("Is it animated?"),
|
||||
Content: templ.Raw("Yes. It's animated by default, but you can disable it if you prefer."),
|
||||
},
|
||||
},
|
||||
Class: "w-full sm:max-w-[70%]",
|
||||
})
|
||||
}
|
||||
|
||||
@ -1,41 +0,0 @@
|
||||
package showcase
|
||||
|
||||
import (
|
||||
"github.com/axzilla/goilerplate/pkg/components"
|
||||
"github.com/axzilla/goilerplate/pkg/icons"
|
||||
)
|
||||
|
||||
templ AlertShowcase() {
|
||||
<div class="flex justify-center items-center border rounded-md py-16 px-4">
|
||||
<div class="space-y-4 max-w-md w-full">
|
||||
<div class="mb-8">
|
||||
<h2 class="font-semibold mb-2">Default Alert</h2>
|
||||
<div class="space-y-2">
|
||||
@components.Alert(components.AlertProps{Variant: components.DefaultAlert}) {
|
||||
@icons.Rocket(icons.IconProps{Size: "16"})
|
||||
@components.AlertTitle() {
|
||||
Note
|
||||
}
|
||||
@components.AlertDescription() {
|
||||
This is a default alert — check it out!
|
||||
}
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-8">
|
||||
<h2 class="font-semibold mb-2">Destructive Alert</h2>
|
||||
<div class="space-y-2">
|
||||
@components.Alert(components.AlertProps{Variant: components.DestructiveAlert}) {
|
||||
@icons.TriangleAlert(icons.IconProps{Size: "16"})
|
||||
@components.AlertTitle() {
|
||||
Error
|
||||
}
|
||||
@components.AlertDescription() {
|
||||
Your session has expired. Please log in again.
|
||||
}
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
20
internals/ui/showcase/alert_default.templ
Normal file
20
internals/ui/showcase/alert_default.templ
Normal file
@ -0,0 +1,20 @@
|
||||
package showcase
|
||||
|
||||
import (
|
||||
"github.com/axzilla/goilerplate/pkg/components"
|
||||
"github.com/axzilla/goilerplate/pkg/icons"
|
||||
)
|
||||
|
||||
templ AlertDefault() {
|
||||
<div class="w-full max-w-xl">
|
||||
@components.Alert(components.AlertProps{Variant: components.DefaultAlert}) {
|
||||
@icons.Rocket(icons.IconProps{Size: "16"})
|
||||
@components.AlertTitle() {
|
||||
Note
|
||||
}
|
||||
@components.AlertDescription() {
|
||||
This is a default alert — check it out!
|
||||
}
|
||||
}
|
||||
</div>
|
||||
}
|
||||
20
internals/ui/showcase/alert_destructive.templ
Normal file
20
internals/ui/showcase/alert_destructive.templ
Normal file
@ -0,0 +1,20 @@
|
||||
package showcase
|
||||
|
||||
import (
|
||||
"github.com/axzilla/goilerplate/pkg/components"
|
||||
"github.com/axzilla/goilerplate/pkg/icons"
|
||||
)
|
||||
|
||||
templ AlertDestructive() {
|
||||
<div class="w-full max-w-xl">
|
||||
@components.Alert(components.AlertProps{Variant: components.DestructiveAlert}) {
|
||||
@icons.TriangleAlert(icons.IconProps{Size: "16"})
|
||||
@components.AlertTitle() {
|
||||
Error
|
||||
}
|
||||
@components.AlertDescription() {
|
||||
Your session has expired. Please log in again.
|
||||
}
|
||||
}
|
||||
</div>
|
||||
}
|
||||
@ -1,50 +0,0 @@
|
||||
package showcase
|
||||
|
||||
import "github.com/axzilla/goilerplate/pkg/components"
|
||||
|
||||
templ AvatarShowcase() {
|
||||
<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">With Image</h2>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
@components.Avatar(components.AvatarProps{
|
||||
ImageSrc: "https://avatars.githubusercontent.com/u/26936893?v=4",
|
||||
Name: "John Doe",
|
||||
Class: "border-2 border-border",
|
||||
})
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-8">
|
||||
<h2 class="font-semibold mb-2">With Placeholder</h2>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
@components.Avatar(components.AvatarProps{
|
||||
Name: "The Dude",
|
||||
})
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-8">
|
||||
<h2 class="font-semibold mb-2">With Sizes</h2>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
@components.Avatar(components.AvatarProps{
|
||||
ImageSrc: "https://avatars.githubusercontent.com/u/26936893?v=4",
|
||||
Name: "John Doe",
|
||||
Size: components.AvatarSizeSmall,
|
||||
Class: "border-2 border-border",
|
||||
})
|
||||
@components.Avatar(components.AvatarProps{
|
||||
ImageSrc: "https://avatars.githubusercontent.com/u/26936893?v=4",
|
||||
Name: "John Doe",
|
||||
Class: "border-2 border-border",
|
||||
})
|
||||
@components.Avatar(components.AvatarProps{
|
||||
ImageSrc: "https://avatars.githubusercontent.com/u/26936893?v=4",
|
||||
Name: "John Doe",
|
||||
Size: components.AvatarSizeLarge,
|
||||
Class: "border-2 border-border",
|
||||
})
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
11
internals/ui/showcase/avatar_with_image.templ
Normal file
11
internals/ui/showcase/avatar_with_image.templ
Normal file
@ -0,0 +1,11 @@
|
||||
package showcase
|
||||
|
||||
import "github.com/axzilla/goilerplate/pkg/components"
|
||||
|
||||
templ AvatarWithImage() {
|
||||
@components.Avatar(components.AvatarProps{
|
||||
ImageSrc: "https://avatars.githubusercontent.com/u/26936893?v=4",
|
||||
Name: "John Doe",
|
||||
Class: "border-2 border-border",
|
||||
})
|
||||
}
|
||||
9
internals/ui/showcase/avatar_with_placeholder.templ
Normal file
9
internals/ui/showcase/avatar_with_placeholder.templ
Normal file
@ -0,0 +1,9 @@
|
||||
package showcase
|
||||
|
||||
import "github.com/axzilla/goilerplate/pkg/components"
|
||||
|
||||
templ AvatarWithPlaceholder() {
|
||||
@components.Avatar(components.AvatarProps{
|
||||
Name: "The Dude",
|
||||
})
|
||||
}
|
||||
25
internals/ui/showcase/avatar_with_sizes.templ
Normal file
25
internals/ui/showcase/avatar_with_sizes.templ
Normal file
@ -0,0 +1,25 @@
|
||||
package showcase
|
||||
|
||||
import "github.com/axzilla/goilerplate/pkg/components"
|
||||
|
||||
templ AvatarWithSizes() {
|
||||
<div class="flex flex-wrap gap-2">
|
||||
@components.Avatar(components.AvatarProps{
|
||||
ImageSrc: "https://avatars.githubusercontent.com/u/26936893?v=4",
|
||||
Name: "John Doe",
|
||||
Size: components.AvatarSizeSmall,
|
||||
Class: "border-2 border-border",
|
||||
})
|
||||
@components.Avatar(components.AvatarProps{
|
||||
ImageSrc: "https://avatars.githubusercontent.com/u/26936893?v=4",
|
||||
Name: "John Doe",
|
||||
Class: "border-2 border-border",
|
||||
})
|
||||
@components.Avatar(components.AvatarProps{
|
||||
ImageSrc: "https://avatars.githubusercontent.com/u/26936893?v=4",
|
||||
Name: "John Doe",
|
||||
Size: components.AvatarSizeLarge,
|
||||
Class: "border-2 border-border",
|
||||
})
|
||||
</div>
|
||||
}
|
||||
@ -1,59 +0,0 @@
|
||||
package showcase
|
||||
|
||||
import (
|
||||
"github.com/axzilla/goilerplate/pkg/components"
|
||||
"github.com/axzilla/goilerplate/pkg/icons"
|
||||
)
|
||||
|
||||
templ ButtonShowcase() {
|
||||
<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">Variants</h2>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
@components.Button(components.ButtonProps{Text: "Default"})
|
||||
@components.Button(components.ButtonProps{Text: "Secondary", Variant: components.Secondary})
|
||||
@components.Button(components.ButtonProps{Text: "Destructive", Variant: components.Destructive})
|
||||
@components.Button(components.ButtonProps{Text: "Outline", Variant: components.Outline})
|
||||
@components.Button(components.ButtonProps{Text: "Ghost", Variant: components.Ghost})
|
||||
@components.Button(components.ButtonProps{Text: "Link", Variant: components.Link})
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-8">
|
||||
<h2 class="font-semibold mb-2">Sizes</h2>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
@components.Button(components.ButtonProps{Text: "Default"})
|
||||
@components.Button(components.ButtonProps{Text: "Small", Size: components.Sm})
|
||||
@components.Button(components.ButtonProps{Text: "Large", Size: components.Lg})
|
||||
@components.Button(components.ButtonProps{Size: components.ButtonIcon, IconLeft: icons.Rocket(icons.IconProps{Size: "16"})})
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-8">
|
||||
<h2 class="font-semibold mb-22">States</h2>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
@components.Button(components.ButtonProps{Text: "Default"})
|
||||
// Alpine.js example
|
||||
@components.Button(components.ButtonProps{Text: "With Click", Attributes: templ.Attributes{"@click": "alert('Hey Dude!')"}})
|
||||
// Vanilla JS example
|
||||
// @components.Button(components.ButtonProps{Text: "With Click", Attributes: templ.Attributes{"onclick": "alert('Hey Dude!')"}})
|
||||
@components.Button(components.ButtonProps{Text: "Disabled", Disabled: true})
|
||||
// @components.Button(components.ButtonProps{Text: "Disabled", Disabled: "true"})
|
||||
@components.Button(components.ButtonProps{Text: "Full Width", Class: "w-full"})
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-8">
|
||||
<h2 class="font-semibold mb-2">With Icon</h2>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
@components.Button(components.ButtonProps{
|
||||
Text: "Icon Left",
|
||||
IconLeft: icons.Rocket(icons.IconProps{Size: "16"}),
|
||||
})
|
||||
@components.Button(components.ButtonProps{
|
||||
Text: "Icon Right",
|
||||
IconRight: icons.Rocket(icons.IconProps{Size: "16"}),
|
||||
})
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
19
internals/ui/showcase/button_icons.templ
Normal file
19
internals/ui/showcase/button_icons.templ
Normal file
@ -0,0 +1,19 @@
|
||||
package showcase
|
||||
|
||||
import (
|
||||
"github.com/axzilla/goilerplate/pkg/components"
|
||||
"github.com/axzilla/goilerplate/pkg/icons"
|
||||
)
|
||||
|
||||
templ ButtonIcons() {
|
||||
<div class="flex flex-wrap gap-2">
|
||||
@components.Button(components.ButtonProps{
|
||||
Text: "Icon Left",
|
||||
IconLeft: icons.Rocket(icons.IconProps{Size: "16"}),
|
||||
})
|
||||
@components.Button(components.ButtonProps{
|
||||
Text: "Icon Right",
|
||||
IconRight: icons.Rocket(icons.IconProps{Size: "16"}),
|
||||
})
|
||||
</div>
|
||||
}
|
||||
15
internals/ui/showcase/button_sizes.templ
Normal file
15
internals/ui/showcase/button_sizes.templ
Normal file
@ -0,0 +1,15 @@
|
||||
package showcase
|
||||
|
||||
import (
|
||||
"github.com/axzilla/goilerplate/pkg/components"
|
||||
"github.com/axzilla/goilerplate/pkg/icons"
|
||||
)
|
||||
|
||||
templ ButtonSizes() {
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
@components.Button(components.ButtonProps{Text: "Default"})
|
||||
@components.Button(components.ButtonProps{Text: "Small", Size: components.Sm})
|
||||
@components.Button(components.ButtonProps{Text: "Large", Size: components.Lg})
|
||||
@components.Button(components.ButtonProps{Size: components.ButtonIcon, IconLeft: icons.Rocket(icons.IconProps{Size: "16"})})
|
||||
</div>
|
||||
}
|
||||
16
internals/ui/showcase/button_states.templ
Normal file
16
internals/ui/showcase/button_states.templ
Normal file
@ -0,0 +1,16 @@
|
||||
package showcase
|
||||
|
||||
import "github.com/axzilla/goilerplate/pkg/components"
|
||||
|
||||
templ ButtonStates() {
|
||||
<div class="flex flex-wrap gap-2">
|
||||
@components.Button(components.ButtonProps{Text: "Default"})
|
||||
// Alpine.js example
|
||||
@components.Button(components.ButtonProps{Text: "With Click", Attributes: templ.Attributes{"@click": "alert('Hey Dude!')"}})
|
||||
// Vanilla JS example
|
||||
// @components.Button(components.ButtonProps{Text: "With Click", Attributes: templ.Attributes{"onclick": "alert('Hey Dude!')"}})
|
||||
@components.Button(components.ButtonProps{Text: "Disabled", Disabled: true})
|
||||
// @components.Button(components.ButtonProps{Text: "Disabled", Disabled: "true"})
|
||||
@components.Button(components.ButtonProps{Text: "Full Width", Class: "w-full"})
|
||||
</div>
|
||||
}
|
||||
14
internals/ui/showcase/button_variants.templ
Normal file
14
internals/ui/showcase/button_variants.templ
Normal file
@ -0,0 +1,14 @@
|
||||
package showcase
|
||||
|
||||
import "github.com/axzilla/goilerplate/pkg/components"
|
||||
|
||||
templ ButtonVariants() {
|
||||
<div class="flex flex-wrap gap-2">
|
||||
@components.Button(components.ButtonProps{Text: "Default"})
|
||||
@components.Button(components.ButtonProps{Text: "Secondary", Variant: components.Secondary})
|
||||
@components.Button(components.ButtonProps{Text: "Destructive", Variant: components.Destructive})
|
||||
@components.Button(components.ButtonProps{Text: "Outline", Variant: components.Outline})
|
||||
@components.Button(components.ButtonProps{Text: "Ghost", Variant: components.Ghost})
|
||||
@components.Button(components.ButtonProps{Text: "Link", Variant: components.Link})
|
||||
</div>
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
// Code generated by templ - DO NOT EDIT.
|
||||
|
||||
// templ: version: v0.2.778
|
||||
// templ: version: v0.2.793
|
||||
package components
|
||||
|
||||
//lint:file-ignore SA4006 This context is only used if a nested component is present.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
// Code generated by templ - DO NOT EDIT.
|
||||
|
||||
// templ: version: v0.2.778
|
||||
// templ: version: v0.2.793
|
||||
package components
|
||||
|
||||
//lint:file-ignore SA4006 This context is only used if a nested component is present.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
// Code generated by templ - DO NOT EDIT.
|
||||
|
||||
// templ: version: v0.2.778
|
||||
// templ: version: v0.2.793
|
||||
package components
|
||||
|
||||
//lint:file-ignore SA4006 This context is only used if a nested component is present.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
// Code generated by templ - DO NOT EDIT.
|
||||
|
||||
// templ: version: v0.2.778
|
||||
// templ: version: v0.2.793
|
||||
package components
|
||||
|
||||
//lint:file-ignore SA4006 This context is only used if a nested component is present.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
// Code generated by templ - DO NOT EDIT.
|
||||
|
||||
// templ: version: v0.2.778
|
||||
// templ: version: v0.2.793
|
||||
package components
|
||||
|
||||
//lint:file-ignore SA4006 This context is only used if a nested component is present.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
// Code generated by templ - DO NOT EDIT.
|
||||
|
||||
// templ: version: v0.2.778
|
||||
// templ: version: v0.2.793
|
||||
package components
|
||||
|
||||
//lint:file-ignore SA4006 This context is only used if a nested component is present.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
// Code generated by templ - DO NOT EDIT.
|
||||
|
||||
// templ: version: v0.2.778
|
||||
// templ: version: v0.2.793
|
||||
package components
|
||||
|
||||
//lint:file-ignore SA4006 This context is only used if a nested component is present.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
// Code generated by templ - DO NOT EDIT.
|
||||
|
||||
// templ: version: v0.2.778
|
||||
// templ: version: v0.2.793
|
||||
package components
|
||||
|
||||
//lint:file-ignore SA4006 This context is only used if a nested component is present.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
// Code generated by templ - DO NOT EDIT.
|
||||
|
||||
// templ: version: v0.2.778
|
||||
// templ: version: v0.2.793
|
||||
package components
|
||||
|
||||
//lint:file-ignore SA4006 This context is only used if a nested component is present.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
// Code generated by templ - DO NOT EDIT.
|
||||
|
||||
// templ: version: v0.2.778
|
||||
// templ: version: v0.2.793
|
||||
package components
|
||||
|
||||
//lint:file-ignore SA4006 This context is only used if a nested component is present.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
// Code generated by templ - DO NOT EDIT.
|
||||
|
||||
// templ: version: v0.2.778
|
||||
// templ: version: v0.2.793
|
||||
package components
|
||||
|
||||
//lint:file-ignore SA4006 This context is only used if a nested component is present.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
// Code generated by templ - DO NOT EDIT.
|
||||
|
||||
// templ: version: v0.2.778
|
||||
// templ: version: v0.2.793
|
||||
// pkg/components/select.templ
|
||||
|
||||
package components
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
// Code generated by templ - DO NOT EDIT.
|
||||
|
||||
// templ: version: v0.2.778
|
||||
// templ: version: v0.2.793
|
||||
package components
|
||||
|
||||
//lint:file-ignore SA4006 This context is only used if a nested component is present.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
// Code generated by templ - DO NOT EDIT.
|
||||
|
||||
// templ: version: v0.2.778
|
||||
// templ: version: v0.2.793
|
||||
package components
|
||||
|
||||
//lint:file-ignore SA4006 This context is only used if a nested component is present.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
// Code generated by templ - DO NOT EDIT.
|
||||
|
||||
// templ: version: v0.2.778
|
||||
// templ: version: v0.2.793
|
||||
package components
|
||||
|
||||
//lint:file-ignore SA4006 This context is only used if a nested component is present.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
// Code generated by templ - DO NOT EDIT.
|
||||
|
||||
// templ: version: v0.2.778
|
||||
// templ: version: v0.2.793
|
||||
package components
|
||||
|
||||
//lint:file-ignore SA4006 This context is only used if a nested component is present.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
// Code generated by templ - DO NOT EDIT.
|
||||
|
||||
// templ: version: v0.2.778
|
||||
// templ: version: v0.2.793
|
||||
package components
|
||||
|
||||
//lint:file-ignore SA4006 This context is only used if a nested component is present.
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user