2022-09-13 23:24:26 -07:00
|
|
|
import React, { FunctionComponent } from 'react'
|
|
|
|
import { useTranslation } from 'next-i18next'
|
2022-10-31 11:26:17 -07:00
|
|
|
import { PerpOrderSide } from '@blockworks-foundation/mango-v4'
|
2022-09-13 23:24:26 -07:00
|
|
|
|
|
|
|
type SideBadgeProps = {
|
2022-10-31 11:26:17 -07:00
|
|
|
side: string | PerpOrderSide
|
2022-09-13 23:24:26 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
const SideBadge: FunctionComponent<SideBadgeProps> = ({ side }) => {
|
|
|
|
const { t } = useTranslation('common')
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div
|
|
|
|
className={`inline-block rounded uppercase ${
|
2022-11-01 08:54:29 -07:00
|
|
|
side === 'buy' || side === 'long' || side === PerpOrderSide.bid
|
2022-11-30 19:32:32 -08:00
|
|
|
? 'border border-th-up text-th-up'
|
|
|
|
: 'border border-th-down text-th-down'
|
2022-09-13 23:24:26 -07:00
|
|
|
}
|
2022-11-21 02:37:31 -08:00
|
|
|
-my-0.5 px-1 text-xs uppercase md:px-1.5 md:py-0.5`}
|
2022-09-13 23:24:26 -07:00
|
|
|
>
|
2022-10-31 11:26:17 -07:00
|
|
|
{typeof side === 'string'
|
|
|
|
? t(side)
|
|
|
|
: side === PerpOrderSide.bid
|
|
|
|
? 'Buy'
|
|
|
|
: 'Sell'}
|
2022-09-13 23:24:26 -07:00
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default SideBadge
|