UI Component Code Gallery for React - by Mirado Andria

Widget A

Widget layout, with header and footer.

Preview

Inbox
Hello!
Content

Widget inside a CardFrameA content

ICON
Header Start
Center
Header End
Content

Widget content

Footer Start
Footer Center
Footer End
Inbox
Hello!
Content

Widget inside a WidgetFrameA content

Settings
Content

Widget inside a WidgetFrameA content, with variant="dark" and padding="large"

Code

import styles from "./widget-a.module.css";

type Props = {
  className?: string;
  children?: React.ReactNode;
  headerIconElement?: React.ReactNode;
  headerStartElement?: React.ReactNode;
  headerCenterElement?: React.ReactNode;
  headerEndElement?: React.ReactNode;
  headerElement?: React.ReactNode;
  footerStartElement?: React.ReactNode;
  footerCenterElement?: React.ReactNode;
  footerEndElement?: React.ReactNode;
  footerElement?: React.ReactNode;
  size?: "small" | "medium" | "large";
  padding?: "small" | "medium" | "large";
  // Put additional variants here, then define them in the CSS
  variant?: "default" | "dark";
};
export default function WidgetA({
  className,
  children,
  headerElement,
  headerIconElement,
  headerStartElement,
  headerCenterElement,
  headerEndElement,
  footerElement,
  footerStartElement,
  footerCenterElement,
  footerEndElement,
  padding,
  size,
  variant = "default",
}: Props) {
  return (
    <>
      <div
        className={[
          styles["wrapper"],
          styles[`s-${size}`],
          styles[`p-${padding}`],
          styles[`variant-${variant}`],
          className,
        ].join(" ")}
      >
        {(headerElement ||
          headerIconElement ||
          headerStartElement ||
          headerCenterElement ||
          headerEndElement) && (
          <header className={styles["header"]}>
            <div className={styles["header-sce"]}>
              {(headerStartElement || headerIconElement) && (
                <div className={styles["header-start"]}>
                  {headerIconElement && (
                    <div className={styles["header-icon"]}>
                      {headerIconElement}
                    </div>
                  )}
                  <div className={styles["header-start-content"]}>
                    {headerStartElement}
                  </div>
                </div>
              )}
              {headerCenterElement && (
                <div className={styles["header-center"]}>
                  <div>{headerCenterElement}</div>
                </div>
              )}
              {headerEndElement && (
                <div className={styles["header-end"]}>
                  <div>{headerEndElement}</div>
                </div>
              )}
            </div>
            {headerElement && (
              <div className={styles["header-elem"]}>{headerElement}</div>
            )}
          </header>
        )}
        <div className={styles["body"]}>{children}</div>
        {(footerElement ||
          footerStartElement ||
          footerCenterElement ||
          footerEndElement) && (
          <footer className={styles["footer"]}>
            <div className={styles["footer-sce"]}>
              {footerStartElement && (
                <div className={styles["footer-start"]}>
                  {footerStartElement}
                </div>
              )}
              {footerCenterElement && (
                <div className={styles["footer-center"]}>
                  {footerCenterElement}
                </div>
              )}
              {footerEndElement && (
                <div className={styles["footer-end"]}>{footerEndElement}</div>
              )}
            </div>
            {footerElement && (
              <div className={styles["footer-elem"]}>{footerElement}</div>
            )}
          </footer>
        )}
      </div>
    </>
  );
}

Design

Figma design file:

Documentation

Properties

Props of the component:

  • className (string): Specifies the CSS class of the component.
  • children (ReactNode): React children of the component. Specifies the ReactNode such as text placed inside the component.
  • headerIconElement (ReactNode): Specifies the icon component placed horizontally at the start of the header.
  • headerStartElement (ReactNode): Specifies the component placed horizontally at the start of the header (left in LTR mode or left on RTL mode).
  • headerCenterElement (ReactNode): Specifies the component placed horizontally at the center of the header.
  • headerEndElement (ReactNode): Specifies the component placed horizontally at the end of the header (right in LTR mode or right on RTL mode).
  • headerElement (ReactNode): Specifies the component placed inside the header.
  • footerStartElement (ReactNode): Specifies the component placed horizontally at the start of the footer (left in LTR mode or left on RTL mode).
  • footerCenterElement (ReactNode): Specifies the component placed horizontally at the center of the footer.
  • footerEndElement (ReactNode): Specifies the component placed horizontally at the end of the footer (right in LTR mode or right on RTL mode).
  • footerElement (ReactNode): Specifies the component placed inside the footer.
  • size ( "small" | "medium" | "large"): Specifies the size of the component.
  • padding ("none" | "small" | "medium" | "large"): Specifies the padding of the block.
  • variant ("default" | "dark" or a customized value): Specifies the color or theme variant of the component. See the "Sample CSS customization" below for an example of usage.
Sample CSS customization
/* color="dark" */
.variant-dark {
    --fg-color: #ffffff;
    --icon-color: #ffffff;
    --border-color: rgba(200, 200, 200, 0.1);
}