zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

Switch to procedurally-generated banners

Browse source
This commit is contained in:
Paul Frazee 2022-11-05 12:33:59 -05:00
parent 60b1c53d85
commit 807bd3b834
7 changed files with 33 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/view/com/util/UserAvatar.tsx
View file

@ -19,13 +19,13 @@ export function UserAvatar({
handle: string
}) {
const initials = getInitials(displayName || handle)
const gi = cyrb53(handle) % GRADIENTS.length
const gradient = getGradient(handle)
return (
<Svg width={size} height={size} viewBox="0 0 100 100">
<Defs>
<LinearGradient id="grad" x1="0" y1="0" x2="1" y2="1">
<Stop offset="0" stopColor={GRADIENTS[gi][0]} stopOpacity="1" />
<Stop offset="1" stopColor={GRADIENTS[gi][1]} stopOpacity="1" />
<Stop offset="0" stopColor={gradient[0]} stopOpacity="1" />
<Stop offset="1" stopColor={gradient[1]} stopOpacity="1" />
</LinearGradient>
</Defs>
<Circle cx="50" cy="50" r="50" fill="url(#grad)" />
@ -42,6 +42,11 @@ export function UserAvatar({
)
}
export function getGradient(handle: string): string[] {
const gi = cyrb53(handle) % GRADIENTS.length
return GRADIENTS[gi]
}
function getInitials(str: string): string {
const tokens = str
.split(' ')

23
src/view/com/util/UserBanner.tsx Normal file
View file

@ -0,0 +1,23 @@
import React from 'react'
import Svg, {Rect, Defs, LinearGradient, Stop} from 'react-native-svg'
import {getGradient} from './UserAvatar'
export function UserBanner({handle}: {handle: string}) {
const gradient = getGradient(handle)
return (
<Svg width="400" height="120" viewBox="50 0 200 100">
<Defs>
<LinearGradient id="grad" x1="0" y1="0" x2="1" y2="1">
<Stop offset="0" stopColor={gradient[0]} stopOpacity="1" />
<Stop offset="1" stopColor={gradient[1]} stopOpacity="1" />
</LinearGradient>
<LinearGradient id="grad2" x1="0" y1="0" x2="0" y2="1">
<Stop offset="0" stopColor="#000" stopOpacity="0" />
<Stop offset="1" stopColor="#000" stopOpacity="0.7" />
</LinearGradient>
</Defs>
<Rect x="0" y="0" width="400" height="100" fill="url(#grad)" />
<Rect x="0" y="0" width="400" height="100" fill="url(#grad2)" />
</Svg>
)
}