128 lines
3.1 KiB
TypeScript
128 lines
3.1 KiB
TypeScript
import Link from 'next/link'
|
|
import { HStack, SpanBox, VStack } from './LayoutPrimitives'
|
|
import { ArrowRightIcon } from './icons/ArrowRightIcon'
|
|
import { theme } from '../tokens/stitches.config'
|
|
import { ReactNode } from 'react'
|
|
import { Button } from './Button'
|
|
import { CloseIcon } from './icons/CloseIcon'
|
|
|
|
export type SuggestionAction = {
|
|
url: string
|
|
text: string
|
|
}
|
|
|
|
type SuggestionBoxProps = {
|
|
helpMessage: string
|
|
suggestions: SuggestionAction[]
|
|
|
|
size?: 'large' | 'small'
|
|
background?: string
|
|
|
|
dismissible?: boolean
|
|
onDismiss?: () => void
|
|
}
|
|
|
|
type InternalOrExternalLinkProps = {
|
|
link: string
|
|
children: ReactNode
|
|
}
|
|
|
|
const InternalOrExternalLink = (props: InternalOrExternalLinkProps) => {
|
|
const isExternal = props.link.startsWith('https')
|
|
|
|
return (
|
|
<SpanBox
|
|
css={{
|
|
cursor: 'pointer',
|
|
a: {
|
|
color: '$omnivoreCtaYellow',
|
|
},
|
|
}}
|
|
>
|
|
{!isExternal ? (
|
|
<Link href={props.link} legacyBehavior>{props.children}</Link>
|
|
) : (
|
|
<a href={props.link} target="_blank" rel="noreferrer">
|
|
{props.children}
|
|
</a>
|
|
)}
|
|
</SpanBox>
|
|
);
|
|
}
|
|
|
|
export const SuggestionBox = (props: SuggestionBoxProps) => {
|
|
return (
|
|
<HStack
|
|
css={{
|
|
gap: '10px',
|
|
display: 'flex',
|
|
flexDirection: props.size == 'large' ? 'column' : 'row',
|
|
width: 'fit-content',
|
|
borderRadius: '5px',
|
|
background: props.background ?? '$thBackground3',
|
|
fontSize: '15px',
|
|
fontFamily: '$inter',
|
|
fontWeight: '500',
|
|
color: '$thTextContrast',
|
|
px: '15px',
|
|
py: props.size == 'large' ? '15px' : '10px',
|
|
justifyContent: 'flex-start',
|
|
'@smDown': {
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
width: '100%',
|
|
},
|
|
}}
|
|
>
|
|
<VStack>
|
|
{props.dismissible && (
|
|
<SpanBox
|
|
css={{
|
|
marginLeft: 'auto',
|
|
lineHeight: '2',
|
|
}}
|
|
>
|
|
<Button
|
|
style="plainIcon"
|
|
css={{
|
|
fontSize: '10',
|
|
fontWeight: '600',
|
|
}}
|
|
>
|
|
<CloseIcon size={2} color="white" />
|
|
</Button>
|
|
</SpanBox>
|
|
)}
|
|
{props.helpMessage}
|
|
{props.suggestions.map((suggestion, idx) => {
|
|
return (
|
|
<InternalOrExternalLink
|
|
key={`suggestions-${idx}`}
|
|
link={suggestion.url}
|
|
>
|
|
<SpanBox
|
|
css={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
color: '$omnivoreCtaYellow',
|
|
pt: '15px',
|
|
gap: '2px',
|
|
'&:hover': {
|
|
textDecoration: 'underline',
|
|
},
|
|
}}
|
|
>
|
|
<>{suggestion.text}</>
|
|
<ArrowRightIcon
|
|
size={25}
|
|
color={theme.colors.omnivoreCtaYellow.toString()}
|
|
/>
|
|
</SpanBox>
|
|
</InternalOrExternalLink>
|
|
)
|
|
})}
|
|
</VStack>
|
|
</HStack>
|
|
)
|
|
}
|