mirror of
https://github.com/sonr-io/sonr.git
synced 2026-08-02 17:31:39 +00:00
feature/1107 integrate dexie db (#1128)
- **feat: remove grant page** - **refactor: remove alert, input, radios, tabs, and video blocks** - **feat: add JSON serialization to DWN config** - **feat: add new Highway gateway component** - **refactor: remove unused chains.yaml and devbox.json** - **refactor: Separate request and response headers into protected and non-protected structs** - **feat: Update the UseSession echo middleware to bind the correct headers and provide methods for updating HTMX context from Go** - **refactor: remove unused headers from session** - **feat: add authorize endpoint** - **feat: create marketing pages**
This commit is contained in:
Prad Nukala
@@ -1,67 +0,0 @@
|
||||
package blocks
|
||||
|
||||
func Alert(variant Variant, icon Icon, title, message string) templ.Component {
|
||||
return alertElement(variant.Attributes(), title, message, icon.Render())
|
||||
}
|
||||
|
||||
templ alertElement(attrs templ.Attributes, title, message string, icon templ.Component) {
|
||||
<div { attrs... }>
|
||||
@icon
|
||||
<h5 class="mb-1 font-medium leading-none tracking-tight">{ title }</h5>
|
||||
<div class="text-sm opacity-70">{ message }</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
type AlertVariant int
|
||||
|
||||
const (
|
||||
AlertVariant_Default AlertVariant = iota
|
||||
AlertVariant_Info
|
||||
AlertVariant_Error
|
||||
AlertVariant_Success
|
||||
AlertVariant_Warning
|
||||
AlertVariant_Subtle_Info
|
||||
AlertVariant_Subtle_Error
|
||||
AlertVariant_Subtle_Success
|
||||
AlertVariant_Subtle_Warning
|
||||
)
|
||||
|
||||
func (v AlertVariant) Attributes() templ.Attributes {
|
||||
switch v {
|
||||
case AlertVariant_Info:
|
||||
return templ.Attributes{
|
||||
"class": "relative w-full rounded-lg border border-transparent bg-blue-600 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-white",
|
||||
}
|
||||
case AlertVariant_Error:
|
||||
return templ.Attributes{
|
||||
"class": "relative w-full rounded-lg border border-transparent bg-red-600 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-white",
|
||||
}
|
||||
case AlertVariant_Success:
|
||||
return templ.Attributes{
|
||||
"class": "relative w-full rounded-lg border border-transparent bg-green-500 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-white",
|
||||
}
|
||||
case AlertVariant_Warning:
|
||||
return templ.Attributes{
|
||||
"class": "relative w-full rounded-lg border border-transparent bg-yellow-500 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-white",
|
||||
}
|
||||
case AlertVariant_Subtle_Info:
|
||||
return templ.Attributes{
|
||||
"class": "relative w-full rounded-lg border border-transparent bg-blue-50 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-blue-600",
|
||||
}
|
||||
case AlertVariant_Subtle_Error:
|
||||
return templ.Attributes{
|
||||
"class": "relative w-full rounded-lg border border-transparent bg-red-50 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-red-600",
|
||||
}
|
||||
case AlertVariant_Subtle_Success:
|
||||
return templ.Attributes{
|
||||
"class": "relative w-full rounded-lg border border-transparent bg-green-50 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-green-600",
|
||||
}
|
||||
case AlertVariant_Subtle_Warning:
|
||||
return templ.Attributes{
|
||||
"class": "relative w-full rounded-lg border border-transparent bg-yellow-50 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-yellow-600",
|
||||
}
|
||||
}
|
||||
return templ.Attributes{
|
||||
"class": "relative w-full rounded-lg border bg-white p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-neutral-900",
|
||||
}
|
||||
}
|
||||
@@ -1,140 +0,0 @@
|
||||
// Code generated by templ - DO NOT EDIT.
|
||||
|
||||
// templ: version: v0.2.778
|
||||
package blocks
|
||||
|
||||
//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"
|
||||
|
||||
func Alert(variant Variant, icon Icon, title, message string) templ.Component {
|
||||
return alertElement(variant.Attributes(), title, message, icon.Render())
|
||||
}
|
||||
|
||||
func alertElement(attrs templ.Attributes, title, message string, icon templ.Component) 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 = templ_7745c5c3_Buffer.WriteString("<div")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, attrs)
|
||||
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 = icon.Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<h5 class=\"mb-1 font-medium leading-none tracking-tight\">")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
var templ_7745c5c3_Var2 string
|
||||
templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(title)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/blocks/alert.templ`, Line: 10, Col: 66}
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</h5><div class=\"text-sm opacity-70\">")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
var templ_7745c5c3_Var3 string
|
||||
templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(message)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/blocks/alert.templ`, Line: 11, Col: 43}
|
||||
}
|
||||
_, 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("</div></div>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
return templ_7745c5c3_Err
|
||||
})
|
||||
}
|
||||
|
||||
type AlertVariant int
|
||||
|
||||
const (
|
||||
AlertVariant_Default AlertVariant = iota
|
||||
AlertVariant_Info
|
||||
AlertVariant_Error
|
||||
AlertVariant_Success
|
||||
AlertVariant_Warning
|
||||
AlertVariant_Subtle_Info
|
||||
AlertVariant_Subtle_Error
|
||||
AlertVariant_Subtle_Success
|
||||
AlertVariant_Subtle_Warning
|
||||
)
|
||||
|
||||
func (v AlertVariant) Attributes() templ.Attributes {
|
||||
switch v {
|
||||
case AlertVariant_Info:
|
||||
return templ.Attributes{
|
||||
"class": "relative w-full rounded-lg border border-transparent bg-blue-600 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-white",
|
||||
}
|
||||
case AlertVariant_Error:
|
||||
return templ.Attributes{
|
||||
"class": "relative w-full rounded-lg border border-transparent bg-red-600 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-white",
|
||||
}
|
||||
case AlertVariant_Success:
|
||||
return templ.Attributes{
|
||||
"class": "relative w-full rounded-lg border border-transparent bg-green-500 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-white",
|
||||
}
|
||||
case AlertVariant_Warning:
|
||||
return templ.Attributes{
|
||||
"class": "relative w-full rounded-lg border border-transparent bg-yellow-500 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-white",
|
||||
}
|
||||
case AlertVariant_Subtle_Info:
|
||||
return templ.Attributes{
|
||||
"class": "relative w-full rounded-lg border border-transparent bg-blue-50 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-blue-600",
|
||||
}
|
||||
case AlertVariant_Subtle_Error:
|
||||
return templ.Attributes{
|
||||
"class": "relative w-full rounded-lg border border-transparent bg-red-50 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-red-600",
|
||||
}
|
||||
case AlertVariant_Subtle_Success:
|
||||
return templ.Attributes{
|
||||
"class": "relative w-full rounded-lg border border-transparent bg-green-50 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-green-600",
|
||||
}
|
||||
case AlertVariant_Subtle_Warning:
|
||||
return templ.Attributes{
|
||||
"class": "relative w-full rounded-lg border border-transparent bg-yellow-50 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-yellow-600",
|
||||
}
|
||||
}
|
||||
return templ.Attributes{
|
||||
"class": "relative w-full rounded-lg border bg-white p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-neutral-900",
|
||||
}
|
||||
}
|
||||
|
||||
var _ = templruntime.GeneratedTemplate
|
||||
@@ -1,29 +0,0 @@
|
||||
package blocks
|
||||
|
||||
type InputState int
|
||||
|
||||
const (
|
||||
InputStateDefault InputState = iota
|
||||
InputStateError
|
||||
InputStateSuccess
|
||||
)
|
||||
|
||||
templ TextInput(state InputState, label string, placeholder string) {
|
||||
switch (state) {
|
||||
case InputStateDefault:
|
||||
<div class="flex flex-col space-y-1.5 p-6">
|
||||
<label class="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="name">{ label }</label>
|
||||
<input type="text" placeholder="{label}" id="name" value="{value}" class="flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-neutral-300 ring-offset-background placeholder:text-neutral-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50"/>
|
||||
</div>
|
||||
case InputStateError:
|
||||
<div class="flex flex-col space-y-1.5 p-6">
|
||||
<label class="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="name">{ label }</label>
|
||||
<input type="text" placeholder="{label}" id="name" value="{value}" class="flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-neutral-300 ring-offset-background placeholder:text-neutral-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50"/>
|
||||
</div>
|
||||
case InputStateSuccess:
|
||||
<div class="flex flex-col space-y-1.5 p-6">
|
||||
<label class="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="name">{ label }</label>
|
||||
<input type="text" placeholder="{label}" id="name" value="{value}" class="flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-neutral-300 ring-offset-background placeholder:text-neutral-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50"/>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -1,100 +0,0 @@
|
||||
// Code generated by templ - DO NOT EDIT.
|
||||
|
||||
// templ: version: v0.2.778
|
||||
package blocks
|
||||
|
||||
//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"
|
||||
|
||||
type InputState int
|
||||
|
||||
const (
|
||||
InputStateDefault InputState = iota
|
||||
InputStateError
|
||||
InputStateSuccess
|
||||
)
|
||||
|
||||
func TextInput(state InputState, label string, placeholder string) 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)
|
||||
switch state {
|
||||
case InputStateDefault:
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"flex flex-col space-y-1.5 p-6\"><label class=\"text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\" for=\"name\">")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
var templ_7745c5c3_Var2 string
|
||||
templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(label)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/blocks/inputs.templ`, Line: 15, Col: 128}
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</label> <input type=\"text\" placeholder=\"{label}\" id=\"name\" value=\"{value}\" class=\"flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-neutral-300 ring-offset-background placeholder:text-neutral-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50\"></div>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
case InputStateError:
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"flex flex-col space-y-1.5 p-6\"><label class=\"text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\" for=\"name\">")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
var templ_7745c5c3_Var3 string
|
||||
templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(label)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/blocks/inputs.templ`, Line: 20, Col: 128}
|
||||
}
|
||||
_, 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("</label> <input type=\"text\" placeholder=\"{label}\" id=\"name\" value=\"{value}\" class=\"flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-neutral-300 ring-offset-background placeholder:text-neutral-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50\"></div>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
case InputStateSuccess:
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"flex flex-col space-y-1.5 p-6\"><label class=\"text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\" for=\"name\">")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
var templ_7745c5c3_Var4 string
|
||||
templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(label)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/blocks/inputs.templ`, Line: 25, Col: 128}
|
||||
}
|
||||
_, 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("</label> <input type=\"text\" placeholder=\"{label}\" id=\"name\" value=\"{value}\" class=\"flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-neutral-300 ring-offset-background placeholder:text-neutral-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50\"></div>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
}
|
||||
return templ_7745c5c3_Err
|
||||
})
|
||||
}
|
||||
|
||||
var _ = templruntime.GeneratedTemplate
|
||||
@@ -1,37 +0,0 @@
|
||||
package blocks
|
||||
|
||||
templ RadioGroup() {
|
||||
<div
|
||||
x-data="{
|
||||
radioGroupSelectedValue: null,
|
||||
radioGroupOptions: [
|
||||
{
|
||||
title: 'Email Address',
|
||||
description: 'Get a login code to your email address.',
|
||||
value: 'email'
|
||||
},
|
||||
{
|
||||
title: 'Phone Number',
|
||||
description: 'Get a login code to your phone number.',
|
||||
value: 'phone'
|
||||
},
|
||||
{
|
||||
title: 'Passkey',
|
||||
description: 'Sign in with your passkey.',
|
||||
value: 'passkey'
|
||||
}
|
||||
]
|
||||
}"
|
||||
class="space-y-3"
|
||||
>
|
||||
<template x-for="(option, index) in radioGroupOptions" :key="index">
|
||||
<label @click="radioGroupSelectedValue=option.value" class="flex items-start p-5 space-x-3 bg-white border rounded-md shadow-sm hover:bg-gray-50 border-neutral-200/70">
|
||||
<input type="radio" name="radio-group" :value="option.value" class="text-gray-900 translate-y-px focus:ring-gray-700"/>
|
||||
<span class="relative flex flex-col text-left space-y-1.5 leading-none">
|
||||
<span x-text="option.title" class="font-semibold"></span>
|
||||
<span x-text="option.description" class="text-sm opacity-50"></span>
|
||||
</span>
|
||||
</label>
|
||||
</template>
|
||||
</div>
|
||||
}
|
||||
@@ -1,40 +0,0 @@
|
||||
// Code generated by templ - DO NOT EDIT.
|
||||
|
||||
// templ: version: v0.2.778
|
||||
package blocks
|
||||
|
||||
//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"
|
||||
|
||||
func RadioGroup() 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 = templ_7745c5c3_Buffer.WriteString("<div x-data=\"{\n radioGroupSelectedValue: null,\n radioGroupOptions: [\n {\n title: 'Email Address',\n description: 'Get a login code to your email address.',\n value: 'email'\n },\n {\n title: 'Phone Number',\n description: 'Get a login code to your phone number.',\n value: 'phone'\n },\n {\n title: 'Passkey',\n description: 'Sign in with your passkey.',\n value: 'passkey'\n }\n ]\n}\" class=\"space-y-3\"><template x-for=\"(option, index) in radioGroupOptions\" :key=\"index\"><label @click=\"radioGroupSelectedValue=option.value\" class=\"flex items-start p-5 space-x-3 bg-white border rounded-md shadow-sm hover:bg-gray-50 border-neutral-200/70\"><input type=\"radio\" name=\"radio-group\" :value=\"option.value\" class=\"text-gray-900 translate-y-px focus:ring-gray-700\"> <span class=\"relative flex flex-col text-left space-y-1.5 leading-none\"><span x-text=\"option.title\" class=\"font-semibold\"></span> <span x-text=\"option.description\" class=\"text-sm opacity-50\"></span></span></label></template></div>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
return templ_7745c5c3_Err
|
||||
})
|
||||
}
|
||||
|
||||
var _ = templruntime.GeneratedTemplate
|
||||
@@ -1,109 +0,0 @@
|
||||
package blocks
|
||||
|
||||
templ Tabs() {
|
||||
<div
|
||||
x-data="{
|
||||
tabSelected: 1,
|
||||
tabId: $id('tabs'),
|
||||
tabButtonClicked(tabButton){
|
||||
this.tabSelected = tabButton.id.replace(this.tabId + '-', '');
|
||||
this.tabRepositionMarker(tabButton);
|
||||
},
|
||||
tabRepositionMarker(tabButton){
|
||||
this.$refs.tabMarker.style.width=tabButton.offsetWidth + 'px';
|
||||
this.$refs.tabMarker.style.height=tabButton.offsetHeight + 'px';
|
||||
this.$refs.tabMarker.style.left=tabButton.offsetLeft + 'px';
|
||||
},
|
||||
tabContentActive(tabContent){
|
||||
return this.tabSelected == tabContent.id.replace(this.tabId + '-content-', '');
|
||||
},
|
||||
tabButtonActive(tabContent){
|
||||
const tabId = tabContent.id.split('-').slice(-1);
|
||||
return this.tabSelected == tabId;
|
||||
}
|
||||
}"
|
||||
x-init="tabRepositionMarker($refs.tabButtons.firstElementChild);"
|
||||
class="relative w-full max-w-sm"
|
||||
>
|
||||
<div x-ref="tabButtons" class="relative inline-grid items-center justify-center w-full h-10 grid-cols-3 p-1 text-gray-500 bg-white border border-gray-100 rounded-lg select-none">
|
||||
<button :id="$id(tabId)" @click="tabButtonClicked($el);" type="button" :class="{ 'bg-gray-100 text-gray-700' : tabButtonActive($el) }" class="relative z-20 inline-flex items-center justify-center w-full h-8 px-3 text-sm font-medium transition-all rounded-md cursor-pointer whitespace-nowrap">Tab1</button>
|
||||
<button :id="$id(tabId)" @click="tabButtonClicked($el);" type="button" :class="{ 'bg-gray-100 text-gray-700' : tabButtonActive($el) }" class="relative z-20 inline-flex items-center justify-center w-full h-8 px-3 text-sm font-medium transition-all rounded-md cursor-pointer whitespace-nowrap">Tab2</button>
|
||||
<button :id="$id(tabId)" @click="tabButtonClicked($el);" type="button" :class="{ 'bg-gray-100 text-gray-700' : tabButtonActive($el) }" class="relative z-20 inline-flex items-center justify-center w-full h-8 px-3 text-sm font-medium transition-all rounded-md cursor-pointer whitespace-nowrap">Tab3</button>
|
||||
<div x-ref="tabMarker" class="absolute left-0 z-10 w-1/2 h-full duration-300 ease-out" x-cloak><div class="w-full h-full bg-gray-100 rounded-md shadow-sm"></div></div>
|
||||
</div>
|
||||
<div class="relative flex items-center justify-center w-full p-5 mt-2 text-xs text-gray-400 border rounded-md content border-gray-200/70">
|
||||
<div :id="$id(tabId + '-content')" x-show="tabContentActive($el)" class="relative">
|
||||
@Table()
|
||||
</div>
|
||||
<div :id="$id(tabId + '-content')" x-show="tabContentActive($el)" class="relative" x-cloak>
|
||||
And, this is the content for Tab2
|
||||
</div>
|
||||
<div :id="$id(tabId + '-content')" x-show="tabContentActive($el)" class="relative" x-cloak>
|
||||
Finally, this is the content for Tab3
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
templ Table() {
|
||||
<div class="flex flex-col">
|
||||
<div class="overflow-x-auto">
|
||||
<div class="inline-block min-w-full">
|
||||
<div class="overflow-hidden">
|
||||
<table class="min-w-full divide-y divide-neutral-200">
|
||||
<thead>
|
||||
<tr class="text-neutral-500">
|
||||
<th class="px-5 py-3 text-xs font-medium text-left uppercase">Name</th>
|
||||
<th class="px-5 py-3 text-xs font-medium text-left uppercase">Age</th>
|
||||
<th class="px-5 py-3 text-xs font-medium text-left uppercase">Address</th>
|
||||
<th class="px-5 py-3 text-xs font-medium text-right uppercase">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-neutral-200">
|
||||
<tr class="text-neutral-800">
|
||||
<td class="px-5 py-4 text-sm font-medium whitespace-nowrap">Richard Hendricks</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">30</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">Pied Piper HQ, Palo Alto</td>
|
||||
<td class="px-5 py-4 text-sm font-medium text-right whitespace-nowrap">
|
||||
<a class="text-blue-600 hover:text-blue-700" href="#">Edit</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="text-neutral-800">
|
||||
<td class="px-5 py-4 text-sm font-medium whitespace-nowrap">Erlich Bachman</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">40</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">5230 Penfield Ave, Woodland Hills</td>
|
||||
<td class="px-5 py-4 text-sm font-medium text-right whitespace-nowrap">
|
||||
<a class="text-blue-600 hover:text-blue-700" href="#">Edit</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="text-neutral-800">
|
||||
<td class="px-5 py-4 text-sm font-medium whitespace-nowrap">Monica Hall</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">35</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">2030 Stewart Drive, Sunnyvale</td>
|
||||
<td class="px-5 py-4 text-sm font-medium text-right whitespace-nowrap">
|
||||
<a class="text-blue-600 hover:text-blue-700" href="#">Edit</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="text-neutral-800">
|
||||
<td class="px-5 py-4 text-sm font-medium whitespace-nowrap">Dinesh Chugtai</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">28</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">Pied Piper HQ, Palo Alto</td>
|
||||
<td class="px-5 py-4 text-sm font-medium text-right whitespace-nowrap">
|
||||
<a class="text-blue-600 hover:text-blue-700" href="#">Edit</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="text-neutral-800">
|
||||
<td class="px-5 py-4 text-sm font-medium whitespace-nowrap">Gilfoyle</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">32</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">Pied Piper HQ, Palo Alto</td>
|
||||
<td class="px-5 py-4 text-sm font-medium text-right whitespace-nowrap">
|
||||
<a class="text-blue-600 hover:text-blue-700" href="#">Edit</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@@ -1,77 +0,0 @@
|
||||
// Code generated by templ - DO NOT EDIT.
|
||||
|
||||
// templ: version: v0.2.778
|
||||
package blocks
|
||||
|
||||
//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"
|
||||
|
||||
func Tabs() 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 = templ_7745c5c3_Buffer.WriteString("<div x-data=\"{\n tabSelected: 1,\n tabId: $id('tabs'),\n tabButtonClicked(tabButton){\n this.tabSelected = tabButton.id.replace(this.tabId + '-', '');\n this.tabRepositionMarker(tabButton);\n },\n tabRepositionMarker(tabButton){\n this.$refs.tabMarker.style.width=tabButton.offsetWidth + 'px';\n this.$refs.tabMarker.style.height=tabButton.offsetHeight + 'px';\n this.$refs.tabMarker.style.left=tabButton.offsetLeft + 'px';\n },\n tabContentActive(tabContent){\n return this.tabSelected == tabContent.id.replace(this.tabId + '-content-', '');\n },\n tabButtonActive(tabContent){\n const tabId = tabContent.id.split('-').slice(-1);\n return this.tabSelected == tabId;\n }\n }\" x-init=\"tabRepositionMarker($refs.tabButtons.firstElementChild);\" class=\"relative w-full max-w-sm\"><div x-ref=\"tabButtons\" class=\"relative inline-grid items-center justify-center w-full h-10 grid-cols-3 p-1 text-gray-500 bg-white border border-gray-100 rounded-lg select-none\"><button :id=\"$id(tabId)\" @click=\"tabButtonClicked($el);\" type=\"button\" :class=\"{ 'bg-gray-100 text-gray-700' : tabButtonActive($el) }\" class=\"relative z-20 inline-flex items-center justify-center w-full h-8 px-3 text-sm font-medium transition-all rounded-md cursor-pointer whitespace-nowrap\">Tab1</button> <button :id=\"$id(tabId)\" @click=\"tabButtonClicked($el);\" type=\"button\" :class=\"{ 'bg-gray-100 text-gray-700' : tabButtonActive($el) }\" class=\"relative z-20 inline-flex items-center justify-center w-full h-8 px-3 text-sm font-medium transition-all rounded-md cursor-pointer whitespace-nowrap\">Tab2</button> <button :id=\"$id(tabId)\" @click=\"tabButtonClicked($el);\" type=\"button\" :class=\"{ 'bg-gray-100 text-gray-700' : tabButtonActive($el) }\" class=\"relative z-20 inline-flex items-center justify-center w-full h-8 px-3 text-sm font-medium transition-all rounded-md cursor-pointer whitespace-nowrap\">Tab3</button><div x-ref=\"tabMarker\" class=\"absolute left-0 z-10 w-1/2 h-full duration-300 ease-out\" x-cloak><div class=\"w-full h-full bg-gray-100 rounded-md shadow-sm\"></div></div></div><div class=\"relative flex items-center justify-center w-full p-5 mt-2 text-xs text-gray-400 border rounded-md content border-gray-200/70\"><div :id=\"$id(tabId + '-content')\" x-show=\"tabContentActive($el)\" class=\"relative\">")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = Table().Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div :id=\"$id(tabId + '-content')\" x-show=\"tabContentActive($el)\" class=\"relative\" x-cloak>And, this is the content for Tab2</div><div :id=\"$id(tabId + '-content')\" x-show=\"tabContentActive($el)\" class=\"relative\" x-cloak>Finally, this is the content for Tab3</div></div></div>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
return templ_7745c5c3_Err
|
||||
})
|
||||
}
|
||||
|
||||
func Table() 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_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 flex-col\"><div class=\"overflow-x-auto\"><div class=\"inline-block min-w-full\"><div class=\"overflow-hidden\"><table class=\"min-w-full divide-y divide-neutral-200\"><thead><tr class=\"text-neutral-500\"><th class=\"px-5 py-3 text-xs font-medium text-left uppercase\">Name</th><th class=\"px-5 py-3 text-xs font-medium text-left uppercase\">Age</th><th class=\"px-5 py-3 text-xs font-medium text-left uppercase\">Address</th><th class=\"px-5 py-3 text-xs font-medium text-right uppercase\">Action</th></tr></thead> <tbody class=\"divide-y divide-neutral-200\"><tr class=\"text-neutral-800\"><td class=\"px-5 py-4 text-sm font-medium whitespace-nowrap\">Richard Hendricks</td><td class=\"px-5 py-4 text-sm whitespace-nowrap\">30</td><td class=\"px-5 py-4 text-sm whitespace-nowrap\">Pied Piper HQ, Palo Alto</td><td class=\"px-5 py-4 text-sm font-medium text-right whitespace-nowrap\"><a class=\"text-blue-600 hover:text-blue-700\" href=\"#\">Edit</a></td></tr><tr class=\"text-neutral-800\"><td class=\"px-5 py-4 text-sm font-medium whitespace-nowrap\">Erlich Bachman</td><td class=\"px-5 py-4 text-sm whitespace-nowrap\">40</td><td class=\"px-5 py-4 text-sm whitespace-nowrap\">5230 Penfield Ave, Woodland Hills</td><td class=\"px-5 py-4 text-sm font-medium text-right whitespace-nowrap\"><a class=\"text-blue-600 hover:text-blue-700\" href=\"#\">Edit</a></td></tr><tr class=\"text-neutral-800\"><td class=\"px-5 py-4 text-sm font-medium whitespace-nowrap\">Monica Hall</td><td class=\"px-5 py-4 text-sm whitespace-nowrap\">35</td><td class=\"px-5 py-4 text-sm whitespace-nowrap\">2030 Stewart Drive, Sunnyvale</td><td class=\"px-5 py-4 text-sm font-medium text-right whitespace-nowrap\"><a class=\"text-blue-600 hover:text-blue-700\" href=\"#\">Edit</a></td></tr><tr class=\"text-neutral-800\"><td class=\"px-5 py-4 text-sm font-medium whitespace-nowrap\">Dinesh Chugtai</td><td class=\"px-5 py-4 text-sm whitespace-nowrap\">28</td><td class=\"px-5 py-4 text-sm whitespace-nowrap\">Pied Piper HQ, Palo Alto</td><td class=\"px-5 py-4 text-sm font-medium text-right whitespace-nowrap\"><a class=\"text-blue-600 hover:text-blue-700\" href=\"#\">Edit</a></td></tr><tr class=\"text-neutral-800\"><td class=\"px-5 py-4 text-sm font-medium whitespace-nowrap\">Gilfoyle</td><td class=\"px-5 py-4 text-sm whitespace-nowrap\">32</td><td class=\"px-5 py-4 text-sm whitespace-nowrap\">Pied Piper HQ, Palo Alto</td><td class=\"px-5 py-4 text-sm font-medium text-right whitespace-nowrap\"><a class=\"text-blue-600 hover:text-blue-700\" href=\"#\">Edit</a></td></tr></tbody></table></div></div></div></div>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
return templ_7745c5c3_Err
|
||||
})
|
||||
}
|
||||
|
||||
var _ = templruntime.GeneratedTemplate
|
||||
@@ -1,317 +0,0 @@
|
||||
package blocks
|
||||
|
||||
templ Video() {
|
||||
<div
|
||||
x-data="{
|
||||
sources: {
|
||||
mp4: 'https://cdn.devdojo.com/pines/videos/coast.mp4',
|
||||
webm: 'https://cdn.devdojo.com/pines/videos/coast.webm',
|
||||
ogg: 'https://cdn.devdojo.com/pines/videos/coast.ogg'
|
||||
},
|
||||
playing: false,
|
||||
controls: true,
|
||||
muted: false,
|
||||
muteForced: false,
|
||||
fullscreen: false,
|
||||
ended: false,
|
||||
mouseleave: false,
|
||||
autoHideControlsDelay: 3000,
|
||||
controlsHideTimeout: null,
|
||||
poster: null,
|
||||
videoDuration: 0,
|
||||
timeDurationString: '00:00',
|
||||
timeElapsedString: '00:00',
|
||||
showTime: false,
|
||||
volume: 1,
|
||||
volumeBeforeMute: 1,
|
||||
videoPlayerReady: false,
|
||||
timelineSeek(e) {
|
||||
time = this.formatTime(Math.round(e.target.value));
|
||||
this.timeElapsedString = `${time.minutes}:${time.seconds}`;
|
||||
},
|
||||
metaDataLoaded(event) {
|
||||
this.videoDuration = event.target.duration;
|
||||
this.$refs.videoProgress.setAttribute('max', this.videoDuration);
|
||||
|
||||
time = this.formatTime(Math.round(this.videoDuration));
|
||||
this.timeDurationString = `${time.minutes}:${time.seconds}`;
|
||||
this.showTime = true;
|
||||
this.videoPlayerReady = true;
|
||||
},
|
||||
togglePlay(e) {
|
||||
if (this.$refs.player.paused || this.$refs.player.ended) {
|
||||
this.playing = true;
|
||||
this.$refs.player.play();
|
||||
} else {
|
||||
this.$refs.player.pause();
|
||||
this.playing = false;
|
||||
}
|
||||
},
|
||||
toggleMute(){
|
||||
this.muted = !this.muted;
|
||||
this.$refs.player.muted = this.muted;
|
||||
if(this.muted){
|
||||
this.volumeBeforeMute = this.volume;
|
||||
this.volume = 0;
|
||||
} else {
|
||||
this.volume = this.volumeBeforeMute;
|
||||
}
|
||||
},
|
||||
timeUpdatedInterval() {
|
||||
if (!this.$refs.videoProgress.getAttribute('max'))
|
||||
this.$refs.videoProgress.setAttribute('max', $refs.player.duration);
|
||||
this.$refs.videoProgress.value = this.$refs.player.currentTime;
|
||||
time = this.formatTime(Math.round(this.$refs.player.currentTime));
|
||||
this.timeElapsedString = `${time.minutes}:${time.seconds}`;
|
||||
},
|
||||
updateVolume(e) {
|
||||
this.volume = e.target.value;
|
||||
this.$refs.player.volume = this.volume;
|
||||
if(this.volume == 0){
|
||||
this.muted = true;
|
||||
}
|
||||
|
||||
if(this.muted && this.volume > 0){
|
||||
this.muted = false;
|
||||
}
|
||||
},
|
||||
timelineClicked(e) {
|
||||
rect = this.$refs.videoProgress.getBoundingClientRect();
|
||||
pos = (e.pageX - rect.left) / this.$refs.videoProgress.offsetWidth;
|
||||
this.$refs.player.currentTime = pos * this.$refs.player.duration;
|
||||
},
|
||||
handleFullscreen() {
|
||||
if (document.fullscreenElement !== null) {
|
||||
// The document is in fullscreen mode
|
||||
document.exitFullscreen();
|
||||
} else {
|
||||
// The document is not in fullscreen mode
|
||||
this.$refs.videoContainer.requestFullscreen();
|
||||
}
|
||||
},
|
||||
mousemoveVideo() {
|
||||
if(this.playing){
|
||||
this.resetControlsTimeout();
|
||||
} else {
|
||||
this.controls=true;
|
||||
clearTimeout(this.controlsHideTimeout);
|
||||
}
|
||||
},
|
||||
videoEnded() {
|
||||
this.ended = true;
|
||||
this.playing = false;
|
||||
this.$refs.player.currentTime = 0;
|
||||
},
|
||||
resetControlsTimeout() {
|
||||
this.controls = true;
|
||||
clearTimeout(this.controlsHideTimeout);
|
||||
let that = this;
|
||||
this.controlsHideTimeout = setTimeout(function(){
|
||||
that.controls=false
|
||||
}, this.autoHideControlsDelay);
|
||||
},
|
||||
formatTime(timeInSeconds) {
|
||||
result = new Date(timeInSeconds * 1000).toISOString().substring(11, 19);
|
||||
|
||||
return {
|
||||
minutes: result.substring(3, 5),
|
||||
seconds: result.substring(6, 8),
|
||||
};
|
||||
}
|
||||
}"
|
||||
x-init="
|
||||
|
||||
supportsVideo = document.createElement('video').canPlayType;
|
||||
if (!supportsVideo) {
|
||||
alert('This browser does not support the video element');
|
||||
}
|
||||
|
||||
$refs.player.load();
|
||||
// Hide the default player controls
|
||||
$refs.player.controls = false;
|
||||
|
||||
$watch('playing', (value) => {
|
||||
if (value) {
|
||||
ended = false;
|
||||
controlsHideTimeout = setTimeout(() => {
|
||||
controls = false;
|
||||
}, autoHideControlsDelay);
|
||||
} else {
|
||||
clearTimeout(controlsHideTimeout);
|
||||
controls = true;
|
||||
}
|
||||
});
|
||||
|
||||
if (!document?.fullscreenEnabled) {
|
||||
$refs.fullscreenButton.style.display = 'none';
|
||||
}
|
||||
|
||||
document.addEventListener('fullscreenchange', (e) => {
|
||||
fullscreen = !!document.fullscreenElement;
|
||||
});
|
||||
|
||||
"
|
||||
x-ref="videoContainer"
|
||||
@mouseleave="mouseleave=true"
|
||||
@mousemove="mousemoveVideo"
|
||||
class="relative h-[360px] min-w-[640px] overflow-hidden rounded-md aspect-video"
|
||||
>
|
||||
<video
|
||||
x-ref="player"
|
||||
@loadedmetadata="metaDataLoaded"
|
||||
@timeupdate="timeUpdatedInterval"
|
||||
@ended="videoEnded"
|
||||
preload="metadata"
|
||||
:poster="poster"
|
||||
class="relative z-10 object-cover w-full h-full bg-black"
|
||||
crossorigin="anonymous"
|
||||
>
|
||||
<source :src="sources.mp4" type="video/mp4"/>
|
||||
<source :src="sources.webm" type="video/webm"/>
|
||||
<source :src="sources.ogg" type="video/ogg"/>
|
||||
</video>
|
||||
<div x-show="videoPlayerReady" class="absolute inset-0 w-full h-full">
|
||||
<div x-ref="videoBackground" @click="togglePlay()" class="absolute inset-0 z-30 flex items-center justify-center w-full h-full bg-black bg-opacity-0 cursor-pointer group">
|
||||
<div
|
||||
x-show="playing"
|
||||
x-transition:enter="transition ease-out duration-1000"
|
||||
x-transition:enter-start="scale-50 opacity-100"
|
||||
x-transition:enter-end="scale-100 opacity-0"
|
||||
class="absolute z-20 flex items-center justify-center w-24 h-24 bg-blue-600 rounded-full opacity-0 bg-opacity-20"
|
||||
x-cloak
|
||||
>
|
||||
<svg class="w-10 h-10 translate-x-0.5 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.42737 3.41611C6.46665 2.24586 4.00008 3.67188 4.00007 5.9427L4 18.0572C3.99999 20.329 6.46837 21.7549 8.42907 20.5828L18.5698 14.5207C20.4775 13.3802 20.4766 10.6076 18.568 9.46853L8.42737 3.41611Z" fill="currentColor"></path></svg>
|
||||
</div>
|
||||
<div
|
||||
x-show="!playing && !ended"
|
||||
x-transition:enter="transition ease-out duration-1000"
|
||||
x-transition:enter-start="scale-50 opacity-100"
|
||||
x-transition:enter-end="scale-100 opacity-0"
|
||||
class="absolute z-20 flex items-center justify-center w-24 h-24 bg-blue-600 rounded-full opacity-0 bg-opacity-20"
|
||||
x-cloak
|
||||
>
|
||||
<svg class="w-10 h-10 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 3C8.55228 3 9 3.44772 9 4L9 20C9 20.5523 8.55228 21 8 21C7.44772 21 7 20.5523 7 20L7 4C7 3.44772 7.44772 3 8 3ZM16 3C16.5523 3 17 3.44772 17 4V20C17 20.5523 16.5523 21 16 21C15.4477 21 15 20.5523 15 20V4C15 3.44772 15.4477 3 16 3Z" fill="currentColor"></path></svg>
|
||||
</div>
|
||||
<div class="absolute z-10 duration-300 ease-out group-hover:scale-110">
|
||||
<button
|
||||
x-show="!playing"
|
||||
x-transition:enter="transition ease-in delay-200 duration-300"
|
||||
x-transition:enter-start="opacity-0 scale-75"
|
||||
x-transition:enter-end="opacity-100 scale-100"
|
||||
x-transition:leave="transition ease-out duration-300"
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0"
|
||||
class="flex items-center justify-center w-12 h-12 text-white duration-150 ease-out bg-blue-600 rounded-full cursor-pointer bg-opacity-80"
|
||||
type="button"
|
||||
>
|
||||
<svg class="w-5 h-5 translate-x-px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.42737 3.41611C6.46665 2.24586 4.00008 3.67188 4.00007 5.9427L4 18.0572C3.99999 20.329 6.46837 21.7549 8.42907 20.5828L18.5698 14.5207C20.4775 13.3802 20.4766 10.6076 18.568 9.46853L8.42737 3.41611Z" fill="currentColor" x-cloak></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
x-show="controls"
|
||||
x-transition:enter="transition ease-out duration-300"
|
||||
x-transition:enter-start="-translate-y-full"
|
||||
x-transition:enter-end="translate-y-0"
|
||||
x-transition:leave="transition ease-in duration-300"
|
||||
x-transition:leave-start="translate-y-0"
|
||||
x-transition:leave-end="-translate-y-full"
|
||||
class="absolute top-0 left-0 z-20 w-full h-1/4 opacity-20 bg-gradient-to-b from-black to-transparent"
|
||||
x-cloak
|
||||
></div>
|
||||
<div
|
||||
x-show="controls"
|
||||
x-transition:enter="transition ease-out duration-300"
|
||||
x-transition:enter-start="translate-y-full"
|
||||
x-transition:enter-end="translate-y-0"
|
||||
x-transition:leave="transition ease-in duration-300"
|
||||
x-transition:leave-start="translate-y-0"
|
||||
x-transition:leave-end="translate-y-full"
|
||||
class="absolute bottom-0 left-0 z-20 w-full h-1/4 opacity-20 bg-gradient-to-b from-transparent to-black"
|
||||
x-cloak
|
||||
></div>
|
||||
<div
|
||||
x-show="controls"
|
||||
@click="resetControlsTimeout"
|
||||
x-transition:enter="transition ease-out duration-300"
|
||||
x-transition:enter-start="-translate-y-full"
|
||||
x-transition:enter-end="translate-y-0"
|
||||
x-transition:leave="transition ease-in duration-300"
|
||||
x-transition:leave-start="translate-y-0"
|
||||
x-transition:leave-end="-translate-y-full"
|
||||
class="absolute top-0 left-0 z-40 flex items-center w-full h-12 text-white"
|
||||
x-cloak
|
||||
>
|
||||
<div class="absolute right-0 top-0 mr-0.5 mt-0.5 flex items-center">
|
||||
<div class="flex items-center h-auto group">
|
||||
<button @click="toggleMute()" type="button" class="flex items-center justify-center w-6 h-auto duration-150 ease-out opacity-80 hover:opacity-100">
|
||||
<svg x-show="!muted" class="w-[18px] h-[18px]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" x-cloak><path d="M13.5 4.06c0-1.336-1.616-2.005-2.56-1.06l-4.5 4.5H4.508c-1.141 0-2.318.664-2.66 1.905A9.76 9.76 0 001.5 12c0 .898.121 1.768.35 2.595.341 1.24 1.518 1.905 2.659 1.905h1.93l4.5 4.5c.945.945 2.561.276 2.561-1.06V4.06zM18.584 5.106a.75.75 0 011.06 0c3.808 3.807 3.808 9.98 0 13.788a.75.75 0 11-1.06-1.06 8.25 8.25 0 000-11.668.75.75 0 010-1.06z"></path><path d="M15.932 7.757a.75.75 0 011.061 0 6 6 0 010 8.486.75.75 0 01-1.06-1.061 4.5 4.5 0 000-6.364.75.75 0 010-1.06z"></path></svg>
|
||||
<svg x-show="muted" class="w-[18px] h-[18px]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" x-cloak><path d="M13.5 4.06c0-1.336-1.616-2.005-2.56-1.06l-4.5 4.5H4.508c-1.141 0-2.318.664-2.66 1.905A9.76 9.76 0 001.5 12c0 .898.121 1.768.35 2.595.341 1.24 1.518 1.905 2.659 1.905h1.93l4.5 4.5c.945.945 2.561.276 2.561-1.06V4.06zM17.78 9.22a.75.75 0 10-1.06 1.06L18.44 12l-1.72 1.72a.75.75 0 001.06 1.06l1.72-1.72 1.72 1.72a.75.75 0 101.06-1.06L20.56 12l1.72-1.72a.75.75 0 00-1.06-1.06l-1.72 1.72-1.72-1.72z"></path></svg>
|
||||
</button>
|
||||
<div class="relative h-1.5 mx-0 group-hover:mx-1 rounded-full group-hover:w-12 invisible group-hover:visible w-0 ease-out duration-300">
|
||||
<input
|
||||
x-ref="volume"
|
||||
@input="updateVolume(event)"
|
||||
type="range"
|
||||
min="0"
|
||||
max="1"
|
||||
:value="volume"
|
||||
step="0.01"
|
||||
class="w-full h-full appearance-none flex items-center cursor-pointer bg-transparent z-30
|
||||
[&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-0 [&::-webkit-slider-thumb]:w-2 [&::-webkit-slider-thumb]:h-2 [&::-webkit-slider-thumb]:appearance-none
|
||||
[&::-moz-range-thumb]:bg-white [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:w-2 [&::-moz-range-thumb]:h-2 [&::-moz-range-thumb]:appearance-none
|
||||
[&::-ms-thumb]:bg-white [&::-ms-thumb]:rounded-full [&::-ms-thumb]:border-0 [&::-ms-thumb]:w-2 [&::-ms-thumb]:h-2 [&::-ms-thumb]:appearance-none
|
||||
[&::-webkit-slider-runnable-track]:bg-white [&::-webkit-slider-runnable-track]:bg-opacity-30 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:overflow-hidden [&::-moz-range-track]:bg-neutral-200 [&::-moz-range-track]:rounded-full [&::-ms-track]:bg-neutral-200 [&::-ms-track]:rounded-full
|
||||
[&::-moz-range-progress]:bg-white [&::-moz-range-progress]:bg-opacity-80 [&::-moz-range-progress]:rounded-full [&::-ms-fill-lower]:bg-white [&::-ms-fill-lower]:bg-opacity-80 [&::-ms-fill-lower]:rounded-full [&::-webkit-slider-thumb]:shadow-[-995px_0px_0px_990px_rgba(255,_255,_255,_0.8)]
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<button x-ref="fullscreenButton" @click="handleFullscreen" class="flex items-center justify-center w-10 h-10 duration-150 ease-out scale-90 opacity-80 hover:opacity-100 hover:scale-100" type="button">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.72685 5C5.77328 5 5 5.77318 5 6.72727V9C5 9.55228 4.55228 10 4 10C3.44772 10 3 9.55228 3 9V6.72727C3 4.6689 4.66842 3 6.72685 3H9C9.55228 3 10 3.44772 10 4C10 4.55228 9.55228 5 9 5H6.72685ZM14 4C14 3.44772 14.4477 3 15 3H17.2727C19.3312 3 21 4.66876 21 6.72727V9C21 9.55228 20.5523 10 20 10C19.4477 10 19 9.55228 19 9V6.72727C19 5.77333 18.2267 5 17.2727 5H15C14.4477 5 14 4.55228 14 4ZM4 14C4.55228 14 5 14.4477 5 15V17.2727C5 18.2268 5.77328 19 6.72685 19H9C9.55228 19 10 19.4477 10 20C10 20.5523 9.55228 21 9 21H6.72685C4.66842 21 3 19.3311 3 17.2727V15C3 14.4477 3.44772 14 4 14ZM20 14C20.5523 14 21 14.4477 21 15V17.2727C21 19.3312 19.3312 21 17.2727 21H15C14.4477 21 14 20.5523 14 20C14 19.4477 14.4477 19 15 19H17.2727C18.2267 19 19 18.2267 19 17.2727V15C19 14.4477 19.4477 14 20 14Z" fill="currentColor"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
x-show="controls"
|
||||
@click="resetControlsTimeout"
|
||||
x-transition:enter="transition ease-out duration-300"
|
||||
x-transition:enter-start="translate-y-full"
|
||||
x-transition:enter-end="translate-y-0"
|
||||
x-transition:leave="transition ease-in duration-300"
|
||||
x-transition:leave-start="translate-y-0"
|
||||
x-transition:leave-end="translate-y-full"
|
||||
class="absolute bottom-0 left-0 z-40 w-full h-12"
|
||||
x-cloak
|
||||
>
|
||||
<div class="absolute bottom-0 z-30 w-full px-2.5 -translate-y-8">
|
||||
<div class="relative w-full h-1 rounded-full">
|
||||
<input
|
||||
x-ref="videoProgress"
|
||||
@click="timelineClicked"
|
||||
@input="timelineSeek(event)"
|
||||
type="range"
|
||||
min="0"
|
||||
max="100"
|
||||
value="0"
|
||||
step="any"
|
||||
class="w-full h-full appearance-none flex items-center cursor-pointer bg-transparent z-30
|
||||
[&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-0 [&::-webkit-slider-thumb]:w-1.5 [&::-webkit-slider-thumb]:h-1.5 [&::-webkit-slider-thumb]:appearance-none
|
||||
[&::-moz-range-thumb]:bg-white [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:w-1.5 [&::-moz-range-thumb]:h-1.5 [&::-moz-range-thumb]:appearance-none
|
||||
[&::-ms-thumb]:bg-white [&::-ms-thumb]:rounded-full [&::-ms-thumb]:border-0 [&::-ms-thumb]:w-1.5 [&::-ms-thumb]:h-1.5 [&::-ms-thumb]:appearance-none
|
||||
[&::-webkit-slider-runnable-track]:bg-white [&::-webkit-slider-runnable-track]:bg-opacity-30 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:overflow-hidden [&::-moz-range-track]:bg-neutral-200 [&::-moz-range-track]:rounded-full [&::-ms-track]:bg-neutral-200 [&::-ms-track]:rounded-full
|
||||
[&::-moz-range-progress]:bg-blue-600 [&::-moz-range-progress]:rounded-full [&::-ms-fill-lower]:bg-blue-600 [&::-ms-fill-lower]:rounded-full [&::-webkit-slider-thumb]:shadow-[-995px_0px_0px_990px_#2463eb]
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute bottom-0 left-0 z-20 flex items-center w-full h-8 text-white">
|
||||
<div x-show="showTime" class="flex items-center justify-between w-full mx-3 font-mono text-xs opacity-80 hover:opacity-100" x-cloak>
|
||||
<time x-ref="timeElapsed" x-text="timeElapsedString">00:00</time>
|
||||
<time x-ref="timeDuration" x-text="timeDurationString">00:00</time>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -18,7 +18,7 @@ templ Header() {
|
||||
<!-- Desktop sign in links -->
|
||||
<ul class="flex grow justify-end flex-wrap items-center">
|
||||
<li>
|
||||
<a class="text-sm font-medium text-zinc-500 hover:text-zinc-900 px-3 lg:px-5 py-2 flex items-center transition" href="/login">Log in</a>
|
||||
<div class="text-sm cursor-pointer font-medium text-zinc-500 hover:text-zinc-900 px-3 lg:px-5 py-2 flex items-center transition" hx-swap="afterend" hx-get="/login">Log in</div>
|
||||
</li>
|
||||
<li class="ml-1">
|
||||
<div class="btn-sm text-zinc-100 cursor-pointer bg-zinc-900 hover:bg-zinc-800 w-full shadow" hx-swap="afterend" hx-get="/register">Register</div>
|
||||
|
||||
@@ -29,7 +29,7 @@ func Header() templ.Component {
|
||||
templ_7745c5c3_Var1 = templ.NopComponent
|
||||
}
|
||||
ctx = templ.ClearChildren(ctx)
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!-- Site header --><header class=\"absolute top-2 md:top-6 w-full z-30\"><div class=\"px-4 sm:px-6\"><div class=\"max-w-3xl mx-auto\"><div class=\"flex items-center justify-between h-14 border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.white))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] rounded-lg px-3\"><!-- Site branding --><div class=\"shrink-0 mr-4\"><!-- Logo --><a class=\"flex items-center justify-center bg-white w-8 h-8 rounded shadow-sm shadow-zinc-950/20\" href=\"/\"><img src=\"https://cdn.sonr.id/img/logo-zinc.svg\" width=\"24\" height=\"24\" alt=\"Logo\"></a></div><!-- Desktop navigation --><nav class=\"flex grow\"><!-- Desktop sign in links --><ul class=\"flex grow justify-end flex-wrap items-center\"><li><a class=\"text-sm font-medium text-zinc-500 hover:text-zinc-900 px-3 lg:px-5 py-2 flex items-center transition\" href=\"/login\">Log in</a></li><li class=\"ml-1\"><div class=\"btn-sm text-zinc-100 cursor-pointer bg-zinc-900 hover:bg-zinc-800 w-full shadow\" hx-swap=\"afterend\" hx-get=\"/register\">Register</div></li></ul></nav></div></div></div></header>")
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!-- Site header --><header class=\"absolute top-2 md:top-6 w-full z-30\"><div class=\"px-4 sm:px-6\"><div class=\"max-w-3xl mx-auto\"><div class=\"flex items-center justify-between h-14 border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.white))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] rounded-lg px-3\"><!-- Site branding --><div class=\"shrink-0 mr-4\"><!-- Logo --><a class=\"flex items-center justify-center bg-white w-8 h-8 rounded shadow-sm shadow-zinc-950/20\" href=\"/\"><img src=\"https://cdn.sonr.id/img/logo-zinc.svg\" width=\"24\" height=\"24\" alt=\"Logo\"></a></div><!-- Desktop navigation --><nav class=\"flex grow\"><!-- Desktop sign in links --><ul class=\"flex grow justify-end flex-wrap items-center\"><li><div class=\"text-sm cursor-pointer font-medium text-zinc-500 hover:text-zinc-900 px-3 lg:px-5 py-2 flex items-center transition\" hx-swap=\"afterend\" hx-get=\"/login\">Log in</div></li><li class=\"ml-1\"><div class=\"btn-sm text-zinc-100 cursor-pointer bg-zinc-900 hover:bg-zinc-800 w-full shadow\" hx-swap=\"afterend\" hx-get=\"/register\">Register</div></li></ul></nav></div></div></div></header>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
|
||||
@@ -16,7 +16,6 @@ templ Modal(c echo.Context) {
|
||||
"
|
||||
@keydown.escape="fullscreenModal=false"
|
||||
>
|
||||
<button @click="fullscreenModal=true" class="inline-flex items-center justify-center h-10 px-4 py-2 text-sm font-medium transition-colors bg-white border rounded-md hover:bg-neutral-100 active:bg-white focus:bg-white focus:outline-none focus:ring-2 focus:ring-neutral-200/60 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none">Preview</button>
|
||||
<template x-teleport="body">
|
||||
<div
|
||||
x-show="fullscreenModal"
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -11,7 +11,6 @@ templ View(c echo.Context) {
|
||||
@blocks.H1("Sonr.ID")
|
||||
@blocks.Text("Neo-tree is a file manager for NeoFS.")
|
||||
@blocks.Spacer()
|
||||
@blocks.RadioGroup()
|
||||
@blocks.Spacer()
|
||||
@blocks.Button(blocks.GET("/", "#login-view")) {
|
||||
@blocks.Text("Cancel")
|
||||
|
||||
@@ -82,14 +82,6 @@ func View(c echo.Context) templ.Component {
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = blocks.RadioGroup().Render(ctx, templ_7745c5c3_Buffer)
|
||||
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 = blocks.Spacer().Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
|
||||
@@ -9,7 +9,6 @@ templ View(c echo.Context) {
|
||||
@blocks.Layout("Sonr.ID", true) {
|
||||
@blocks.Card("profile-view", blocks.SizeLarge) {
|
||||
@blocks.ProfileCard()
|
||||
@blocks.Tabs()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -62,14 +62,6 @@ func View(c echo.Context) templ.Component {
|
||||
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 = blocks.Tabs().Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
return templ_7745c5c3_Err
|
||||
})
|
||||
templ_7745c5c3_Err = blocks.Card("profile-view", blocks.SizeLarge).Render(templ.WithChildren(ctx, templ_7745c5c3_Var3), templ_7745c5c3_Buffer)
|
||||
|
||||
@@ -8,7 +8,7 @@ import (
|
||||
templ Modal(c echo.Context) {
|
||||
<div
|
||||
x-data="{ modalOpen: true }"
|
||||
@keydown.escape.window="modalOpen = false"
|
||||
@keydown.escape="modalOpen=false"
|
||||
:class="{ 'z-40': modalOpen }"
|
||||
class="relative w-auto h-auto"
|
||||
>
|
||||
|
||||
@@ -34,7 +34,7 @@ func Modal(c echo.Context) templ.Component {
|
||||
templ_7745c5c3_Var1 = templ.NopComponent
|
||||
}
|
||||
ctx = templ.ClearChildren(ctx)
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div x-data=\"{ modalOpen: true }\" @keydown.escape.window=\"modalOpen = false\" :class=\"{ 'z-40': modalOpen }\" class=\"relative w-auto h-auto\"><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-zinc-900 bg-opacity-50 backdrop-blur-sm\"></div><div x-show=\"modalOpen\" x-trap.inert.noscroll=\"modalOpen\" x-transition:enter=\"ease-out duration-300\" x-transition:enter-start=\"opacity-0 scale-90\" x-transition:enter-end=\"opacity-100 scale-100\" x-transition:leave=\"ease-in duration-200\" x-transition:leave-start=\"opacity-100 scale-100\" x-transition:leave-end=\"opacity-0 scale-90\" class=\"relative w-full py-6 bg-white shadow-md px-7 bg-opacity-90 drop-shadow-md backdrop-blur-sm sm:max-w-lg sm:rounded-lg\"><div class=\"flex items-center justify-between pb-3\"><h3 class=\"text-lg font-semibold\">Account Registration</h3><button @click=\"modalOpen=false\" class=\"absolute top-0 right-0 flex items-center justify-center w-8 h-8 mt-5 mr-5 text-zinc-600 rounded-full hover:text-zinc-800 hover:bg-zinc-50\"><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><div class=\"relative w-auto pb-8\"><p>Enter your account information below to create your account.</p></div>")
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div x-data=\"{ modalOpen: true }\" @keydown.escape=\"modalOpen=false\" :class=\"{ 'z-40': modalOpen }\" class=\"relative w-auto h-auto\"><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-zinc-900 bg-opacity-50 backdrop-blur-sm\"></div><div x-show=\"modalOpen\" x-trap.inert.noscroll=\"modalOpen\" x-transition:enter=\"ease-out duration-300\" x-transition:enter-start=\"opacity-0 scale-90\" x-transition:enter-end=\"opacity-100 scale-100\" x-transition:leave=\"ease-in duration-200\" x-transition:leave-start=\"opacity-100 scale-100\" x-transition:leave-end=\"opacity-0 scale-90\" class=\"relative w-full py-6 bg-white shadow-md px-7 bg-opacity-90 drop-shadow-md backdrop-blur-sm sm:max-w-lg sm:rounded-lg\"><div class=\"flex items-center justify-between pb-3\"><h3 class=\"text-lg font-semibold\">Account Registration</h3><button @click=\"modalOpen=false\" class=\"absolute top-0 right-0 flex items-center justify-center w-8 h-8 mt-5 mr-5 text-zinc-600 rounded-full hover:text-zinc-800 hover:bg-zinc-50\"><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><div class=\"relative w-auto pb-8\"><p>Enter your account information below to create your account.</p></div>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user