mirror of
https://github.com/axzilla/templui.git
synced 2025-02-21 21:52:40 +00:00
docs: update to new showcase format for datepicker, dropdownmenu, icon
This commit is contained in:
axzilla
parent
774ab4b762
commit
be417b51f8
@ -14,7 +14,6 @@ templ 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",
|
||||
|
||||
@ -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 Datepicker() {
|
||||
@layouts.DocsLayout() {
|
||||
<div>
|
||||
<div class="mb-16">
|
||||
<h1 class="text-3xl font-bold mb-2">Datepicker</h1>
|
||||
<p class="mb-4 text-muted-foreground">A date picker component.</p>
|
||||
</div>
|
||||
@components.Tabs(components.TabsProps{
|
||||
Tabs: []components.Tab{
|
||||
{
|
||||
ID: "preview",
|
||||
Title: "Preview",
|
||||
Content: showcase.DatepickerShowcase(),
|
||||
},
|
||||
{
|
||||
ID: "code",
|
||||
Title: "Code",
|
||||
Content: modules.CodeSnippetFromEmbedded("datepicker.templ", "go", showcase.TemplFiles),
|
||||
},
|
||||
{
|
||||
ID: "component",
|
||||
Title: "Component",
|
||||
Content: modules.CodeSnippetFromEmbedded("datepicker.templ", "go", components.TemplFiles),
|
||||
},
|
||||
},
|
||||
TabsContainerClass: "md:w-1/2",
|
||||
ContentContainerClass: "w-full",
|
||||
@modules.PageWrapper(modules.PageWrapperProps{
|
||||
Name: "Datepicker",
|
||||
Description: "A date picker component.",
|
||||
}) {
|
||||
@modules.ExampleWrapper(modules.ExampleWrapperProps{
|
||||
ShowcaseFile: showcase.Datepicker(),
|
||||
PreviewCodeFile: "datepicker.templ",
|
||||
ComponentCodeFile: "datepicker.templ",
|
||||
})
|
||||
</div>
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 DropdownMenu() {
|
||||
@layouts.DocsLayout() {
|
||||
<div>
|
||||
<div class="mb-16">
|
||||
<h1 class="text-3xl font-bold mb-2">Dropdown Menu</h1>
|
||||
<p class="mb-4 text-muted-foreground">The Dropdown Menu component provides a way to display a list of options in a compact form.</p>
|
||||
</div>
|
||||
@components.Tabs(components.TabsProps{
|
||||
Tabs: []components.Tab{
|
||||
{
|
||||
ID: "preview",
|
||||
Title: "Preview",
|
||||
Content: showcase.DropdownMenuShowcase(),
|
||||
},
|
||||
{
|
||||
ID: "code",
|
||||
Title: "Code",
|
||||
Content: modules.CodeSnippetFromEmbedded("dropdown_menu.templ", "go", showcase.TemplFiles),
|
||||
},
|
||||
{
|
||||
ID: "component",
|
||||
Title: "Component",
|
||||
Content: modules.CodeSnippetFromEmbedded("dropdown_menu.templ", "go", components.TemplFiles),
|
||||
},
|
||||
},
|
||||
TabsContainerClass: "md:w-1/2",
|
||||
ContentContainerClass: "w-full",
|
||||
@modules.PageWrapper(modules.PageWrapperProps{
|
||||
Name: "Dropdown Menu",
|
||||
Description: "The Dropdown Menu component provides a way to display a list of options in a compact form.",
|
||||
}) {
|
||||
@modules.ExampleWrapper(modules.ExampleWrapperProps{
|
||||
SectionName: "Default",
|
||||
ShowcaseFile: showcase.DropdownMenuDefault(),
|
||||
PreviewCodeFile: "dropdownmenu.templ",
|
||||
ComponentCodeFile: "dropdownmenu.templ",
|
||||
})
|
||||
</div>
|
||||
@modules.ExampleWrapper(modules.ExampleWrapperProps{
|
||||
SectionName: "With Icons",
|
||||
ShowcaseFile: showcase.DropdownMenuWithIcons(),
|
||||
PreviewCodeFile: "dropdownmenu_with_icons.templ",
|
||||
ComponentCodeFile: "dropdownmenu.templ",
|
||||
})
|
||||
@modules.ExampleWrapper(modules.ExampleWrapperProps{
|
||||
SectionName: "Advanced",
|
||||
ShowcaseFile: showcase.DropdownMenuAdvanced(),
|
||||
PreviewCodeFile: "dropdownmenu_advanced.templ",
|
||||
ComponentCodeFile: "dropdownmenu.templ",
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,34 +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 Icon() {
|
||||
@layouts.DocsLayout() {
|
||||
<div>
|
||||
<div class="mb-16">
|
||||
<h1 class="text-3xl font-bold mb-2">Icon</h1>
|
||||
<p class="mb-4 text-muted-foreground">
|
||||
A wrapper for <a href="https://lucide.dev" target="_blank" rel="noopener noreferrer" class="text-primary underline underline-offset-2 hover:opacity-80 transition-opacity">Lucide Icons</a> with optional settings for size, color, fill, stroke, and custom classes. Browse available icons in the Lucide library to see what you can use.
|
||||
</p>
|
||||
</div>
|
||||
@components.Tabs(components.TabsProps{
|
||||
Tabs: []components.Tab{
|
||||
{
|
||||
ID: "preview",
|
||||
Title: "Preview",
|
||||
Content: showcase.IconShowcase(),
|
||||
},
|
||||
{
|
||||
ID: "code",
|
||||
Title: "Code",
|
||||
Content: modules.CodeSnippetFromEmbedded("icon.templ", "go", showcase.TemplFiles),
|
||||
},
|
||||
},
|
||||
TabsContainerClass: "md:w-1/2",
|
||||
ContentContainerClass: "w-full",
|
||||
@modules.PageWrapper(modules.PageWrapperProps{
|
||||
Name: "Icon",
|
||||
Description: `A wrapper for <a href="https://lucide.dev" target="_blank" rel="noopener noreferrer" class="text-primary underline underline-offset-2 hover:opacity-80 transition-opacity">Lucide Icons</a> with optional settings for size, color, fill, stroke, and custom classes. Browse available icons in the Lucide library to see what you can use.`,
|
||||
}) {
|
||||
@modules.ExampleWrapper(modules.ExampleWrapperProps{
|
||||
SectionName: "Default",
|
||||
ShowcaseFile: showcase.IconDefault(),
|
||||
PreviewCodeFile: "icon_default.templ",
|
||||
ComponentCodeFile: "icon.templ",
|
||||
})
|
||||
</div>
|
||||
@modules.ExampleWrapper(modules.ExampleWrapperProps{
|
||||
SectionName: "Colored",
|
||||
ShowcaseFile: showcase.IconColored(),
|
||||
PreviewCodeFile: "icon_colored.templ",
|
||||
ComponentCodeFile: "icon.templ",
|
||||
})
|
||||
@modules.ExampleWrapper(modules.ExampleWrapperProps{
|
||||
SectionName: "Filled",
|
||||
ShowcaseFile: showcase.IconFilled(),
|
||||
PreviewCodeFile: "icon_filled.templ",
|
||||
ComponentCodeFile: "icon.templ",
|
||||
})
|
||||
@modules.ExampleWrapper(modules.ExampleWrapperProps{
|
||||
SectionName: "Sizes",
|
||||
ShowcaseFile: showcase.IconSizes(),
|
||||
PreviewCodeFile: "icon_sizes.templ",
|
||||
ComponentCodeFile: "icon.templ",
|
||||
})
|
||||
@modules.ExampleWrapper(modules.ExampleWrapperProps{
|
||||
SectionName: "Custom Classes",
|
||||
ShowcaseFile: showcase.IconCustomClasses(),
|
||||
PreviewCodeFile: "icon_custom_classes.templ",
|
||||
ComponentCodeFile: "icon.templ",
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,8 +2,7 @@ package showcase
|
||||
|
||||
import "github.com/axzilla/goilerplate/pkg/components"
|
||||
|
||||
templ DatepickerShowcase() {
|
||||
<div class="flex justify-center items-center border rounded-md py-16 px-4">
|
||||
templ Datepicker() {
|
||||
@components.Datepicker(components.DatepickerProps{
|
||||
ID: "my-datepicker",
|
||||
Name: "selected-date",
|
||||
@ -11,5 +10,4 @@ templ DatepickerShowcase() {
|
||||
Format: "YYYY-MM-DD",
|
||||
Class: "w-full max-w-xs",
|
||||
})
|
||||
</div>
|
||||
}
|
||||
|
||||
@ -1,67 +0,0 @@
|
||||
package showcase
|
||||
|
||||
import (
|
||||
"github.com/axzilla/goilerplate/pkg/components"
|
||||
"github.com/axzilla/goilerplate/pkg/icons"
|
||||
)
|
||||
|
||||
templ DropdownMenuShowcase() {
|
||||
<div class="flex justify-center items-center border rounded-md py-16 px-4">
|
||||
<div class="flex gap-2 flex-wrap">
|
||||
@components.DropdownMenu(components.DropdownMenuProps{
|
||||
Items: []components.DropdownMenuItem{
|
||||
{Label: "Profile", Value: "profile"},
|
||||
{Label: "Settings", Value: "settings"},
|
||||
{Label: "Logout", Value: "logout"},
|
||||
},
|
||||
})
|
||||
@components.DropdownMenu(components.DropdownMenuProps{
|
||||
Trigger: components.Button(components.ButtonProps{
|
||||
Text: "User Menu",
|
||||
Variant: "outline",
|
||||
IconLeft: icons.Menu(icons.IconProps{Size: "16"}),
|
||||
}),
|
||||
Position: "right",
|
||||
Items: []components.DropdownMenuItem{
|
||||
{
|
||||
Label: "Profile",
|
||||
IconLeft: icons.User(icons.IconProps{Size: "16"}),
|
||||
Href: "/docs/components/dropdown-menu",
|
||||
},
|
||||
{
|
||||
Label: "Settings",
|
||||
IconLeft: icons.Settings(icons.IconProps{Size: "16"}),
|
||||
Href: "/docs/components/dropdown-menu",
|
||||
},
|
||||
{
|
||||
Label: "Logout",
|
||||
IconLeft: icons.LogOut(icons.IconProps{Size: "16"}),
|
||||
Value: "logout",
|
||||
},
|
||||
},
|
||||
})
|
||||
@components.DropdownMenu(components.DropdownMenuProps{
|
||||
Trigger: components.Button(components.ButtonProps{
|
||||
Text: "Advanced Menu",
|
||||
Variant: "outline",
|
||||
IconLeft: icons.Menu(icons.IconProps{Size: "16"}),
|
||||
}),
|
||||
Position: "left",
|
||||
Items: []components.DropdownMenuItem{
|
||||
{Label: "File", SubItems: []components.DropdownMenuItem{
|
||||
{Label: "New", Value: "new", Attributes: templ.Attributes{"@click": "alert('New')"}},
|
||||
{Label: "Open", Value: "open", Attributes: templ.Attributes{"@click": "alert('Open')"}},
|
||||
{Label: "Save", Value: "save", Attributes: templ.Attributes{"@click": "alert('Save')"}},
|
||||
}},
|
||||
{Label: "Edit", SubItems: []components.DropdownMenuItem{
|
||||
{Label: "Cut", Value: "cut", Attributes: templ.Attributes{"@click": "alert('Cut')"}},
|
||||
{Label: "Copy", Value: "copy", Attributes: templ.Attributes{"@click": "alert('Copy')"}},
|
||||
{Label: "Paste", Value: "paste", Attributes: templ.Attributes{"@click": "alert('Paste')"}},
|
||||
}},
|
||||
{Label: "View", Disabled: true},
|
||||
{Label: "Help", Href: "https://github.com/axzilla/goilerplate", Target: "_blank"},
|
||||
},
|
||||
})
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
31
internals/ui/showcase/dropdown_menu_advanced.templ
Normal file
31
internals/ui/showcase/dropdown_menu_advanced.templ
Normal file
@ -0,0 +1,31 @@
|
||||
package showcase
|
||||
|
||||
import (
|
||||
"github.com/axzilla/goilerplate/pkg/components"
|
||||
"github.com/axzilla/goilerplate/pkg/icons"
|
||||
)
|
||||
|
||||
templ DropdownMenuAdvanced() {
|
||||
@components.DropdownMenu(components.DropdownMenuProps{
|
||||
Trigger: components.Button(components.ButtonProps{
|
||||
Text: "Advanced Menu",
|
||||
Variant: "outline",
|
||||
IconLeft: icons.Menu(icons.IconProps{Size: "16"}),
|
||||
}),
|
||||
Position: "left",
|
||||
Items: []components.DropdownMenuItem{
|
||||
{Label: "File", SubItems: []components.DropdownMenuItem{
|
||||
{Label: "New", Value: "new", Attributes: templ.Attributes{"@click": "alert('New')"}},
|
||||
{Label: "Open", Value: "open", Attributes: templ.Attributes{"@click": "alert('Open')"}},
|
||||
{Label: "Save", Value: "save", Attributes: templ.Attributes{"@click": "alert('Save')"}},
|
||||
}},
|
||||
{Label: "Edit", SubItems: []components.DropdownMenuItem{
|
||||
{Label: "Cut", Value: "cut", Attributes: templ.Attributes{"@click": "alert('Cut')"}},
|
||||
{Label: "Copy", Value: "copy", Attributes: templ.Attributes{"@click": "alert('Copy')"}},
|
||||
{Label: "Paste", Value: "paste", Attributes: templ.Attributes{"@click": "alert('Paste')"}},
|
||||
}},
|
||||
{Label: "View", Disabled: true},
|
||||
{Label: "Help", Href: "https://github.com/axzilla/goilerplate", Target: "_blank"},
|
||||
},
|
||||
})
|
||||
}
|
||||
13
internals/ui/showcase/dropdown_menu_default.templ
Normal file
13
internals/ui/showcase/dropdown_menu_default.templ
Normal file
@ -0,0 +1,13 @@
|
||||
package showcase
|
||||
|
||||
import "github.com/axzilla/goilerplate/pkg/components"
|
||||
|
||||
templ DropdownMenuDefault() {
|
||||
@components.DropdownMenu(components.DropdownMenuProps{
|
||||
Items: []components.DropdownMenuItem{
|
||||
{Label: "Profile", Value: "profile"},
|
||||
{Label: "Settings", Value: "settings"},
|
||||
{Label: "Logout", Value: "logout"},
|
||||
},
|
||||
})
|
||||
}
|
||||
34
internals/ui/showcase/dropdown_menu_with_icons.templ
Normal file
34
internals/ui/showcase/dropdown_menu_with_icons.templ
Normal file
@ -0,0 +1,34 @@
|
||||
package showcase
|
||||
|
||||
import (
|
||||
"github.com/axzilla/goilerplate/pkg/components"
|
||||
"github.com/axzilla/goilerplate/pkg/icons"
|
||||
)
|
||||
|
||||
templ DropdownMenuWithIcons() {
|
||||
@components.DropdownMenu(components.DropdownMenuProps{
|
||||
Trigger: components.Button(components.ButtonProps{
|
||||
Text: "User Menu",
|
||||
Variant: "outline",
|
||||
IconLeft: icons.Menu(icons.IconProps{Size: "16"}),
|
||||
}),
|
||||
Position: "right",
|
||||
Items: []components.DropdownMenuItem{
|
||||
{
|
||||
Label: "Profile",
|
||||
IconLeft: icons.User(icons.IconProps{Size: "16"}),
|
||||
Href: "/docs/components/dropdown-menu",
|
||||
},
|
||||
{
|
||||
Label: "Settings",
|
||||
IconLeft: icons.Settings(icons.IconProps{Size: "16"}),
|
||||
Href: "/docs/components/dropdown-menu",
|
||||
},
|
||||
{
|
||||
Label: "Logout",
|
||||
IconLeft: icons.LogOut(icons.IconProps{Size: "16"}),
|
||||
Value: "logout",
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
@ -1,50 +0,0 @@
|
||||
package showcase
|
||||
|
||||
import "github.com/axzilla/goilerplate/pkg/icons"
|
||||
|
||||
templ IconShowcase() {
|
||||
<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">Basic Icons</h2>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
@icons.User(icons.IconProps{Size: "24"})
|
||||
@icons.House(icons.IconProps{Size: "24"})
|
||||
@icons.Settings(icons.IconProps{Size: "24"})
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-8">
|
||||
<h2 class="font-semibold mb-2">Colored Icons</h2>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
@icons.Heart(icons.IconProps{Size: "24", Color: "red"})
|
||||
@icons.Star(icons.IconProps{Size: "24", Color: "gold"})
|
||||
@icons.Check(icons.IconProps{Size: "24", Color: "green"})
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-8">
|
||||
<h2 class="font-semibold mb-2">Filled Icons</h2>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
@icons.Circle(icons.IconProps{Size: "24", Fill: "blue", Stroke: "blue"})
|
||||
@icons.Square(icons.IconProps{Size: "24", Fill: "purple", Stroke: "purple"})
|
||||
@icons.Triangle(icons.IconProps{Size: "24", Fill: "orange", Stroke: "orange"})
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-8">
|
||||
<h2 class="font-semibold mb-2">Different Sizes</h2>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
@icons.House(icons.IconProps{Size: "16"})
|
||||
@icons.House(icons.IconProps{Size: "24"})
|
||||
@icons.House(icons.IconProps{Size: "32"})
|
||||
@icons.House(icons.IconProps{Size: "48"})
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-8">
|
||||
<h2 class="font-semibold mb-2">Custom Classes</h2>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
@icons.ArrowRight(icons.IconProps{Size: "24", Class: "text-blue-500 hover:text-blue-700"})
|
||||
@icons.ArrowLeft(icons.IconProps{Size: "24", Class: "text-green-500 hover:text-green-700"})
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
11
internals/ui/showcase/icon_colored.templ
Normal file
11
internals/ui/showcase/icon_colored.templ
Normal file
@ -0,0 +1,11 @@
|
||||
package showcase
|
||||
|
||||
import "github.com/axzilla/goilerplate/pkg/icons"
|
||||
|
||||
templ IconColored() {
|
||||
<div class="flex flex-wrap gap-2">
|
||||
@icons.Heart(icons.IconProps{Size: "24", Color: "red"})
|
||||
@icons.Star(icons.IconProps{Size: "24", Color: "gold"})
|
||||
@icons.Check(icons.IconProps{Size: "24", Color: "green"})
|
||||
</div>
|
||||
}
|
||||
10
internals/ui/showcase/icon_custom_classes.templ
Normal file
10
internals/ui/showcase/icon_custom_classes.templ
Normal file
@ -0,0 +1,10 @@
|
||||
package showcase
|
||||
|
||||
import "github.com/axzilla/goilerplate/pkg/icons"
|
||||
|
||||
templ IconCustomClasses() {
|
||||
<div class="flex flex-wrap gap-2">
|
||||
@icons.ArrowRight(icons.IconProps{Size: "24", Class: "text-blue-500 hover:text-blue-700"})
|
||||
@icons.ArrowLeft(icons.IconProps{Size: "24", Class: "text-green-500 hover:text-green-700"})
|
||||
</div>
|
||||
}
|
||||
11
internals/ui/showcase/icon_default.templ
Normal file
11
internals/ui/showcase/icon_default.templ
Normal file
@ -0,0 +1,11 @@
|
||||
package showcase
|
||||
|
||||
import "github.com/axzilla/goilerplate/pkg/icons"
|
||||
|
||||
templ IconDefault() {
|
||||
<div class="flex flex-wrap gap-2">
|
||||
@icons.User(icons.IconProps{Size: "24"})
|
||||
@icons.House(icons.IconProps{Size: "24"})
|
||||
@icons.Settings(icons.IconProps{Size: "24"})
|
||||
</div>
|
||||
}
|
||||
11
internals/ui/showcase/icon_filled.templ
Normal file
11
internals/ui/showcase/icon_filled.templ
Normal file
@ -0,0 +1,11 @@
|
||||
package showcase
|
||||
|
||||
import "github.com/axzilla/goilerplate/pkg/icons"
|
||||
|
||||
templ IconFilled() {
|
||||
<div class="flex flex-wrap gap-2">
|
||||
@icons.Circle(icons.IconProps{Size: "24", Fill: "blue", Stroke: "blue"})
|
||||
@icons.Square(icons.IconProps{Size: "24", Fill: "purple", Stroke: "purple"})
|
||||
@icons.Triangle(icons.IconProps{Size: "24", Fill: "orange", Stroke: "orange"})
|
||||
</div>
|
||||
}
|
||||
12
internals/ui/showcase/icon_sizes.templ
Normal file
12
internals/ui/showcase/icon_sizes.templ
Normal file
@ -0,0 +1,12 @@
|
||||
package showcase
|
||||
|
||||
import "github.com/axzilla/goilerplate/pkg/icons"
|
||||
|
||||
templ IconSizes() {
|
||||
<div class="flex flex-wrap gap-2">
|
||||
@icons.House(icons.IconProps{Size: "16"})
|
||||
@icons.House(icons.IconProps{Size: "24"})
|
||||
@icons.House(icons.IconProps{Size: "32"})
|
||||
@icons.House(icons.IconProps{Size: "48"})
|
||||
</div>
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user