♻️ refactor(home): minimize ProjectSpotlight scroll funtion
This commit is contained in:
@@ -125,14 +125,6 @@ const Description = (props: Props) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const ProjectSpotlight = React.forwardRef<HTMLSelectElement, Props>((props, ref) => {
|
const ProjectSpotlight = React.forwardRef<HTMLSelectElement, Props>((props, ref) => {
|
||||||
const executeScroll = () => {
|
|
||||||
if (typeof props.scrollTarget !== 'undefined') {
|
|
||||||
const target = props.scrollTarget as React.MutableRefObject<HTMLSelectElement | null>
|
|
||||||
target.current?.scrollIntoView()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// run this function from an event handler or an effect to execute scroll
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section ref={ref}>
|
<section ref={ref}>
|
||||||
<ParallaxProvider>
|
<ParallaxProvider>
|
||||||
@@ -160,7 +152,7 @@ const ProjectSpotlight = React.forwardRef<HTMLSelectElement, Props>((props, ref)
|
|||||||
{props.scrollTarget && (
|
{props.scrollTarget && (
|
||||||
<IconButton
|
<IconButton
|
||||||
size="large"
|
size="large"
|
||||||
onClick={executeScroll}
|
onClick={() => (props.scrollTarget as React.MutableRefObject<HTMLSelectElement | null>).current?.scrollIntoView()}
|
||||||
sx={{ position: 'absolute', p: 1, bottom: 2, left: '50%', transform: 'translate(-50%, 0)' }}>
|
sx={{ position: 'absolute', p: 1, bottom: 2, left: '50%', transform: 'translate(-50%, 0)' }}>
|
||||||
<ExpandMore fontSize="large" />
|
<ExpandMore fontSize="large" />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
|
|||||||
Reference in New Issue
Block a user