shiyue/kan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: members skeleton loader

Browse Source
This commit is contained in:
Henry
2024-10-30 22:14:00 +00:00
parent 4759d460ac
commit 6a0add079f
1 changed files with 139 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

225
src/views/members/index.tsx
View File

@@ -1,4 +1,6 @@
import { HiOutlinePlusSmall, HiEllipsisHorizontal } from "react-icons/hi2"; import { HiOutlinePlusSmall, HiEllipsisHorizontal } from "react-icons/hi2";
import { twMerge } from "tailwind-merge";
import { useModal } from "~/providers/modal"; import { useModal } from "~/providers/modal";
import { useWorkspace } from "~/providers/workspace"; import { useWorkspace } from "~/providers/workspace";
import Modal from "~/components/modal"; import Modal from "~/components/modal";
@@ -15,11 +17,124 @@ export default function MembersPage() {
const { modalContentType, openModal } = useModal(); const { modalContentType, openModal } = useModal();
const { workspace } = useWorkspace(); const { workspace } = useWorkspace();
const { data } = api.workspace.byId.useQuery( const { data, isLoading } = api.workspace.byId.useQuery(
{ publicId: workspace.publicId }, { publicId: workspace.publicId },
{ enabled: workspace?.publicId ? true : false }, // { enabled: workspace?.publicId ? true : false },
); );
const TableRow = ({
memberPublicId,
memberName,
memberEmail,
memberRole,
memberStatus,
isLastRow,
showSkeleton,
}: {
memberPublicId?: string;
memberName?: string | null | undefined;
memberEmail?: string | null | undefined;
memberRole?: string;
memberStatus?: string;
isLastRow?: boolean;
showSkeleton?: boolean;
}) => {
const initials = memberName
? getInitialsFromName(memberName)
: inferInitialsFromEmail(memberEmail ?? "");
return (
<tr className="rounded-b-lg">
<td className={twMerge("w-[65%]", isLastRow ? "rounded-bl-lg" : "")}>
<div className="flex items-center p-4">
<div className="flex-shrink-0">
<span
className={twMerge(
"inline-flex h-9 w-9 items-center justify-center rounded-full bg-light-1000 dark:bg-dark-400",
showSkeleton && "animate-pulse bg-light-200 dark:bg-dark-200",
)}
>
<span className="text-sm font-medium leading-none text-white">
{initials}
</span>
</span>
</div>
<div className="ml-2 min-w-0 flex-1">
<div>
<div className="flex items-center">
<p
className={twMerge(
"mr-2 text-sm font-medium text-neutral-900 dark:text-dark-1000",
showSkeleton &&
"md mb-2 h-3 w-[125px] animate-pulse rounded-sm bg-light-200 dark:bg-dark-200",
)}
>
{memberName}
</p>
</div>
<p
className={twMerge(
"truncate text-sm text-dark-900",
showSkeleton &&
"h-3 w-[175px] animate-pulse rounded-sm bg-light-200 dark:bg-dark-200",
)}
>
{memberEmail}
</p>
</div>
</div>
</div>
</td>
<td
className={twMerge(
"w-[35%] min-w-[150px]",
isLastRow && "rounded-br-lg",
)}
>
<div className="flex w-full items-center justify-between px-3">
<div>
<span
className={twMerge(
"inline-flex items-center rounded-md bg-emerald-500/10 px-1.5 py-0.5 text-[11px] font-medium text-emerald-400 ring-1 ring-inset ring-emerald-500/20",
showSkeleton &&
"h-5 w-[50px] animate-pulse bg-light-200 ring-0 dark:bg-dark-200",
)}
>
{memberRole &&
memberRole.charAt(0).toUpperCase() + memberRole.slice(1)}
</span>
{memberStatus === "invited" && (
<span className="ml-2 inline-flex items-center rounded-md bg-gray-500/10 px-1.5 py-0.5 text-[11px] font-medium text-gray-400 ring-1 ring-inset ring-gray-500/20">
Pending
</span>
)}
</div>
<div className={twMerge("relative", showSkeleton && "hidden")}>
<Dropdown
items={[
{
label: "Remove member",
action: () =>
openModal(
"REMOVE_MEMBER",
memberPublicId,
memberEmail ?? "",
),
},
]}
>
<HiEllipsisHorizontal
size={25}
className="text-light-900 dark:text-dark-900"
/>
</Dropdown>
</div>
</div>
</td>
</tr>
);
};
return ( return (
<div className="px-28 py-12"> <div className="px-28 py-12">
<div className="mb-8 flex w-full justify-between"> <div className="mb-8 flex w-full justify-between">
@@ -49,104 +164,42 @@ export default function MembersPage() {
<div className="h-full shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg"> <div className="h-full shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg">
<table className="min-w-full divide-y divide-light-600 dark:divide-dark-600"> <table className="min-w-full divide-y divide-light-600 dark:divide-dark-600">
<thead className="rounded-t-lg bg-light-300 dark:bg-dark-200"> <thead className="rounded-t-lg bg-light-300 dark:bg-dark-200">
<tr className=""> <tr>
<th <th
scope="col" scope="col"
className="rounded-tl-lg py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-light-900 dark:text-dark-900 sm:pl-6" className="w-[65%] rounded-tl-lg py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-light-900 dark:text-dark-900 sm:pl-6"
> >
User User
</th> </th>
<th <th
scope="col" scope="col"
className="rounded-tr-lg px-3 py-3.5 text-left text-sm font-semibold text-light-900 dark:text-dark-900" className="w-[35%] rounded-tr-lg px-3 py-3.5 text-left text-sm font-semibold text-light-900 dark:text-dark-900"
> >
Role Role
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody className="divide-y divide-light-600 bg-light-50 dark:divide-dark-600 dark:bg-dark-100"> <tbody className="divide-y divide-light-600 bg-light-50 dark:divide-dark-600 dark:bg-dark-100">
{data?.members.map((member, index) => { {!isLoading &&
const initials = member.user?.name data?.members.map((member, index) => (
? getInitialsFromName(member.user.name) <TableRow
: inferInitialsFromEmail(member.user?.email ?? ""); key={member.publicId}
memberPublicId={member.publicId}
memberName={member?.user?.name}
memberEmail={member?.user?.email}
memberRole={member.role}
memberStatus={member.status}
isLastRow={index === data.members.length - 1}
/>
))}
return ( {isLoading && (
<> <>
<tr key={member.publicId} className="rounded-b-lg"> <TableRow showSkeleton />
<td <TableRow showSkeleton />
className={ <TableRow showSkeleton isLastRow />
index === data.members.length - 1 </>
? "rounded-bl-lg" )}
: ""
}
>
<div className="flex items-center p-4">
<div className="flex-shrink-0">
<span className="inline-flex h-9 w-9 items-center justify-center rounded-full bg-light-1000 dark:bg-dark-400">
<span className="text-sm font-medium leading-none text-white">
{initials}
</span>
</span>
</div>
<div className="ml-2 min-w-0 flex-1">
<div>
<div className="flex items-center">
<p className="mr-2 text-sm font-medium text-neutral-900 dark:text-dark-1000">
{member.user?.name}
</p>
</div>
<p className="truncate text-sm text-dark-900">
{member.user?.email}
</p>
</div>
</div>
</div>
</td>
<td
className={
index === data.members.length - 1
? "rounded-br-lg"
: ""
}
>
<div className="flex items-center justify-between px-3">
<div>
<span className="inline-flex items-center rounded-md bg-emerald-500/10 px-1.5 py-0.5 text-[11px] font-medium text-emerald-400 ring-1 ring-inset ring-emerald-500/20">
{member.role.charAt(0).toUpperCase() +
member.role.slice(1)}
</span>
{member.status === "invited" && (
<span className="ml-2 inline-flex items-center rounded-md bg-gray-500/10 px-1.5 py-0.5 text-[11px] font-medium text-gray-400 ring-1 ring-inset ring-gray-500/20">
Pending
</span>
)}
</div>
<div className="relative">
<Dropdown
items={[
{
label: "Remove member",
action: () =>
openModal(
"REMOVE_MEMBER",
member.publicId,
member.user?.email ?? "",
),
},
]}
>
<HiEllipsisHorizontal
size={25}
className="text-light-900 dark:text-dark-900"
/>
</Dropdown>
</div>
</div>
</td>
</tr>
</>
);
})}
</tbody> </tbody>
</table> </table>
</div> </div>