Use next/link in navigation components

[bestatigen]

Used renderProps technique for this: passing the link and children component back to the caller and then wrapping it with the next/link in there. Not sure how scalable this is when there is gonna be more components that have navigation links but I think it's a good start.

Closes #76

[vercel[bot]]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/curaos/frontend/5XWM3x8FzQHu5RXc2B1jg7XY5dJE
✅ Preview: https://frontend-git-use-next-link-curaos.vercel.app

[sekaiking]

If we passed just a function instead of passing the whole components , wouldn't that be cleaner? Something similare to what you already done to ProjectCard component

Our components would be like this

function Component({ href, onNavigate = () => {} }) {
    return (
        <a href={href} onClick={onNavigate(href)}>
            go to bids
        </a>
    )
}

Our frontend would be like this

import { useRouter } from 'next/router'

// If onNavigate is provided, link click would be handled by Next
function frontendWithNext() {
    const router = useRouter()

    onNavigate = (e, href) => {
        e.preventDefault()
        router.push(href)
    }
    return (
        <div>
            <Component href="/bids" onNavigate={onNavigate} />
        </div>
    )
}

If someone uses the components without NextJs

// If onNavigate is not provided, it will still work
function frontendWithoutNext() {
    return (
        <div>
            <Component href="/bids" />
        </div>
    )
}

[bestatigen]

@achrafismyname thanks, your proposal should actually work too! I think in general for app navigation it's better to keep navigation links wrapped with Link. As a side note, I like having an example of renderProps in the repo for future reference. For things that don't concern navigation we can start using router.push. Will keep this in mind for the future if this implementation is not feasible or brings up issues. 😃

[sekaiking]

Oh okay that makes sense, thank you for explaining.

[github-actions[bot]]

:tada: This PR is included in version @cura/components-v1.0.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: