Sergio Pereira
ESEN
LinkedInManfred
Idioma
ESEN
Apariencia
Navigation

LinkCard

Tarjeta que enlaza a otra página, con título y descripción

Preview

ButtonBotón de acción con variantes y tamaños
size
title
description

Code

import css from "./LinkCard.module.css";

type Size = "sm" | "md" | "lg";

interface ResponsiveSize {
  base: Size;
  mobile?: Size;
  tablet?: Size;
  desktop?: Size;
  wide?: Size;
}

interface LinkCardProps {
  href: string;
  size: Size | ResponsiveSize;
  title: string;
  description: string;
}

function getSizeClasses(size: Size | ResponsiveSize): string {
  if (typeof size === "string") {
    return css[size];
  }

  const classes = [css[`${size.base}_base`]];

  if (size.mobile) classes.push(css[`${size.mobile}_mobile`]);
  if (size.tablet) classes.push(css[`${size.tablet}_tablet`]);
  if (size.desktop) classes.push(css[`${size.desktop}_desktop`]);
  if (size.wide) classes.push(css[`${size.wide}_wide`]);

  return classes.join(" ");
}

export default function LinkCard({
  href,
  size,
  title,
  description,
}: LinkCardProps) {
  return (
    <a
      href={href}
      className={`
        ${css.card}
        ${getSizeClasses(size)}
      `}
    >
      <span className={css.card_title}>{title}</span>
      <span className={css.card_description}>{description}</span>
    </a>
  );
}

Props

PropTypeRequiredDescription
hrefstringrequiredDestino del enlace.
size"sm" | "md" | "lg" | ResponsiveSizerequiredTamaño de la tarjeta (padding y tipografía). Fijo o responsive.
titlestringrequiredTítulo visible de la tarjeta.
descriptionstringrequiredLínea de apoyo bajo el título.