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 { component$, useSignal } from "@builder.io/qwik";
import { animate } from "motion";
import { UserType } from "~/lib/types"; import { UserType } from "~/lib/types";
import { LucideUsers } from "../icons/lucide/LucideUsers"; import { LucideUsers } from "../icons/lucide/LucideUsers";
@ -12,43 +11,26 @@ interface UserProps {
export default component$((props: UserProps) => { export default component$((props: UserProps) => {
const visible = useSignal(false); 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 ( return (
<div> <div>
<div class="!relative w-full"> <div class="relative w-full">
<div <div
ref={accountSwitcher}
id="account-switcher" 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 Account Switcher
</div> </div>
</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"> <div class="flex gap-2">
<img src={props.user.avatar} alt="avatar" class="w-12 h-12 rounded-full" /> <img src={props.user.avatar} alt="avatar" class="w-12 h-12 rounded-full" />
<div class="flex flex-col gap-1 justify-center"> <div class="flex flex-col gap-1 justify-center">
<p class="!text-md !font-semibold">{props.user.displayName}</p> <p class="text-md font-semibold">{props.user.displayName}</p>
<p class="!text-sm !font-semibold -mt-2.5"> <p class="text-sm font-semibold -mt-2.5">
<span class="!text-clatter-gray-400">@</span> <span class="text-clatter-gray-400">@</span>
<span class="!text-clatter-gray-500"> <span class="text-clatter-gray-500">
{props.user.userName} {props.action} {props.user.userName} {props.action}
</span> </span>
</p> </p>
@ -58,7 +40,7 @@ export default component$((props: UserProps) => {
{props.accountSwitcher && ( {props.accountSwitcher && (
<button <button
onClick$={() => visible.value = !visible.value} 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 /> <LucideUsers />
</button> </button>