88 lines
2.7 KiB
TypeScript
88 lines
2.7 KiB
TypeScript
import { useCallback } from 'react'
|
|
|
|
import { ChevronRight, Compass, HandCoins, Luggage } from 'components/Icons'
|
|
import Modal from 'components/Modal'
|
|
import Text from 'components/Text'
|
|
import useStore from 'store'
|
|
import { DocURL } from 'types/enums/docURL'
|
|
|
|
interface TutorialItemProps {
|
|
title: string
|
|
description: string
|
|
link: string
|
|
icon: React.ReactNode
|
|
}
|
|
|
|
function TutorialItem(props: TutorialItemProps) {
|
|
return (
|
|
<a
|
|
href={props.link}
|
|
title={props.title}
|
|
target='_blank'
|
|
className='flex items-center px-2 py-3 rounded-base hover:bg-white/5 group/item'
|
|
>
|
|
<div className='flex items-center justify-center w-8 h-8 rounded-base bg-white/5'>
|
|
{props.icon}
|
|
</div>
|
|
<div className='flex flex-col ml-3'>
|
|
<Text size='sm' className='pb-1'>
|
|
{props.title}
|
|
</Text>
|
|
<Text size='sm' className='text-white/50'>
|
|
{props.description}
|
|
</Text>
|
|
</div>
|
|
<div className='flex items-center justify-end flex-grow h-full pr-4'>
|
|
<ChevronRight className='w-3 h-3 opacity-0 group-hover/item:opacity-100' />
|
|
</div>
|
|
</a>
|
|
)
|
|
}
|
|
|
|
export default function GetStartedModal() {
|
|
const modal = useStore((s) => s.getStartedModal)
|
|
const onClose = useCallback(() => {
|
|
useStore.setState({ getStartedModal: false })
|
|
}, [])
|
|
|
|
if (!modal) return null
|
|
|
|
return (
|
|
<Modal
|
|
onClose={onClose}
|
|
header={<Text>Get Started</Text>}
|
|
className='relative'
|
|
headerClassName='gradient-header p-4 border-b-white/5 border-b'
|
|
contentClassName='flex flex-col p-3 pb-8'
|
|
>
|
|
<Text size='sm' className='p-2 pt-0 text-white/50'>
|
|
Tutorials
|
|
</Text>
|
|
<TutorialItem
|
|
title='Beginner Trading'
|
|
description='Learn how to conduct basic swapping, setting slippage percentages and more.'
|
|
link={DocURL.TRADING_INTRO_URL}
|
|
icon={<Compass className='w-5 opacity-50 group-hover/item:opacity-100' />}
|
|
/>
|
|
<TutorialItem
|
|
title='Advanced Trading'
|
|
description='Learn how to margin trade, stop-loss trade and operate our advanced trading module.'
|
|
link={DocURL.ADVANCED_TRADING_URL}
|
|
icon={<Luggage className='w-5 opacity-50 group-hover/item:opacity-100' />}
|
|
/>
|
|
<TutorialItem
|
|
title='Borrowing & Lending'
|
|
description='Borrow and lend money against your assets on the blockchain'
|
|
link={DocURL.BORROW_LENDING_URL}
|
|
icon={<HandCoins className='w-5 opacity-50 group-hover/item:opacity-100' />}
|
|
/>
|
|
<Text
|
|
size='sm'
|
|
className='absolute bottom-0 left-0 w-full px-4 py-1 rounded-b-base bg-black/80 text-white/30'
|
|
>
|
|
You can access this modal via the settings if you decide to close it.
|
|
</Text>
|
|
</Modal>
|
|
)
|
|
}
|