ui-compenents wip

use superkit ui/button on landing
2024-06-23 19:13:23 +02:00 · 2024-06-23 19:12:10 +02:00 · 2024-06-23 18:24:24 +02:00
13 changed files with 760 additions and 6 deletions
--- a/bootstrap/app/handlers/ui_components.go
+++ b/bootstrap/app/handlers/ui_components.go
@ -0,0 +1,11 @@
+package handlers
+
+import (
+	uicomponents "AABBCCDD/app/views/ui_components"
+
+	"github.com/anthdm/superkit/kit"
+)
+
+func HandleUIComponentsIndex(kit *kit.Kit) error {
+	return kit.Render(uicomponents.Index())
+}
--- a/bootstrap/app/routes.go
+++ b/bootstrap/app/routes.go
@ -43,6 +43,7 @@ func InitializeRoutes(router *chi.Mux) {

 		// Routes
 		app.Get("/", kit.Handler(handlers.HandleLandingIndex))
+		app.Get("/components", kit.Handler(handlers.HandleUIComponentsIndex))
 	})

 	// Authenticated routes
--- a/bootstrap/app/views/components/navigation.templ
+++ b/bootstrap/app/views/components/navigation.templ
@ -1,12 +1,33 @@
 package components

+type Route struct {
+	Href  string
+	Title string
+}
+
+var routes = []Route{
+	{
+		Title: "home",
+		Href:  "/",
+	},
+	{
+		Title: "components",
+		Href:  "/components",
+	},
+}
+
 templ Navigation() {
 	<nav class="border-b py-3">
-		<div class="container mx-auto flex justify-between">
+		<div class="container mx-auto flex justify-between" hx-boost="true">
 			<div class="text-lg text-foreground">
 				<a href="/" class="font-semibold uppercase">superkit <span class="text-sm">v0.1</span></a>
 			</div>
-			<div class="flex gap-4 items-center">
+			<div class="flex gap-8 items-center">
+				<ul class="flex gap-3">
+					for _, route := range routes {
+						<li><a href={ templ.URL(route.Href) }>{ route.Title }</a></li>
+					}
+				</ul>
 				<div>
 					@ThemeSwitcher()
 				</div>
--- a/bootstrap/app/views/landing/index.templ
+++ b/bootstrap/app/views/landing/index.templ
@ -2,6 +2,7 @@ package landing

 import (
 	"AABBCCDD/app/views/layouts"
+	"github.com/anthdm/superkit/ui/button"
 )

 templ Index() {
@ -16,7 +17,11 @@ templ Index() {
 					<h2 class="text-lg text-muted-foreground">Escape the JavaScript ecosystem</h2>
 				</div>
 				<div class="flex justify-center">
-					<a href="https://github.com/anthdm/superkit" target="_blank" class="bg-primary w-fit rounded-md px-4 py-2 text-primary-foreground font-medium text-sm">What are you waiting for?</a>
+					<a
+						{ button.Primary()... }
+						href="https://github.com/anthdm/superkit"
+						target="_blank"
+					>What are you waiting for?</a>
 				</div>
 			</div>
 		</div>
--- a/bootstrap/app/views/ui_components/index.templ
+++ b/bootstrap/app/views/ui_components/index.templ
@ -0,0 +1,142 @@
+package uicomponents
+
+import (
+	"AABBCCDD/app/views/layouts"
+
+	"github.com/anthdm/superkit/ui"
+	"github.com/anthdm/superkit/ui/button"
+	"github.com/anthdm/superkit/ui/card"
+	"github.com/anthdm/superkit/ui/table"
+	"github.com/anthdm/superkit/ui/input"
+)
+
+templ Index() {
+	@layouts.App() {
+		<div class="flex flex-col gap-10 mt-10 py-8">
+			<div>
+				<h1 class="text-2xl font-semibold">Buttons</h1>
+				<div class="border-b pt-2 mb-6"></div>
+				<div class="flex gap-4">
+					<button { button.Primary()... }>primary</button>
+					<button { button.Outline()... }>outline</button>
+					<button { button.Secondary()... }>secondary</button>
+					<button { button.Destructive()... }>destructive</button>
+				</div>
+			</div>
+			<div>
+				<h1 class="text-2xl font-semibold">Forms</h1>
+				<div class="border-b pt-2 mb-6"></div>
+				<form class="flex flex-col gap-4 w-full max-w-xs">
+					<div class="flex flex-col gap-2">
+						<label class="text-sm">Email</label>
+						<input name="email" type="email" placeholder="enter your email" { input.Input()... }/>
+					</div>
+					<div class="flex flex-col gap-2">
+						<label class="text-sm">First Name</label>
+						<input name="firstName" type="text" placeholder="first name" { input.Input()... }/>
+					</div>
+					<div class="flex flex-col gap-2">
+						<label class="text-sm">Last Name</label>
+						<input name="lastName" type="text" placeholder="last name" { input.Input()... }/>
+					</div>
+					<button type="button" { button.Primary(ui.Class("w-fit"))... }>submit</button>
+				</form>
+			</div>
+			<div>
+				<h1 class="text-2xl font-semibold">Card</h1>
+				<div class="border-b pt-2 mb-6"></div>
+				@card.Card(ui.Class("max-w-md")) {
+					@card.Header() {
+						<h1 class="text-xl">User registration</h1>
+						<h2 class="text-muted-foreground">Please register to get the latest updates</h2>
+					}
+					@card.Content() {
+						<form class="flex flex-col gap-4">
+							<div class="flex flex-col gap-1">
+								<label class="text-sm">Username</label>
+								<input { input.Input()... }/>
+							</div>
+							<div class="flex flex-col gap-1">
+								<label class="text-sm">Email</label>
+								<input { input.Input()... }/>
+							</div>
+						</form>
+					}
+					@card.Footer() {
+						<button { button.Primary()... }>Submit</button>
+					}
+				}
+			</div>
+			<div>
+				<h1 class="text-2xl font-semibold">Table</h1>
+				<div class="border-b pt-2 mb-6"></div>
+				<div class="max-w-4xl">
+					@table.Table() {
+						@table.Header(ui.Class("text-left")) {
+							<th { table.Th()... }>
+								<div class="flex items-center">
+									<input id="checkbox-id" type="checkbox" class="w-4 h-4 bg-transparent border-input rounded"/>
+								</div>
+							</th>
+							<th { table.Th()... }>id</th>
+							<th { table.Th()... }>email</th>
+							<th { table.Th()... }>first name</th>
+							<th { table.Th()... }>last name</th>
+							<th { table.Th(ui.Class("text-right"))... }>action</th>
+						}
+						@table.Body() {
+							<tr>
+								<td { table.Td()... }>
+									<div class="flex items-center">
+										<input id="checkbox-id" type="checkbox" class="w-4 h-4 bg-transparent border-input rounded"/>
+									</div>
+								</td>
+								<td { table.Td()... }>1</td>
+								<td { table.Td()... }>foo@foo.com</td>
+								<td { table.Td()... }>Anthony</td>
+								<td { table.Td()... }>GG</td>
+								<td { table.Td(ui.Class("text-right text-blue-500"))... }>view</td>
+							</tr>
+							<tr>
+								<td { table.Td()... }>
+									<div class="flex items-center">
+										<input id="checkbox-id" type="checkbox" class="w-4 h-4 bg-transparent border-input rounded"/>
+									</div>
+								</td>
+								<td { table.Td()... }>1</td>
+								<td { table.Td()... }>foo@foo.com</td>
+								<td { table.Td()... }>Anthony</td>
+								<td { table.Td()... }>GG</td>
+								<td { table.Td(ui.Class("text-right text-blue-500"))... }>view</td>
+							</tr>
+							<tr>
+								<td { table.Td()... }>
+									<div class="flex items-center">
+										<input id="checkbox-id" type="checkbox" class="w-4 h-4 bg-transparent border-input rounded"/>
+									</div>
+								</td>
+								<td { table.Td()... }>1</td>
+								<td { table.Td()... }>foo@foo.com</td>
+								<td { table.Td()... }>Anthony</td>
+								<td { table.Td()... }>GG</td>
+								<td { table.Td(ui.Class("text-right text-blue-500"))... }>view</td>
+							</tr>
+							<tr>
+								<td { table.Td()... }>
+									<div class="flex items-center">
+										<input id="checkbox-id" type="checkbox" class="w-4 h-4 bg-transparent border-input rounded"/>
+									</div>
+								</td>
+								<td { table.Td()... }>1</td>
+								<td { table.Td()... }>foo@foo.com</td>
+								<td { table.Td()... }>Anthony</td>
+								<td { table.Td()... }>GG</td>
+								<td { table.Td(ui.Class("text-right text-blue-500"))... }>view</td>
+							</tr>
+						}
+					}
+				</div>
+			</div>
+		</div>
+	}
+}
--- a/bootstrap/go.mod
+++ b/bootstrap/go.mod
@ -3,11 +3,11 @@ module AABBCCDD
 go 1.22.4

 // uncomment for local development on the superkit core.
-// replace github.com/anthdm/superkit => ../
+replace github.com/anthdm/superkit => ../

 require (
 	github.com/a-h/templ v0.2.707
-	github.com/anthdm/superkit v0.0.0-20240622052611-30be5bb82e0d
+	github.com/anthdm/superkit v0.0.0-20240623141236-28df405fd0f3
 	github.com/go-chi/chi/v5 v5.0.14
 	github.com/golang-jwt/jwt/v5 v5.2.1
 	github.com/google/uuid v1.6.0
--- a/bootstrap/go.sum
+++ b/bootstrap/go.sum
@ -2,6 +2,8 @@ github.com/a-h/templ v0.2.707 h1:T1Gkd2ugbRglZ9rYw/VBchWOSZVKmetDbBkm4YubM7U=
 github.com/a-h/templ v0.2.707/go.mod h1:5cqsugkq9IerRNucNsI4DEamdHPsoGMQy99DzydLhM8=
 github.com/anthdm/superkit v0.0.0-20240622052611-30be5bb82e0d h1:T0qegCdKTBwjk28Rcq81V1vYZl2grFjG9NWhPqIbRm0=
 github.com/anthdm/superkit v0.0.0-20240622052611-30be5bb82e0d/go.mod h1:j8+yKABdHVnQ9UqxiE/trbu8CnJuU+gNqlMvfGD6nq4=
+github.com/anthdm/superkit v0.0.0-20240623141236-28df405fd0f3 h1:7zjGN4+kaiVRin+m3GiMFM4S2BFNJIySpyeeEIRNjq8=
+github.com/anthdm/superkit v0.0.0-20240623141236-28df405fd0f3/go.mod h1:j8+yKABdHVnQ9UqxiE/trbu8CnJuU+gNqlMvfGD6nq4=
 github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
 github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/go-chi/chi/v5 v5.0.14 h1:PyEwo2Vudraa0x/Wl6eDRRW2NXBvekgfxyydcM0WGE0=
--- a/bootstrap/public/assets/styles.css
+++ b/bootstrap/public/assets/styles.css
@ -642,6 +642,10 @@ body {
  margin-right: auto;
 }

+.mb-6 {
+  margin-bottom: 1.5rem;
+}
+
 .ml-4 {
  margin-left: 1rem;
 }
@ -666,14 +670,26 @@ body {
  display: inline-flex;
 }

+.table {
+  display: table;
+}
+
 .hidden {
  display: none;
 }

+.h-4 {
+  height: 1rem;
+}
+
 .h-screen {
  height: 100vh;
 }

+.w-4 {
+  width: 1rem;
+}
+
 .w-fit {
  width: -moz-fit-content;
  width: fit-content;
@ -687,6 +703,10 @@ body {
  max-width: 42rem;
 }

+.max-w-4xl {
+  max-width: 56rem;
+}
+
 .max-w-7xl {
  max-width: 80rem;
 }
@ -699,6 +719,10 @@ body {
  max-width: 24rem;
 }

+.max-w-xs {
+  max-width: 20rem;
+}
+
 .cursor-pointer {
  cursor: pointer;
 }
@ -755,6 +779,10 @@ body {
  gap: 2rem;
 }

+.rounded {
+  border-radius: 0.25rem;
+}
+
 .rounded-md {
  border-radius: calc(var(--radius) - 2px);
 }
@ -845,10 +873,27 @@ body {
  padding-bottom: 0.75rem;
 }

+.py-8 {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+
+.pt-2 {
+  padding-top: 0.5rem;
+}
+
+.text-left {
+  text-align: left;
+}
+
 .text-center {
  text-align: center;
 }

+.text-right {
+  text-align: right;
+}
+
 .align-middle {
  vertical-align: middle;
 }
@ -908,6 +953,11 @@ body {
  letter-spacing: 0.025em;
 }

+.text-blue-500 {
+  --tw-text-opacity: 1;
+  color: rgb(59 130 246 / var(--tw-text-opacity));
+}
+
 .text-foreground {
  --tw-text-opacity: 1;
  color: hsl(var(--foreground) / var(--tw-text-opacity));
@ -942,6 +992,10 @@ body {
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }

+.outline {
+  outline-style: solid;
+}
+
 .ring-offset-background {
  --tw-ring-offset-color: hsl(var(--background) / 1);
 }
--- a/bootstrap/tailwind.config.js
+++ b/bootstrap/tailwind.config.js
@ -58,4 +58,4 @@ module.exports = {
 		}
 	},
 };
-	
+	
--- a/ui/card/card_templ.go
+++ b/ui/card/card_templ.go
@ -0,0 +1,175 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.707
+package card
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+
+import "github.com/anthdm/superkit/ui"
+
+const cardBaseClass = "rounded-lg border bg-card text-card-foreground shadow-sm"
+
+func Card(opts ...func(*templ.Attributes)) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		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 = templ_7745c5c3_Buffer.WriteString("<div")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, ui.CreateAttrs(cardBaseClass, "", opts...))
+		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_7745c5c3_Var1.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
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func Header(opts ...func(*templ.Attributes)) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var2 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var2 == nil {
+			templ_7745c5c3_Var2 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, ui.CreateAttrs("p-6", "", opts...))
+		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_7745c5c3_Var2.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
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func Content(opts ...func(*templ.Attributes)) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var3 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var3 == nil {
+			templ_7745c5c3_Var3 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, ui.CreateAttrs("p-6 pt-0", "", opts...))
+		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_7745c5c3_Var3.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
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func Footer(opts ...func(*templ.Attributes)) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var4 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var4 == nil {
+			templ_7745c5c3_Var4 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, ui.CreateAttrs("p-6 pt-0", "", opts...))
+		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_7745c5c3_Var4.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
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
--- a/ui/modal/modal_templ.go
+++ b/ui/modal/modal_templ.go
@ -0,0 +1,159 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.707
+package modal
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+
+func Modal() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		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 = templ_7745c5c3_Buffer.WriteString("<div x-data=\"{ modalOpen: false }\" @keydown.escape.window=\"modalOpen = false\" class=\"relative z-50 w-auto h-auto\"><div @click=\"modalOpen=true\">foo</div><template x-teleport=\"body\"><div x-show=\"modalOpen\" class=\"fixed top-0 left-0 z-[99] flex items-center justify-center w-screen h-screen\" x-cloak><div x-show=\"modalOpen\" x-transition:enter=\"ease-out duration-300\" x-transition:enter-start=\"opacity-0\" x-transition:enter-end=\"opacity-100\" x-transition:leave=\"ease-in duration-300\" x-transition:leave-start=\"opacity-100\" x-transition:leave-end=\"opacity-0\" @click=\"modalOpen=false\" class=\"absolute inset-0 w-full h-full bg-black bg-opacity-40\"></div><div x-show=\"modalOpen\" x-trap.inert.noscroll=\"modalOpen\" x-transition:enter=\"ease-out duration-300\" x-transition:enter-start=\"opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95\" x-transition:enter-end=\"opacity-100 translate-y-0 sm:scale-100\" x-transition:leave=\"ease-in duration-200\" x-transition:leave-start=\"opacity-100 translate-y-0 sm:scale-100\" x-transition:leave-end=\"opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95\" class=\"relative w-full py-6 px-7 sm:max-w-lg sm:rounded-lg\">")
+		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 = templ_7745c5c3_Buffer.WriteString("<div @click=\"modalOpen=true\">foo</div></div></div></template></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func Header() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var2 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var2 == nil {
+			templ_7745c5c3_Var2 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"flex items-center justify-between pb-2\"><h3 class=\"text-lg font-semibold\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ_7745c5c3_Var2.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</h3><button @click=\"modalOpen=false\" class=\"absolute top-0 right-0 flex items-center justify-center w-8 h-8 mt-5 mr-5 rounded-full\"><svg class=\"w-5 h-5\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\"></path></svg></button></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func Content() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var3 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var3 == nil {
+			templ_7745c5c3_Var3 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"relative w-auto\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ_7745c5c3_Var3.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
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func Trigger() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var4 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var4 == nil {
+			templ_7745c5c3_Var4 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div @click=\"modalOpen=true\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ_7745c5c3_Var4.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
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func Footer() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var5 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var5 == nil {
+			templ_7745c5c3_Var5 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
--- a/ui/table/table_templ.go
+++ b/ui/table/table_templ.go
@ -0,0 +1,172 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.707
+package table
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+
+import (
+	"github.com/anthdm/superkit/ui"
+)
+
+func Table() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		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 = templ_7745c5c3_Buffer.WriteString("<div class=\"flex flex-col border rounded-md\"><div class=\"overflow-x-auto\"><div class=\"inline-block min-w-full\"><div class=\"overflow-hidden\"><table class=\"min-w-full divide-y\">")
+		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 = templ_7745c5c3_Buffer.WriteString("</table></div></div></div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func Header(opts ...func(*templ.Attributes)) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var2 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var2 == nil {
+			templ_7745c5c3_Var2 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<thead")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, ui.CreateAttrs("", "", opts...))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("><tr>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ_7745c5c3_Var2.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</tr></thead>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func Body(opts ...func(*templ.Attributes)) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var3 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var3 == nil {
+			templ_7745c5c3_Var3 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<tbody")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, ui.CreateAttrs("divide-y", "", opts...))
+		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_7745c5c3_Var3.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</tbody>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func Footer(opts ...func(*templ.Attributes)) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var4 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var4 == nil {
+			templ_7745c5c3_Var4 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<tfoot><tr>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ_7745c5c3_Var4.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</tr></tfoot>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+const (
+	thBaseClass = "px-5 py-3 text-xs font-medium uppercase"
+	tdBaseClass = "px-5 py-4 text-sm whitespace-nowrap"
+)
+
+func Td(opts ...func(*templ.Attributes)) templ.Attributes {
+	return ui.CreateAttrs(tdBaseClass, "", opts...)
+}
+
+func Th(opts ...func(*templ.Attributes)) templ.Attributes {
+	return ui.CreateAttrs(thBaseClass, "", opts...)
+}
--- a/view/view.go
+++ b/view/view.go
@ -42,3 +42,15 @@ func Auth(ctx context.Context) kit.Auth {
 func URL(ctx context.Context) *url.URL {
 	return getContextValue(ctx, middleware.RequestURLKey{}, &url.URL{})
 }
+
+// IFF returns a if cond else b. Super handy tool for working in views.
+//
+//	 // Will return a blue background if the URL is /users, a gray one
+//	 // otherwise.
+//		view.IFF(url == "/users", "bg-blue-500", "bg-gray-500")
+func IFF(cond bool, a, b string) string {
+	if cond {
+		return a
+	}
+	return b
+}
Author	SHA1	Message	Date
anthdm	f219ac349c	ui-compenents wip	2024-06-23 19:13:23 +02:00
anthdm	a7cedec955	ui-compenents wip	2024-06-23 19:12:10 +02:00
anthdm	6e59d38006	use superkit ui/button on landing	2024-06-23 18:24:24 +02:00