[WIP][FEAT]: Add Avatra fallback demo and come section

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

 import * as React from "react";
 import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
 
-const CodeDemoAvatarBasic = () =>{
-    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}
-        />
-      );
-}
+const CodeDemoAvatarBasic = () => {
+  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 CodeDemoAvatarBasic;
 
-
-
 const splittedCodeJS = `<Avatar
     readOnly
     src={"https://i.pinimg.com/564x/9a/8b/cf/9a8bcfaba81783eff9241538b00343b1.jpg"}
     alt="Isabella"
 />`;
-const completeCodeTS = splittedCodeJS;
+const splittedCodeTS = splittedCodeJS;
 const completeCodeJS = `import * as React from "react";
 import { Avatar } from "@files-ui/react";
 const BasicDemoAvatar = () => {
@@ -37,4 +35,4 @@ const BasicDemoAvatar = () => {
 export default BasicDemoAvatar;
 `;
 
-const splittedCodeTS =completeCodeJS;
+const completeCodeTS = completeCodeJS;

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

+import * as React from "react";
+import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
+interface CodeDemoAvatarPickFileProps {}
+const CodeDemoAvatarFallBack: React.FC<CodeDemoAvatarPickFileProps> = (
+  props: CodeDemoAvatarPickFileProps
+) => {
+  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 CodeDemoAvatarFallBack;
+
+const splittedCodeJS = `<Avatar
+    src={imageSource}
+    readOnly
+    onError={() => setImageSource(fallBackImage)}
+    alt="Avatar"
+/>
+<Avatar
+    src={imageSource2}
+    onError={() => setImageSource2(fallBackImage)}
+    onChange={(imgSource) => setImageSource2(imgSource)}
+    accept=".pdf, .png"
+    alt="Avatar"
+/>`;
+const splittedCodeTS = splittedCodeJS;
+const completeCodeJS = `import * as React from "react";
+import { Avatar } from "@files-ui/react";
+const fallBackImage =
+  "https://static.vecteezy.com/system/resources/thumbnails/009/292/244/small/default-avatar-icon-of-social-media-user-vector.jpg";
+
+  export default function App = () => {
+    const [imageSource, setImageSource] = React.useState("broken/url");
+    const [imageSource2, setImageSource2] = React.useState(undefined);
+    return (
+        <>
+          <Avatar
+            src={imageSource}
+            readOnly
+            onError={() => setImageSource(fallBackImage)}
+            alt="Avatar"
+          />
+          <Avatar
+            src={imageSource2}
+            onError={() => setImageSource2(fallBackImage)}
+            onChange={(imgSource) => setImageSource2(imgSource)}
+            accept=".pdf, .png"
+            alt="Avatar"
+          />
+        </>
+      );
+};`;
+
+const completeCodeTS = `import * as React from "react";
+import { Avatar, AvatarProps } from "@files-ui/react";
+const fallBackImage =
+  "https://static.vecteezy.com/system/resources/thumbnails/009/292/244/small/default-avatar-icon-of-social-media-user-vector.jpg";
+
+  export default function App = () => {
+    const [imageSource, setImageSource] = React.useState<
+        AvatarProps["src"] | undefined
+    >("broken/url");
+    const [imageSource2, setImageSource2] = React.useState<
+        AvatarProps["src"] | undefined
+    >(undefined);
+    return (
+        <>
+          <Avatar
+            src={imageSource}
+            readOnly
+            onError={() => setImageSource(fallBackImage)}
+            alt="Avatar"
+          />
+          <Avatar
+            src={imageSource2}
+            onError={() => setImageSource2(fallBackImage)}
+            onChange={(imgSource) => setImageSource2(imgSource)}
+            accept=".pdf, .png"
+            alt="Avatar"
+          />
+        </>
+      );
+};`;

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

+import * as React from "react";
+import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
+interface CodeDemoAvatarPickFileProps{}
+const CodeDemoAvatarPickFile:React.FC<CodeDemoAvatarPickFileProps> = (props:CodeDemoAvatarPickFileProps) =>{
+    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 CodeDemoAvatarPickFile;
+
+
+const splittedCodeJS = `<Avatar src={imageSource} alt="Avatar" onChange={handleChangeSource} />`;
+const splittedCodeTS = splittedCodeJS;
+const completeCodeJS = `import * as React from "react";
+import { Avatar } from "@files-ui/react";
+export default function App = () => {
+  const [imageSource, setImageSource] = React.useState("https://i.pinimg.com/564x/9a/8b/cf/9a8bcfaba81783eff9241538b00343b1.jpg");
+  const handleChangeSource = (selectedFile) => {
+    setImageSource(selectedFile);
+  };
+  return (
+    <Avatar src={imageSource} alt="Avatar" onChange={handleChangeSource} />
+  );
+};`;
+
+const completeCodeTS =`import * as React from "react";
+import { Avatar, AvatarProps } from "@files-ui/react";
+export default function App = () => {
+  const [imageSource, setImageSource] = React.useState<
+    AvatarProps["src"] | undefined
+  >("https://i.pinimg.com/564x/9a/8b/cf/9a8bcfaba81783eff9241538b00343b1.jpg");
+
+  const handleChangeSource = (selectedFile: File) => {
+    setImageSource(selectedFile);
+  };
+  return (
+    <Avatar src={imageSource} alt="Avatar" onChange={handleChangeSource} />
+  );
+};`;

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

+import * as React from "react";
+import { Avatar, AvatarProps } from "../../../files-ui";
+interface DemoAvatarFallBackProps {}
+const fallBackImage =
+  "https://static.vecteezy.com/system/resources/thumbnails/009/292/244/small/default-avatar-icon-of-social-media-user-vector.jpg";
+const DemoAvatarFallBack: React.FC<DemoAvatarFallBackProps> = (
+  props: DemoAvatarFallBackProps
+) => {
+  const [imageSource, setImageSource] = React.useState<
+    AvatarProps["src"] | undefined
+  >("broken/url");
+  const [imageSource2, setImageSource2] = React.useState<
+    AvatarProps["src"] | undefined
+  >(undefined);
+
+  return (
+    <>
+      <Avatar
+        src={imageSource}
+        readOnly
+        onError={() => setImageSource(fallBackImage)}
+        alt="Avatar"
+      />
+      <Avatar
+        src={imageSource2}
+        onError={() => setImageSource2(fallBackImage)}
+        onChange={(imgSource) => setImageSource2(imgSource)}
+        accept=".pdf, .png"
+        alt="Avatar"
+      />
+    </>
+  );
+};
+export default DemoAvatarFallBack;

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

+import * as React from "react";
+import { Avatar, AvatarProps } from "../../../files-ui";
+interface DemoAvatarPickFileProps {}
+const DemoAvatarPickFile: React.FC<DemoAvatarPickFileProps> = (
+  props: DemoAvatarPickFileProps
+) => {
+  const [imageSource, setImageSource] = React.useState<
+    AvatarProps["src"] | undefined
+  >("https://i.pinimg.com/564x/9a/8b/cf/9a8bcfaba81783eff9241538b00343b1.jpg");
+
+  const handleChangeSource = (selectedFile: File) => {
+    setImageSource(selectedFile);
+  };
+  return (
+    <Avatar src={imageSource} alt="Avatar" onChange={handleChangeSource} />
+  );
+};
+export default DemoAvatarPickFile;

src/pages/demo/AvatarDemoPage.tsx

@@ -10,6 +10,103 @@ import RightMenuContainer from "../../components/layout-pages/RightMenuContainer
 import MainTitle from "../../components/main-title/MainTitle";
 import MainParagraph from "../../components/paragraph-main/MainParagraph";
 import RightMenu from "../../components/RightMenu/RightMenu";
+import TypeHighlight from "../../components/typeHighlight/TypeHighlight";
+import DemoAvatarPickFile from "../../components/demo-components/avatar-demo/DemoAvatarPickFile";
+import CodeDemoAvatarPickFile from "../../components/demo-components/avatar-demo/CodeDemoAvatarPickFile";
+import DemoAvatarFallBack from "../../components/demo-components/avatar-demo/DemoAvatarFallBack";
+import CodeDemoAvatarFallBack from "../../components/demo-components/avatar-demo/CodeDemoAvatarFallBack";
+
+interface AvatarDemoPageProps {}
+const AvatarDemoPage: React.FC<AvatarDemoPageProps> = (
+  props: AvatarDemoPageProps
+) => {
+  return (
+    <React.Fragment>
+      <MainContentContainer>
+        <MainTitle>Avatar</MainTitle>
+
+        <MainParagraph>
+          This "avatar" component can be used to just display an image or even
+          can be a special file <CodeHighlight>input</CodeHighlight> designed
+          for setting an image
+          {/* by either dragging and dropping files there or  */}
+          by picking file from a file dialog.
+        </MainParagraph>
+
+        <section id="basic-avatar">
+          <SubTitle content="Basic Avatar (read only)" />
+          <DescParagraph>
+            The most basic use is to set a fixed image from Url.
+          </DescParagraph>
+          <Paper
+            variant="outlined"
+            style={{
+              padding: "25px",
+              display: "flex",
+              width: "100%",
+              justifyContent: "center",
+            }}
+          >
+            <BasicDemoAvatar />
+          </Paper>
+          <CodeDemoAvatarBasic />
+        </section>
+
+        <section id="picking-image-file">
+          <SubTitle content="Picking an image File" />
+          <DescParagraph>
+            The <CodeHighlight>{"<Avatar/>"}</CodeHighlight> component supports
+            both a <TypeHighlight>string</TypeHighlight> url and a{" "}
+            <TypeHighlight>File</TypeHighlight> object as the source.
+          </DescParagraph>
+          <Paper
+            variant="outlined"
+            style={{
+              padding: "25px",
+              display: "flex",
+              width: "100%",
+              justifyContent: "center",
+            }}
+          >
+            <DemoAvatarPickFile />
+          </Paper>
+          <CodeDemoAvatarPickFile />
+        </section>
+
+        <section id="fallback">
+          <SubTitle content="Fallback (error on load the image)" />
+          <DescParagraph>
+            If there is an error loading the avatar image, the{" "}
+            <CodeHighlight>{"<Avatar/>"}</CodeHighlight> component provides a
+            way to fall back by defining the{" "}
+            <TypeHighlight>onError</TypeHighlight> prop. This could happen if:
+            <ul>
+              <li>The image url is broken, or</li>
+              <li>The image file selected is not an image</li>
+            </ul>
+          </DescParagraph>
+          <Paper
+            variant="outlined"
+            style={{
+              padding: "25px",
+              display: "flex",
+              width: "100%",
+              justifyContent: "space-evenly",
+            }}
+          >
+            <DemoAvatarFallBack />
+          </Paper>
+          <CodeDemoAvatarFallBack />
+        </section>
+      </MainContentContainer>
+
+      <RightMenuContainer>
+        <RightMenu width="240px" items={rightMenuItems} />
+      </RightMenuContainer>
+    </React.Fragment>
+  );
+};
+export default AvatarDemoPage;
 
 const rightMenuItems = [
   {
@@ -58,48 +155,3 @@ const rightMenuItems = [
     referTo: "/components/filecard#api",
   },
 ];
-
-interface AvatarDemoPageProps {}
-const AvatarDemoPage: React.FC<AvatarDemoPageProps> = (
-  props: AvatarDemoPageProps
-) => {
-  return (
-    <React.Fragment>
-      <MainContentContainer>
-        <MainTitle>Avatar</MainTitle>
-
-        <MainParagraph>
-          This "avatar" component can be used tu just display an image or even
-          can be a special file <CodeHighlight>input</CodeHighlight> designed
-          for setting an image
-          {/* by either dragging and dropping files there or  */}
-          by picking a fils from a file dialog.
-        </MainParagraph>
-
-        <section id="basic-avatar">
-          <SubTitle content="Basic Avatar (read only)" />
-          <DescParagraph>
-            The most basic use is to set a fixed image from Url.
-          </DescParagraph>
-          <Paper
-            variant="outlined"
-            style={{
-              padding: "25px",
-              display: "flex",
-              width: "100%",
-              justifyContent: "center",
-            }}
-          >
-            <BasicDemoAvatar />
-          </Paper>
-          <CodeDemoAvatarBasic />
-        </section>
-      </MainContentContainer>
-
-      <RightMenuContainer>
-        <RightMenu width="240px" items={rightMenuItems} />
-      </RightMenuContainer>
-    </React.Fragment>
-  );
-};
-export default AvatarDemoPage;