Mosketeros UI

Content:

1. Installation
2. WhatsApp
3. Button
4. Menu

⚡ Installation

Using npm:

npm install mosketeros-ui

Using yarn:

yarn add mosketeros-ui

Using pnpm:

pnpm add mosketeros-ui

WhatsApp

Astro component to show a WhatsApp fixed floating icon in your website.

💻 How to use it

Keep in mind that WhatsApp can be invoke in 2 different ways. They different URLs with different params and you must choose according to your needs:

Using api.whatsapp.com

The <WhatsApp> component creates a link that fits this format:

https://api.whatsapp.com/send?phone=MOBILE_NUMBER&text=MESSAGE

This is how you can use astro-whatsapp:

import { WhatsApp } from "mosketeros-ui";

<WhatsApp useApi={true}, mobile={123456789}, message="Message to send", classNames="" />

Using wa.me

The astro-whatsapp component creates a link that fits this format:

https://wa.me/MOBILE_NUMBER

This is how you can use whatsapp:

import { WhatsApp } from "mosketeros-ui";

<WhatsApp useApi={false}, mobile={123456789}, classNames="" />

⚠️ Notice that you cannot attach any messages using wa.me

🧱 Parameters

| Name | Type | Mandatory | Description | | ---- | :--: | :-------: | ----------- | | useApi | boolean | Yes | Use it to choose the type of output URL. | | mobile | string | Yes | The WhatsApp number to which the message will be sent. It must include the international prefix number. Symbol "+" and spaces will be cleared | | message | string | No | The message will be sent.If you set useApi={true}, message parameter is optional.If you set useApi={false} you cannot use the message parameter | | className | string | No | You can add your own classnames at the beginning of the component |

Button

Astro component to show a button.

💻 How to use it

This is how you can use this <Button> component:

import { Button } from "mosketeros-ui";

<Button
  type="primary"
  icon="search"
  href="#!"
  target="_self"
  rounded={true}
  className=""
>
  Text inside button
</Button>

Background color, foreground color, hover color and text color is determined by TailwindCSS classes text-background, bg-button-primary, bg-button-primary-hover, bg-button-secondary and bg-button-secondary-hover.

🧱 Parameters

| Name | Type | Mandatory | Description | | ---- | :--: | :-------: | ----------- | | type | "primary" |"secondary" |"text" | NoDefault: "primary" | Type of button. Colors and styles depends on the type selected | | icon | "search" |"arrow_right" |"360" | No | Icon name. It's placed next to text inside the button | | href | string | null | Yes | URL where the link will lead. If null, button will be rendered with no <a> HTML tag. It's a good option to render a button within an existing parent <a> HTML Tag. | | target | "_blank" | "_self" | No | Link will be opened in a new tab (_blank) or in the same tab (_self) | | rounded | boolean | NoDefault: "true" | ¿Borders will be rounded? | | className | string | No | You can add your own classnames at the beginning of the component | | ...props | any | No | Other additional props |

Menu

Astro component to show a menu for both desktop, tablet and mobile layouts.

💻 How to use it

First, you must know the <Menu> component relies on several interfaces:

export type Langs = "en" | "es";

interface SubmenuItem {
  LABEL: Record<Langs,string>;
  DESCRIPTION: Record<Langs,string>;  
  HREF: Record<Langs,string>;
  target: "_self" | "_blank" | string;
  icon?: Icons | string;
  id: MenuID;
}

interface MenuItem {
  LABEL: Record<Langs,string>;
  DESCRIPTION: Record<Langs,string>;  
  HREF: Record<Langs,string>;
  target: "_self" | "_blank" | string;
  id: MenuID;
  submenus?: Array<SubmenuItem>;
}

type TransparentBar = 'mobileTabletOnly' | 'desktopOnly' | 'both' | 'none';

...and you must define your own following interfaces:

export type MenuID = 
  "home" |
  "item-1" |
  "item-1-subitem-1" |
  "item-1-subitem-2" |
  "item-2" |
  "item-3";

