CODEWITHSUNDEEP
reactjsnext.jsstyled-componentsreact-componentnextui
ChristianOConnor
ChristianOConnor

Reputation: 1182

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?

Upvotes: 0

Views: 1784

Answers (1)

Hasan Aga
Hasan Aga

Reputation: 774

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>

Upvotes: 2

Related Questions