I have this repo here https://github.com/ChristianOConnor/custom-bp-one. It's basically the npx create-next-app@latest --ts
boilerplate but I'm experimenting with nextui-org
components. I tried to add href=https://github.com/nextui-org/nextui
in a card component like this:
<Grid>
<Card
isPressable
isHoverable
variant="bordered"
css={{ mw: "400px" }}
href="https://github.com/nextui-org/nextui"
>
<Card.Header>First Button →</Card.Header>
<Card.Body>Find in-depth information about Next.js features and API.</Card.Body>
</Card>
</Grid>
But when I click on it, I am not redirected to https://github.com/nextui-org/nextui, and I get this in my vscode window when I hover over href
:
Type '{ children: Element[]; isPressable: true; isHoverable: true; variant: "bordered"; css: { mw: "400px"; }; href: string; }' is not assignable to type 'IntrinsicAttributes & Props & { css?: CSS | undefined; } & RefAttributes<HTMLDivElement>'.
Property 'href' does not exist on type 'IntrinsicAttributes & Props & { css?: CSS | undefined; } & RefAttributes<HTMLDivElement>'. Did you mean 'ref'?ts(2322)
So how do I get the nextui
Card
component to redirect to a link when clicked? Also can I add a next.js route to the Card component instead of a url?
You have two options:
<Link href="https://github.com/nextui-org/nextui">
<Card
isPressable
isHoverable
variant="bordered"
css={{ mw: "400px" }}
href="https://github.com/nextui-org/nextui"
>
<Card.Header>First Button →</Card.Header>
<Card.Body>Find in-depth information about Next.js features and API.</Card.Body>
</Card>
</Link>
onClick
and window.open
to open the link:<Grid>
<Card
onClick={() => {
window.open(""https://github.com/nextui-org/nextui"");
}}
isPressable
isHoverable
variant="bordered"
css={{ mw: "400px" }}
>
<Card.Header>First Button →</Card.Header>
<Card.Body>Find in-depth information about Next.js features and API.</Card.Body>
</Card>
</Grid>