123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110import React, { ReactElement } from "react";
import { Avatar } from "@react-md/avatar";
import { Chip } from "@react-md/chip";
import { SVGIconProps } from "@react-md/icon";
import { AddCircleSVGIcon, ImageSVGIcon } from "@react-md/material-icons";
import { Grid } from "@react-md/utils";

function XCircleIcon(props: SVGIconProps): ReactElement {
  return (
    <AddCircleSVGIcon
      {...props}
      style={{
        transform: "rotate(45deg)",
        WebkitTransform: "rotate(45deg)",
      }}
    />
  );
}

export default function Demo(): ReactElement {
  return (
    <Grid phoneColumns={1} columns={2} wrapOnly>
      <Chip>Chip</Chip>
      <Chip theme="outline">Chip</Chip>
      <Chip disabled>Chip</Chip>
      <Chip disabled theme="outline">
        Chip
      </Chip>
      <Chip raisable>Chip</Chip>
      <Chip raisable theme="outline">
        Chip
      </Chip>
      <Chip leftIcon={<ImageSVGIcon />}>Chip</Chip>
      <Chip leftIcon={<ImageSVGIcon />} theme="outline">
        Chip
      </Chip>
      <Chip disabled leftIcon={<ImageSVGIcon />}>
        Chip
      </Chip>
      <Chip disabled leftIcon={<ImageSVGIcon />} theme="outline">
        Chip
      </Chip>
      <Chip leftIcon={<ImageSVGIcon />} rightIcon={<XCircleIcon />}>
        Chip
      </Chip>
      <Chip
        leftIcon={<ImageSVGIcon />}
        rightIcon={<XCircleIcon />}
        theme="outline"
      >
        Chip
      </Chip>
      <Chip disabled leftIcon={<ImageSVGIcon />} rightIcon={<XCircleIcon />}>
        Chip
      </Chip>
      <Chip
        disabled
        leftIcon={<ImageSVGIcon />}
        rightIcon={<XCircleIcon />}
        theme="outline"
      >
        Chip
      </Chip>
      <Chip
        leftIcon={
          <Avatar>
            <img src="https://i.pravatar.cc/40?img=3" alt="" />
          </Avatar>
        }
        rightIcon={<XCircleIcon />}
      >
        Chip
      </Chip>
      <Chip
        leftIcon={
          <Avatar>
            <img src="https://i.pravatar.cc/40?img=3" alt="" />
          </Avatar>
        }
        rightIcon={<XCircleIcon />}
        theme="outline"
      >
        Chip
      </Chip>
      <Chip
        disabled
        leftIcon={
          <Avatar>
            <img src="https://i.pravatar.cc/40?img=3" alt="" />
          </Avatar>
        }
        rightIcon={<XCircleIcon />}
      >
        Chip
      </Chip>
      <Chip
        disabled
        leftIcon={
          <Avatar>
            <img src="https://i.pravatar.cc/40?img=3" alt="" />
          </Avatar>
        }
        rightIcon={<XCircleIcon />}
        theme="outline"
      >
        Chip
      </Chip>
    </Grid>
  );
}