react#Fragment TypeScript Examples

ReadMore = ({
  children,
  component,
  limit = 300,
  showMoreText = '... Read more',
  showLessText = 'Show Less',
  ...props
}: Props & TextProps): JSX.Element => {
  const [isReadMore, setReadMore] = useToggle(true);
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const Component: any = component || Fragment;
  const text = children;

  if (typeof text !== 'string' && !Array.isArray(text)) {
    throw Error('String required');
  }

  const isReadMoreHidden = text.length <= limit;

  return (
    <Component {...props}>
      {isReadMore ? text.slice(0, limit) : text}
      {!isReadMoreHidden && (
        <Button
          onClick={setReadMore.toggle}
          variant="link"
          isInline
          className="pf-u-ml-sm pf-u-font-size-sm"
        >
          {isReadMore ? showMoreText : showLessText}
        </Button>
      )}
    </Component>
  );
}

export function PollMsgRenderer({ msg }: PollMsgRendererProps) {
  const { contractAddress: address } = useAnchorWebapp();
  const nickname = useContractNickname();

  const contractNickname = useMemo(
    () => (msg?.contract ? nickname(msg.contract) : ''),
    [msg?.contract, nickname],
  );

  if (!msg) {
    return null;
  }

  return (
    <>
      <article>
        <h4>Contract</h4>
        <p>
          {contractNickname.length > 0 ? (
            <>
              {contractNickname}
              <br />
            </>
          ) : null}
          <AccountLink address={msg.contract} />
        </p>
      </article>

      <article>
        {getMsgDetails(address, msg).map(({ name, value }) => (
          <Fragment key={name}>
            <h4>{name}</h4>
            <p>{value}</p>
          </Fragment>
        ))}
      </article>
    </>
  );
}

export default function FilterGroup(props: FilterGroupProps) {
  const { filter, trails } = props;
  const last_trail = trails[trails.length - 1];
  return <Fragment>
    {filter.filters.length !== 0 ?
      <div className="NotionFilter-Group-items">
        {filter.filters.map((child_filter, index) =>
          <FilterGroupItem
            group_operator_element={index === 0 && trails.length !== 0 && props.parent_filter && (last_trail === 1 ? <FilterGroupOperator filter={props.parent_filter} /> : <div className="NotionFilter-Group-Operator NotionFilter-Group-Operator--text">{props.parent_filter.operator[0].toUpperCase() + props.parent_filter.operator.slice(1)}</div>)}
            parent_filter={filter}
            key={index}
            filter={child_filter}
            trails={trails.concat(index)}
            group_options_element={trails.length !== 0 && index === 0 ? <FilterGroupOptions {...props} /> : null}
          />)}
      </div>
      : null}
    <FilterGroupAdd {...props} />
  </Fragment>
}

Collapsible: FunctionComponent<CollapsibleProps> = ({ children, label, variant, fullWidth }) => {
  const [open, setOpen] = useState(false)

  const toggle = useCallback(() => {
    setOpen(!open)
  }, [open, setOpen])

  return (
    <Fragment>
      <Button 
        variant={variant} 
        fullWidth={fullWidth} 
        onClick={toggle}
      >
        {label}
      </Button>
      <Collapse in={open}>
        {children}
      </Collapse>
    </Fragment>
  )
}

ProtectedRoute = ({
  fetching,
  isLogged,
  component: Component,
  ...rest
}: Partial<IProps>): JSX.Element => {
  return (
    <Fragment>
      {!fetching && (
        isLogged
          ? <Route {...rest} render={props => <Component {...rest} {...props} />} />
          : <Redirect to="/auth?mode=login" />
      )
      }
    </Fragment>
  );
}

