diff --git a/src/components/projects/ProjectsHeader.jsx b/src/components/projects/ProjectsHeader.jsx index ccf917a..ed0a1b0 100644 --- a/src/components/projects/ProjectsHeader.jsx +++ b/src/components/projects/ProjectsHeader.jsx @@ -1,4 +1,5 @@ -import React, { Fragment } from 'react' +import React, { Fragment, useRef } from 'react' +import { Link } from 'react-router-dom' import Typography from '@material-ui/core/Typography' import { makeStyles } from '@material-ui/core/styles' import Card from '@material-ui/core/Card' @@ -9,6 +10,12 @@ import StatusButton from '../base/Button' import Icon from '../base/icons/IconByName' import AssembleFlow from '../image/AssembleFlow' +const scrollToRef = (ref) => window.scroll({ + top: ref.current.offsetTop, + left: 0, + behavior: 'smooth' +}) + const useStyles = makeStyles(({ breakpoints: { up @@ -78,8 +85,10 @@ const useStyles = makeStyles(({ fontSize: '20px', fontWeight: 'bold', marginTop: '3rem' + }, + link: { + textDecoration: 'none' } - })) function CreatorsCard() { @@ -103,16 +112,19 @@ function CreatorsCard() { - + + + ); } -function FundersCard() { +function FundersCard({ listedRef }) { const classes = useStyles(); + const executeScroll = () => scrollToRef(listedRef) return ( @@ -134,6 +146,7 @@ function FundersCard() { @@ -142,17 +155,18 @@ function FundersCard() { function ProjectsHeader() { const classes = useStyles() + const listedRef = useRef(null) return ( Open and Transparent Funding Assemble helps you to bring your web3 projects to life - +
- Listed Projects + Listed Projects
) }