UI Component Code Gallery for React - by Mirado Andria

Location Item A

This is a short description of this item. Replace it with sentence like the following: you can use it as a location of an item or a a product varient card.

Preview

Code

import styles from "./location-item-a.module.css";

type DetailType = {
  title?: string;
  icon?: React.ReactNode;
  onClick?: () => void;
};
type Props = {
  className?: string;
  imageSrc?: string;
  title: React.ReactNode;
  description?: React.ReactNode;
  details?: DetailType[];
  href?: string;
  actionIcon?: React.ReactNode;
  rounded?: "none" | "small" | "medium" | "large";
  imageRounded?: "default" | "none" | "small" | "medium" | "large" | "full";
  // Put additional variants here, then define them in the CSS
  variant?: "default" | "simple";
  // Behavior when action button is clicked
  onClickAction?: () => void;
};

export default function LocationItemA({
  className,
  imageSrc,
  title,
  description,
  href,
  actionIcon,
  rounded = "medium",
  imageRounded = "default",
  details,
  variant,
  onClickAction,
}: Props) {
  return (
    <div
      className={[
        styles["wrapper"],
        styles[`r-${rounded}`],
        styles[`img-r-${imageRounded}`],
        styles[`variant-${variant}`],
        className,
      ].join(" ")}
    >
      <div className={styles["image-wrapper"]}>
        {/* You may need to replace the a tag with a Link if you use Next.js  */}
        <a href={href}>
          {/* If you use Next.js, replace 'img' with 'Image' element */}
          <img
            className={[styles["image"], styles["square"]].join(" ")}
            src={imageSrc}
            alt={title?.valueOf()?.toString()}
            width={360}
            height={360}
            loading="lazy"
          />
        </a>
      </div>
      <div className={styles["body-wrapper"]}>
        {/* You may replace the a tag with a Link if you use NextJS, or simply remove it if you do not want link  */}
        <a href={href} className={styles["body-link"]}>
          <div className={styles["body-content"]}>
            <div className={styles["b-text"]}>
              <div className={styles["text-content"]}>
                <h3 className={styles["title"]}>{title}</h3>
                {description && (
                  <div className={styles["desc"]}>
                    {typeof description === "string" ? (
                      <p>{description}</p>
                    ) : (
                      <>{description}</>
                    )}
                  </div>
                )}
              </div>
              <div className={styles["details"]}>
                {details?.map((detail, index) => (
                  <button
                    key={detail.title || `action-${index}`}
                    type="button"
                    className={styles["detail-button"]}
                    title={detail.title}
                    onClick={() => {
                      // add on click behavior here eg:
                      detail.onClick && detail.onClick();
                    }}
                  >
                    {detail.icon && (
                      <span className={styles["icon"]}>{detail.icon}</span>
                    )}
                    {detail.title && (
                      <span className={styles["text"]}>{detail.title}</span>
                    )}
                  </button>
                ))}
              </div>
            </div>
            <div className={styles["b-action"]}>
              {actionIcon && (
                <button
                  type="button"
                  className={styles["action-icon"]}
                  onClick={() => {
                    // add on click behavior here eg:
                    onClickAction && onClickAction();
                  }}
                >
                  {actionIcon}
                </button>
              )}
            </div>
          </div>
        </a>
      </div>
    </div>
  );
}

Design

Figma design file:

Documentation

Properties

Props of the component:

  • className (string): Specifies the CSS class of the component.
  • imageSrc (string): Specifies the URL of the image.
  • title (string or ReactNode): Specifies the text or component that will be used as the title.
  • description (string or ReactNode): Specifies the text or component that will be used as the description.
  • href (string): Specifies the URL if the component is a link.
  • details (array of DetailType): Specifies detail information about the location.
  • actionIcon (ReactNode): Specifies the icon component of the action button.
  • type ("button" | "link"): Specifies the type of the component.
  • rounded ("none" | "small" | "medium" | "large"): Specifies the border radius of the frame.
  • imageRounded ("none" | "small" | "medium" | "large"): Specifies the border radius of the image.
  • variant ("default" | "simple" or a customized value): Specifies the color or theme variant of the component. Check out the "Sample CSS customization" below for an example of how to use it.
  • onClickAction (function): Fires when the action button is clicked.
ActionType item arguments
  • title (string): Specifies the title text.
  • icon (string): Specifies the icon component.
  • onClick (function): Fires when the item is clicked.
Sample CSS customization
.variant-simple {
    --bg-color: transparent;
    --padding: 0px;
    --primary: #d8571b;
    --detail-button-color: var(--primary);
    box-shadow: none;
}
.variant-simple .title{
    color: var(--primary);
}