67 lines
2.1 KiB
TypeScript
67 lines
2.1 KiB
TypeScript
import classNames from 'classnames'
|
|
import { ReactNode } from 'react'
|
|
|
|
import Card from 'components/Card'
|
|
import { GridGlobe, GridHole, GridLandscape, GridPlanet, GridTire, GridWeb } from 'components/Icons'
|
|
import Text from 'components/Text'
|
|
import { Tooltip } from 'components/Tooltip'
|
|
import useStore from 'store'
|
|
|
|
interface Props {
|
|
text: string | ReactNode
|
|
children?: ReactNode
|
|
bg: 'borrow' | 'lend' | 'farm' | 'portfolio' | 'hls-farm' | 'hls-staking'
|
|
}
|
|
|
|
function IntroBackground(props: { bg: Props['bg'] }) {
|
|
switch (props.bg) {
|
|
case 'borrow':
|
|
return <GridHole className='h-55 opacity-5' />
|
|
case 'lend':
|
|
return <GridTire className='h-55 opacity-5' />
|
|
case 'farm':
|
|
return <GridLandscape className='h-55 opacity-5' />
|
|
case 'hls-farm':
|
|
return <GridWeb className='h-45 opacity-5' />
|
|
case 'hls-staking':
|
|
return <GridPlanet className='h-55 opacity-10' />
|
|
default:
|
|
return <GridGlobe className='h-50 opacity-5' />
|
|
}
|
|
}
|
|
|
|
export default function Intro(props: Props) {
|
|
const showTutorial = useStore((s) => s.tutorial)
|
|
const currentAppSection = useStore((s) => s.currentAppSection)
|
|
if (!showTutorial) return null
|
|
return (
|
|
<Card
|
|
className={classNames(
|
|
'relative w-full p-8 bg-cover h-55',
|
|
currentAppSection === 'hls' ? 'bg-intro-hls' : 'bg-intro',
|
|
)}
|
|
contentClassName='flex w-full h-full flex-col justify-between'
|
|
>
|
|
<div className='absolute inset-0 flex items-end justify-end w-full h-full text-white'>
|
|
<IntroBackground bg={props.bg} />
|
|
</div>
|
|
<Tooltip
|
|
className='absolute top-4 right-4'
|
|
type='info'
|
|
content={
|
|
<Text size='xs'>
|
|
If you want to hide these info boxes. Set the <strong>Tutorial</strong> to OFF in the
|
|
Settings.
|
|
</Text>
|
|
}
|
|
/>
|
|
<div className='flex w-full'>
|
|
<Text size='lg' className='max-w-full leading-7 w-140 text-white/60'>
|
|
{props.text}
|
|
</Text>
|
|
</div>
|
|
{props.children && <div className='flex w-full gap-4'>{props.children}</div>}
|
|
</Card>
|
|
)
|
|
}
|