SocialButtons: React.FC = (): JSX.Element => {
  return (
    <Fragment>
      <div className="d-flex align-items-center full-width margin-bottom-xs">
        <div className="flex-equal slim-border-bottom" />
        <span className="color-gray padding-horizontal-sm font-xs">OR</span>
        <div className="flex-equal slim-border-bottom" />
      </div>
      <div className="d-flex align-items-center justify-content-between full-width">
        <SubmitButton
          action={() => null}
          backgroundClassName="bg-facebook"
          className="flex-equal margin-right-sm">
          <div className="d-flex align-items-center">
            <FaFacebookF className="color-white margin-right-sm font-sm" />
            <span className="font-xs font-weight-normal">Log in with facebook</span>
          </div>
        </SubmitButton>
        <SubmitButton
          action={() => null}
          backgroundClassName="bg-google"
          className="flex-equal">
          <span className="font-xs font-weight-normal">Log in with Google</span>
        </SubmitButton>
      </div>
    </Fragment>
  );
}

ResultTitle: React.FC<ResultTitleProps> = ({ title, query }) => {
  if (!title) {
    return null
  }
  if (!query) {
    return <>{title}</>
  }

  const filteredQuery = query.replace(SPECIAL_CHARACTERS, '\\$&').replace(/\s+/g, '|')
  const regex = new RegExp(`${filteredQuery}(?=$|\\s)`, 'ig')
  const groups = title?.split(/\s+/)
  const match = title.match(regex)

  if (!match || !match.length) {
    return <>{title}</>
  }

  return (
    <>
      {groups.map((word, idx) => {
        if (match.includes(word)) {
          return <HighlightedWord key={`${word}-${idx}`}> {word}</HighlightedWord>
        }
        return <Fragment key={`${word}-${idx}`}> {word}</Fragment>
      })}
    </>
  )
}

function createSubRoutesFromChildren(
  childrenProps: React.ReactNode,
): SubRoute[] {
  // Directly comparing child.type with Route will not work with in
  // combination with react-hot-loader in storybook
  // https://github.com/gaearon/react-hot-loader/issues/304
  const routeType = (
    <Route path="" title="">
      <div />
    </Route>
  ).type;

  return Children.toArray(childrenProps).flatMap(child => {
    if (!isValidElement(child)) {
      return [];
    }

    if (child.type === Fragment) {
      return createSubRoutesFromChildren(child.props.children);
    }

    if (child.type !== routeType) {
      throw new Error('Child of ExploreLayout must be an ExploreLayout.Route');
    }

    const { path, title, children, tabProps } = child.props;
    return [{ path, title, children, tabProps }];
  });
}

showLoggedOutBar = () => (
    <Fragment>
      <LinkContainer to="/login">
        <NavItem>
          <span
            className="orange  navbar-items-font-style"
            style={{ fontWeight: "initial" }}
          >
            Log in
          </span>
        </NavItem>
      </LinkContainer>
    </Fragment>
  );

export default function Navigation() {
	return (
		<div>
			<Container horizontal>
				{links.map((link, index) => {
					const should_render_line = index !== links.length - 1;
					if (should_render_line) {
						return (
							<Fragment key={link.href}>
								<Link href={link.href}>{link.text}</Link>
								<span className="text-gray-700 dark:text-white">|</span>
							</Fragment>
						);
					} else {
						return (
							<Fragment key={link.href}>
								<Link href={link.href}>{link.text}</Link>
							</Fragment>
						);
					}
				})}
			</Container>
		</div>
	);
}

FourOFour = () => {
  const { t } = useTranslation();

  return (
    <Fragment>
      <header
        data-testid="Header"
        role="banner"
        className={`${styles.header} shadow-blue d-flex bg-light text-primary p-0 position-sticky w-100 d-flex justify-content-center`}
      >
        <Logo />
      </header>
      <div className={`${styles.wrapper} d-flex flex-fill bg-secondary`}>
        <Container fluid="lg" className="flex-fill">
          <div className={`${styles.content} text-center`}>
            <ImageBasePath src={`/images/error_page_icon.svg`} alt="404 Icon" width="48" height="48" />
            <h2>{t('pageNotFoundHeading')}</h2>
            <p className="mt-2 display-3">{t('pageNotFoundText')}</p>
            <p className="mt-8 display-5">
              <Trans
                i18nKey="visitHome"
                defaults="visitHome"
                components={{
                  homepageLink: <HomepageLink />,
                }}
              />
            </p>
          </div>
        </Container>
      </div>
    </Fragment>
  );
}

