blsmedia/bot
2
0
Fork 0
Code Activity

feat(theme): ✨ Custom avatars

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-02-16 15:08:50 +01:00
parent 1d3917f440
commit d2ac13ba5f
14 changed files with 294 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
packages/bot-engine/src/components/avatars/DefaultAvatar.tsx
View File

@ -1,60 +1,46 @@
import React from 'react'
type DefaultAvatarProps = {
displayName?: string
size?: 'extra-small' | 'small' | 'medium' | 'large' | 'full'
className?: string
}
export const DefaultAvatar = ({
displayName,
}: DefaultAvatarProps): JSX.Element => {
export const DefaultAvatar = (): JSX.Element => {
return (
<figure
className={
'flex justify-center items-center rounded-full text-white w-6 h-6 text-sm relative xs:w-full xs:h-full xs:text-xl'
}
data-testid="default-avatar"
>
<Background
<svg
width="75"
height="75"
viewBox="0 0 75 75"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={
'absolute top-0 left-0 w-6 h-6 xs:w-full xs:h-full xs:text-xl'
}
/>
<p style={{ zIndex: 0 }}>{displayName && displayName[0].toUpperCase()}</p>
>
<mask id="mask0" x="0" y="0" mask-type="alpha">
<circle cx="37.5" cy="37.5" r="37.5" fill="#0042DA" />
</mask>
<g mask="url(#mask0)">
<rect x="-30" y="-43" width="131" height="154" fill="#0042DA" />
<rect
x="2.50413"
y="120.333"
width="81.5597"
height="86.4577"
rx="2.5"
transform="rotate(-52.6423 2.50413 120.333)"
stroke="#FED23D"
strokeWidth="5"
/>
<circle cx="76.5" cy="-1.5" r="29" stroke="#FF8E20" strokeWidth="5" />
<path
d="M-49.8224 22L-15.5 -40.7879L18.8224 22H-49.8224Z"
stroke="#F7F8FF"
strokeWidth="5"
/>
</g>
</svg>
</figure>
)
}
const Background = ({ className }: { className: string }) => (
<svg
width="75"
height="75"
viewBox="0 0 75 75"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
>
<mask id="mask0" x="0" y="0" mask-type="alpha">
<circle cx="37.5" cy="37.5" r="37.5" fill="#0042DA" />
</mask>
<g mask="url(#mask0)">
<rect x="-30" y="-43" width="131" height="154" fill="#0042DA" />
<rect
x="2.50413"
y="120.333"
width="81.5597"
height="86.4577"
rx="2.5"
transform="rotate(-52.6423 2.50413 120.333)"
stroke="#FED23D"
strokeWidth="5"
/>
<circle cx="76.5" cy="-1.5" r="29" stroke="#FF8E20" strokeWidth="5" />
<path
d="M-49.8224 22L-15.5 -40.7879L18.8224 22H-49.8224Z"
stroke="#F7F8FF"
strokeWidth="5"
/>
</g>
</svg>
)