[WIP][FEAT]: Add loading, styling, variants

src/components/MainPage/SecondaryRight/ExtraComponentsMainPageAvatar.tsx

@@ -63,7 +63,7 @@ const ExtraComponentsMainPageAvatar: React.FC<ExtraComponentsMainPageProps> = (
         <Avatar
           src={avatarSrc}
           onChange={handleChange}
-          isUloading={isUloading}
+          isLoading={isUloading}
           smartImgFit={"center"}
           style={{ width: "170px", height: "170px" }}
           //variant={"circle"}
@@ -71,7 +71,7 @@ const ExtraComponentsMainPageAvatar: React.FC<ExtraComponentsMainPageProps> = (
         <Avatar
           src={avatarSrc}
           onChange={handleChange}
-          isUloading={isUloading}
+          isLoading={isUloading}
           smartImgFit={"center"}
           variant={"circle"}
           style={{ width: "170px", height: "170px" }}

src/components/demo-components/avatar-demo/CodeDemoAvatarStyling.tsx

+import * as React from "react";
+import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
+
+const CodeDemoAvatarStyling = () => {
+  return (
+    <ShowDemoCode
+      codeCompleteJS={completeCodeJS}
+      codeCompleteTS={completeCodeTS}
+      codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+      codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+      codeSplittedJS={splittedCodeJS}
+      codeSplittedTS={splittedCodeTS}
+    />
+  );
+};
+export default CodeDemoAvatarStyling;
+
+const splittedCodeJS = `<Avatar
+    readOnly
+    src={"https://i.pinimg.com/564x/9a/8b/cf/9a8bcfaba81783eff9241538b00343b1.jpg"}
+    alt="Isabella"
+/>`;
+const splittedCodeTS = splittedCodeJS;
+const completeCodeJS = `import * as React from "react";
+import { Avatar } from "@files-ui/react";
+const BasicDemoAvatar = () => {
+    return (
+        <Avatar
+            readOnly
+            src={"https://i.pinimg.com/564x/9a/8b/cf/9a8bcfaba81783eff9241538b00343b1.jpg"}
+            alt="Isabella"
+        />
+    );
+};
+export default BasicDemoAvatar;
+`;
+
+const completeCodeTS = completeCodeJS;

src/components/demo-components/avatar-demo/DemoAvatarLabels.tsx

+import * as React from "react";
+import { Avatar } from "../../../files-ui";
+
+const DemoAvatarLabels = () => {
+  return (
+    <>
+      <Avatar
+        //readOnly
+        src={""}
+        alt="Isabella"
+        emptyLabel={"You can choose an image..."}
+        onChange={() => {}}
+      />
+      <Avatar
+        src={
+          "https://i.pinimg.com/564x/9a/8b/cf/9a8bcfaba81783eff9241538b00343b1.jpg"
+        }
+        alt="Isabella"
+        changeLabel={"Do you want to change this amazing picture?"}
+        onChange={() => {}}
+      />
+      <Avatar
+        src={
+          "https://i.pinimg.com/564x/9a/8b/cf/9a8bcfaba81783eff9241538b00343b1.jpg"
+        }
+        alt="Isabella"
+        loadingLabel={"You can drink a cup of coffe in the meanwhile"}
+        isLoading={true}
+      />
+    </>
+  );
+};
+export default DemoAvatarLabels;

src/components/demo-components/avatar-demo/DemoAvatarLoading.tsx

+import * as React from "react";
+import { Avatar } from "../../../files-ui";
+
+const DemoAvatarLoading = () => {
+  return (
+    <Avatar
+      readOnly
+      src={
+        "https://i.pinimg.com/564x/9a/8b/cf/9a8bcfaba81783eff9241538b00343b1.jpg"
+      }
+      alt="Isabella"
+      isLoading={true}
+    />
+  );
+};
+export default DemoAvatarLoading;

src/components/demo-components/avatar-demo/DemoAvatarStyling.tsx

+import * as React from "react";
+import { Avatar } from "../../../files-ui";
+
+const DemoAvatarStyling = () => {
+  return (
+    <>
+      <Avatar
+        readOnly
+        src={
+          "https://i.pinimg.com/564x/9a/8b/cf/9a8bcfaba81783eff9241538b00343b1.jpg"
+        }
+        alt="Isabella"
+        style={{ width: "100px", height: "100px" }}
+      />
+      <Avatar
+        readOnly
+        src={
+          "https://i.pinimg.com/564x/9a/8b/cf/9a8bcfaba81783eff9241538b00343b1.jpg"
+        }
+        alt="Isabella"
+        borderRadius={"50px"}
+      />
+    </>
+  );
+};
+export default DemoAvatarStyling;

src/components/demo-components/avatar-demo/DemoAvatarVarians.tsx

+import * as React from "react";
+import { Avatar } from "../../../files-ui";
+
+const DemoAvatarVariants = () => {
+  return (
+    <>
+      <Avatar
+        readOnly
+        src={
+          "https://i.pinimg.com/564x/9a/8b/cf/9a8bcfaba81783eff9241538b00343b1.jpg"
+        }
+      />
+      <Avatar
+        readOnly
+        src={
+          "https://i.pinimg.com/564x/9a/8b/cf/9a8bcfaba81783eff9241538b00343b1.jpg"
+        }
+        variant="circle"
+      />
+    </>
+  );
+};
+export default DemoAvatarVariants;

src/components/demo-components/avatar-demo/DmoAvatarSmartImgFit.tsx

 import * as React from "react";
-import { Avatar, AvatarProps } from "../../../files-ui";
+import { Avatar } from "../../../files-ui";
 interface DemoAvatarFallBackProps {}
 
 const landscapeImage =

src/pages/demo/AvatarDemoPage.tsx

@@ -18,6 +18,11 @@ import CodeDemoAvatarFallBack from "../../components/demo-components/avatar-demo
 import AnchorToTab from "../../components/util-components/AnchorToTab";
 import DemoAvatarSmartImgFit from "../../components/demo-components/avatar-demo/DmoAvatarSmartImgFit";
 import CodeDemoAvatarSmartFit from "../../components/demo-components/avatar-demo/CodeDemoAvatarSmartFit";
+import DemoAvatarStyling from "../../components/demo-components/avatar-demo/DemoAvatarStyling";
+import CodeDemoAvatarStyling from "../../components/demo-components/avatar-demo/CodeDemoAvatarStyling";
+import DemoAvatarLabels from "../../components/demo-components/avatar-demo/DemoAvatarLabels";
+import DemoAvatarVariants from "../../components/demo-components/avatar-demo/DemoAvatarVarians";
+import DemoAvatarLoading from "../../components/demo-components/avatar-demo/DemoAvatarLoading";
 
 interface AvatarDemoPageProps {}
 const AvatarDemoPage: React.FC<AvatarDemoPageProps> = (
@@ -121,7 +126,6 @@ const AvatarDemoPage: React.FC<AvatarDemoPageProps> = (
             variant="outlined"
             style={{
               padding: "25px",
-              //padding:"auto",
               display: "flex",
               width: "100%",
               justifyContent: "space-evenly",
@@ -135,6 +139,110 @@ const AvatarDemoPage: React.FC<AvatarDemoPageProps> = (
           <CodeDemoAvatarSmartFit />
         </section>
 
+        <section id="loading">
+          <SubTitle content="Loading" />
+          <DescParagraph>
+            You can use the prop <TypeHighlight>isLoading</TypeHighlight> when
+            you want to communicate that something is loading.
+          </DescParagraph>
+          <Paper
+            variant="outlined"
+            style={{
+              padding: "25px",
+              display: "flex",
+              width: "100%",
+              justifyContent: "center",
+            }}
+          >
+            <DemoAvatarLoading />
+          </Paper>
+          <CodeDemoAvatarBasic />
+        </section>
+
+        <section id="variants">
+          <SubTitle content="Variants" />
+          <DescParagraph>
+            Avatar component comes in 2 variants: "circle" and "square".
+          </DescParagraph>
+          <Paper
+            variant="outlined"
+            style={{
+              padding: "25px",
+              display: "flex",
+              width: "100%",
+              justifyContent: "space-evenly",
+              flexWrap: "wrap",
+              gap: "50px",
+            }}
+          >
+            <DemoAvatarVariants />
+          </Paper>
+          <CodeDemoAvatarBasic />
+        </section>
+
+        <section id="styling">
+          <SubTitle content="Styling" />
+          <DescParagraph>
+            You can define the <TypeHighlight>style</TypeHighlight> prop for
+            changing the styles applied to the main container such us the{" "}
+            <TypeHighlight>width</TypeHighlight> o the{" "}
+            <TypeHighlight>height</TypeHighlight>.
+            <br />
+            Also you can use directly the prop{" "}
+            <TypeHighlight>borderRadius</TypeHighlight> to specify how rounde
+            you preffer the borders.
+          </DescParagraph>
+          <Paper
+            variant="outlined"
+            style={{
+              padding: "25px",
+              display: "flex",
+              width: "100%",
+              justifyContent: "space-evenly",
+              flexWrap: "wrap",
+              gap: "50px",
+            }}
+          >
+            <DemoAvatarStyling />
+          </Paper>
+          <CodeDemoAvatarStyling />
+        </section>
+
+        <section id="labels">
+          <SubTitle content="Labels" />
+          <DescParagraph>
+            You can specify the content of the texts:
+            <ul>
+              <li>
+                <CodeHighlight>emptyLabel</CodeHighlight>: when the source is
+                not set.
+              </li>
+              <li>
+                <CodeHighlight>changeLabel</CodeHighlight>: when there i a valid
+                source set.
+              </li>
+              <li>
+                <CodeHighlight>uploadingLabel</CodeHighlight>: when you want to
+                communicate that something is loading.
+              </li>
+            </ul>
+          </DescParagraph>
+          <Paper
+            variant="outlined"
+            style={{
+              padding: "25px",
+              display: "flex",
+              width: "100%",
+              justifyContent: "space-evenly",
+              flexWrap: "wrap",
+              gap: "50px",
+            }}
+          >
+            <DemoAvatarLabels />
+          </Paper>
+          <CodeDemoAvatarStyling />
+        </section>
+
         <section id="api">
           <SubTitle content="API" />
           <DescParagraph>
@@ -180,8 +288,8 @@ const rightMenuItems = [
   },
   {
     id: 5,
-    label: "Uploading & loading",
-    referTo: "/components/avatar#uploading",
+    label: "Loading",
+    referTo: "/components/avatar#loading",
   },
   {
     id: 6,