function App() {
    return (
        <div className="main-content">
            <Provider store={new Store()}>
                <Fragment>
                    <Background />
                    <Startup />
                    <Loader />
                </Fragment>
            </Provider>
        </div>
    );
}

Title = ({ title }: { title: string }) => {
  return (
    <>
      {title.split(' ').map((word, index) => {
        return (
          <Fragment key={index + word}>
            {index !== 0 && <br />}
            <span style={{ fontSize: '12px' }}>{word}</span>
          </Fragment>
        );
      })}
    </>
  );
}

Component = () => {
  const { formProps, tableProps, paginationProps } = useAntdFormTable(list);

  return (
    <Fragment>
      <SchemaForm {...formProps} components={{ Input }} style={{ marginBottom: 20 }} inline>
        <Field name="name" title="name" x-component={'Input'} />
        <FormButtonGroup>
          <Submit>查询</Submit>
          <Reset>重置</Reset>
        </FormButtonGroup>
      </SchemaForm>

      <Table scroll={{ y: 300 }} {...tableProps}>
        <Table.Column title="email" dataIndex="email" />
        <Table.Column title="phone" dataIndex="phone" />
        <Table.Column title="gender" dataIndex="gender" />
      </Table>
      <Pagination style={{ marginTop: 16 }} {...paginationProps} />
    </Fragment>
  );
}

About: React.FC = () => {
  const history = useHistory()

  return (
    <Fragment>
      <h1>About</h1>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas
        possimus doloribus error cumque autem asperiores, ullam deserunt quidem
        omnis doloremque itaque eius eaque sint facilis unde tenetur reiciendis
        aliquam soluta?
      </p>
      <button
        type="button"
        className="btn"
        cy-data="go-back-button"
        onClick={() => history.push('/')}
      >
        Go back
      </button>
    </Fragment>
  )
}

export function ArticlesViewer({
  toggleClassName,
  tabs,
  selectedTab,
  onPageChange,
  onTabChange,
}: {
  toggleClassName: string;
  tabs: string[];
  selectedTab: string;
  onPageChange?: (index: number) => void;
  onTabChange?: (tab: string) => void;
}) {
  const { articles, articlesCount, currentPage } = useStore(({ articleViewer }) => articleViewer);

  return (
    <Fragment>
      <ArticlesTabSet {...{ tabs, selectedTab, toggleClassName, onTabChange }} />
      <ArticleList articles={articles} />
      <Pagination currentPage={currentPage} count={articlesCount} itemsPerPage={10} onPageChange={onPageChange} />
    </Fragment>
  );
}

StakeActions: React.FC<StakeActionsProps> = ({ children }) => {
  return (
    <Menu as="div" className="relative flex items-center justify-end">
      {({ open }) => (
        <>
          <Menu.Button className="inline-flex items-center justify-center w-8 h-8 text-gray-400 bg-white rounded-full hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
            <span className="sr-only">Open options</span>
            <StyledIcon as="DotsVerticalIcon" size={5} />
          </Menu.Button>
          <Transition
            show={open}
            as={Fragment}
            enter="transition ease-out duration-100"
            enterFrom="transform opacity-0 scale-95"
            enterTo="transform opacity-100 scale-100"
            leave="transition ease-in duration-75"
            leaveFrom="transform opacity-100 scale-100"
            leaveTo="transform opacity-0 scale-95"
          >
            <Menu.Items
              static
              className="absolute top-0 z-10 w-48 mx-3 mt-1 origin-top-right bg-white divide-y divide-gray-200 rounded-md shadow-lg dark:bg-zinc-800 dark:divide-zinc-600 right-7 ring-1 ring-black ring-opacity-5 focus:outline-none"
            >
              <div className="px-1 py-1">{children}</div>
            </Menu.Items>
          </Transition>
        </>
      )}
    </Menu>
  );
}