export type Icons = "icon-item-1-subitem-1" | "icon-item-1-subitem-2";

This is how you can use <Menu>:

import { Menu } from "mosketeros-ui";

import SvgLogoLight from "@assets/logo-white.svg";
import SvgLogoDark from "@assets/logo-color.svg";

const menu = [
  {
    "LABEL": {
      "es": "Inicio",
      "en": "Home"
    },
    "DESCRIPTION": {
      "es": "",
      "en": ""
    },
    "submenus": [],
    "HREF": {
      "es": "/",
      "en": "/"
    },
    "target": "",
    "id": "home"
  },
  {
    "LABEL": {
      "es": "Ítem 1",
      "en": "Item 1"
    },
    "DESCRIPTION": {
      "es": "",
      "en": ""
    },
    "submenus": [
      {
        "LABEL": {
          "es": "Subítem 1 - 1",
          "en": "Subitem 1 - 1"
        },
        "DESCRIPTION": {
          "es": "Este es el contenido del ítem 1-1",
          "en": "This is the content for the item 1-1"
        },
        "HREF": {
          "es": "/el-mejor-item-1-1",
          "en": "/the-best-item-1-1"
        },
        "target": "",
        "icon": "icon-item-1-subitem-1",
        "id": "item-1-subitem-1"
      },
      {
        "LABEL": {
          "es": "Subítem 1 - 2",
          "en": "Subitem 1 - 2"
        },
        "DESCRIPTION": {
          "es": "Este es el contenido del ítem 1-2",
          "en": "This is the content for the item 1-2"
        },
        "HREF": {
          "es": "/el-mejor-item-1-2",
          "en": "/the-best-item-1-2"
        },
        "target": "",
        "icon": "icon-item-1-subitem-2",
        "id": "item-1-subitem-2"
      }
    ],
    "HREF": {
      "es": "#!",
      "en": "#!"
    },
    "target": "",
    "id": "item-1"
  },
  {
    "LABEL": {
      "es": "Ítem 2",
      "en": "Item 2"
    },
    "DESCRIPTION": {
      "es": "",
      "en": ""
    },
    "submenus": [],
    "HREF": {
      "es": "/aqui-item-2",
      "en": "/here-item-2"
    },
    "target": "",
    "id": "item-2"
  },
  {
    "LABEL": {
      "es": "Ítem 3",
      "en": "Item 3"
    },
    "DESCRIPTION": {
      "es": "",
      "en": ""
    },
    "submenus": [],
    "HREF": {
      "es": "/otro-item-3",
      "en": "/another-item-3"
    },
    "target": "",
    "id": "item-3"
  }
];

<Menu
  lang="en"
  menuJson={menu}
  currentItem="item-1"
  currentHref={{ "es":"/item-1", "en":"/item-1" }}
  LogoLight={SvgLogoLight}
  LogoDark={SvgLogoDark}
  logoTitle={{ "es": "Título", "en": "Title" }}
  transparentBar?: 'mobileTabletOnly' | 'desktopOnly' | 'both' | 'none'
/>

Background color, foreground color, hover color and text color is determined by TailwindCSS classes text-background, bg-button-primary, bg-button-primary-hover, bg-button-secondary and bg-button-secondary-hover.

🧱 Parameters

| Name | Type | Mandatory | Description | | ---- | :--: | :-------: | ----------- | | lang | type Langs | Yes | Current language | | menuJson | interface Array<MenuItem> | Yes | Content of menu | | currentItem | type MenuID | No | Current menu ID, according to the menuJson. Used to draw a line under the current menu item | | currentHref | type Record<Langs,string> | Yes | Current menu HREF, according to the menuJson. Used to change language | | LogoLight | SvgComponent | No | Imported SVG file for light mode | | LogoDark | SvgComponent | No | Imported SVG file for dark mode. If LogoDark is not set, LogoLight will be shown no matter layout is dark | | logoTitle | type Record<Langs,string> | No | Alternative title for the logo | | transparentBat | type TransparentBar | Yes | Alternative title for the logo |