Drawer

import { Button, Classes, Drawer, DrawerSize, PropertyList, PropertyListItem, Tag } from "@clawscale/react";
import { useState } from "react";

export default function DrawerBasic() {
  const [isOpen, setIsOpen] = useState(false);
  const close = () => setIsOpen(false);
  return (
    <>
      <Button icon="panel-stats" text="Inspect deployment" onClick={() => setIsOpen(true)} />
      <Drawer icon="cloud-upload" isOpen={isOpen} onClose={close} size={DrawerSize.SMALL} title="api-gateway v2.14.0">
        <div className={Classes.DRAWER_BODY}>
          <PropertyList compact style={{ margin: 16 }}>
            <PropertyListItem label="Status">
              <Tag intent="success" minimal>
                Healthy
              </Tag>
            </PropertyListItem>
            <PropertyListItem label="Regions">us-east-1, eu-west-1</PropertyListItem>
            <PropertyListItem label="Replicas">24 of 24 ready</PropertyListItem>
            <PropertyListItem label="Commit" monospace>
              8f3c2a1
            </PropertyListItem>
            <PropertyListItem label="Deployed">27 Sep, 09:42 UTC</PropertyListItem>
          </PropertyList>
        </div>
        <div className={Classes.DRAWER_FOOTER} style={{ display: "flex", gap: 8, justifyContent: "flex-end" }}>
          <Button text="View logs" onClick={close} />
          <Button intent="danger" text="Roll back" onClick={close} />
        </div>
      </Drawer>
    </>
  );
}

import { Button, Classes, Drawer, DrawerSize } from "@clawscale/react";
import { useState } from "react";

const sizes = [
  { label: "Small", size: DrawerSize.SMALL },
  { label: "Standard", size: DrawerSize.STANDARD },
  { label: "Large", size: DrawerSize.LARGE },
];

export default function DrawerSizes() {
  const [isOpen, setIsOpen] = useState(false);
  const [size, setSize] = useState<string>(DrawerSize.SMALL);
  return (
    <>
      {sizes.map((option) => (
        <Button
          key={option.label}
          text={`${option.label} (${option.size})`}
          onClick={() => {
            setSize(option.size);
            setIsOpen(true);
          }}
        />
      ))}
      <Drawer icon="history" isOpen={isOpen} onClose={() => setIsOpen(false)} size={size} title="Run history">
        <div className={Classes.DRAWER_BODY}>
          <p style={{ margin: 16 }}>This drawer is {size} wide.</p>
        </div>
      </Drawer>
    </>
  );
}

import { Button, Classes, Drawer, DrawerSize } from "@clawscale/react";
import { useState } from "react";

const positions = ["top", "right", "bottom", "left"] as const;

export default function DrawerPosition() {
  const [isOpen, setIsOpen] = useState(false);
  const [position, setPosition] = useState<(typeof positions)[number]>("right");
  return (
    <>
      {positions.map((value) => (
        <Button
          key={value}
          text={`From ${value}`}
          onClick={() => {
            setPosition(value);
            setIsOpen(true);
          }}
        />
      ))}
      <Drawer
        icon="notifications"
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        position={position}
        size={DrawerSize.SMALL}
        title="Alerts"
      >
        <div className={Classes.DRAWER_BODY}>
          <p style={{ margin: 16 }}>3 open alerts in eu-west-1. The oldest fired 42 min ago.</p>
        </div>
      </Drawer>
    </>
  );
}