SampleQueries = (props: Props) => {
  const sampleQueries: SampleQuery[] = getSampleQueries();
  if (sampleQueries.length === 0) {
    return null;
  }
  const queries = sampleQueries.length > QUERIES_NUMBER ? sampleSize(sampleQueries, QUERIES_NUMBER) : sampleQueries;

  return (
    <>
      {queries.map((query: SampleQuery, index: number) => (
        <Fragment key={`sampleQuery_${index}`}>
          <Link
            className={`badge rounded-pill border fw-normal mx-2 mt-3 ${props.className}`}
            to={{
              pathname: '/packages/search',
              search: `?${query.queryString}`,
            }}
            aria-label={`Filter by ${query.name}`}
          >
            {query.name}
          </Link>
          {!isUndefined(props.lineBreakIn) && index === props.lineBreakIn - 1 && (
            <div className="d-block w-100" data-testid="sampleQueryBreakLine" />
          )}
        </Fragment>
      ))}
    </>
  );
}

PlaceholderFallbackHydrate = ({
  id,
  content,
}: PlaceholderFallbackHydrateProps) => {
  return (
    <>
      <input type="hidden" data-lazy-begin={id} />
      {content.map((el: HTMLElement, i: number) => {
        const { tagName = '', childNodes = [], attributes = [] } = el;
        const props = Array.from(attributes).reduce(attrToProp, {
          key: String(i),
        });
        // text node
        if (!tagName) return createElement(Fragment, props, el.textContent);

        // childless tag
        if (!childNodes.length)
          return createElement(tagName.toLowerCase(), props);

        // tag with content
        return createElement(tagName.toLowerCase(), {
          ...props,
          dangerouslySetInnerHTML: { __html: '' },
          suppressHydrationWarning: true,
        });
      })}
      <input type="hidden" data-lazy-end={id} />
    </>
  );
}

render() {
    return (
      <Fragment>
        <Collapse isOpen={this.state.collapseMetaValue} label="Metadata" onToggle={this.onToggleMetaValue}>
          <div style={{ display: 'flex' }}>
            {/* <InputTextField
              key={'metaAdd'}
              label={'Text'}
              name={'Meta'}
              required={true}
              placeholder={'Enter meta'}
              value={this.state.newMeta}
              _handleChange={(event: {
                currentTarget: HTMLInputElement;
              }) => this.setState({ newMeta: event.currentTarget.value })}
            /> */}
            <FormField
              key={'metaAdd'}
              label={'Text metadata'}
              labelWidth={15}
              inputWidth={25}
              name={'Meta'}
              required={true}
              placeholder={'Enter meta'}
              value={this.state.newMeta}
              onChange={(event: {
                /** get currentTarget in event element */
                currentTarget: HTMLInputElement;
              }) => this.setState({ newMeta: event.currentTarget.value })}
            />
            <Button variant="primary" className="button" onClick={this.addMeta}>
              <span style={{ padding: '0px 8px' }}>Add</span>
            </Button>
          </div>
          <this.displayMetaList type={this.props.type} id={this.props.idCoordinate - 1} />
        </Collapse>
      </Fragment>
    );
  }

function toValue(
  value: ReactElement | object | Array<any> | boolean,
  options?: any,
  nested?: boolean,
) {
  if (React.isValidElement(value)) {
    return <Fragment>{value}</Fragment>;
  }

  if (typeof value === 'object' && !Array.isArray(value)) {
    return renderMap(value, options, nested);
  }

  if (Array.isArray(value)) {
    return renderList(value, nested);
  }

  if (typeof value === 'boolean') {
    return <Fragment>{value ? '✅' : '❌'}</Fragment>;
  }

  return <Fragment>{value}</Fragment>;
}

export function TimeEnd({ endTime }: { endTime: Date }) {
  const remainTime = useTimeEnd(endTime);
  return createElement(Fragment, { children: remainTime });
}

