ob/sprint
1
0
Fork 0
mirror of https://github.com/hex248/sprint.git synced 2026-02-08 18:33:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

avatar: new upload + remove avatar, and placeholder with colour and initials

Browse Source
This commit is contained in:
Oliver Bryan
2026-01-03 11:25:39 +00:00
parent e62b12b1c3
commit 33da8bde85
10 changed files with 138 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
packages/frontend/src/components/upload-avatar.tsx
View File

@@ -4,13 +4,17 @@ import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { user } from "@/lib/server";
import { cn } from "@/lib/utils";
import Avatar from "./avatar";
export function UploadAvatar({
name,
username,
avatarURL,
onAvatarUploaded,
label,
className,
}: {
name?: string;
username?: string;
avatarURL?: string | null;
onAvatarUploaded: (avatarURL: string) => void;
label?: string;
@@ -43,23 +47,28 @@ export function UploadAvatar({
return (
<div className={cn("flex flex-col items-center gap-4", className)}>
{avatarURL && (
<Button
variant="dummy"
type="button"
onClick={() => fileInputRef.current?.click()}
onMouseOver={() => setShowEdit(true)}
onMouseOut={() => setShowEdit(false)}
className="w-24 h-24 rounded-full border-1 p-0 relative overflow-hidden"
>
<img src={avatarURL} alt="Avatar" className={cn("rounded-full")} />
{showEdit && (
<div className="absolute inset-0 flex items-center justify-center bg-black/40">
<Edit className="size-6 text-white drop-shadow-md" />
</div>
)}
</Button>
)}
<Button
variant="dummy"
type="button"
onClick={() => fileInputRef.current?.click()}
onMouseOver={() => setShowEdit(true)}
onMouseOut={() => setShowEdit(false)}
className="w-24 h-24 rounded-full border-1 p-0 relative overflow-hidden"
>
<Avatar
name={name}
username={username}
avatarURL={avatarURL}
size={24}
textClass={"text-4xl"}
/>
{!uploading && showEdit && (
<div className="absolute inset-0 flex items-center justify-center bg-black/40">
<Edit className="size-6 text-white drop-shadow-md" />
</div>
)}
</Button>
<input
type="file"
ref={fileInputRef}
@@ -67,17 +76,6 @@ export function UploadAvatar({
accept="image/png,image/jpeg,image/webp,image/gif"
className="hidden"
/>
{!avatarURL && (
<Button
variant="outline"
type="button"
onClick={() => fileInputRef.current?.click()}
disabled={uploading}
>
{uploading ? "Uploading..." : label || avatarURL ? "Change Avatar" : "Upload Avatar"}
</Button>
)}
{error && <Label className="text-destructive text-sm">{error}</Label>}
</div>
);