diff --git a/src/components/MainPage/SecondaryRight/ExtraComponentsMainPageAvatar.tsx b/src/components/MainPage/SecondaryRight/ExtraComponentsMainPageAvatar.tsx
index f26e9450d50fabf807528f9e6f56211bb67d33e3..34e67feb24cce2bf770fd00ac2bb6dce36880f23 100644
--- a/src/components/MainPage/SecondaryRight/ExtraComponentsMainPageAvatar.tsx
+++ b/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" }}
diff --git a/src/components/demo-components/avatar-demo/CodeDemoAvatarStyling.tsx b/src/components/demo-components/avatar-demo/CodeDemoAvatarStyling.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b252eefc5ffada9ac16381463364ebda19182e42
--- /dev/null
+++ b/src/components/demo-components/avatar-demo/CodeDemoAvatarStyling.tsx
@@ -0,0 +1,38 @@
+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;
diff --git a/src/components/demo-components/avatar-demo/DemoAvatarLabels.tsx b/src/components/demo-components/avatar-demo/DemoAvatarLabels.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b5927e6ee4644def219f8dc8d30f9898d8038d72
--- /dev/null
+++ b/src/components/demo-components/avatar-demo/DemoAvatarLabels.tsx
@@ -0,0 +1,33 @@
+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;
diff --git a/src/components/demo-components/avatar-demo/DemoAvatarLoading.tsx b/src/components/demo-components/avatar-demo/DemoAvatarLoading.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f67f3981d38f655fbac41ee7e98e9ce7ba02ee00
--- /dev/null
+++ b/src/components/demo-components/avatar-demo/DemoAvatarLoading.tsx
@@ -0,0 +1,16 @@
+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;
diff --git a/src/components/demo-components/avatar-demo/DemoAvatarStyling.tsx b/src/components/demo-components/avatar-demo/DemoAvatarStyling.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6e8225867fa77be70c66941c3592442ab8bdcd13
--- /dev/null
+++ b/src/components/demo-components/avatar-demo/DemoAvatarStyling.tsx
@@ -0,0 +1,26 @@
+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;
diff --git a/src/components/demo-components/avatar-demo/DemoAvatarVarians.tsx b/src/components/demo-components/avatar-demo/DemoAvatarVarians.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ec37b8120225114beaf5326f35260d94ce546c8a
--- /dev/null
+++ b/src/components/demo-components/avatar-demo/DemoAvatarVarians.tsx
@@ -0,0 +1,23 @@
+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;
diff --git a/src/components/demo-components/avatar-demo/DmoAvatarSmartImgFit.tsx b/src/components/demo-components/avatar-demo/DmoAvatarSmartImgFit.tsx
index c76aae7c57f3829469fb82a8abf8f8da3c2a278b..d90b41cb5e27653fb2862bc80648a187ce39bf62 100644
--- a/src/components/demo-components/avatar-demo/DmoAvatarSmartImgFit.tsx
+++ b/src/components/demo-components/avatar-demo/DmoAvatarSmartImgFit.tsx
@@ -1,5 +1,5 @@
import * as React from "react";
-import { Avatar, AvatarProps } from "../../../files-ui";
+import { Avatar } from "../../../files-ui";
interface DemoAvatarFallBackProps {}
const landscapeImage =
diff --git a/src/pages/demo/AvatarDemoPage.tsx b/src/pages/demo/AvatarDemoPage.tsx
index 61aa39e6b3788ec02a37d169d12215ed04445916..30b9316e92bcb1e86f91bff09700730b59f638c0 100644
--- a/src/pages/demo/AvatarDemoPage.tsx
+++ b/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,