Snackbar

"use client";

import {Button, useSnackbar} from "@brynlabs/fusion-ui";
import React from "react";

export const SnackbarExample = () => {
  const {showSnackbar} = useSnackbar();
  return (
    <Button
      onClick={() =>
        showSnackbar({
          message: "A thing happened.",
          style: "default",
          durationInSeconds: 6,
        })
      }>
      Open Snackbar
    </Button>
  );
};

"use client";

import {Button, Input, Select, useSnackbar} from "@brynlabs/fusion-ui";
import React, {useState} from "react";

type SnackbarStyles = "default" | "critical" | "warn" | undefined;

export const SnackbarStylesExample = () => {
  const {showSnackbar} = useSnackbar();
  const [styleValue, setStyleValue] = useState<SnackbarStyles>("default");
  const [value, setValue] = useState("A thing happened.");
  const [timeValue, setTimeValue] = useState("6");
  const [hasAction, setHasAction] = useState(false);

  return (
    <div style={{display: "flex", flexDirection: "column", gap: "20px"}}>
      <Input label={"Snackbar message"} value={value} onChange={v => setValue(v)}></Input>
      <Input
        label={"Time in seconds"}
        type="number"
        value={timeValue}
        onChange={v => setTimeValue(v)}></Input>
      <div>
        <Select
          placeholder={"default"}
          value={styleValue}
          values={["default", "warn", "critical"]}
          onChange={v => setStyleValue(v as SnackbarStyles)}></Select>
      </div>
      <div>
        <input
          type="checkbox"
          id="actions"
          name="actions"
          checked={hasAction}
          onChange={v => setHasAction(v.target.checked)}
        />
        <label htmlFor="actions">Add action</label>
      </div>
      <div>
        {hasAction ? (
          <Button
            onClick={() =>
              showSnackbar({
                message: value,
                style: styleValue,
                durationInSeconds: parseInt(timeValue),
                actionLabel: "Print",
                onAction: () => {
                  console.log("Action");
                },
              })
            }>
            Open {styleValue} snackbar
          </Button>
        ) : (
          <Button
            onClick={() =>
              showSnackbar({
                message: value,
                style: styleValue,
                durationInSeconds: parseInt(timeValue),
              })
            }>
            Open {styleValue} snackbar
          </Button>
        )}
      </div>
    </div>
  );
};