All files / components/Bio index.tsx

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
53
54
55
56
57
58
59
60
61
62
63
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
"use client"
 
import { Description, Image, Link } from "./styled"
import Bio from "./Bio"
import { ContentComponents } from "components/Content"
import React from "react"
import { Props as SocialLinksProps } from "components/SocialLinks"
import { prepareComponent } from "@bluframe/grapple"
 
export interface Props {
  LinkComponent?: React.JSXElementConstructor<any>
  avatar: React.ReactNode | string
  color?: string
  components?: ContentComponents
  description: string
  isAvatarCircle?: boolean
  isShowName?: boolean
  name: string
  socialLinks?: SocialLinksProps
  url?: string
}
 
export interface ComponentProps extends Omit<Props, "avatar" | "color"> {
  components: ContentComponents
  image: React.ReactNode
}
 
export const usePrepareComponent = ({
  avatar,
  color,
  components: overrideComponents,
  ...props
}: Props): ComponentProps => {
  // If we ever need our own shared overrides
  const components: ContentComponents = {
    // eslint-disable-next-line id-length
    a: ({ children, href, node, ...componentProps }) => (
      <Link color={color} href={href} {...componentProps}>
        {children}
      </Link>
    ),
    // eslint-disable-next-line id-length
    p: ({ node, ...componentProps }) => <Description {...componentProps} />
  }
 
  let image = avatar
 
  Iif (typeof avatar === "string") {
    image = <Image alt={props.name} src={avatar} />
  }
 
  return {
    ...props,
    components: {
      ...components,
      ...overrideComponents
    },
    image
  }
}
 
export default prepareComponent<Props, ComponentProps>(usePrepareComponent)(Bio)