diff --git a/assets/css/output.css b/assets/css/output.css index c4def430..9bd55d28 100644 --- a/assets/css/output.css +++ b/assets/css/output.css @@ -743,6 +743,9 @@ .shrink-0 { flex-shrink: 0; } + .caption-bottom { + caption-side: bottom; + } .border-collapse { border-collapse: collapse; } @@ -1376,6 +1379,9 @@ .text-left { text-align: left; } + .align-middle { + vertical-align: middle; + } .text-2xl { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); @@ -1998,6 +2004,13 @@ } } } + .hover\:bg-muted\/50 { + &:hover { + @media (hover: hover) { + background-color: color-mix(in oklab, var(--muted) 50%, transparent); + } + } + } .hover\:bg-primary\/90 { &:hover { @media (hover: hover) { @@ -2380,6 +2393,18 @@ line-height: var(--leading-relaxed); } } + .\[\&_tr\]\:border-b { + & tr { + border-bottom-style: var(--tw-border-style); + border-bottom-width: 1px; + } + } + .\[\&_tr\:last-child\]\:border-0 { + & tr:last-child { + border-style: var(--tw-border-style); + border-width: 0px; + } + } .\[\&\.htmx-request\]\:inline-flex { &.htmx-request { display: inline-flex; @@ -2459,11 +2484,31 @@ } } } + .\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0 { + &:has([role=checkbox]) { + padding-right: calc(var(--spacing) * 0); + } + } .\[\&\:has\(svg\)\]\:pl-11 { &:has(svg) { padding-left: calc(var(--spacing) * 11); } } + .\[\&\:not\(\.bg-primary\)\]\:hover\:bg-muted { + &:not(.bg-primary) { + &:hover { + @media (hover: hover) { + background-color: var(--muted); + } + } + } + } + .\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\] { + &>[role=checkbox] { + --tw-translate-y: 2px; + translate: var(--tw-translate-x) var(--tw-translate-y); + } + } .open\:\[\&\>summary_svg\]\:rotate-180 { &:is([open], :popover-open, :open) { &>summary svg { @@ -2492,11 +2537,28 @@ translate: var(--tw-translate-x) var(--tw-translate-y); } } + .\[\&\>tr\]\:last\:border-b-0 { + &>tr { + &:last-child { + border-bottom-style: var(--tw-border-style); + border-bottom-width: 0px; + } + } + } .\[\&\;\.htmx-request\]\:inline-flex { &.htmx-request { display: inline-flex; } } + .\[\&\;\:not\(\.bg-primary\)\]\:hover\:bg-muted { + &:not(.bg-primary) { + &:hover { + @media (hover: hover) { + background-color: var(--muted); + } + } + } + } } :root { --background: hsl(0 0% 100%); diff --git a/cmd/server/main.go b/cmd/server/main.go index 133b5f60..bcaab093 100644 --- a/cmd/server/main.go +++ b/cmd/server/main.go @@ -124,6 +124,7 @@ func main() { mux.Handle("GET /docs/components/skeleton", templ.Handler(pages.Skeleton())) mux.Handle("GET /docs/components/slider", templ.Handler(pages.Slider())) mux.Handle("GET /docs/components/spinner", templ.Handler(pages.Spinner())) + mux.Handle("GET /docs/components/table", templ.Handler(pages.Table())) mux.Handle("GET /docs/components/tabs", templ.Handler(pages.Tabs())) mux.Handle("GET /docs/components/textarea", templ.Handler(pages.Textarea())) // mux.Handle("GET /docs/components/time-picker", templ.Handler(pages.TimePicker())) diff --git a/components/table.templ b/components/table.templ new file mode 100644 index 00000000..0ac25045 --- /dev/null +++ b/components/table.templ @@ -0,0 +1,137 @@ +package components + +import "github.com/axzilla/templui/utils" + +type TableProps struct { + ID string + Class string + Attributes templ.Attributes +} + +type TableHeaderProps struct { + ID string + Class string + Attributes templ.Attributes +} + +type TableBodyProps struct { + ID string + Class string + Attributes templ.Attributes +} + +type TableFooterProps struct { + ID string + Class string + Attributes templ.Attributes +} + +type TableRowProps struct { + ID string + Class string + Attributes templ.Attributes + Selected bool +} + +type TableHeadProps struct { + ID string + Class string + Attributes templ.Attributes +} + +type TableCellProps struct { + ID string + Class string + Attributes templ.Attributes +} + +type TableCaptionProps struct { + ID string + Class string + Attributes templ.Attributes +} + +templ Table(props TableProps) { +
+ + { children... } +
+
+} + +templ TableHeader(props TableHeaderProps) { + + { children... } + +} + +templ TableBody(props TableBodyProps) { + + { children... } + +} + +templ TableFooter(props TableFooterProps) { + tr]:last:border-b-0", props.Class) } + { props.Attributes... } + > + { children... } + +} + +templ TableRow(props TableRowProps) { + + { children... } + +} + +templ TableHead(props TableHeadProps) { + [role=checkbox]]:translate-y-[2px]", props.Class) } + { props.Attributes... } + > + { children... } + +} + +templ TableCell(props TableCellProps) { + [role=checkbox]]:translate-y-[2px]", props.Class) } + { props.Attributes... } + > + { children... } + +} + +templ TableCaption(props TableCaptionProps) { + + { children... } + +} diff --git a/components/table_templ.go b/components/table_templ.go new file mode 100644 index 00000000..f1c0b4ee --- /dev/null +++ b/components/table_templ.go @@ -0,0 +1,677 @@ +// Code generated by templ - DO NOT EDIT. + +// templ: version: v0.3.833 +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/templui/utils" + +type TableProps struct { + ID string + Class string + Attributes templ.Attributes +} + +type TableHeaderProps struct { + ID string + Class string + Attributes templ.Attributes +} + +type TableBodyProps struct { + ID string + Class string + Attributes templ.Attributes +} + +type TableFooterProps struct { + ID string + Class string + Attributes templ.Attributes +} + +type TableRowProps struct { + ID string + Class string + Attributes templ.Attributes + Selected bool +} + +type TableHeadProps struct { + ID string + Class string + Attributes templ.Attributes +} + +type TableCellProps struct { + ID string + Class string + Attributes templ.Attributes +} + +type TableCaptionProps struct { + ID string + Class string + Attributes templ.Attributes +} + +func Table(props TableProps) 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) + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "
") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + var templ_7745c5c3_Var2 = []any{utils.TwMerge("w-full caption-bottom text-sm", 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 = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "
") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + return nil + }) +} + +func TableHeader(props TableHeaderProps) 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_Var5 := templ.GetChildren(ctx) + if templ_7745c5c3_Var5 == nil { + templ_7745c5c3_Var5 = templ.NopComponent + } + ctx = templ.ClearChildren(ctx) + var templ_7745c5c3_Var6 = []any{utils.TwMerge("[&_tr]:border-b", props.Class)} + templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var6...) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = templ_7745c5c3_Var5.Render(ctx, templ_7745c5c3_Buffer) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + return nil + }) +} + +func TableBody(props TableBodyProps) 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_Var9 := templ.GetChildren(ctx) + if templ_7745c5c3_Var9 == nil { + templ_7745c5c3_Var9 = templ.NopComponent + } + ctx = templ.ClearChildren(ctx) + var templ_7745c5c3_Var10 = []any{utils.TwMerge("[&_tr:last-child]:border-0", props.Class)} + templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var10...) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = templ_7745c5c3_Var9.Render(ctx, templ_7745c5c3_Buffer) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + return nil + }) +} + +func TableFooter(props TableFooterProps) 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_Var13 := templ.GetChildren(ctx) + if templ_7745c5c3_Var13 == nil { + templ_7745c5c3_Var13 = templ.NopComponent + } + ctx = templ.ClearChildren(ctx) + var templ_7745c5c3_Var14 = []any{utils.TwMerge("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", props.Class)} + templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var14...) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = templ_7745c5c3_Var13.Render(ctx, templ_7745c5c3_Buffer) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + return nil + }) +} + +func TableRow(props TableRowProps) 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_Var17 := templ.GetChildren(ctx) + if templ_7745c5c3_Var17 == nil { + templ_7745c5c3_Var17 = templ.NopComponent + } + ctx = templ.ClearChildren(ctx) + var templ_7745c5c3_Var18 = []any{ + utils.TwMerge("border-b transition-colors hover:bg-muted/50", props.Class), + templ.KV("data-[state=selected]:bg-muted", props.Selected), + } + templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var18...) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = templ_7745c5c3_Var17.Render(ctx, templ_7745c5c3_Buffer) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + return nil + }) +} + +func TableHead(props TableHeadProps) 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_Var21 := templ.GetChildren(ctx) + if templ_7745c5c3_Var21 == nil { + templ_7745c5c3_Var21 = templ.NopComponent + } + ctx = templ.ClearChildren(ctx) + var templ_7745c5c3_Var22 = []any{utils.TwMerge("h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", props.Class)} + templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var22...) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, "") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = templ_7745c5c3_Var21.Render(ctx, templ_7745c5c3_Buffer) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 31, "") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + return nil + }) +} + +func TableCell(props TableCellProps) 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_Var25 := templ.GetChildren(ctx) + if templ_7745c5c3_Var25 == nil { + templ_7745c5c3_Var25 = templ.NopComponent + } + ctx = templ.ClearChildren(ctx) + var templ_7745c5c3_Var26 = []any{utils.TwMerge("p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", props.Class)} + templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var26...) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 32, "") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = templ_7745c5c3_Var25.Render(ctx, templ_7745c5c3_Buffer) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 36, "") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + return nil + }) +} + +func TableCaption(props TableCaptionProps) 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_Var29 := templ.GetChildren(ctx) + if templ_7745c5c3_Var29 == nil { + templ_7745c5c3_Var29 = templ.NopComponent + } + ctx = templ.ClearChildren(ctx) + var templ_7745c5c3_Var30 = []any{utils.TwMerge("mt-4 text-sm text-muted-foreground", props.Class)} + templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var30...) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 37, "") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = templ_7745c5c3_Var29.Render(ctx, templ_7745c5c3_Buffer) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 41, "") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + return nil + }) +} + +var _ = templruntime.GeneratedTemplate diff --git a/internal/shared/menudata.go b/internal/shared/menudata.go index a37845c9..904736f0 100644 --- a/internal/shared/menudata.go +++ b/internal/shared/menudata.go @@ -162,6 +162,10 @@ var Sections = []Section{ Text: "Spinner", Href: "/docs/components/spinner", }, + { + Text: "Table", + Href: "/docs/components/table", + }, { Text: "Tabs", Href: "/docs/components/tabs", diff --git a/internal/ui/pages/table.templ b/internal/ui/pages/table.templ new file mode 100644 index 00000000..f44c2c26 --- /dev/null +++ b/internal/ui/pages/table.templ @@ -0,0 +1,30 @@ +package pages + +import ( + "github.com/axzilla/templui/internal/ui/layouts" + "github.com/axzilla/templui/internal/ui/modules" + "github.com/axzilla/templui/internal/ui/showcase" +) + +templ Table() { + @layouts.DocsLayout( + "Table", + "Display tabular data with rich formatting and interaction options", + ) { + @modules.PageWrapper(modules.PageWrapperProps{ + Name: "Table", + Description: templ.Raw("Display tabular data with rich formatting and interaction options"), + Tailwind: true, + }) { + @modules.ExampleWrapper(modules.ExampleWrapperProps{ + ShowcaseFile: showcase.Table(), + PreviewCodeFile: "table.templ", + ComponentCodeFile: "table.templ", + }) + @modules.Usage(modules.UsageProps{ + ComponentName: "Table", + PropsExample: "...", + }) + } + } +} diff --git a/internal/ui/showcase/table.templ b/internal/ui/showcase/table.templ new file mode 100644 index 00000000..d37274dc --- /dev/null +++ b/internal/ui/showcase/table.templ @@ -0,0 +1,87 @@ +package showcase + +import "github.com/axzilla/templui/components" + +templ Table() { + @components.Table(components.TableProps{}) { + @components.TableCaption(components.TableCaptionProps{}) { + A list of your recent hires. + } + @components.TableHeader(components.TableHeaderProps{}) { + @components.TableRow(components.TableRowProps{}) { + @components.TableHead(components.TableHeadProps{}) { + Name + } + @components.TableHead(components.TableHeadProps{}) { + Role + } + @components.TableHead(components.TableHeadProps{}) { + Status + } + @components.TableHead(components.TableHeadProps{}) { + Actions + } + } + } + @components.TableBody(components.TableBodyProps{}) { + @components.TableRow(components.TableRowProps{}) { + @components.TableCell(components.TableCellProps{}) { + John Doe + } + @components.TableCell(components.TableCellProps{}) { + Software Engineer + } + @components.TableCell(components.TableCellProps{}) { + Active + } + @components.TableCell(components.TableCellProps{}) { + Edit + } + } + @components.TableRow(components.TableRowProps{}) { + @components.TableCell(components.TableCellProps{}) { + Jane Smith + } + @components.TableCell(components.TableCellProps{}) { + Designer + } + @components.TableCell(components.TableCellProps{}) { + Active + } + @components.TableCell(components.TableCellProps{}) { + Edit + } + } + @components.TableRow(components.TableRowProps{}) { + @components.TableCell(components.TableCellProps{}) { + Bob Johnson + } + @components.TableCell(components.TableCellProps{}) { + Product Manager + } + @components.TableCell(components.TableCellProps{}) { + Inactive + } + @components.TableCell(components.TableCellProps{}) { + Edit + } + } + @components.TableFooter(components.TableFooterProps{}) { + @components.TableRow(components.TableRowProps{}) { + @components.TableHead(components.TableHeadProps{}) { + 3 items + } + @components.TableHead(components.TableHeadProps{}) { + 1 page + } + @components.TableHead(components.TableHeadProps{}) { + 1-3 of 3 + } + @components.TableHead(components.TableHeadProps{}) { + Next + } + } + } + } + } +}