3caebdef67
Lands #38163 with merge conflict fixes. Needed to open a new PR, because GitHub does not allow maintainers to edit organization forks. https://github.com/orgs/community/discussions/5634 Closes #38163 ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have a helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have a helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `pnpm lint` - [ ] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md) Co-authored-by: sherazmalik06 <sherazmalik06@gmail.com> Co-authored-by: Tony Spiro <tspiro@tonyspiro.com>
28 lines
592 B
TypeScript
28 lines
592 B
TypeScript
import Image from 'next/image'
|
|
|
|
type AvatarProps = {
|
|
name: string
|
|
picture: string
|
|
}
|
|
|
|
const Avatar = (props: AvatarProps) => {
|
|
const { name, picture } = props
|
|
|
|
return (
|
|
<div className="flex items-center">
|
|
<div className="w-12 h-12 relative mr-4">
|
|
{picture && (
|
|
<Image
|
|
src={`${picture}?auto=format,compress,enhance&w=100&h=100`}
|
|
layout="fill"
|
|
className="rounded-full"
|
|
alt={name}
|
|
/>
|
|
)}
|
|
</div>
|
|
<div className="text-xl font-bold">{name}</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Avatar
|