clatter2/clatter
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

a

Browse source
This commit is contained in:
grngxd 2024-08-10 00:15:24 +01:00
parent 1004a72122
commit add5093fa3
1 changed files with 9 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
web/src/components/user/User.tsx
View file

@ -1,5 +1,4 @@
import { component$, useSignal, useVisibleTask$ } from "@builder.io/qwik";
import { animate } from "motion";
import { component$, useSignal } from "@builder.io/qwik";
import { UserType } from "~/lib/types";
import { LucideUsers } from "../icons/lucide/LucideUsers";
@ -12,43 +11,26 @@ interface UserProps {
export default component$((props: UserProps) => {
const visible = useSignal(false);
const accountSwitcher = useSignal<Element>();
const animating = useSignal(false);
useVisibleTask$(({ track }) => {
track(() => visible.value);
if (accountSwitcher.value && !animating.value) {
animating.value = true;
animate(accountSwitcher.value, {
opacity: visible.value ? 1 : 0,
transform: visible.value ? "translateY(0)" : "translateY(10px)"
}, {
duration: 0.3,
});
animating.value = false
}
});
return (
<div>
<div class="!relative w-full">
<div class="relative w-full">
<div
ref={accountSwitcher}
id="account-switcher"
class={`!absolute bottom-2 w-full h-48 bg-clatter-gray-300 rounded-4xl !shadow-lg !overflow-hidden !transition-all !duration-300 !ease-in-out ${visible.value ? 'visible' : 'invisible'}`}
class={`absolute bottom-2 w-full h-48 bg-clatter-gray-300 rounded-4xl shadow-lg overflow-hidden transition-opacity duration-300 ease-in-out transform ${visible.value ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-2'}`}
>
Account Switcher
</div>
</div>
<div class="w-full !h-16 rounded-full p-2 bg-clatter-gray-300 flex justify-between gap-2">
<div class="w-full h-16 rounded-full p-2 bg-clatter-gray-300 flex justify-between gap-2">
<div class="flex gap-2">
<img src={props.user.avatar} alt="avatar" class="w-12 h-12 rounded-full" />
<div class="flex flex-col gap-1 justify-center">
<p class="!text-md !font-semibold">{props.user.displayName}</p>
<p class="!text-sm !font-semibold -mt-2.5">
<span class="!text-clatter-gray-400">@</span>
<span class="!text-clatter-gray-500">
<p class="text-md font-semibold">{props.user.displayName}</p>
<p class="text-sm font-semibold -mt-2.5">
<span class="text-clatter-gray-400">@</span>
<span class="text-clatter-gray-500">
{props.user.userName} {props.action}
</span>
</p>
@ -58,7 +40,7 @@ export default component$((props: UserProps) => {
{props.accountSwitcher && (
<button
onClick$={() => visible.value = !visible.value}
class="!p-2 !rounded-full !bg-clatter-gray-400 !text-white !font-semibold text-lg w-12 h-12 flex items-center justify-center hover:!bg-clatter-gray-500 active:scale-95 transition-all"
class="p-2 rounded-full bg-clatter-gray-400 text-white font-semibold text-lg w-12 h-12 flex items-center justify-center hover:bg-clatter-gray-500 active:scale-95 transition-all"
>
<LucideUsers />
</button>