reactjsnext.jsstyled-componentsreact-componentnextui

Nextui-org Card is set to isPressable but I can't add an href to the Card Component


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 &rarr;</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?


Solution

  • You have two options:

    1. wrap the card component in a Link component:
    <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 &rarr;</Card.Header>
        <Card.Body>Find in-depth information about Next.js features and API.</Card.Body>
      </Card>
    </Link>
    
    1. use 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 &rarr;</Card.Header>
        <Card.Body>Find in-depth information about Next.js features and API.</Card.Body>
      </Card>
    </Grid>