#Adaptive Floating Action Button (FAB)

import AdaptiveModeDemo from "@/shared/adaptiveModeDemo";
import AddIcon from "@mui/icons-material/Add";
import { AdaptiveFab } from "adaptive-material-ui/components/fab";

export default function () {
  return (
    <AdaptiveModeDemo>
      <AdaptiveFab aria-label="add">
        <AddIcon />
      </AdaptiveFab>
    </AdaptiveModeDemo>
  );
}

import AdaptiveModeDemo from "@/shared/adaptiveModeDemo";
import { DemoList, DemoListItem } from "@/shared/demoList";
import AddIcon from "@mui/icons-material/Add";
import { AdaptiveFab } from "adaptive-material-ui/components/fab";

export default function () {
  return (
    <AdaptiveModeDemo>
      <DemoList>
        <DemoListItem title="Color">
          <AdaptiveFab aria-label="add" color="default">
            <AddIcon />
          </AdaptiveFab>
          <AdaptiveFab aria-label="add" color="error">
            <AddIcon />
          </AdaptiveFab>
          <AdaptiveFab aria-label="add" color="info">
            <AddIcon />
          </AdaptiveFab>
          <AdaptiveFab aria-label="add" color="primary">
            <AddIcon />
          </AdaptiveFab>
          <AdaptiveFab aria-label="add" color="secondary">
            <AddIcon />
          </AdaptiveFab>
          <AdaptiveFab aria-label="add" color="success">
            <AddIcon />
          </AdaptiveFab>
          <AdaptiveFab aria-label="add" color="warning">
            <AddIcon />
          </AdaptiveFab>
        </DemoListItem>
        <DemoListItem title="Size">
          <AdaptiveFab aria-label="add" size="small">
            <AddIcon />
          </AdaptiveFab>
          <AdaptiveFab aria-label="add" size="medium">
            <AddIcon />
          </AdaptiveFab>
          <AdaptiveFab aria-label="add" size="large">
            <AddIcon />
          </AdaptiveFab>
          <AdaptiveFab aria-label="add" size="x-large">
            <AddIcon />
          </AdaptiveFab>
          <AdaptiveFab aria-label="add" size="xx-large">
            <AddIcon />
          </AdaptiveFab>
        </DemoListItem>
        <DemoListItem title="Extended">
          <AdaptiveFab variant="extended" size="small">
            Small
          </AdaptiveFab>
          <AdaptiveFab variant="extended" size="medium">
            Medium
          </AdaptiveFab>
          <AdaptiveFab variant="extended" size="large">
            Large
          </AdaptiveFab>
          <AdaptiveFab variant="extended" size="x-large">
            X-Large
          </AdaptiveFab>
          <AdaptiveFab variant="extended" size="xx-large">
            XX-Large
          </AdaptiveFab>
        </DemoListItem>
        <DemoListItem title="Disabled">
          <AdaptiveFab aria-label="add" disabled>
            <AddIcon />
          </AdaptiveFab>
        </DemoListItem>
      </DemoList>
    </AdaptiveModeDemo>
  );
}