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

refactor: make pagewrappers description prop into a templ.Component

Browse Source
This commit is contained in:
axzilla 2024-11-28 07:23:20 +07:00
parent be417b51f8
commit a19377c5b0
10 changed files with 13 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
internals/ui/modules/page_wrapper.templ
View File

@ -2,13 +2,15 @@ package modules
type PageWrapperProps struct {
Name string
Description string
Description templ.Component
}
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>
<p class="mb-4 text-muted-foreground">
@p.Description
</p>
</div>
<div class="space-y-8">
{ children... }

2
internals/ui/pages/accordion.templ
View File

@ -11,7 +11,7 @@ templ Accordion() {
@layouts.DocsLayout() {
@modules.PageWrapper(modules.PageWrapperProps{
Name: "Accordion",
Description: "A vertically ds stacked set of interactive headings that each reveal a section of content.",
Description: templ.Raw("A vertically ds stacked set of interactive headings that each reveal a section of content."),
}) {
@modules.ExampleWrapper(modules.ExampleWrapperProps{
ShowcaseFile: showcase.Accordion(),

2
internals/ui/pages/alert.templ
View File

@ -10,7 +10,7 @@ templ Alert() {
@layouts.DocsLayout() {
@modules.PageWrapper(modules.PageWrapperProps{
Name: "Alert",
Description: "Displays a callout for user attention, often used for notifications, warnings, or important messages.",
Description: templ.Raw("Displays a callout for user attention, often used for notifications, warnings, or important messages."),
}) {
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "Default",

2
internals/ui/pages/avatar.templ
View File

@ -10,7 +10,7 @@ templ Avatar() {
@layouts.DocsLayout() {
@modules.PageWrapper(modules.PageWrapperProps{
Name: "Avatar",
Description: "An image element with a fallback for representing the user.",
Description: templ.Raw("An image element with a fallback for representing the user."),
}) {
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "With Image",

2
internals/ui/pages/button.templ
View File

@ -10,7 +10,7 @@ templ Button() {
@layouts.DocsLayout() {
@modules.PageWrapper(modules.PageWrapperProps{
Name: "Button",
Description: "Displays a button or a component that looks like a button.",
Description: templ.Raw("Displays a button or a component that looks like a button."),
}) {
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "Variants",

2
internals/ui/pages/card.templ
View File

@ -10,7 +10,7 @@ templ Card() {
@layouts.DocsLayout() {
@modules.PageWrapper(modules.PageWrapperProps{
Name: "Card",
Description: "Displays a card with header, content, and footer.",
Description: templ.Raw("Displays a card with header, content, and footer."),
}) {
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "Default",

2
internals/ui/pages/checkbox.templ
View File

@ -10,7 +10,7 @@ templ Checkbox() {
@layouts.DocsLayout() {
@modules.PageWrapper(modules.PageWrapperProps{
Name: "Checkbox",
Description: "A control that allows the user to toggle between checked and not checked.",
Description: templ.Raw("A control that allows the user to toggle between checked and not checked."),
}) {
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "Default",

2
internals/ui/pages/datepicker.templ
View File

@ -10,7 +10,7 @@ templ Datepicker() {
@layouts.DocsLayout() {
@modules.PageWrapper(modules.PageWrapperProps{
Name: "Datepicker",
Description: "A date picker component.",
Description: templ.Raw("A date picker component."),
}) {
@modules.ExampleWrapper(modules.ExampleWrapperProps{
ShowcaseFile: showcase.Datepicker(),

2
internals/ui/pages/dropdown_menu.templ
View File

@ -10,7 +10,7 @@ templ DropdownMenu() {
@layouts.DocsLayout() {
@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.",
Description: templ.Raw("The Dropdown Menu component provides a way to display a list of options in a compact form."),
}) {
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "Default",

2
internals/ui/pages/icon.templ
View File

@ -10,7 +10,7 @@ templ Icon() {
@layouts.DocsLayout() {
@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.`,
Description: templ.Raw(`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",