Blanket

"use client";

import {
  Button,
  FormField,
  FormSpacing,
  IconErrorWarning,
  IconExpandDown,
  Input,
  Modal,
  ModalActions,
  ModalTitle,
  Sheet,
  SheetHeader,
  SplitButton,
  Tile,
  TileContent,
  TileFooter,
  TileHeader,
} from "@brynlabs/fusion-ui";
import React, {useState} from "react";

export const BlanketExample = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [smallModalOpen, setSmallModalOpen] = useState(false);

  return (
    <div style={{display: "grid", gap: "1rem", placeItems: "start"}}>
      <Button
        onClick={() => {
          setIsOpen(true);
        }}>
        Open Sheet
      </Button>
      <Sheet
        open={isOpen}
        header={
          <SheetHeader
            closeCallback={() => setIsOpen(false)}
            actions={
              <SplitButton>
                <Button size={"small"}>Button</Button>
                <Button size={"small"} primaryIcon={<IconExpandDown />}></Button>
              </SplitButton>
            }>
            Sheet Title
          </SheetHeader>
        }
        onAbort={() => setIsOpen(false)}>
        <Tile>
          <TileHeader>
            <h2>Overview</h2>
          </TileHeader>
          <TileContent>
            <div style={{display: "flex", flexDirection: "column", gap: "1rem"}}>
              <FormField
                label={"Formular Label"}
                required={true}
                hint={"This is a hint."}
                errorMessage={"This is an error message."}>
                <FormSpacing>
                  <Input value={"Input 1"} onChange={() => {}}></Input>
                </FormSpacing>
              </FormField>
              <FormField
                label={"Formular Label 2"}
                required={true}
                hint={"This is a hint. 2"}
                errorMessage={"This is an error message. 2"}>
                <FormSpacing>
                  <Input value={"Input 2"} onChange={() => {}}></Input>
                </FormSpacing>
              </FormField>
            </div>
          </TileContent>
          <TileFooter>
            <Button
              onClick={() => {
                setSmallModalOpen(true);
              }}>
              Open Small Modal
            </Button>
            <Modal
              open={smallModalOpen}
              actions={
                <ModalActions>
                  <Button>Test</Button>
                  <Button color={"neutral"}>Test</Button>
                </ModalActions>
              }
              modalTitle={
                <ModalTitle
                  icon={
                    <span style={{color: "var(--color--critical-500)"}}>
                      <IconErrorWarning></IconErrorWarning>
                    </span>
                  }
                  onAbort={() => setSmallModalOpen(false)}>
                  Test
                </ModalTitle>
              }
              size={"small"}
              onAbort={() => setSmallModalOpen(false)}>
              Badge Default
            </Modal>
          </TileFooter>
        </Tile>
      </Sheet>
    </div>
  );
};