mirror of
https://github.com/onsonr/sonr.git
synced 2025-03-10 13:07:09 +00:00
feat: add ModalForm component
This commit is contained in:
parent
b633d21ea8
commit
f7f0c11587
@ -1135,10 +1135,6 @@ select{
|
||||
margin-top: 6rem;
|
||||
}
|
||||
|
||||
.mt-3{
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.mt-4{
|
||||
margin-top: 1rem;
|
||||
}
|
||||
@ -1175,10 +1171,6 @@ select{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.h-0\.5{
|
||||
height: 0.125rem;
|
||||
}
|
||||
|
||||
.h-10{
|
||||
height: 2.5rem;
|
||||
}
|
||||
@ -1239,14 +1231,6 @@ select{
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.w-0{
|
||||
width: 0px;
|
||||
}
|
||||
|
||||
.w-1\/3{
|
||||
width: 33.333333%;
|
||||
}
|
||||
|
||||
.w-14{
|
||||
width: 3.5rem;
|
||||
}
|
||||
@ -1360,10 +1344,6 @@ select{
|
||||
max-width: 20rem;
|
||||
}
|
||||
|
||||
.flex-shrink-0{
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.shrink-0{
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@ -1397,11 +1377,6 @@ select{
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.-translate-x-px{
|
||||
--tw-translate-x: -1px;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.-translate-y-0\.5{
|
||||
--tw-translate-y: -0.125rem;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
@ -1412,11 +1387,6 @@ select{
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.-translate-y-px{
|
||||
--tw-translate-y: -1px;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.translate-x-0{
|
||||
--tw-translate-x: 0px;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
@ -1452,11 +1422,6 @@ select{
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.translate-y-full{
|
||||
--tw-translate-y: 100%;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.rotate-1{
|
||||
--tw-rotate: 1deg;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
@ -1682,10 +1647,6 @@ select{
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.border-\[2px\]{
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.border-t{
|
||||
border-top-width: 1px;
|
||||
}
|
||||
@ -1700,11 +1661,6 @@ select{
|
||||
border-color: rgb(22 163 74 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.border-neutral-200{
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(229 229 229 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.border-neutral-200\/60{
|
||||
border-color: rgb(229 229 229 / 0.6);
|
||||
}
|
||||
@ -1853,16 +1809,6 @@ select{
|
||||
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
||||
}
|
||||
|
||||
.bg-gradient-to-t{
|
||||
background-image: linear-gradient(to top, var(--tw-gradient-stops));
|
||||
}
|
||||
|
||||
.from-black{
|
||||
--tw-gradient-from: #000 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
|
||||
.from-zinc-100{
|
||||
--tw-gradient-from: #f4f4f5 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(244 244 245 / 0) var(--tw-gradient-to-position);
|
||||
@ -1888,10 +1834,6 @@ select{
|
||||
--tw-gradient-to: #18181b var(--tw-gradient-to-position);
|
||||
}
|
||||
|
||||
.bg-cover{
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.bg-clip-text{
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
@ -1939,16 +1881,6 @@ select{
|
||||
padding: 1.75rem;
|
||||
}
|
||||
|
||||
.px-0\.5{
|
||||
padding-left: 0.125rem;
|
||||
padding-right: 0.125rem;
|
||||
}
|
||||
|
||||
.px-2{
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
.px-2\.5{
|
||||
padding-left: 0.625rem;
|
||||
padding-right: 0.625rem;
|
||||
@ -2029,11 +1961,6 @@ select{
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.py-px{
|
||||
padding-top: 1px;
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
|
||||
.pb-1{
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
@ -2118,10 +2045,6 @@ select{
|
||||
font-family: Inter Tight, sans-serif;
|
||||
}
|
||||
|
||||
.font-sans{
|
||||
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
}
|
||||
|
||||
.text-2xl{
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.415;
|
||||
@ -2140,10 +2063,6 @@ select{
|
||||
letter-spacing: -0.017em;
|
||||
}
|
||||
|
||||
.text-\[0\.6rem\]{
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
|
||||
.text-base{
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
@ -2176,10 +2095,6 @@ select{
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.font-extrabold{
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.font-medium{
|
||||
font-weight: 500;
|
||||
}
|
||||
@ -2192,10 +2107,6 @@ select{
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.uppercase{
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.italic{
|
||||
font-style: italic;
|
||||
}
|
||||
@ -2270,11 +2181,6 @@ select{
|
||||
color: rgb(115 115 115 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-neutral-600{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(82 82 82 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-neutral-800{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(38 38 38 / var(--tw-text-opacity));
|
||||
@ -2349,18 +2255,6 @@ select{
|
||||
color: rgb(24 24 27 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.underline{
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
.no-underline{
|
||||
text-decoration-line: none;
|
||||
}
|
||||
|
||||
.underline-offset-4{
|
||||
text-underline-offset: 4px;
|
||||
}
|
||||
|
||||
.antialiased{
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
@ -2378,14 +2272,6 @@ select{
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.opacity-70{
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.opacity-90{
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.mix-blend-exclusion{
|
||||
mix-blend-mode: exclusion;
|
||||
}
|
||||
@ -2456,10 +2342,6 @@ select{
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
|
||||
.duration-500{
|
||||
transition-duration: 500ms;
|
||||
}
|
||||
|
||||
.duration-700{
|
||||
transition-duration: 700ms;
|
||||
}
|
||||
@ -2889,16 +2771,6 @@ input[type="search"]::-webkit-search-results-decoration {
|
||||
/* Firefox */
|
||||
}
|
||||
|
||||
.placeholder\:text-neutral-500::-moz-placeholder{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(115 115 115 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.placeholder\:text-neutral-500::placeholder{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(115 115 115 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.placeholder\:text-zinc-400::-moz-placeholder{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(161 161 170 / var(--tw-text-opacity));
|
||||
@ -3245,11 +3117,6 @@ input[type="search"]::-webkit-search-results-decoration {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.focus\:border-neutral-300:focus{
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(212 212 212 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.focus\:border-zinc-300:focus{
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(212 212 216 / var(--tw-border-opacity));
|
||||
@ -3260,10 +3127,6 @@ input[type="search"]::-webkit-search-results-decoration {
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.focus\:no-underline:focus{
|
||||
text-decoration-line: none;
|
||||
}
|
||||
|
||||
.focus\:outline-none:focus{
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
@ -3370,25 +3233,6 @@ input[type="search"]::-webkit-search-results-decoration {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.group:hover .group-hover\:w-full{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.group:hover .group-hover\:-rotate-6{
|
||||
--tw-rotate: -6deg;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.group:hover .group-hover\:scale-150{
|
||||
--tw-scale-x: 1.5;
|
||||
--tw-scale-y: 1.5;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.group:hover .group-hover\:opacity-100{
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.group:hover .group-hover\:\[animation-play-state\:paused\]{
|
||||
animation-play-state: paused;
|
||||
}
|
||||
@ -3624,26 +3468,14 @@ input[type="search"]::-webkit-search-results-decoration {
|
||||
grid-column: span 6 / span 6;
|
||||
}
|
||||
|
||||
.lg\:mb-0{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.lg\:mt-32{
|
||||
margin-top: 8rem;
|
||||
}
|
||||
|
||||
.lg\:block{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.lg\:flex{
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.lg\:h-5{
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
.lg\:min-w-\[524px\]{
|
||||
min-width: 524px;
|
||||
}
|
||||
@ -3680,14 +3512,6 @@ input[type="search"]::-webkit-search-results-decoration {
|
||||
margin-bottom: calc(0px * var(--tw-space-y-reverse));
|
||||
}
|
||||
|
||||
.lg\:border-white\/20{
|
||||
border-color: rgb(255 255 255 / 0.2);
|
||||
}
|
||||
|
||||
.lg\:bg-black\/10{
|
||||
background-color: rgb(0 0 0 / 0.1);
|
||||
}
|
||||
|
||||
.lg\:p-24{
|
||||
padding: 6rem;
|
||||
}
|
||||
@ -3714,15 +3538,6 @@ input[type="search"]::-webkit-search-results-decoration {
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.017em;
|
||||
}
|
||||
|
||||
.lg\:text-white{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.hover\:lg\:bg-black\/30:hover{
|
||||
background-color: rgb(0 0 0 / 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1280px){
|
||||
|
||||
@ -8,54 +8,14 @@ import (
|
||||
)
|
||||
|
||||
templ Modal(c echo.Context) {
|
||||
<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>
|
||||
@ui.Breadcrumbs()
|
||||
@forms.ProfileDetailsForm()
|
||||
@styles.Spacer()
|
||||
<div class="flex flex-col-reverse sm:flex-row sm:justify-between sm:space-x-2">
|
||||
<button @click="modalOpen=false" type="button" class="inline-flex items-center justify-center h-10 px-4 py-2 text-sm font-medium transition-colors border rounded-md focus:outline-none focus:ring-2 focus:ring-neutral-100 focus:ring-offset-2">Cancel</button>
|
||||
<button @click="modalOpen=false" type="button" class="inline-flex items-center justify-center h-10 px-4 py-2 text-sm font-medium text-white transition-colors border border-transparent rounded-md focus:outline-none focus:ring-2 focus:ring-neutral-900 focus:ring-offset-2 bg-neutral-950 hover:bg-neutral-900">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
@styles.OpenModal("Account Registration", "Enter your account information below to create your account.") {
|
||||
@ui.Breadcrumbs()
|
||||
@forms.ProfileDetailsForm()
|
||||
@styles.Spacer()
|
||||
<div class="flex flex-col-reverse sm:flex-row sm:justify-between sm:space-x-2">
|
||||
<button @click="modalOpen=false" type="button" class="inline-flex items-center justify-center h-10 px-4 py-2 text-sm font-medium transition-colors border rounded-md focus:outline-none focus:ring-2 focus:ring-neutral-100 focus:ring-offset-2">Cancel</button>
|
||||
<button @click="modalOpen=false" type="button" class="inline-flex items-center justify-center h-10 px-4 py-2 text-sm font-medium text-white transition-colors border border-transparent rounded-md focus:outline-none focus:ring-2 focus:ring-neutral-900 focus:ring-offset-2 bg-neutral-950 hover:bg-neutral-900">Next</button>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -36,23 +36,45 @@ 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=\"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 {
|
||||
templ_7745c5c3_Var2 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
|
||||
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
|
||||
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_Err = ui.Breadcrumbs().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 = forms.ProfileDetailsForm().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 = styles.Spacer().Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" <div class=\"flex flex-col-reverse sm:flex-row sm:justify-between sm:space-x-2\"><button @click=\"modalOpen=false\" type=\"button\" class=\"inline-flex items-center justify-center h-10 px-4 py-2 text-sm font-medium transition-colors border rounded-md focus:outline-none focus:ring-2 focus:ring-neutral-100 focus:ring-offset-2\">Cancel</button> <button @click=\"modalOpen=false\" type=\"button\" class=\"inline-flex items-center justify-center h-10 px-4 py-2 text-sm font-medium text-white transition-colors border border-transparent rounded-md focus:outline-none focus:ring-2 focus:ring-neutral-900 focus:ring-offset-2 bg-neutral-950 hover:bg-neutral-900\">Next</button></div>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = ui.Breadcrumbs().Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = forms.ProfileDetailsForm().Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = styles.Spacer().Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"flex flex-col-reverse sm:flex-row sm:justify-between sm:space-x-2\"><button @click=\"modalOpen=false\" type=\"button\" class=\"inline-flex items-center justify-center h-10 px-4 py-2 text-sm font-medium transition-colors border rounded-md focus:outline-none focus:ring-2 focus:ring-neutral-100 focus:ring-offset-2\">Cancel</button> <button @click=\"modalOpen=false\" type=\"button\" class=\"inline-flex items-center justify-center h-10 px-4 py-2 text-sm font-medium text-white transition-colors border border-transparent rounded-md focus:outline-none focus:ring-2 focus:ring-neutral-900 focus:ring-offset-2 bg-neutral-950 hover:bg-neutral-900\">Next</button></div></div></div></template></div>")
|
||||
})
|
||||
templ_7745c5c3_Err = styles.OpenModal("Account Registration", "Enter your account information below to create your account.").Render(templ.WithChildren(ctx, templ_7745c5c3_Var2), templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
|
||||
20
pkg/nebula/components/dash/page.templ
Normal file
20
pkg/nebula/components/dash/page.templ
Normal file
@ -0,0 +1,20 @@
|
||||
package dash
|
||||
|
||||
import (
|
||||
"github.com/onsonr/sonr/pkg/nebula/global/styles"
|
||||
"github.com/onsonr/sonr/pkg/nebula/components/home/sections"
|
||||
"github.com/onsonr/sonr/pkg/nebula/models"
|
||||
)
|
||||
|
||||
templ View(home *models.Home) {
|
||||
@styles.LayoutNoBody("Sonr.ID", true) {
|
||||
@sections.Header()
|
||||
@sections.SectionHero(home.Hero)
|
||||
@sections.Highlights()
|
||||
@sections.Features()
|
||||
@sections.Bento()
|
||||
@sections.Lowlights()
|
||||
@sections.CallToAction()
|
||||
@sections.Footer()
|
||||
}
|
||||
}
|
||||
120
pkg/nebula/components/dash/page_templ.go
Normal file
120
pkg/nebula/components/dash/page_templ.go
Normal file
@ -0,0 +1,120 @@
|
||||
// Code generated by templ - DO NOT EDIT.
|
||||
|
||||
// templ: version: v0.2.778
|
||||
package dash
|
||||
|
||||
//lint:file-ignore SA4006 This context is only used if a nested component is present.
|
||||
|
||||
import "github.com/a-h/templ"
|
||||
import templruntime "github.com/a-h/templ/runtime"
|
||||
|
||||
import (
|
||||
"github.com/onsonr/sonr/pkg/nebula/components/home/sections"
|
||||
"github.com/onsonr/sonr/pkg/nebula/global/styles"
|
||||
"github.com/onsonr/sonr/pkg/nebula/models"
|
||||
)
|
||||
|
||||
func View(home *models.Home) 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_Var2 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
|
||||
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
|
||||
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_Err = sections.Header().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 = sections.SectionHero(home.Hero).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 = sections.Highlights().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 = sections.Features().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 = sections.Bento().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 = sections.Lowlights().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 = sections.CallToAction().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 = sections.Footer().Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
return templ_7745c5c3_Err
|
||||
})
|
||||
templ_7745c5c3_Err = styles.LayoutNoBody("Sonr.ID", true).Render(templ.WithChildren(ctx, templ_7745c5c3_Var2), templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
return templ_7745c5c3_Err
|
||||
})
|
||||
}
|
||||
|
||||
var _ = templruntime.GeneratedTemplate
|
||||
@ -51,7 +51,7 @@ templ LayoutNoBody(title string, remote bool) {
|
||||
}
|
||||
|
||||
|
||||
templ Modal(title, description string) {
|
||||
templ OpenModal(title, description string) {
|
||||
<div
|
||||
x-data="{ modalOpen: true }"
|
||||
@keydown.escape="modalOpen=false"
|
||||
@ -69,7 +69,7 @@ templ Modal(title, description string) {
|
||||
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"
|
||||
class="absolute inset-0 w-full h-full bg-zinc-900 bg-opacity-90 backdrop-blur-sm"
|
||||
></div>
|
||||
<div
|
||||
x-show="modalOpen"
|
||||
|
||||
@ -140,7 +140,7 @@ func LayoutNoBody(title string, remote bool) templ.Component {
|
||||
})
|
||||
}
|
||||
|
||||
func Modal(title, description string) templ.Component {
|
||||
func OpenModal(title, description 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 {
|
||||
@ -161,7 +161,7 @@ func Modal(title, description string) templ.Component {
|
||||
templ_7745c5c3_Var5 = templ.NopComponent
|
||||
}
|
||||
ctx = templ.ClearChildren(ctx)
|
||||
_, 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\">")
|
||||
_, 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-90 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\">")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
|
||||
@ -35,3 +35,27 @@ home = new Home {
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
register = new ModalForm {
|
||||
title = "Register";
|
||||
description = "Register your Sonr account to start using the platform.";
|
||||
id = "register-start";
|
||||
};
|
||||
|
||||
login = new ModalForm {
|
||||
title = "Login";
|
||||
description = "Login to your Sonr account to start using the platform.";
|
||||
id = "login-start";
|
||||
};
|
||||
|
||||
authorize = new ModalForm {
|
||||
title = "Authorize";
|
||||
description = "Authorize your Sonr account to start using the platform.";
|
||||
id = "authorize-start";
|
||||
};
|
||||
|
||||
privacyConsent = new ModalForm {
|
||||
title = "Privacy Consent";
|
||||
description = "Privacy Consent";
|
||||
id = "privacy-consent-start";
|
||||
};
|
||||
|
||||
54
pkl/UIUX.pkl
54
pkl/UIUX.pkl
@ -8,61 +8,28 @@ import "package://pkg.pkl-lang.org/pkl-go/pkl.golang@0.5.0#/go.pkl"
|
||||
// │ General State │
|
||||
// ╰───────────────────────────────────────────────────────────╯
|
||||
|
||||
typealias InputType = "text" | "password" | "email" | "credential" | "file"
|
||||
|
||||
class Button {
|
||||
text: String
|
||||
href: String
|
||||
}
|
||||
|
||||
abstract class Form {
|
||||
title: String
|
||||
description: String
|
||||
inputs: List<Input>
|
||||
}
|
||||
|
||||
class Image {
|
||||
src: String
|
||||
width: String
|
||||
height: String
|
||||
}
|
||||
|
||||
class Input {
|
||||
label: String
|
||||
type: InputType
|
||||
placeholder: String
|
||||
value: String?
|
||||
error: String?
|
||||
help: String?
|
||||
required: Boolean?
|
||||
}
|
||||
|
||||
class Link {
|
||||
text: String
|
||||
href: String
|
||||
}
|
||||
|
||||
class SocialLink {
|
||||
link: Link
|
||||
icon: String
|
||||
}
|
||||
|
||||
// ╭───────────────────────────────────────────────────────────╮
|
||||
// │ Data Models │
|
||||
// ╰───────────────────────────────────────────────────────────╯
|
||||
|
||||
class Feature {
|
||||
title: String
|
||||
description: String
|
||||
icon: String?
|
||||
image: Image?
|
||||
}
|
||||
|
||||
class Stat {
|
||||
value: String
|
||||
label: String
|
||||
}
|
||||
|
||||
class ModalForm {
|
||||
title: String
|
||||
description: String
|
||||
id: String
|
||||
}
|
||||
|
||||
// ╭───────────────────────────────────────────────────────────╮
|
||||
// │ Homepage View Model │
|
||||
// ╰───────────────────────────────────────────────────────────╯
|
||||
@ -78,14 +45,13 @@ class Hero {
|
||||
stats: Listing<Stat>
|
||||
}
|
||||
|
||||
class Highlights {
|
||||
heading: String
|
||||
subheading: String
|
||||
highlights: Listing<Feature>
|
||||
}
|
||||
class Home {
|
||||
hero: Hero
|
||||
}
|
||||
|
||||
home : Home
|
||||
register: ModalForm
|
||||
login: ModalForm
|
||||
authorize: ModalForm
|
||||
privacyConsent: ModalForm
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user