godash/components/user.templ
2024-04-03 15:34:00 +02:00

50 lines
1.7 KiB
Text

package components
import (
"unicode"
"github.com/zitadel/oidc/v3/pkg/oidc"
openid "github.com/zitadel/zitadel-go/v3/pkg/authentication/oidc"
)
templ User(authCtx *openid.UserInfoContext[*oidc.IDTokenClaims, *oidc.UserInfo]) {
<div
x-data="{
open: false,
toggle() {
if (this.open) return this.close();
this.open = true;
},
close(focusAfter) {
if (! this.open) return;
this.open = false;
}
}"
class="relative"
>
<div x-on:click="toggle()" class="flex items-center gap-2 hover:cursor-pointer opacity-80 hover:opacity-100 transition-opacity">
<div class="hidden md:flex flex-col items-end">
<div class="text-secondary text-sm font-bold whitespace-nowrap">{ authCtx.UserInfo.Name }</div>
<div class="text-gray-500 text-xs whitespace-nowrap">{ authCtx.UserInfo.Email }</div>
</div>
<div class="avatar">
<div class="w-10 h-10 rounded-xl bg-secondary relative">
<span class="font-xl text-secondary-content absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2">{ string(unicode.ToUpper(rune(authCtx.UserInfo.Name[0]))) }</span>
</div>
</div>
</div>
<ul
x-show="open"
x-transition.origin.top.left
x-on:click.outside="close($refs.button)"
style="display: none;"
class="z-50 absolute right-0 mt-2 menu bg-base-200 rounded-box"
>
<li class="md:hidden menu-title whitespace-nowrap">{ authCtx.UserInfo.Name }</li>
<li class="md:hidden menu-title whitespace-nowrap">{ authCtx.UserInfo.Email }</li>
<li>
<a href="/auth/logout"><span class="icon-[bi--box-arrow-left]"></span> Logout</a>
</li>
</ul>
</div>
}