#Adaptive Radio

import AdaptiveModeDemo from "@/shared/adaptiveModeDemo";
import FormControlLabel from "@mui/material/FormControlLabel";
import RadioGroup from "@mui/material/RadioGroup";
import { AdaptiveRadio } from "adaptive-material-ui/components/radio";

export default function () {
  return (
    <AdaptiveModeDemo>
      <RadioGroup defaultValue="1" row>
        <FormControlLabel control={<AdaptiveRadio />} label="One" value="1" />
        <FormControlLabel control={<AdaptiveRadio />} label="Two" value="2" />
      </RadioGroup>
    </AdaptiveModeDemo>
  );
}

import AdaptiveModeDemo from "@/shared/adaptiveModeDemo";
import { DemoList, DemoListItem } from "@/shared/demoList";
import RadioGroup from "@mui/material/RadioGroup";
import { AdaptiveRadio } from "adaptive-material-ui/components/radio";
import { useState } from "react";

// Demo functionality to show the checked state, don't try this at home
export default function () {
  const [count, setCount] = useState(0);
  const isChecked = count % 2 === 0;

  function onClick() {
    setCount((v) => v + 1);
  }

  return (
    <AdaptiveModeDemo>
      <DemoList>
        <DemoListItem title="Color">
          <AdaptiveRadio
            checked={isChecked}
            color="primary"
            onClick={onClick}
          />
          <AdaptiveRadio
            checked={isChecked}
            color="secondary"
            onClick={onClick}
          />
          <AdaptiveRadio checked={isChecked} color="error" onClick={onClick} />
          <AdaptiveRadio checked={isChecked} color="info" onClick={onClick} />
          <AdaptiveRadio
            checked={isChecked}
            color="success"
            onClick={onClick}
          />
          <AdaptiveRadio
            checked={isChecked}
            color="warning"
            onClick={onClick}
          />
          <AdaptiveRadio
            checked={isChecked}
            color="default"
            onClick={onClick}
          />
        </DemoListItem>
        <DemoListItem title="Size">
          <AdaptiveRadio checked={isChecked} onClick={onClick} size="small" />
          <AdaptiveRadio checked={isChecked} onClick={onClick} size="medium" />
          <AdaptiveRadio
            checked={isChecked}
            onClick={onClick}
            sx={{ "& .MuiSvgIcon-root": { fontSize: 28 } }}
          />
        </DemoListItem>
        <DemoListItem title="Disabled">
          <RadioGroup defaultValue="1" row>
            <AdaptiveRadio disabled value="1" />
            <AdaptiveRadio disabled value="2" />
          </RadioGroup>
        </DemoListItem>
      </DemoList>
    </AdaptiveModeDemo>
  );
}