summaryrefslogtreecommitdiffhomepage
path: root/packages/web/src/components/share/content-error.tsx
blob: 0f8588997659e1cd98fb362ff5862d0b00fefe6c (plain)
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
import style from "./content-error.module.css"
import { type JSX, createSignal } from "solid-js"
import { createOverflow, useShareMessages } from "./common"

interface Props extends JSX.HTMLAttributes<HTMLDivElement> {
  expand?: boolean
}
export function ContentError(props: Props) {
  const [expanded, setExpanded] = createSignal(false)
  const overflow = createOverflow()
  const messages = useShareMessages()

  return (
    <div class={style.root} data-expanded={expanded() || props.expand === true ? true : undefined}>
      <div data-section="content" ref={overflow.ref}>
        {props.children}
      </div>
      {((!props.expand && overflow.status) || expanded()) && (
        <button type="button" data-element-button-text onClick={() => setExpanded((e) => !e)}>
          {expanded() ? messages.show_less : messages.show_more}
        </button>
      )}
    </div>
  )
}