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

fix: set correct file names on some showcase examples

Browse Source
This commit is contained in:
axzilla 2024-11-28 14:59:38 +07:00
parent 0f6c7d8262
commit fcd2d7eb97
5 changed files with 54 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
assets/css/output.css
View File

@ -653,10 +653,6 @@ body {
visibility: hidden;
}
.static {
position: static;
}
.fixed {
position: fixed;
}

48
internals/ui/modules/example_wrapper.templ
View File

@ -34,25 +34,39 @@ 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, Class: p.ShowcaseClass}),
},
{
ID: "code",
Title: "Code",
Content: CodeSnippetFromEmbedded(p.PreviewCodeFile, "go", showcase.TemplFiles),
},
{
ID: "component",
Title: "Component",
Content: CodeSnippetFromEmbedded(p.ComponentCodeFile, "go", components.TemplFiles),
},
},
Tabs: generateTabs(p), // Extrahiere Logik in separate Funktion
TabsContainerClass: "md:w-1/2",
ContentContainerClass: "w-full",
})
</div>
}
// generateTabs erstellt die Tabs basierend auf den Props
func generateTabs(p ExampleWrapperProps) []components.Tab {
tabs := []components.Tab{
{
ID: "preview",
Title: "Preview",
Content: showcaseWrapper(showcaseWrapperProps{
Content: p.ShowcaseFile,
Class: p.ShowcaseClass,
}),
},
{
ID: "code",
Title: "Code",
Content: CodeSnippetFromEmbedded(p.PreviewCodeFile, "go", showcase.TemplFiles),
},
}
// Füge Component Tab nur hinzu wenn gewünscht
if p.ComponentCodeFile != "" {
tabs = append(tabs, components.Tab{
ID: "component",
Title: "Component",
Content: CodeSnippetFromEmbedded(p.ComponentCodeFile, "go", components.TemplFiles),
})
}
return tabs
}

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

@ -15,8 +15,8 @@ templ Card() {
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "Default",
ShowcaseFile: showcase.CardDefault(),
PreviewCodeFile: "button_default.templ",
ComponentCodeFile: "button.templ",
PreviewCodeFile: "card_default.templ",
ComponentCodeFile: "card.templ",
})
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "With Image Left",

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

@ -15,20 +15,20 @@ templ DropdownMenu() {
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "Default",
ShowcaseFile: showcase.DropdownMenuDefault(),
PreviewCodeFile: "dropdownmenu.templ",
ComponentCodeFile: "dropdownmenu.templ",
PreviewCodeFile: "dropdown_menu_default.templ",
ComponentCodeFile: "dropdown_menu.templ",
})
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "With Icons",
ShowcaseFile: showcase.DropdownMenuWithIcons(),
PreviewCodeFile: "dropdownmenu_with_icons.templ",
ComponentCodeFile: "dropdownmenu.templ",
PreviewCodeFile: "dropdown_menu_with_icons.templ",
ComponentCodeFile: "dropdown_menu.templ",
})
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "Advanced",
ShowcaseFile: showcase.DropdownMenuAdvanced(),
PreviewCodeFile: "dropdownmenu_advanced.templ",
ComponentCodeFile: "dropdownmenu.templ",
PreviewCodeFile: "dropdown_menu_advanced.templ",
ComponentCodeFile: "dropdown_menu.templ",
})
}
}

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

@ -13,34 +13,29 @@ templ Icon() {
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",
ShowcaseFile: showcase.IconDefault(),
PreviewCodeFile: "icon_default.templ",
ComponentCodeFile: "icon.templ",
SectionName: "Default",
ShowcaseFile: showcase.IconDefault(),
PreviewCodeFile: "icon_default.templ",
})
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "Colored",
ShowcaseFile: showcase.IconColored(),
PreviewCodeFile: "icon_colored.templ",
ComponentCodeFile: "icon.templ",
SectionName: "Colored",
ShowcaseFile: showcase.IconColored(),
PreviewCodeFile: "icon_colored.templ",
})
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "Filled",
ShowcaseFile: showcase.IconFilled(),
PreviewCodeFile: "icon_filled.templ",
ComponentCodeFile: "icon.templ",
SectionName: "Filled",
ShowcaseFile: showcase.IconFilled(),
PreviewCodeFile: "icon_filled.templ",
})
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "Sizes",
ShowcaseFile: showcase.IconSizes(),
PreviewCodeFile: "icon_sizes.templ",
ComponentCodeFile: "icon.templ",
SectionName: "Sizes",
ShowcaseFile: showcase.IconSizes(),
PreviewCodeFile: "icon_sizes.templ",
})
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "Custom Classes",
ShowcaseFile: showcase.IconCustomClasses(),
PreviewCodeFile: "icon_custom_classes.templ",
ComponentCodeFile: "icon.templ",
SectionName: "Custom Classes",
ShowcaseFile: showcase.IconCustomClasses(),
PreviewCodeFile: "icon_custom_classes.templ",
})
}
}