[WIP][FEAT]: Add smart image fit and API section to Avatar demo page

Author: JinSSJ3

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

@@ -0,0 +1,44 @@
+import * as React from "react";
+import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
+interface CodeDemoAvatarPickFileProps {}
+const CodeDemoAvatarSmartFit: 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 CodeDemoAvatarSmartFit;
+
+const splittedCodeJS = ``;
+const splittedCodeTS = splittedCodeJS;
+const completeCodeJS = `import * as React from "react";
+import { Avatar } from "@files-ui/react";
+const landscapeImage =
+  "https://64.media.tumblr.com/078a5af7a51d438b1c1ee5bd77f1b1e5/tumblr_p81qv7KIPa1rvufhzo3_r1_400.gif";
+
+const portraitImage =
+  "https://i.pinimg.com/originals/b6/1d/6a/b61d6a1079d8e54932dcde9dc260dd2e.gif";
+
+export default function App = () => {
+    return (
+        <>
+          <Avatar src={landscapeImage} readOnly smartImgFit={false} />
+          <Avatar src={landscapeImage} readOnly smartImgFit={"orientation"} />
+          <Avatar src={landscapeImage} readOnly smartImgFit={"center"} />
+    
+          <Avatar src={portraitImage} readOnly smartImgFit={false} />
+          <Avatar src={portraitImage} readOnly smartImgFit={"orientation"} />
+          <Avatar src={portraitImage} readOnly smartImgFit={"center"} />
+        </>
+      );
+};`;
+
+const completeCodeTS = completeCodeJS;

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

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { Avatar, AvatarProps } from "../../../files-ui";
+interface DemoAvatarFallBackProps {}
+
+const landscapeImage =
+  "https://64.media.tumblr.com/078a5af7a51d438b1c1ee5bd77f1b1e5/tumblr_p81qv7KIPa1rvufhzo3_r1_400.gif";
+
+const portraitImage =
+  "https://i.pinimg.com/originals/b6/1d/6a/b61d6a1079d8e54932dcde9dc260dd2e.gif";
+
+const DemoAvatarSmartImgFit: React.FC<DemoAvatarFallBackProps> = (
+  props: DemoAvatarFallBackProps
+) => {
+  return (
+    <>
+      <Avatar src={landscapeImage} readOnly smartImgFit={false} />
+      <Avatar src={landscapeImage} readOnly smartImgFit={"orientation"} />
+      <Avatar src={landscapeImage} readOnly smartImgFit={"center"} />
+
+      <Avatar src={portraitImage} readOnly smartImgFit={false} />
+      <Avatar src={portraitImage} readOnly smartImgFit={"orientation"} />
+      <Avatar src={portraitImage} readOnly smartImgFit={"center"} />
+    </>
+  );
+};
+export default DemoAvatarSmartImgFit;

src/pages/demo/AvatarDemoPage.tsx

@@ -15,6 +15,9 @@ import DemoAvatarPickFile from "../../components/demo-components/avatar-demo/Dem
 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";
+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";
 
 interface AvatarDemoPageProps {}
 const AvatarDemoPage: React.FC<AvatarDemoPageProps> = (
@@ -92,12 +95,58 @@ const AvatarDemoPage: React.FC<AvatarDemoPageProps> = (
               display: "flex",
               width: "100%",
               justifyContent: "space-evenly",
+              flexWrap: "wrap",
+              gap: "5px",
             }}
           >
             <DemoAvatarFallBack />
           </Paper>
           <CodeDemoAvatarFallBack />
         </section>
+
+        <section id="smart-image-fit">
+          <SubTitle content="Smart image fit" />
+          <DescParagraph>
+            <CodeHighlight>Avatar</CodeHighlight> with
+            <TypeHighlight>smartImgFit</TypeHighlight> prop will display image
+            according to its heigh and width.
+            <br />
+            Image with height greater than its width has a "portrait"
+            orientation. Otherwise it has a "landscape" orientation.
+            <br />
+            In Avatar component the default value is "center".
+          </DescParagraph>
+
+          <Paper
+            variant="outlined"
+            style={{
+              padding: "25px",
+              //padding:"auto",
+              display: "flex",
+              width: "100%",
+              justifyContent: "space-evenly",
+              flexWrap: "wrap",
+              gap: "50px",
+            }}
+          >
+            <DemoAvatarSmartImgFit />
+          </Paper>
+
+          <CodeDemoAvatarSmartFit />
+        </section>
+
+        <section id="api">
+          <SubTitle content="API" />
+          <DescParagraph>
+            See the documentation below for a complete reference to all of the
+            props available to the components mentioned here.
+          </DescParagraph>
+          <ul>
+            <li>
+              <AnchorToTab href="/api/avatar">{"<Avatar/>"}</AnchorToTab>
+            </li>
+          </ul>
+        </section>
       </MainContentContainer>
 
       <RightMenuContainer>
@@ -127,7 +176,7 @@ const rightMenuItems = [
   {
     id: 4,
     label: "Smart image fit",
-    referTo: "/components/filemosaic#smart-image-fit",
+    referTo: "/components/avatar#smart-image-fit",
   },
   {
     id: 5,
@@ -152,6 +201,6 @@ const rightMenuItems = [
   {
     id: 9,
     label: "API",
-    referTo: "/components/filecard#api",
+    referTo: "/components/avatar#api",
   },
 ];