> ## Documentation Index
> Fetch the complete documentation index at: https://canvacord.neplex.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Greetings Card

> Welcomer/Leaver cards with a custom background and text.

## Code

<CodeGroup>
  ```tsx TypeScript theme={null}
  /** @jsx JSX.createElement */
  /** @jsxFrag JSX.Fragment */

  import { JSX, Builder, loadImage } from "canvacord";

  interface Props {
    displayName: string;
    type: "welcome" | "goodbye";
    avatar: string;
    message: string;
  }

  export class GreetingsCard extends Builder<Props> {
    constructor() {
      super(930, 280);
      this.bootstrap({
        displayName: "",
        type: "welcome",
        avatar: "",
        message: "",
      });
    }

    setDisplayName(value: string) {
      this.options.set("displayName", value);
      return this;
    }

    setType(value: Props["type"]) {
      this.options.set("type", value);
      return this;
    }

    setAvatar(value: string) {
      this.options.set("avatar", value);
      return this;
    }

    setMessage(value: string) {
      this.options.set("message", value);
      return this;
    }

    async render() {
      const { type, displayName, avatar, message } = this.options.getOptions();

      const image = await loadImage(avatar);

      return (
        <div className="h-full w-full flex flex-col items-center justify-center bg-[#23272A] rounded-xl">
          <div className="px-6 bg-[#2B2F35AA] w-[96%] h-[84%] rounded-lg flex items-center">
            <img
              src={image.toDataURL()}
              className="flex h-[40] w-[40] rounded-full"
            />
            <div className="flex flex-col ml-6">
              <h1 className="text-5xl text-white font-bold m-0">
                {type === "welcome" ? "Welcome" : "Goodbye"},{" "}
                <span className="text-blue-500">{displayName}!</span>
              </h1>
              <p className="text-gray-300 text-3xl m-0">{message}</p>
            </div>
          </div>
        </div>
      );
    }
  }
  ```

  ```js ES Modules theme={null}
  import { JSX, Builder, loadImage } from "canvacord";

  export class GreetingsCard extends Builder {
    constructor() {
      super(930, 280);
      this.bootstrap({
        displayName: "",
        type: "welcome",
        avatar: "",
        message: "",
      });
    }

    setDisplayName(value) {
      this.options.set("displayName", value);
      return this;
    }

    setType(value) {
      this.options.set("type", value);
      return this;
    }

    setAvatar(value) {
      this.options.set("avatar", value);
      return this;
    }

    setMessage(value) {
      this.options.set("message", value);
      return this;
    }

    async render() {
      const { type, displayName, avatar, message } = this.options.getOptions();

      const image = await loadImage(avatar);

      return JSX.createElement(
        "div",
        {
          className:
            "h-full w-full flex flex-col items-center justify-center bg-[#23272A] rounded-xl",
        },
        JSX.createElement(
          "div",
          {
            className:
              "px-6 bg-[#2B2F35AA] w-[96%] h-[84%] rounded-lg flex items-center",
          },
          JSX.createElement("img", {
            src: image.toDataURL(),
            className: "flex h-[40] w-[40] rounded-full",
          }),
          JSX.createElement(
            "div",
            { className: "flex flex-col ml-6" },
            JSX.createElement(
              "h1",
              { className: "text-5xl text-white font-bold m-0" },
              type === "welcome" ? "Welcome" : "Goodbye",
              ",",
              " ",
              JSX.createElement(
                "span",
                { className: "text-blue-500" },
                displayName,
                "!"
              )
            ),
            JSX.createElement(
              "p",
              { className: "text-gray-300 text-3xl m-0" },
              message
            )
          )
        )
      );
    }
  }
  ```

  ```js CommonJS theme={null}
  const { JSX, Builder, loadImage } = require("canvacord");

  class GreetingsCard extends Builder {
    constructor() {
      super(930, 280);
      this.bootstrap({
        displayName: "",
        type: "welcome",
        avatar: "",
        message: "",
      });
    }

    setDisplayName(value) {
      this.options.set("displayName", value);
      return this;
    }

    setType(value) {
      this.options.set("type", value);
      return this;
    }

    setAvatar(value) {
      this.options.set("avatar", value);
      return this;
    }

    setMessage(value) {
      this.options.set("message", value);
      return this;
    }

    async render() {
      const { type, displayName, avatar, message } = this.options.getOptions();

      const image = await loadImage(avatar);

      return JSX.createElement(
        "div",
        {
          className:
            "h-full w-full flex flex-col items-center justify-center bg-[#23272A] rounded-xl",
        },
        JSX.createElement(
          "div",
          {
            className:
              "px-6 bg-[#2B2F35AA] w-[96%] h-[84%] rounded-lg flex items-center",
          },
          JSX.createElement("img", {
            src: image.toDataURL(),
            className: "flex h-[40] w-[40] rounded-full",
          }),
          JSX.createElement(
            "div",
            { className: "flex flex-col ml-6" },
            JSX.createElement(
              "h1",
              { className: "text-5xl text-white font-bold m-0" },
              type === "welcome" ? "Welcome" : "Goodbye",
              ",",
              " ",
              JSX.createElement(
                "span",
                { className: "text-blue-500" },
                displayName,
                "!"
              )
            ),
            JSX.createElement(
              "p",
              { className: "text-gray-300 text-3xl m-0" },
              message
            )
          )
        )
      );
    }
  }

  module.exports = { GreetingsCard };
  ```
</CodeGroup>

## Usage

<CodeGroup>
  ```ts TypeScript theme={null}
  import { Font } from "canvacord";
  import { GreetingsCard } from "./GreetingsCard";

  // load font, in this case we are loading the bundled font from canvacord
  Font.loadDefault();

  // create card
  const card = new GreetingsCard()
    .setAvatar("https://cdn.discordapp.com/embed/avatars/0.png")
    .setDisplayName("Wumpus")
    .setType("welcome")
    .setMessage("Welcome to the server!");

  const image = await card.build({ format: "png" });

  // now do something with the image buffer
  ```

  ```js ES Modules theme={null}
  import { Font } from "canvacord";
  import { GreetingsCard } from "./GreetingsCard.js";

  // load font, in this case we are loading the bundled font from canvacord
  Font.loadDefault();

  // create card
  const card = new GreetingsCard()
    .setAvatar("https://cdn.discordapp.com/embed/avatars/0.png")
    .setDisplayName("Wumpus")
    .setType("welcome")
    .setMessage("Welcome to the server!");

  const image = await card.build({ format: "png" });

  // now do something with the image buffer
  ```

  ```js CommonJS theme={null}
  const { Font } = require("canvacord");
  const { GreetingsCard } = require("./GreetingsCard.js");

  // load font, in this case we are loading the bundled font from canvacord
  Font.loadDefault();

  // create card
  const card = new GreetingsCard()
    .setAvatar("https://cdn.discordapp.com/embed/avatars/0.png")
    .setDisplayName("Wumpus")
    .setType("welcome")
    .setMessage("Welcome to the server!");

  async function main() {
    const image = await card.build({ format: "png" });

    // now do something with the image buffer
  }

  main();
  ```
</CodeGroup>

## Result

<img src="https://mintcdn.com/neplex-79/2b3htIeXA4_HHvsZ/images/examples/builders/greetings-card.png?fit=max&auto=format&n=2b3htIeXA4_HHvsZ&q=85&s=c2485196b070e44e52194d8d2f03ba83" alt="greetings-card" width="930" height="280" data-path="images/examples/builders/greetings-card.png" />