App: React.FC<{}> = () => {
  const clsSplit = styleForSplit()
  const classes = styleCommon()
  const DEBUG_VIDEO = false //  To see all local and remote tracks or not.
  const stores:Stores = {
    map: mapStore,
    participants: participantsStore,
    contents: sharedContentsStore,
    chat: chatStore,
    roomInfo: roomInfo,
  }
  const refDiv = useRef<HTMLDivElement>(null)
  //  toucmove: prevent browser zoom by pinch
  window.addEventListener('touchmove', (ev) => {
    //  if (ev.touches.length > 1) {
    ev.preventDefault()
    //  }
  },                      {passive: false, capture: false})
  //  contextmenu: prevent to show context menu with right mouse click
  window.addEventListener('contextmenu', (ev) => {
    ev.preventDefault()
  },                      {passive: false, capture: false})

  //  Global error handler
  window.onerror = (message, source, lineno, colno, error) => {
    if ((error?.message === 'Ping timeout' || error?.message === 'Strophe: Websocket error [object Event]')
     && message === null && source === null && lineno === null && colno === null){
      errorInfo.setType('connection')
      if (urlParameters.testBot !== null){  //  testBot
        window.location.reload()  //  testBot will reload when connection is cutted off.
      }
    }else{
      console.warn(`Global handler: ${message}`, source, lineno, colno, error)
    }

    return true
  }

  return <Observer>{()=>{
    return <div ref={refDiv} className={classes.back} style={{backgroundColor: rgb2Color(roomInfo.backgroundFill)}}>
        <SplitPane className={classes.fill} split="vertical" resizerClassName={clsSplit.resizerVertical}
          minSize={0} defaultSize="7em">
          <LeftBar stores={stores}/>
          <Fragment>
            <MainScreen showAllTracks = {DEBUG_VIDEO} stores={stores} />
            <Observer>{() => <Map transparent={sharedContentsStore.tracks.mainStream !== undefined
             || DEBUG_VIDEO} stores={stores} />
            }</Observer>
            <Footer stores={stores} height={(isSmartphone() && isPortrait()) ? 100 : undefined} />
          </Fragment>
        </SplitPane>
      </div>
  }}</Observer>
}

function NativeDetails({ hash, jhash, build, children, sx, ...rest }: NativeDetailsProps) {
  return (
    <Typography sx={{ fontFamily: '"Roboto Mono", monospace', ...sx }} {...rest}>
      {'//'}&nbsp;<CopyableText>{hash}</CopyableText> <CopyableText>{jhash}</CopyableText> {build && (<Fragment>b{build}</Fragment>) }
    </Typography>
  )
}

List = ({ id, title, tasks, onDelete, editListTitle }: IProps): JSX.Element => {
  const [deleteModalOpen, setDeleteModalOpen] = useState(false);

  const handleDelete = (callback) => {
    onDelete()
    setDeleteModalOpen(false);
    trackEvent({
      category: 'Lists',
      action: 'Deleted',
      value: id
    });
    callback();
  };

  const getListStyles = () => ({
    width: '100%',
    minHeight: 5,
    maxHeight: 350,
    overflowY: 'auto',
    overflowX: 'hidden',
    display: 'flex',
    flexDirection: 'column',
  });

  const handleEditTitle = (value, callback) => {
    editListTitle(id, value);
    trackEvent({
      category: 'Lists',
      action: 'Title edited',
      value: id
    });
    callback();
  }

  return (
    <div className="list">
      {onDelete && (
        <Fragment>
          <ConfirmationModal
            isOpen={deleteModalOpen}
            title="DELETE LIST"
            description="Are you sure you want to delete this list?. All tasks will be lost."
            onSuccess={handleDelete}
            onCancel={() => setDeleteModalOpen(false)}
          />
          <i
            onClick={() => setDeleteModalOpen(true)}
            className="far fa-sm fa-trash-alt list__delete-icon"></i>
        </Fragment>
      )}
      <div className="list__header">
        <EditableText
          text={title}
          textClassName="list__header-title"
          tag="h5"
          onSuccess={handleEditTitle}
        />
      </div>
      <div className="list__body">
        <Droppable droppableId={new Number(id).toString()} key={`${title}_${id}`}>
          {(provided) => (
            <div
              {...provided.droppableProps}
              ref={provided.innerRef}
              style={getListStyles()}
            >
              {tasks.map((task: ITask, index: number) => (
                <Task key={task.uid} {...task} index={index} />
              ))}
              {provided.placeholder}
            </div>
          )}
        </Droppable>
      </div>
      <div className="list__footer">
        <CreateTask listId={id} />
      </div>
    </div>
  );
}

