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

feat: create badge component

Browse Source
This commit is contained in:
axzilla 2024-12-10 08:17:41 +07:00
parent ff82a53f3d
commit 239addb50e
8 changed files with 282 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
assets/css/output.css
View File

@ -1388,6 +1388,10 @@ body {
border-color: hsl(var(--primary) / var(--tw-border-opacity, 1));
}
.border-transparent {
border-color: transparent;
}
.bg-\[--theme-primary\] {
background-color: var(--theme-primary);
}
@ -1519,6 +1523,11 @@ body {
padding-right: 0.5rem;
}
.px-2\.5 {
padding-left: 0.625rem;
padding-right: 0.625rem;
}
.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
@ -1539,6 +1548,11 @@ body {
padding-right: 2rem;
}
.py-0\.5 {
padding-top: 0.125rem;
padding-bottom: 0.125rem;
}
.py-1 {
padding-top: 0.25rem;
padding-bottom: 0.25rem;

23
cmd/server/main.go
View File

@ -3,7 +3,6 @@ package main
import (
"fmt"
"net/http"
// "path/filepath"
"github.com/a-h/templ"
"github.com/axzilla/goilerplate/assets"
@ -29,6 +28,7 @@ func main() {
mux.Handle("GET /docs/components/accordion", templ.Handler(pages.Accordion()))
mux.Handle("GET /docs/components/alert", templ.Handler(pages.Alert()))
mux.Handle("GET /docs/components/avatar", templ.Handler(pages.Avatar()))
mux.Handle("GET /docs/components/badge", templ.Handler(pages.Badge()))
mux.Handle("GET /docs/components/button", templ.Handler(pages.Button()))
mux.Handle("GET /docs/components/card", templ.Handler(pages.Card()))
mux.Handle("GET /docs/components/checkbox", templ.Handler(pages.Checkbox()))
@ -54,28 +54,7 @@ func main() {
func SetupAssetsRoutes(mux *http.ServeMux) {
var isDevelopment = config.AppConfig.GoEnv != "production"
// mimeTypes := map[string]string{
// ".css": "text/css; charset=utf-8",
// ".js": "application/javascript; charset=utf-8",
// ".svg": "image/svg+xml",
// ".html": "text/html; charset=utf-8",
// ".jpg": "image/jpeg",
// ".jpeg": "image/jpeg",
// ".png": "image/png",
// ".gif": "image/gif",
// ".woff": "font/woff",
// ".woff2": "font/woff2",
// ".ttf": "font/ttf",
// ".ico": "image/x-icon",
// }
assetHandler := http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
// ext := filepath.Ext(r.URL.Path)
// if mimeType, ok := mimeTypes[ext]; ok {
// w.Header().Set("Content-Type", mimeType)
// }
if isDevelopment {
w.Header().Set("Cache-Control", "no-store")
}

4
internals/shared/menudata.go
View File

@ -45,6 +45,10 @@ var Sections = []Section{
Text: "Avatar",
Href: "/docs/components/avatar",
},
{
Text: "Badge",
Href: "/docs/components/badge",
},
{
Text: "Button",
Href: "/docs/components/button",

29
internals/ui/pages/badge.templ Normal file
View File

@ -0,0 +1,29 @@
package pages
import (
"github.com/axzilla/goilerplate/internals/ui/layouts"
"github.com/axzilla/goilerplate/internals/ui/modules"
"github.com/axzilla/goilerplate/internals/ui/showcase"
)
templ Badge() {
@layouts.DocsLayout() {
@modules.PageWrapper(modules.PageWrapperProps{
Name: "Badge",
Description: templ.Raw("Badge component is used to display a small amount of information in a visual style."),
}) {
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "Variants",
ShowcaseFile: showcase.BadgeVariants(),
PreviewCodeFile: "badge_variants.templ",
ComponentCodeFile: "badge.templ",
})
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "Icons",
ShowcaseFile: showcase.BadgeIcons(),
PreviewCodeFile: "badge_icons.templ",
ComponentCodeFile: "badge.templ",
})
}
}
}

19
internals/ui/showcase/badge_icons.templ Normal file
View File

@ -0,0 +1,19 @@
package showcase
import (
"github.com/axzilla/goilerplate/pkg/components"
"github.com/axzilla/goilerplate/pkg/icons"
)
templ BadgeIcons() {
<div class="flex flex-wrap gap-2">
@components.Badge(components.BadgeProps{
Text: "Icon Left",
IconBefore: icons.Rocket(icons.IconProps{Size: "14"}),
})
@components.Badge(components.BadgeProps{
Text: "Icon Right",
IconAfter: icons.Rocket(icons.IconProps{Size: "14"}),
})
</div>
}

12
internals/ui/showcase/badge_variants.templ Normal file
View File

@ -0,0 +1,12 @@
package showcase
import "github.com/axzilla/goilerplate/pkg/components"
templ BadgeVariants() {
<div class="flex flex-wrap gap-2">
@components.Badge(components.BadgeProps{Text: "Default"})
@components.Badge(components.BadgeProps{Text: "Secondary", Variant: components.BadgeVariantSecondary})
@components.Badge(components.BadgeProps{Text: "Destructive", Variant: components.BadgeVariantDestructive})
@components.Badge(components.BadgeProps{Text: "Outline", Variant: components.BadgeVariantOutline})
</div>
}

62
pkg/components/badge.templ Normal file
View File

@ -0,0 +1,62 @@
package components
import "github.com/axzilla/goilerplate/pkg/utils"
type BadgeVariant string
const (
BadgeVariantDefault BadgeVariant = "default"
BadgeVariantSecondary BadgeVariant = "secondary"
BadgeVariantDestructive BadgeVariant = "destructive"
BadgeVariantOutline BadgeVariant = "outline"
)
type BadgeProps struct {
Class string // Additional CSS classes
Text string // Badge text content
Variant BadgeVariant // Visual style variant
IconBefore templ.Component // Icon to display before the text
IconAfter templ.Component // Icon to display after the text
Attributes templ.Attributes // Additional HTML attributes
}
func (b BadgeProps) variantClasses() string {
switch b.Variant {
case BadgeVariantDestructive:
return "border-transparent bg-destructive text-destructive-foreground"
case BadgeVariantOutline:
return "text-foreground border-border"
case BadgeVariantSecondary:
return "border-transparent bg-secondary text-secondary-foreground"
default:
return "border-transparent bg-primary text-primary-foreground"
}
}
templ Badge(props BadgeProps) {
<div
class={
utils.TwMerge(
// Layout
"inline-flex items-center gap-2",
// Style
"rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors",
// State
"focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
// Variants
props.variantClasses(),
// Custom
props.Class,
),
}
{ props.Attributes... }
>
if props.IconBefore != nil {
@props.IconBefore
}
{ props.Text }
if props.IconAfter != nil {
@props.IconAfter
}
</div>
}

141
pkg/components/badge_templ.go Normal file
View File

@ -0,0 +1,141 @@
// Code generated by templ - DO NOT EDIT.
// templ: version: v0.2.793
package components
//lint:file-ignore SA4006 This context is only used if a nested component is present.
import "github.com/a-h/templ"
import templruntime "github.com/a-h/templ/runtime"
import "github.com/axzilla/goilerplate/pkg/utils"
type BadgeVariant string
const (
BadgeVariantDefault BadgeVariant = "default"
BadgeVariantSecondary BadgeVariant = "secondary"
BadgeVariantDestructive BadgeVariant = "destructive"
BadgeVariantOutline BadgeVariant = "outline"
)
type BadgeProps struct {
Class string // Additional CSS classes
Text string // Badge text content
Variant BadgeVariant // Visual style variant
IconBefore templ.Component // Icon to display before the text
IconAfter templ.Component // Icon to display after the text
Attributes templ.Attributes // Additional HTML attributes
}
func (b BadgeProps) variantClasses() string {
switch b.Variant {
case BadgeVariantDestructive:
return "border-transparent bg-destructive text-destructive-foreground"
case BadgeVariantOutline:
return "text-foreground border-border"
case BadgeVariantSecondary:
return "border-transparent bg-secondary text-secondary-foreground"
default:
return "border-transparent bg-primary text-primary-foreground"
}
}
func Badge(props BadgeProps) templ.Component {
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
return templ_7745c5c3_CtxErr
}
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
if !templ_7745c5c3_IsBuffer {
defer func() {
templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
if templ_7745c5c3_Err == nil {
templ_7745c5c3_Err = templ_7745c5c3_BufErr
}
}()
}
ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Var1 := templ.GetChildren(ctx)
if templ_7745c5c3_Var1 == nil {
templ_7745c5c3_Var1 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
var templ_7745c5c3_Var2 = []any{
utils.TwMerge(
// Layout
"inline-flex items-center gap-2",
// Style
"rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors",
// State
"focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
// Variants
props.variantClasses(),
// Custom
props.Class,
),
}
templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var2...)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var3 string
templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var2).String())
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/badge.templ`, Line: 1, Col: 0}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, props.Attributes)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
if props.IconBefore != nil {
templ_7745c5c3_Err = props.IconBefore.Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
var templ_7745c5c3_Var4 string
templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(props.Text)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/badge.templ`, Line: 57, Col: 14}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" ")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
if props.IconAfter != nil {
templ_7745c5c3_Err = props.IconAfter.Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
return templ_7745c5c3_Err
})
}
var _ = templruntime.GeneratedTemplate