How to props typesafety for a LinkCard component?

Basically I want my

<LinkCard>

<LinkCard>

component to error the same way

<Link>

<Link>

from

@tanstack/router

@tanstack/router

if you fail to give it a

to=""

to=""

prop

function LinkCard({ className, ...props }: LinkComponentProps) {
  return (
    <Link
      data-slot="card"
      className={cn(
        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
        className,
      )}
      {...props}
    />
  );
}

function LinkCard({ className, ...props }: LinkComponentProps) {
  return (
    <Link
      data-slot="card"
      className={cn(
        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
        className,
      )}
      {...props}
    />
  );
}

This works, but it doesn't have the same level of typesafety as the native

<Link>

<Link>

tag.

TanStack•11mo ago•

4 replies

nursing-lime

How to props typesafety for a LinkCard component?

Basically I want my

<LinkCard>

<LinkCard>

component to error the same way

<Link>

<Link>

from

@tanstack/router

@tanstack/router

if you fail to give it a

to=""

to=""

prop

function LinkCard({ className, ...props }: LinkComponentProps) {
  return (
    <Link
      data-slot="card"
      className={cn(
        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
        className,
      )}
      {...props}
    />
  );
}

function LinkCard({ className, ...props }: LinkComponentProps) {
  return (
    <Link
      data-slot="card"
      className={cn(
        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
        className,
      )}
      {...props}
    />
  );
}

This works, but it doesn't have the same level of typesafety as the native

<Link>

<Link>

tag.

How to props typesafety for a LinkCard component?

Similar Threads

How to props typesafety for a LinkCard component?

Similar Threads

Similar Threads

Similar Threads