39 lines
969 B
JavaScript
39 lines
969 B
JavaScript
|
import { useEffect, useState } from 'react'
|
||
|
|
import PropTypes from 'prop-types'
|
||
|
|
import styled from 'styled-components'
|
||
|
|
|
||
|
|
const Wrapper = styled.div.attrs({
|
||
|
|
className: 'absolute left-0 bottom-0 w-full h-0.5 bg-palette-200',
|
||
|
|
})``
|
||
|
|
|
||
|
|
const Indicator = styled.div.attrs({
|
||
|
|
className: 'absolute h-0.5 bottom-0 bg-primary duration-200 ease-in-out',
|
||
|
|
})`
|
||
|
|
will-change: left, width;
|
||
|
|
`
|
||
|
|
|
||
|
|
export const ActiveTabIndicator = ({ tabRef }) => {
|
||
|
|
const [position, setPosition] = useState(0)
|
||
|
|
const [width, setWidth] = useState(0)
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (!tabRef?.current) {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
const { offsetLeft, offsetWidth } = tabRef.current
|
||
|
|
setPosition(offsetLeft)
|
||
|
|
setWidth(offsetWidth)
|
||
|
|
}, [tabRef])
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Wrapper>
|
||
|
|
<Indicator style={{ left: position, width: `${width}px` }} />
|
||
|
|
</Wrapper>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
ActiveTabIndicator.propTypes = {
|
||
|
|
tabRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.instanceOf(Element) })]),
|
||
|
|
}
|