002 NextUI Avatar

import { Grid, Avatar } from '@nextui-org/react';
export default function App() {
    return (
      <Grid.Container gap={2}>
        <Grid>
          <Avatar 
            squared 
            src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
        </Grid>
        <Grid>
          <Avatar 
            squared 
            text="Junior" />
        </Grid>
        <Grid>
          <Avatar 
            squared 
            src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
        </Grid>
        <Grid>
          <Avatar 
            squared 
            text="Jane" />
        </Grid>
        <Grid>
          <Avatar 
            squared 
            src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
        </Grid>
        <Grid>
          <Avatar 
            squared 
            text="Joe" />
        </Grid>
        <Grid>
        <Avatar text="JR" size="xs" />
      </Grid>
      <Grid>
        <Avatar
          src="https://i.pravatar.cc/150?u=a042581f4e29026024d"
          size="sm"
        />
      </Grid>
      <Grid>
        <Avatar text="Joe" size="md" />
      </Grid>
      <Grid>
        <Avatar
          src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
          size="lg"
        />
      </Grid>
      <Grid>
        <Avatar text="John" size="xl" />
      </Grid>
      <Grid>
        <Avatar
          src="https://i.pravatar.cc/150?u=a04258114e29026702d"
          css={{ size: "$20" }}
        />
      </Grid>
      </Grid.Container>
    );
  }