3pp-mirror/rallly
1
0
Fork 0
mirror of https://github.com/lukevella/rallly.git synced 2025-08-02 16:09:08 +02:00
Code Issues Projects Releases Packages Wiki Activity

💄 Update avatar component (#1812)

Browse source
This commit is contained in:
Luke Vella 2025-07-11 15:45:44 +01:00 • committed by GitHub
parent 965e969fd5
commit f5eb092d5d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
11 changed files with 37 additions and 72 deletions
Download patch file Download diff file Expand all files Collapse all files

2
apps/web/src/app/[locale]/(space)/layout.tsx
View file

@ -40,7 +40,7 @@ export default async function Layout({
<OptimizedAvatarImage
src={user.image}
name={user.name}
size="xs"
size="sm"
/>
</Link>
</Button>

2
apps/web/src/components/discussion/discussion.tsx
View file

@ -204,7 +204,7 @@ function DiscussionInner() {
<Participant>
<OptimizedAvatarImage
name={comment.authorName}
size="xs"
size="sm"
/>
<ParticipantName>{comment.authorName}</ParticipantName>
{session.ownsObject(comment) ? (

23
apps/web/src/components/optimized-avatar-image.tsx
View file

@ -4,31 +4,20 @@ import { Avatar, AvatarFallback, AvatarImage } from "@rallly/ui/avatar";
import Image from "next/image";
import React from "react";
const sizeToWidth = {
xs: 20,
sm: 24,
md: 32,
lg: 48,
xl: 64,
};
export function OptimizedAvatarImage({
size,
className,
src,
name,
}: {
size: "xs" | "sm" | "md" | "lg" | "xl";
size: "sm" | "md" | "lg" | "xl";
src?: string;
name: string;
className?: string;
}) {
const [isLoaded, setLoaded] = React.useState(false);
return (
<Avatar
className={cn("rounded-full", className)}
style={{ width: sizeToWidth[size], height: sizeToWidth[size] }}
>
<Avatar className={cn("rounded-full", className)} size={size}>
{src ? (
src.startsWith("https") || src.startsWith("data:") ? (
<AvatarImage src={src} alt={name} />
@ -49,11 +38,9 @@ export function OptimizedAvatarImage({
<AvatarFallback
seed={name}
className={cn("shrink-0", {
"text-[10px]": size === "xs",
"text-[12px]": size === "sm",
"text-md": size === "md",
"text-lg": size === "lg",
"text-3xl": size === "xl",
"text-[10px]": size === "sm",
"text-[12px]": size === "md",
"text-md": size === "lg",
})}
>
{name?.[0]?.toUpperCase()}

2
apps/web/src/components/participant-avatar-bar.tsx
View file

@ -44,7 +44,7 @@ export const ParticipantAvatarBar = ({
<OptimizedAvatarImage
name={participant.name}
src={participant.image}
size="xs"
size="sm"
/>
</li>
</TooltipTrigger>

32
apps/web/src/components/participant.tsx
View file

@ -1,42 +1,10 @@
import { cn } from "@rallly/ui";
import { Avatar, AvatarFallback } from "@rallly/ui/avatar";
import React from "react";
export function Participant({ children }: { children: React.ReactNode }) {
return <div className="flex min-w-0 items-center gap-x-2">{children}</div>;
}
const sizeToWidth = {
xs: 20,
sm: 24,
md: 32,
lg: 48,
};
export const ParticipantAvatar = ({
size = "md",
name,
}: {
size?: "xs" | "sm" | "md" | "lg";
name: string;
}) => {
return (
<Avatar size={sizeToWidth[size]}>
<AvatarFallback
className={cn({
"text-xs": size === "xs",
"text-sm": size === "sm",
"text-md": size === "md",
"text-lg": size === "lg",
})}
seed={name}
>
{name[0]?.toUpperCase()}
</AvatarFallback>
</Avatar>
);
};
export const ParticipantName = ({
children,
}: {

2
apps/web/src/components/poll/desktop-poll/participant-row-form.tsx
View file

@ -62,7 +62,7 @@ const ParticipantRowForm = ({
<div className="flex items-center justify-between gap-x-2.5">
<Participant>
{name ? (
<OptimizedAvatarImage name={participantName} size="xs" />
<OptimizedAvatarImage name={participantName} size="sm" />
) : (
<YouAvatar />
)}

2
apps/web/src/components/poll/desktop-poll/participant-row.tsx
View file

@ -52,7 +52,7 @@ export const ParticipantRowView: React.FunctionComponent<{
>
<div className="flex max-w-full items-center justify-between gap-x-2">
<Participant>
<OptimizedAvatarImage size="xs" name={name} />
<OptimizedAvatarImage size="sm" name={name} />
<ParticipantName>{name}</ParticipantName>
</Participant>
<div className="flex items-center gap-x-2">

2
apps/web/src/components/poll/mobile-poll.tsx
View file

@ -104,7 +104,7 @@ const MobilePoll: React.FunctionComponent = () => {
{visibleParticipants.map((participant) => (
<SelectItem key={participant.id} value={participant.id}>
<Participant>
<OptimizedAvatarImage name={participant.name} size="xs" />
<OptimizedAvatarImage name={participant.name} size="sm" />
<ParticipantName>{participant.name}</ParticipantName>
{session.ownsObject(participant) && (
<Badge>

6
apps/web/src/components/poll/mobile-poll/poll-option.tsx
View file

@ -52,7 +52,7 @@ const PollOptionVoteSummary: React.FunctionComponent<{ optionId: string }> = ({
// biome-ignore lint/suspicious/noArrayIndexKey: Fix this later
<div key={i} className="flex">
<div className="relative mr-2.5 flex size-5 items-center justify-center">
<OptimizedAvatarImage size="xs" name={name} />
<OptimizedAvatarImage size="sm" name={name} />
<VoteIcon
type="yes"
size="sm"
@ -66,7 +66,7 @@ const PollOptionVoteSummary: React.FunctionComponent<{ optionId: string }> = ({
// biome-ignore lint/suspicious/noArrayIndexKey: Fix this later
<div key={i} className="flex">
<div className="relative mr-2.5 flex size-5 items-center justify-center">
<OptimizedAvatarImage size="xs" name={name} />
<OptimizedAvatarImage size="sm" name={name} />
<VoteIcon
type="ifNeedBe"
size="sm"
@ -82,7 +82,7 @@ const PollOptionVoteSummary: React.FunctionComponent<{ optionId: string }> = ({
// biome-ignore lint/suspicious/noArrayIndexKey: Fix this later
<div key={i} className="flex">
<div className="relative mr-2.5 flex size-5 items-center justify-center">
<OptimizedAvatarImage size="xs" name={name} />
<OptimizedAvatarImage size="sm" name={name} />
<VoteIcon
type="no"
size="sm"

2
apps/web/src/components/user-dropdown.tsx
View file

@ -48,7 +48,7 @@ export const UserDropdown = ({ className }: { className?: string }) => {
<OptimizedAvatarImage
src={user.image ?? undefined}
name={user.name}
size="xs"
size="sm"
/>
<span className="truncate">{user.name}</span>
<Icon>