AvatarGroup: React.FC<AvatarGroupProps> = ({
  avatars,
  size = 'medium',
  avatarStrokeColor,
  clickable = true,
  loading,
  reverse,
  shouldHighlightEveryAvatar,
  className,
}) => {
  const [hoveredAvatarIdx, setHoveredAvatarIdx] = useState<number | null>(null)
  const ref = useRef<HTMLDivElement | null>(null)

  return (
    <AvatarGroupContainer size={size} className={className} shouldHighlightEveryAvatar={shouldHighlightEveryAvatar}>
      {avatars.map((avatarProps, idx) => (
        <Fragment key={idx}>
          <AvatarWrapper
            ref={ref}
            clickable={clickable}
            onMouseEnter={() => clickable && setHoveredAvatarIdx(idx)}
            onMouseLeave={() => clickable && setHoveredAvatarIdx(null)}
            size={size}
            style={{ zIndex: hoveredAvatarIdx === idx ? avatars.length : reverse ? idx : avatars.length - idx }}
            avatarStrokeColor={avatarStrokeColor}
          >
            <AvatarBackground avatarStrokeColor={avatarStrokeColor} />
            <SingleAvatar avatar={avatarProps} loading={loading} size={getSizeofAvatar(size)} />
            <AvatarOverlay dimmed={hoveredAvatarIdx !== idx && hoveredAvatarIdx !== null} />
          </AvatarWrapper>
          <Tooltip
            text={avatarProps.tooltipText}
            arrowDisabled
            placement="top"
            offsetY={clickable ? 16 : 8}
            reference={ref}
          />
        </Fragment>
      ))}
    </AvatarGroupContainer>
  )
}

showLoggedInBar = () => (
    <Fragment>
      <Navbar.Form pullLeft>
        <SearchBar />
      </Navbar.Form>
      <LinkContainer to="/past">
        <NavItem>
          <span
            className="orange line-height-24 navbar-items-font-style"
            style={{ fontWeight: "initial" }}
          >
            Past orders
          </span>
        </NavItem>
      </LinkContainer>
      <LinkContainer to="/best">
        <NavItem>
          <span
            className="orange line-height-24 navbar-items-font-style"
            style={{ fontWeight: "initial" }}
          >
            Bestsellers
          </span>
        </NavItem>
      </LinkContainer>
      <NavItem onClick={this.handleLogout}>
        <span
          className="orange line-height-24 navbar-items-font-style"
          style={{ fontWeight: "initial" }}
        >
          Log out
        </span>
      </NavItem>
      <LinkContainer to="/cart">
        <NavItem>
          <div className="shopping-icon-container">
            <span
              className="glyphicon glyphicon-shopping-cart white"
              aria-hidden="true"
            ></span>
          </div>
        </NavItem>
      </LinkContainer>
    </Fragment>
  );

