#Adaptive Checkbox

import AdaptiveModeDemo from "@/shared/adaptiveModeDemo";
import { AdaptiveCheckbox } from "adaptive-material-ui/components/checkbox";

export default function () {
  return (
    <AdaptiveModeDemo>
      <AdaptiveCheckbox defaultChecked />
    </AdaptiveModeDemo>
  );
}

import AdaptiveModeDemo from "@/shared/adaptiveModeDemo";
import { DemoList, DemoListItem } from "@/shared/demoList";
import { AdaptiveCheckbox } from "adaptive-material-ui/components/checkbox";
import { useState } from "react";

export default function () {
  const [count, setCount] = useState(1);

  return (
    <AdaptiveModeDemo>
      <DemoList>
        <DemoListItem title="Color">
          <AdaptiveCheckbox defaultChecked color="primary" />
          <AdaptiveCheckbox defaultChecked color="secondary" />
          <AdaptiveCheckbox defaultChecked color="error" />
          <AdaptiveCheckbox defaultChecked color="info" />
          <AdaptiveCheckbox defaultChecked color="success" />
          <AdaptiveCheckbox defaultChecked color="warning" />
          <AdaptiveCheckbox defaultChecked color="default" />
        </DemoListItem>
        <DemoListItem title="Size">
          <AdaptiveCheckbox defaultChecked size="small" />
          <AdaptiveCheckbox defaultChecked size="medium" />
          <AdaptiveCheckbox defaultChecked size="large" />
          <AdaptiveCheckbox
            defaultChecked
            sx={{ "& .MuiSvgIcon-root": { fontSize: 28 } }}
          />
        </DemoListItem>
        <DemoListItem title="Indeterminate">
          <AdaptiveCheckbox
            checked={count === 0}
            indeterminate={count === 1}
            onChange={() => setCount((v) => (v >= 2 ? 0 : v + 1))}
            size="small"
          />
          <AdaptiveCheckbox
            checked={count === 0}
            indeterminate={count === 1}
            onChange={() => setCount((v) => (v >= 2 ? 0 : v + 1))}
            size="medium"
          />
          <AdaptiveCheckbox
            checked={count === 0}
            indeterminate={count === 1}
            onChange={() => setCount((v) => (v >= 2 ? 0 : v + 1))}
            size="large"
          />
        </DemoListItem>
        <DemoListItem title="Disabled">
          <AdaptiveCheckbox defaultChecked disabled />
          <AdaptiveCheckbox disabled />
        </DemoListItem>
      </DemoList>
    </AdaptiveModeDemo>
  );
}