binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style: new avatar and avatar group components (#2584)

Browse source 
* style: new avatar components

* chore: bug fixes

* chore: add pixel to size

* chore: add comments to helper functions

* fix: build errors
This commit is contained in:
Aaryan Khandelwal 2023-11-01 15:24:11 +05:30 • committed by GitHub
parent 1a24f9ec25
commit 490e032ac6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
52 changed files with 554 additions and 1824 deletions
Download patch file Download diff file Expand all files Collapse all files

148
web/components/ui/avatar.tsx
View file

@ -1,148 +0,0 @@
import Image from "next/image";
import { useRouter } from "next/router";
import useSWR from "swr";
// services
import { WorkspaceService } from "services/workspace.service";
// icons
import User from "public/user.png";
import { Plus } from "lucide-react";
// types
import { IUser, IUserLite } from "types";
// fetch-keys
import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
type AvatarProps = {
user?: Partial<IUser> | Partial<IUserLite> | null;
index?: number;
height?: string;
width?: string;
fontSize?: string;
showName?: boolean;
};
// services
const workspaceService = new WorkspaceService();
export const Avatar: React.FC<AvatarProps> = ({
user,
index,
height = "24px",
width = "24px",
fontSize = "12px",
showName,
}) => (
<div
className={`relative rounded border-[0.5px] ${
index && index !== 0 ? "-ml-3.5 border-custom-border-200" : "border-transparent"
}`}
style={{
height: height,
width: width,
}}
>
{user && user.avatar && user.avatar !== "" ? (
<div
className={`rounded border-[0.5px] ${
index ? "border-custom-border-200 bg-custom-background-100" : "border-transparent"
}`}
style={{
height: height,
width: width,
}}
>
<img
src={user.avatar}
className="absolute top-0 left-0 h-full w-full object-cover rounded"
alt={user.display_name}
/>
</div>
) : (
<div
className="grid place-items-center text-xs capitalize text-white rounded bg-gray-700 border-[0.5px] border-custom-border-200"
style={{
height: height,
width: width,
fontSize: fontSize,
}}
>
{user?.display_name?.charAt(0)}
</div>
)}
{showName && <span>{user?.display_name ? user?.display_name : user?.first_name}</span>}
</div>
);
type AsigneesListProps = {
users?: Partial<IUser[]> | (Partial<IUserLite> | undefined)[] | Partial<IUserLite>[];
userIds?: string[];
height?: string;
width?: string;
length?: number;
showLength?: boolean;
};
export const AssigneesList: React.FC<AsigneesListProps> = ({
users,
userIds,
height = "24px",
width = "24px",
length = 3,
showLength = true,
}) => {
const router = useRouter();
const { workspaceSlug } = router.query;
const { data: people } = useSWR(
workspaceSlug ? WORKSPACE_MEMBERS(workspaceSlug as string) : null,
workspaceSlug ? () => workspaceService.fetchWorkspaceMembers(workspaceSlug as string) : null
);
if ((users && users.length === 0) || (userIds && userIds.length === 0))
return (
<div className="h-5 w-5 rounded border-[0.5px] border-custom-border-200 bg-custom-background-80">
<Image src={User} height="100%" width="100%" className="rounded-full" alt="No user" />
</div>
);
return (
<>
{users && (
<>
{users.slice(0, length).map((user, index) => (
<Avatar key={user?.id} user={user} index={index} height={height} width={width} />
))}
{users.length > length ? (
<div className="-ml-3.5 relative h-6 w-6 rounded">
<div className="flex items-center rounded bg-custom-background-80 text-xs capitalize h-6 w-6 text-custom-text-200 border-[0.5px] border-custom-border-300">
<Plus className="h-3 w-3 -mr-0.5" />
{users.length - length}
</div>
</div>
) : null}
</>
)}
{userIds && (
<>
{userIds.slice(0, length).map((userId, index) => {
const user = people?.find((p) => p.member.id === userId)?.member;
return <Avatar key={userId} user={user} index={index} height={height} width={width} />;
})}
{showLength ? (
userIds.length > length ? (
<div className="-ml-3.5 relative h-6 w-6 rounded">
<div className="flex items-center rounded bg-custom-background-80 text-xs capitalize h-6 w-6 text-custom-text-200 border-[0.5px] border-custom-border-300">
<Plus className="h-3 w-3 -mr-0.5" />
{userIds.length - length}
</div>
</div>
) : null
) : (
""
)}
</>
)}
</>
);
};

1
web/components/ui/index.ts
View file

@ -3,7 +3,6 @@ export * from "./dropdowns";
export * from "./graphs";
export * from "./input";
export * from "./text-area";
export * from "./avatar";
export * from "./date";
export * from "./datepicker";
export * from "./empty-space";