import React, { FC } from 'react'
import styled, { css, FlattenSimpleInterpolation } from 'styled-components'
import { sequenceT } from 'fp-ts/lib/Apply'
import * as O from 'fp-ts/lib/Option'
import { pipe } from 'fp-ts/lib/pipeable'
import {
Colors,
flexFlow,
FontSizes,
getColor,
typography,
typographyFont,
} from '@monorail/helpers/exports'
export const NoResultsCollection = () => (
No Entries Found
We couldn't find any records that match your search.
Please try again or browse the libraries.
)
export const NoResults = (props: {
cssOverrides?: FlattenSimpleInterpolation
}) => (
No Entries Found
We couldn't find any records that match your search.
)
export const EmptyTable = () => (
No Entries Found
We couldn't find any records.
)
export const NoEvents = () => (
No Events
Events that you are participating in will be listed here.
)
export const NoCompletedEvents = () => (
No Events
This area lists the events that you have completed.
)
export const NoData = () => (
There's Nothing Here
)
export const NoModules = () => (
No Modules Found
)
export const NotAuthorized = () => (
Not Authorized
We could not verify that you are authorized to access
the requested page. Sorry!
)
export const SomethingWentWrong = () => (
Something Went Wrong
We wish we could be more specific, but that's all we know. Did you try
turning it off and on again?
)
export const NotFound = () => (
We couldn't find your page...
We searched high and low, far and wide
but can't seem to find the page you're looking for.
)
export const DetailContainer = styled.div<{ vertical?: boolean }>(
({ vertical = false }) => css`
${vertical &&
css`
justify-content: center;
margin-left: 16px;
padding-right: 16px;
`}
`,
)
export const CustomNoData = ({
headingText,
details,
vertical = false,
icon = ,
...domProps
}: {
headingText: string
details: JSX.Element | Array
vertical?: boolean
icon?: JSX.Element
}) => (
{icon}
{headingText}
{details}
)
export const CustomNoResults: FC<{
bannerText: O.Option
detailText: O.Option
cssOverrides?: FlattenSimpleInterpolation
}> = props => {
const { bannerText, detailText, cssOverrides } = props
return pipe(
sequenceT(O.option)(bannerText, detailText),
O.map(([bannerText_, detailText_]) => {
if (bannerText_ || detailText_) {
return (
{O.getOrElse(() => '')(bannerText)}
{O.getOrElse(() => '')(detailText)
.split('.')
.map((str, idx) => {
return (
{str}
{str.length > 0 && '.'}
)
})}
)
} else {
return
}
}),
O.getOrElse(() => ),
)
}
export const Banner = styled.div`
color: ${getColor(Colors.Black89a)};
${typography(700, FontSizes.Title1, '24px auto')};
`
const Container = styled.div<{ vertical?: boolean }>(
({ vertical = false }) => css`
align-items: center;
justify-content: center;
margin: auto;
${flexFlow(vertical ? 'row' : 'column')};
`,
)
export const Detail = styled.div<{ vertical?: boolean }>(
({ vertical = false }) => css`
color: ${getColor(Colors.Black89a)};
text-align: ${vertical ? 'left' : 'center'};
${vertical && flexFlow('column')};
${typographyFont(400, FontSizes.Title3)};
`,
)
export const IconBox = styled.div`
align-items: center;
height: 120px;
justify-content: center;
width: 120px;
${flexFlow('column')};
`
export const NoResultsIcon = () => (
)
const NotAuthorizedIcon = () => (
)
const SomethingWentWrongIcon = () => (
)
const NotFoundIcon = () => (
)