diff --git a/examples/chat/components/input.go b/examples/chat/components/input.go index eadad94..fec1363 100644 --- a/examples/chat/components/input.go +++ b/examples/chat/components/input.go @@ -35,6 +35,7 @@ func Input(props InputProps) *h.Element { h.If(props.Name != "", h.Name(props.Name)), h.If(props.Children != nil, h.Children(props.Children...)), h.If(props.Required, h.Required()), + h.If(props.Placeholder != "", h.Placeholder(props.Placeholder)), h.If(props.DefaultValue != "", h.Attribute("value", props.DefaultValue)), validation, ) diff --git a/examples/chat/pages/chat.$id.go b/examples/chat/pages/chat.$id.go index 44dc48f..6668c17 100644 --- a/examples/chat/pages/chat.$id.go +++ b/examples/chat/pages/chat.$id.go @@ -26,16 +26,16 @@ func ChatRoom(ctx *h.RequestContext) *h.Page { ), h.HxOnWsClose( - js.EvalJs(` + js.EvalJs(fmt.Sprintf(` const reason = e.detail.event.reason if(['invalid room', 'no session'].includes(reason)) { - window.location.href = '/'; + window.location.href = '/?roomId=%s'; } else if(e.detail.event.code === 1011) { window.location.reload() } else { console.error('Connection closed:', e.detail.event) } - `), + `, roomId)), ), h.Class("flex flex-row min-h-screen bg-neutral-100"), @@ -88,6 +88,15 @@ func roomNameHeader(ctx *h.RequestContext) *h.Element { return h.Div( h.Class("bg-neutral-700 text-white p-3 shadow-sm w-full fixed top-0 left-0 flex justify-center z-10"), h.H2F(room.Name, h.Class("text-lg font-bold")), + h.Div( + h.Class("absolute right-5 top-3 cursor-pointer"), + h.Text("Share"), + h.OnClick( + js.EvalJs(` + alert("Share this url with your friends:\n " + window.location.href) + `), + ), + ), ) } diff --git a/examples/chat/pages/index.go b/examples/chat/pages/index.go index 62befcb..571d5b5 100644 --- a/examples/chat/pages/index.go +++ b/examples/chat/pages/index.go @@ -17,8 +17,9 @@ func ChatAppFirstScreen(ctx *h.RequestContext) *h.Page { h.Form( h.Attribute("hx-swap", "none"), h.PostPartial(partials.CreateOrJoinRoom), - h.Class("flex flex-col gap-3"), + h.Class("flex flex-col gap-6"), + // Username input at the top components.Input(components.InputProps{ Id: "username", Name: "username", @@ -30,19 +31,22 @@ func ChatAppFirstScreen(ctx *h.RequestContext) *h.Page { }, }), + // Single box for Create or Join a Chat Room h.Div( - h.Class("mt-6 flex flex-col gap-3"), + h.Class("p-4 border border-gray-300 rounded-md flex flex-col gap-6"), + // Create New Chat Room input components.Input(components.InputProps{ Name: "new-chat-room", - Label: "Create a New Chat Room", - Placeholder: "Chat Room Name", + Label: "Create a new chat room", + Placeholder: "Enter chat room name", Children: []h.Ren{ h.Attribute("autocomplete", "off"), h.MaxLength(20), }, }), + // OR divider h.Div( h.Class("flex items-center justify-center gap-4"), h.Div(h.Class("border-t border-gray-300 flex-grow")), @@ -50,11 +54,13 @@ func ChatAppFirstScreen(ctx *h.RequestContext) *h.Page { h.Div(h.Class("border-t border-gray-300 flex-grow")), ), + // Join Chat Room input components.Input(components.InputProps{ - Id: "join-chat-room", - Name: "join-chat-room", - Label: "Join a Chat Room", - Placeholder: "Chat Room Id", + Id: "join-chat-room", + Name: "join-chat-room", + Label: "Join an existing chat room", + Placeholder: "Enter chat room ID", + DefaultValue: ctx.QueryParam("roomId"), Children: []h.Ren{ h.Attribute("autocomplete", "off"), h.MaxLength(100), @@ -62,7 +68,10 @@ func ChatAppFirstScreen(ctx *h.RequestContext) *h.Page { }), ), + // Error message components.FormError(""), + + // Submit button at the bottom components.PrimaryButton(components.ButtonProps{ Type: "submit", Text: "Submit",