diff options
Diffstat (limited to 'components/account.tsx')
| -rw-r--r-- | components/account.tsx | 40 |
1 files changed, 23 insertions, 17 deletions
diff --git a/components/account.tsx b/components/account.tsx index 603e015..005e0d1 100644 --- a/components/account.tsx +++ b/components/account.tsx @@ -1,27 +1,33 @@ -import { Component } from "react"; +import { useState, useEffect } from 'react'; -interface AccountAvatarProps { +var dummy = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQYV2P4z/j/PwAHAQL/gXZXNQAAAABJRU5ErkJggg=="; + +export function AccountAvatar(props: { size: number; - image?: string; dummy?: boolean; fallbackFill?: string; round?: boolean; -} -export class AccountAvatar extends Component<AccountAvatarProps> { - render() { - var image = this.props.dummy ? - "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQYV2P4z/j/PwAHAQL/gXZXNQAAAABJRU5ErkJggg==)" : - this.props.image; - return <div style={{ - width: this.props.size, - height: this.props.size, - backgroundImage: image, - backgroundSize: "cover", - display: "inline-block", - borderRadius: this.props.size / 2 * Number(this.props.round || 0) - }}/>; + id?: string; +}) { + var image = ""; + image += "/api/user/avatar"; + if (typeof props.id === "string") { + if (!props.id) image = ""; + else image += `?id=${props.id}`; } + + if (props.dummy) image = dummy; + + return <div style={{ + width: props.size, + height: props.size, + backgroundColor: props.fallbackFill || "var(--background)", + backgroundImage: `url(${image})`, + backgroundSize: "cover", + display: "inline-block", + borderRadius: props.size / 2 * Number(props.round || 0) + }}/>; } |