mirror of
https://github.com/axzilla/templui.git
synced 2025-02-21 00:12:48 +00:00
docs: update to new showcase format for card and checkbox components
This commit is contained in:
axzilla
parent
29e3221f02
commit
774ab4b762
@ -4,37 +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 Card() {
|
||||
@layouts.DocsLayout() {
|
||||
<div>
|
||||
<div class="mb-16">
|
||||
<h1 class="text-3xl font-bold mb-2">Card</h1>
|
||||
<p class="mb-4 text-muted-foreground">Displays a card with header, content, and footer.</p>
|
||||
</div>
|
||||
@components.Tabs(components.TabsProps{
|
||||
Tabs: []components.Tab{
|
||||
{
|
||||
ID: "preview",
|
||||
Title: "Preview",
|
||||
Content: showcase.CardShowcase(),
|
||||
},
|
||||
{
|
||||
ID: "code",
|
||||
Title: "Code",
|
||||
Content: modules.CodeSnippetFromEmbedded("card.templ", "go", showcase.TemplFiles),
|
||||
},
|
||||
{
|
||||
ID: "component",
|
||||
Title: "Component",
|
||||
Content: modules.CodeSnippetFromEmbedded("card.templ", "go", components.TemplFiles),
|
||||
},
|
||||
},
|
||||
TabsContainerClass: "md:w-1/2",
|
||||
ContentContainerClass: "w-full",
|
||||
@modules.PageWrapper(modules.PageWrapperProps{
|
||||
Name: "Card",
|
||||
Description: "Displays a card with header, content, and footer.",
|
||||
}) {
|
||||
@modules.ExampleWrapper(modules.ExampleWrapperProps{
|
||||
SectionName: "Default",
|
||||
ShowcaseFile: showcase.CardDefault(),
|
||||
PreviewCodeFile: "button_default.templ",
|
||||
ComponentCodeFile: "button.templ",
|
||||
})
|
||||
</div>
|
||||
@modules.ExampleWrapper(modules.ExampleWrapperProps{
|
||||
SectionName: "With Image Left",
|
||||
ShowcaseFile: showcase.CardWithImageLeft(),
|
||||
PreviewCodeFile: "card_with_image_left.templ",
|
||||
ComponentCodeFile: "card.templ",
|
||||
})
|
||||
@modules.ExampleWrapper(modules.ExampleWrapperProps{
|
||||
SectionName: "With Image Right",
|
||||
ShowcaseFile: showcase.CardWithImageRight(),
|
||||
PreviewCodeFile: "card_with_image_right.templ",
|
||||
ComponentCodeFile: "card.templ",
|
||||
})
|
||||
@modules.ExampleWrapper(modules.ExampleWrapperProps{
|
||||
SectionName: "With Image Top",
|
||||
ShowcaseFile: showcase.CardWithImageTop(),
|
||||
PreviewCodeFile: "card_with_image_top.templ",
|
||||
ComponentCodeFile: "card.templ",
|
||||
})
|
||||
@modules.ExampleWrapper(modules.ExampleWrapperProps{
|
||||
SectionName: "With Image Bottom",
|
||||
ShowcaseFile: showcase.CardWithImageBottom(),
|
||||
PreviewCodeFile: "card_with_image_bottom.templ",
|
||||
ComponentCodeFile: "card.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 Checkbox() {
|
||||
@layouts.DocsLayout() {
|
||||
<div>
|
||||
<div class="mb-16">
|
||||
<h1 class="text-3xl font-bold mb-2">Checkbox</h1>
|
||||
<p class="mb-4 text-muted-foreground">A control that allows the user to toggle between checked and not checked.</p>
|
||||
</div>
|
||||
@components.Tabs(components.TabsProps{
|
||||
Tabs: []components.Tab{
|
||||
{
|
||||
ID: "preview",
|
||||
Title: "Preview",
|
||||
Content: showcase.CheckboxShowcase(),
|
||||
},
|
||||
{
|
||||
ID: "code",
|
||||
Title: "Code",
|
||||
Content: modules.CodeSnippetFromEmbedded("checkbox.templ", "go", showcase.TemplFiles),
|
||||
},
|
||||
{
|
||||
ID: "component",
|
||||
Title: "Component",
|
||||
Content: modules.CodeSnippetFromEmbedded("checkbox.templ", "go", components.TemplFiles),
|
||||
},
|
||||
},
|
||||
TabsContainerClass: "md:w-1/2",
|
||||
ContentContainerClass: "w-full",
|
||||
@modules.PageWrapper(modules.PageWrapperProps{
|
||||
Name: "Checkbox",
|
||||
Description: "A control that allows the user to toggle between checked and not checked.",
|
||||
}) {
|
||||
@modules.ExampleWrapper(modules.ExampleWrapperProps{
|
||||
SectionName: "Default",
|
||||
ShowcaseFile: showcase.CheckboxDefault(),
|
||||
PreviewCodeFile: "checkbox_default.templ",
|
||||
ComponentCodeFile: "checkbox.templ",
|
||||
})
|
||||
</div>
|
||||
@modules.ExampleWrapper(modules.ExampleWrapperProps{
|
||||
SectionName: "Checked",
|
||||
ShowcaseFile: showcase.CheckboxChecked(),
|
||||
PreviewCodeFile: "checkbox_checked.templ",
|
||||
ComponentCodeFile: "checkbox.templ",
|
||||
})
|
||||
@modules.ExampleWrapper(modules.ExampleWrapperProps{
|
||||
SectionName: "Disabled",
|
||||
ShowcaseFile: showcase.CheckboxDisabled(),
|
||||
PreviewCodeFile: "checkbox_disabled.templ",
|
||||
ComponentCodeFile: "checkbox.templ",
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,137 +0,0 @@
|
||||
package showcase
|
||||
|
||||
import (
|
||||
"github.com/axzilla/goilerplate/pkg/components"
|
||||
)
|
||||
|
||||
templ CardShowcase() {
|
||||
<div class="flex flex-col justify-center items-center border rounded-md py-16 px-4">
|
||||
<div class="w-full max-w-xl">
|
||||
// Default card
|
||||
<div class="mb-8">
|
||||
<h2 class="font-semibold mb-4">Default</h2>
|
||||
@components.Card(components.CardProps{Class: "w-2/3"}) {
|
||||
@components.CardHeader() {
|
||||
@components.CardTitle() {
|
||||
Card Title
|
||||
}
|
||||
@components.CardDescription() {
|
||||
Card Description
|
||||
}
|
||||
}
|
||||
@components.CardContent() {
|
||||
<p>Card Content</p>
|
||||
}
|
||||
@components.CardFooter() {
|
||||
@components.Button(components.ButtonProps{Text: "Action"})
|
||||
}
|
||||
}
|
||||
</div>
|
||||
// Card with top image
|
||||
<div class="mb-8">
|
||||
<h2 class="font-semibold mb-4">With Top Image</h2>
|
||||
@components.Card(components.CardProps{Class: "w-2/3"}) {
|
||||
@components.CardImage(components.CardImageProps{
|
||||
Src: "/assets/img/card_placeholder.jpeg",
|
||||
Alt: "Card image",
|
||||
Position: components.CardImageTop,
|
||||
AspectRatio: "16/9",
|
||||
})
|
||||
@components.CardHeader() {
|
||||
@components.CardTitle() {
|
||||
Featured Card
|
||||
}
|
||||
@components.CardDescription() {
|
||||
With top image
|
||||
}
|
||||
}
|
||||
@components.CardContent() {
|
||||
<p>This card shows top image usage.</p>
|
||||
}
|
||||
@components.CardFooter() {
|
||||
@components.Button(components.ButtonProps{Text: "Learn More"})
|
||||
}
|
||||
}
|
||||
</div>
|
||||
// Card with bottom image
|
||||
<div class="mb-8">
|
||||
<h2 class="font-semibold mb-4">With Bottom Image</h2>
|
||||
@components.Card(components.CardProps{Class: "w-2/3"}) {
|
||||
@components.CardHeader() {
|
||||
@components.CardTitle() {
|
||||
Featured Card
|
||||
}
|
||||
@components.CardDescription() {
|
||||
With top image
|
||||
}
|
||||
}
|
||||
@components.CardContent() {
|
||||
<p>This card shows top image usage.</p>
|
||||
}
|
||||
@components.CardFooter() {
|
||||
@components.Button(components.ButtonProps{Text: "Learn More"})
|
||||
}
|
||||
@components.CardImage(components.CardImageProps{
|
||||
Src: "/assets/img/card_placeholder.jpeg",
|
||||
Alt: "Card image",
|
||||
Position: components.CardImageBottom,
|
||||
AspectRatio: "16/9",
|
||||
})
|
||||
}
|
||||
</div>
|
||||
// Horizontal card with left image
|
||||
<div class="mb-8">
|
||||
<h2 class="font-semibold mb-4">Image Left</h2>
|
||||
@components.Card(components.CardProps{
|
||||
Horizontal: true,
|
||||
}) {
|
||||
@components.CardImage(components.CardImageProps{
|
||||
Src: "/assets/img/card_placeholder.jpeg",
|
||||
Alt: "Left side image",
|
||||
Position: components.CardImageLeft,
|
||||
Width: "1/3",
|
||||
})
|
||||
<div class="flex flex-col flex-1">
|
||||
@components.CardHeader() {
|
||||
@components.CardTitle() {
|
||||
Side Image Card
|
||||
}
|
||||
@components.CardDescription() {
|
||||
With left-aligned image
|
||||
}
|
||||
}
|
||||
@components.CardContent() {
|
||||
<p>This card demonstrates the left image layout.</p>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
// Horizontal card with right image
|
||||
<div class="mb-8">
|
||||
<h2 class="font-semibold mb-4">Image Right</h2>
|
||||
@components.Card(components.CardProps{
|
||||
Horizontal: true,
|
||||
}) {
|
||||
<div class="flex flex-col flex-1">
|
||||
@components.CardHeader() {
|
||||
@components.CardTitle() {
|
||||
Side Image Card
|
||||
}
|
||||
@components.CardDescription() {
|
||||
With right-aligned image
|
||||
}
|
||||
}
|
||||
@components.CardContent() {
|
||||
<p>This card demonstrates the right image layout.</p>
|
||||
}
|
||||
</div>
|
||||
@components.CardImage(components.CardImageProps{
|
||||
Src: "/assets/img/card_placeholder.jpeg",
|
||||
Alt: "Right side image",
|
||||
Position: components.CardImageRight,
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
22
internals/ui/showcase/card_default.templ
Normal file
22
internals/ui/showcase/card_default.templ
Normal file
@ -0,0 +1,22 @@
|
||||
package showcase
|
||||
|
||||
import "github.com/axzilla/goilerplate/pkg/components"
|
||||
|
||||
templ CardDefault() {
|
||||
@components.Card(components.CardProps{Class: "w-2/3"}) {
|
||||
@components.CardHeader() {
|
||||
@components.CardTitle() {
|
||||
Card Title
|
||||
}
|
||||
@components.CardDescription() {
|
||||
Card Description
|
||||
}
|
||||
}
|
||||
@components.CardContent() {
|
||||
<p>Card Content</p>
|
||||
}
|
||||
@components.CardFooter() {
|
||||
@components.Button(components.ButtonProps{Text: "Action"})
|
||||
}
|
||||
}
|
||||
}
|
||||
28
internals/ui/showcase/card_with_image_bottom.templ
Normal file
28
internals/ui/showcase/card_with_image_bottom.templ
Normal file
@ -0,0 +1,28 @@
|
||||
package showcase
|
||||
|
||||
import "github.com/axzilla/goilerplate/pkg/components"
|
||||
|
||||
templ CardWithImageBottom() {
|
||||
@components.Card(components.CardProps{Class: "w-2/3"}) {
|
||||
@components.CardHeader() {
|
||||
@components.CardTitle() {
|
||||
Featured Card
|
||||
}
|
||||
@components.CardDescription() {
|
||||
With top image
|
||||
}
|
||||
}
|
||||
@components.CardContent() {
|
||||
<p>This card shows top image usage.</p>
|
||||
}
|
||||
@components.CardFooter() {
|
||||
@components.Button(components.ButtonProps{Text: "Learn More"})
|
||||
}
|
||||
@components.CardImage(components.CardImageProps{
|
||||
Src: "/assets/img/card_placeholder.jpeg",
|
||||
Alt: "Card image",
|
||||
Position: components.CardImageBottom,
|
||||
AspectRatio: "16/9",
|
||||
})
|
||||
}
|
||||
}
|
||||
29
internals/ui/showcase/card_with_image_left.templ
Normal file
29
internals/ui/showcase/card_with_image_left.templ
Normal file
@ -0,0 +1,29 @@
|
||||
package showcase
|
||||
|
||||
import "github.com/axzilla/goilerplate/pkg/components"
|
||||
|
||||
templ CardWithImageLeft() {
|
||||
@components.Card(components.CardProps{
|
||||
Horizontal: true,
|
||||
}) {
|
||||
@components.CardImage(components.CardImageProps{
|
||||
Src: "/assets/img/card_placeholder.jpeg",
|
||||
Alt: "Left side image",
|
||||
Position: components.CardImageLeft,
|
||||
Width: "1/3",
|
||||
})
|
||||
<div class="flex flex-col flex-1">
|
||||
@components.CardHeader() {
|
||||
@components.CardTitle() {
|
||||
Side Image Card
|
||||
}
|
||||
@components.CardDescription() {
|
||||
With left-aligned image
|
||||
}
|
||||
}
|
||||
@components.CardContent() {
|
||||
<p>This card demonstrates the left image layout.</p>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
28
internals/ui/showcase/card_with_image_right.templ
Normal file
28
internals/ui/showcase/card_with_image_right.templ
Normal file
@ -0,0 +1,28 @@
|
||||
package showcase
|
||||
|
||||
import "github.com/axzilla/goilerplate/pkg/components"
|
||||
|
||||
templ CardWithImageRight() {
|
||||
@components.Card(components.CardProps{
|
||||
Horizontal: true,
|
||||
}) {
|
||||
<div class="flex flex-col flex-1">
|
||||
@components.CardHeader() {
|
||||
@components.CardTitle() {
|
||||
Side Image Card
|
||||
}
|
||||
@components.CardDescription() {
|
||||
With right-aligned image
|
||||
}
|
||||
}
|
||||
@components.CardContent() {
|
||||
<p>This card demonstrates the right image layout.</p>
|
||||
}
|
||||
</div>
|
||||
@components.CardImage(components.CardImageProps{
|
||||
Src: "/assets/img/card_placeholder.jpeg",
|
||||
Alt: "Right side image",
|
||||
Position: components.CardImageRight,
|
||||
})
|
||||
}
|
||||
}
|
||||
28
internals/ui/showcase/card_with_image_top.templ
Normal file
28
internals/ui/showcase/card_with_image_top.templ
Normal file
@ -0,0 +1,28 @@
|
||||
package showcase
|
||||
|
||||
import "github.com/axzilla/goilerplate/pkg/components"
|
||||
|
||||
templ CardWithImageTop() {
|
||||
@components.Card(components.CardProps{Class: "w-2/3"}) {
|
||||
@components.CardImage(components.CardImageProps{
|
||||
Src: "/assets/img/card_placeholder.jpeg",
|
||||
Alt: "Card image",
|
||||
Position: components.CardImageTop,
|
||||
AspectRatio: "16/9",
|
||||
})
|
||||
@components.CardHeader() {
|
||||
@components.CardTitle() {
|
||||
Featured Card
|
||||
}
|
||||
@components.CardDescription() {
|
||||
With top image
|
||||
}
|
||||
}
|
||||
@components.CardContent() {
|
||||
<p>This card shows top image usage.</p>
|
||||
}
|
||||
@components.CardFooter() {
|
||||
@components.Button(components.ButtonProps{Text: "Learn More"})
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,57 +0,0 @@
|
||||
package showcase
|
||||
|
||||
import "github.com/axzilla/goilerplate/pkg/components"
|
||||
|
||||
templ CheckboxShowcase() {
|
||||
<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">Default Checkbox</h2>
|
||||
@components.Checkbox(components.CheckboxProps{
|
||||
ID: "default-checkbox",
|
||||
Name: "default",
|
||||
Value: "default",
|
||||
Label: "Accept terms and conditions",
|
||||
})
|
||||
</div>
|
||||
<div class="mb-8">
|
||||
<h2 class="font-semibold mb-2">Checked Checkbox</h2>
|
||||
@components.Checkbox(components.CheckboxProps{
|
||||
ID: "checked-checkbox",
|
||||
Name: "newsletter",
|
||||
Value: "subscribe",
|
||||
Label: "Receive newsletter",
|
||||
Attributes: templ.Attributes{"checked": "true"},
|
||||
})
|
||||
</div>
|
||||
<div class="mb-8">
|
||||
<h2 class="font-semibold mb-2">Disabled Checkbox</h2>
|
||||
@components.Checkbox(components.CheckboxProps{
|
||||
ID: "disabled-checkbox",
|
||||
Name: "disabled",
|
||||
Value: "disabled",
|
||||
Label: "Disabled option",
|
||||
Attributes: templ.Attributes{"disabled": "true"},
|
||||
})
|
||||
</div>
|
||||
<div class="mb-8">
|
||||
<h2 class="font-semibold mb-2">Disabled Checked Checkbox</h2>
|
||||
@components.Checkbox(components.CheckboxProps{
|
||||
ID: "disabled-checked-checkbox",
|
||||
Name: "disabled-checked",
|
||||
Value: "disabled-checked",
|
||||
Label: "Disabled checked option",
|
||||
Attributes: templ.Attributes{"checked": "true", "disabled": "true"},
|
||||
})
|
||||
</div>
|
||||
<div class="mb-8">
|
||||
<h2 class="font-semibold mb-2">Checkbox without Label</h2>
|
||||
@components.Checkbox(components.CheckboxProps{
|
||||
ID: "no-label-checkbox",
|
||||
Name: "no-label",
|
||||
Value: "no-label",
|
||||
})
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
13
internals/ui/showcase/checkbox_checked.templ
Normal file
13
internals/ui/showcase/checkbox_checked.templ
Normal file
@ -0,0 +1,13 @@
|
||||
package showcase
|
||||
|
||||
import "github.com/axzilla/goilerplate/pkg/components"
|
||||
|
||||
templ CheckboxChecked() {
|
||||
@components.Checkbox(components.CheckboxProps{
|
||||
ID: "checked-checkbox",
|
||||
Name: "newsletter",
|
||||
Value: "subscribe",
|
||||
Label: "Receive newsletter",
|
||||
Attributes: templ.Attributes{"checked": "true"},
|
||||
})
|
||||
}
|
||||
12
internals/ui/showcase/checkbox_default.templ
Normal file
12
internals/ui/showcase/checkbox_default.templ
Normal file
@ -0,0 +1,12 @@
|
||||
package showcase
|
||||
|
||||
import "github.com/axzilla/goilerplate/pkg/components"
|
||||
|
||||
templ CheckboxDefault() {
|
||||
@components.Checkbox(components.CheckboxProps{
|
||||
ID: "default-checkbox",
|
||||
Name: "default",
|
||||
Value: "default",
|
||||
Label: "Accept terms and conditions",
|
||||
})
|
||||
}
|
||||
13
internals/ui/showcase/checkbox_disabled.templ
Normal file
13
internals/ui/showcase/checkbox_disabled.templ
Normal file
@ -0,0 +1,13 @@
|
||||
package showcase
|
||||
|
||||
import "github.com/axzilla/goilerplate/pkg/components"
|
||||
|
||||
templ CheckboxDisabled() {
|
||||
@components.Checkbox(components.CheckboxProps{
|
||||
ID: "disabled-checked-checkbox",
|
||||
Name: "disabled-checked",
|
||||
Value: "disabled-checked",
|
||||
Label: "Disabled checked option",
|
||||
Attributes: templ.Attributes{"disabled": "true"},
|
||||
})
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user