Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | // @flow
import type { BioProps, ContentComponents } from "@bluframe/blublocks"
import { Description, Image, Link } from "./styled"
import Bio from "./Bio"
import React from "react"
import { prepareComponent } from "@bluframe/grapple"
export type Props = {|
...BioProps
|}
export type ComponentProps = {|
...$Diff<BioProps, {| +avatar: React$Node | string, +color?: string |}>,
+components: ContentComponents,
+image: React$Node
|}
export const usePrepareComponent = ({
avatar,
color,
...props
}: Props): ComponentProps => {
// If we ever need our own shared overrides
const components: ContentComponents = {
// eslint-disable-next-line react/no-multi-comp, react/display-name, react/no-unstable-nested-components, id-length
a: ({ children, href, ...componentProps }) => (
<Link color={color} href={href} {...componentProps}>
{children}
</Link>
),
// eslint-disable-next-line react/no-multi-comp, react/display-name, react/no-unstable-nested-components, id-length
p: (componentProps) => <Description {...componentProps} />
}
let image = avatar
if (typeof avatar === "string") {
image = <Image alt={props.name} src={avatar} />
}
return {
...props,
components,
image
}
}
export default (prepareComponent<Props, ComponentProps>(usePrepareComponent)(
Bio
): React$ComponentType<Props>)
|