mirror of
https://github.com/facebook/sapling.git
synced 2024-09-11 18:47:10 +03:00
Avatar: provide a svg pattern version
Summary: This will be used by the next change. Reviewed By: zzl0 Differential Revision: D52628410 fbshipit-source-id: e0b915923201b5f255b1702ba30e1a28cfae43fb
This commit is contained in:
parent
5f1e504244
commit
127d17ec86
@ -91,3 +91,33 @@ export function Avatar({username}: {username: string}) {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** Render as a SVG pattern */
|
||||
export function AvatarPattern({
|
||||
username,
|
||||
size,
|
||||
id,
|
||||
fallbackFill,
|
||||
}: {
|
||||
username: string;
|
||||
size: number;
|
||||
id: string;
|
||||
fallbackFill: string;
|
||||
}) {
|
||||
const storage = useRecoilValueLoadable(avatars);
|
||||
const img = storage.valueMaybe()?.get(username);
|
||||
return (
|
||||
<defs>
|
||||
<pattern
|
||||
id={id}
|
||||
patternUnits="userSpaceOnUse"
|
||||
width={size}
|
||||
height={size}
|
||||
x={-size / 2}
|
||||
y={-size / 2}>
|
||||
<rect width={size} height={size} fill={fallbackFill} strokeWidth={0} />
|
||||
<image href={img} width={size} height={size} />
|
||||
</pattern>
|
||||
</defs>
|
||||
);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user