R&P's Link Component
When our clients want to add a link to a component in the CMS, they are asked to choose
what type of link it will be - external, internal, and modal are some examples of what they can select.
If you hop over to our Link component file, you'll see that we've used a switch case
to renders different versions based on the condition prop.
Internal Link - we wrap our $Link (a styled anchor tag) with Next/Link so we can use all of those nice features.
External/Download Link - we use $Link on it's own, without the Next/Link wrapper.
It's easy for us to extend the link conditions in the link schema from project to project and adjust how we render the links accordingly.
The styles for $Link are factored out of this file and instead stored in Design/Tokens for cleanliness.
In this token file, we have a linkStyle variant with three options:
button
buttonGhost
text
All necessary design changes to the Link component will be made in this file.
We have the flexibility of including this option for the client to control in Sanity, or
to control it ourselves in our code by adding the linkStyle property to the Link component.
You may want to create a Link component from scratch, either for a static component or
to test/display some mock data.
In this case, there are three props that are necessary for Link to render properly:
condition - internal, external...
url - / makes for a good placeholder.
label - alternatively, you can use children:
<Link>"Label"</Link>