mango-v4-ui/components/shared/SideBadge.tsx

31 lines
798 B
TypeScript

import React, { FunctionComponent } from 'react'
import { useTranslation } from 'next-i18next'
import { PerpOrderSide } from '@blockworks-foundation/mango-v4'
type SideBadgeProps = {
side: string | PerpOrderSide
}
const SideBadge: FunctionComponent<SideBadgeProps> = ({ side }) => {
const { t } = useTranslation('common')
return (
<div
className={`inline-block rounded uppercase ${
side === 'buy' || side === 'long' || side === PerpOrderSide.bid
? 'border border-th-green text-th-green'
: 'border border-th-red text-th-red'
}
-my-0.5 px-1.5 py-0.5 text-xs uppercase`}
>
{typeof side === 'string'
? t(side)
: side === PerpOrderSide.bid
? 'Buy'
: 'Sell'}
</div>
)
}
export default SideBadge