export default function Card(props: {
	loading?: boolean;
	avatar?: string;
	title?: string;
	description?: string;
	links?: { text: string; href: string }[];
	statusText?: React.ReactNode;
}) {
	if (props.loading) {
		return (
			<div className="max-w-sm rounded-md border border-blue-500 p-4 shadow dark:border-blue-300">
				<div className="flex animate-pulse flex-wrap space-x-4">
					<div className="h-10 w-10 rounded-full bg-slate-700"></div>
					<div className="flex-1 space-y-6 py-1">
						<div className="h-2 rounded bg-slate-700"></div>
						<div className="space-y-3">
							<div className="grid grid-cols-3 gap-4">
								<div className="col-span-2 h-2 rounded bg-slate-700"></div>
								<div className="col-span-1 h-2 rounded bg-slate-700"></div>
							</div>
							<div className="h-2 rounded bg-slate-700"></div>
						</div>
					</div>
				</div>
			</div>
		);
	} else {
		return (
			<div className="mx-auto w-full max-w-sm rounded-md border border-blue-500 p-4 shadow dark:border-blue-300">
				<div className="flex space-x-4">
					<div className="shrink-0 rounded-full">
						<Image
							src={props.avatar}
							height={'40px'}
							width={'40px'}
							className="shrink-0 rounded-full"
							alt="avatar"
						/>
					</div>
					<div className="w-full flex-1 space-y-1 py-1">
						<div className="max-w-[280px] rounded text-left">
							<InlineText>{props.title}</InlineText>
						</div>
						{props.statusText ? (
							<div className="max-w-[280px] rounded py-0.5 text-left text-sm text-gray-700 dark:text-neutral-300">
								{props.statusText}
							</div>
						) : null}
						<div className="max-w-[280px] rounded text-left">
							<InlineText description>{props.description}</InlineText>
						</div>
						<div className="space-x-1 rounded text-left">
							{props.links.map((link, index) => {
								const should_render_line = index !== props.links.length - 1;
								const first_element = index === 0;
								if (should_render_line) {
									return (
										<Fragment key={link.href}>
											<Link href={link.href}>{link.text}</Link>
											<span className="text-gray-700 dark:text-white">|</span>
											{first_element ? <span className="space-x-1" /> : null}
										</Fragment>
									);
								} else {
									return (
										<Fragment key={link.href}>
											<Link href={link.href}>{link.text}</Link>
											{first_element ? <span className="space-x-1" /> : null}
										</Fragment>
									);
								}
							})}
						</div>
					</div>
				</div>
			</div>
		);
	}
}

Modal: React.FC<ModalProps> = ({
  title,
  children,
  onClose,
  buttons,
  style,
  type = 'light',
  isVisible = true,
  closeButton = true,
  ...rest
}) => {
  const insets = useSafeAreaInsets();
  const {accessibility} = useApplication();
  const isDark = type === 'dark';

  return (
    <View style={styles.wrapper}>
      <ReactNativeModal
        {...rest}
        animationIn={accessibility.reduceMotionEnabled ? 'fadeIn' : 'slideInUp'}
        animationOut={
          accessibility.reduceMotionEnabled ? 'fadeOut' : 'slideOutDown'
        }
        isVisible={isVisible}
        style={styles.bottomModal}>
        <View
          style={[
            styles.contentContainer,
            isDark && styles.contentContainerDark,
            closeButton && styles.contentWithCloseButton,
            {paddingBottom: insets.bottom},
            style
          ]}>
          {closeButton && (
            <View style={styles.closeHeader}>
              <ModalClose onPress={onClose} notification />
            </View>
          )}
          <ScrollView>
            {title && (
              <Text variant="leader" color={isDark ? 'white' : 'darkGrey'}>
                {title}
              </Text>
            )}
            <Spacing s={24} />
            {children}
            <Spacing s={24} />
            {!!buttons &&
              buttons.map(
                (
                  {label, hint, action, type: buttonType, variant, buttonStyle},
                  index
                ) => (
                  <Fragment key={`${label}-${variant}-${index}`}>
                    <Button
                      type={buttonType}
                      variant={variant}
                      label={label}
                      onPress={() => {
                        action();
                        onClose();
                      }}
                      hint={hint}
                      buttonStyle={buttonStyle}>
                      {label}
                    </Button>
                    {index + 1 < buttons.length && <Spacing s={16} />}
                  </Fragment>
                )
              )}
            <Spacing s={30} />
          </ScrollView>
        </View>
      </ReactNativeModal>
    </View>
  );
}