Skip to content

Commit 8ee9a9f

Browse files
JinSSJ3JinSSJ3
committed
[FEAT][MVP]: Add Avatar Demo page and componenbt
1 parent cfcc69b commit 8ee9a9f

16 files changed

+279
-154
lines changed

‎src/components/demo-components/avatar-demo/BasicDemoAvatar.tsx‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,9 @@
11
import * as React from "react";
22
import { Avatar } from "../../../files-ui";
3+
const imageSrc =
4+
"https://i.pinimg.com/564x/9a/8b/cf/9a8bcfaba81783eff9241538b00343b1.jpg";
35

46
const BasicDemoAvatar = () => {
5-
return (
6-
<Avatar
7-
readOnly
8-
src={
9-
"https://i.pinimg.com/564x/9a/8b/cf/9a8bcfaba81783eff9241538b00343b1.jpg"
10-
}
11-
alt="Isabella"
12-
/>
13-
);
7+
return <Avatar readOnly src={imageSrc} alt="Isabella" />;
148
};
159
export default BasicDemoAvatar;

‎src/components/demo-components/avatar-demo/CodeAvatarVariant.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import * as React from "react";
2+
import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
3+
interface CodeDemoAvatarPickFileProps {}
4+
const CodeDemoAvatarVariant: React.FC<CodeDemoAvatarPickFileProps> = (
5+
props: CodeDemoAvatarPickFileProps
6+
) => {
7+
return (
8+
<ShowDemoCode
9+
codeCompleteJS={completeCodeJS}
10+
codeCompleteTS={completeCodeTS}
11+
codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
12+
codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
13+
codeSplittedJS={splittedCodeJS}
14+
codeSplittedTS={splittedCodeTS}
15+
/>
16+
);
17+
};
18+
export default CodeDemoAvatarVariant;
19+
20+
const splittedCodeJS = `<Avatar src={imageSrc} readOnly />
21+
<Avatar src={imageSrc} variant="circle" readOnly />`;
22+
23+
const splittedCodeTS = splittedCodeJS;
24+
const completeCodeJS = `import * as React from "react";
25+
import { Avatar } from "@files-ui/react";
26+
const imageSrc =
27+
"https://i.pinimg.com/564x/9a/8b/cf/9a8bcfaba81783eff9241538b00343b1.jpg";
28+
29+
export default function DemoAvatarVariants = () => {
30+
return (
31+
<>
32+
<Avatar src={imageSrc} readOnly />
33+
<Avatar src={imageSrc} variant="circle" readOnly />
34+
</>
35+
);
36+
};`;
37+
38+
const completeCodeTS = completeCodeJS;

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

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -16,23 +16,20 @@ const CodeDemoAvatarBasic = () => {
1616
export default CodeDemoAvatarBasic;
1717

1818
const splittedCodeJS = `<Avatar
19-
readOnly
20-
src={"https://i.pinimg.com/564x/9a/8b/cf/9a8bcfaba81783eff9241538b00343b1.jpg"}
21-
alt="Isabella"
19+
readOnly
20+
src={"https://i.pinimg.com/564x/9a/8b/cf/9a8bcfaba81783eff9241538b00343b1.jpg"}
21+
alt="Isabella"
2222
/>`;
2323
const splittedCodeTS = splittedCodeJS;
2424
const completeCodeJS = `import * as React from "react";
2525
import { Avatar } from "@files-ui/react";
26+
27+
const imageSrc =
28+
"https://i.pinimg.com/564x/9a/8b/cf/9a8bcfaba81783eff9241538b00343b1.jpg";
29+
2630
const BasicDemoAvatar = () => {
27-
return (
28-
<Avatar
29-
readOnly
30-
src={"https://i.pinimg.com/564x/9a/8b/cf/9a8bcfaba81783eff9241538b00343b1.jpg"}
31-
alt="Isabella"
32-
/>
33-
);
31+
return <Avatar readOnly src={imageSrc} alt="Isabella" />;
3432
};
35-
export default BasicDemoAvatar;
36-
`;
33+
export default BasicDemoAvatar;`;
3734

3835
const completeCodeTS = completeCodeJS;

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

Lines changed: 53 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -18,73 +18,73 @@ const CodeDemoAvatarFallBack: React.FC<CodeDemoAvatarPickFileProps> = (
1818
export default CodeDemoAvatarFallBack;
1919

2020
const splittedCodeJS = `<Avatar
21-
src={imageSource}
22-
readOnly
23-
onError={() => setImageSource(fallBackImage)}
24-
alt="Avatar"
21+
src={imageSource}
22+
readOnly
23+
onError={() => setImageSource(fallBackImage)}
24+
alt="Avatar"
2525
/>
2626
<Avatar
27-
src={imageSource2}
28-
onError={() => setImageSource2(fallBackImage)}
29-
onChange={(imgSource) => setImageSource2(imgSource)}
30-
accept=".pdf, .png"
31-
alt="Avatar"
27+
src={imageSource2}
28+
onError={() => setImageSource2(fallBackImage)}
29+
onChange={(imgSource) => setImageSource2(imgSource)}
30+
accept=".pdf, .png"
31+
alt="Avatar2"
3232
/>`;
3333
const splittedCodeTS = splittedCodeJS;
3434
const completeCodeJS = `import * as React from "react";
3535
import { Avatar } from "@files-ui/react";
36+
3637
const fallBackImage =
3738
"https://static.vecteezy.com/system/resources/thumbnails/009/292/244/small/default-avatar-icon-of-social-media-user-vector.jpg";
3839
39-
export default function App = () => {
40-
const [imageSource, setImageSource] = React.useState("broken/url");
41-
const [imageSource2, setImageSource2] = React.useState(undefined);
42-
return (
43-
<>
44-
<Avatar
45-
src={imageSource}
46-
readOnly
47-
onError={() => setImageSource(fallBackImage)}
48-
alt="Avatar"
49-
/>
50-
<Avatar
51-
src={imageSource2}
52-
onError={() => setImageSource2(fallBackImage)}
53-
onChange={(imgSource) => setImageSource2(imgSource)}
54-
accept=".pdf, .png"
55-
alt="Avatar"
56-
/>
57-
</>
58-
);
40+
export default function DemoAvatarFallBack = () => {
41+
const [imageSource, setImageSource] = React.useState("broken/url");
42+
const [imageSource2, setImageSource2] = React.useState(undefined);
43+
return (
44+
<>
45+
<Avatar
46+
src={imageSource}
47+
readOnly
48+
onError={() => setImageSource(fallBackImage)}
49+
alt="Avatar"
50+
/>
51+
<Avatar
52+
src={imageSource2}
53+
onError={() => setImageSource2(fallBackImage)}
54+
onChange={(imgSource) => setImageSource2(imgSource)}
55+
accept=".pdf, .png"
56+
alt="Avatar2"
57+
/>
58+
</>
59+
);
5960
};`;
6061

6162
const completeCodeTS = `import * as React from "react";
6263
import { Avatar, AvatarProps } from "@files-ui/react";
64+
6365
const fallBackImage =
6466
"https://static.vecteezy.com/system/resources/thumbnails/009/292/244/small/default-avatar-icon-of-social-media-user-vector.jpg";
6567
66-
export default function App = () => {
67-
const [imageSource, setImageSource] = React.useState<
68-
AvatarProps["src"] | undefined
69-
>("broken/url");
70-
const [imageSource2, setImageSource2] = React.useState<
71-
AvatarProps["src"] | undefined
72-
>(undefined);
73-
return (
74-
<>
75-
<Avatar
76-
src={imageSource}
77-
readOnly
78-
onError={() => setImageSource(fallBackImage)}
79-
alt="Avatar"
80-
/>
81-
<Avatar
82-
src={imageSource2}
83-
onError={() => setImageSource2(fallBackImage)}
84-
onChange={(imgSource) => setImageSource2(imgSource)}
85-
accept=".pdf, .png"
86-
alt="Avatar"
87-
/>
88-
</>
89-
);
68+
export default function DemoAvatarFallBack = () => {
69+
const [imageSource, setImageSource]
70+
= React.useState<AvatarProps["src"] | undefined>("/broken/url");
71+
const [imageSource2, setImageSource2]
72+
= React.useState<AvatarProps["src"] | undefined>(undefined);
73+
return (
74+
<>
75+
<Avatar
76+
src={imageSource}
77+
readOnly
78+
onError={() => setImageSource(fallBackImage)}
79+
alt="Avatar"
80+
/>
81+
<Avatar
82+
src={imageSource2}
83+
onError={() => setImageSource2(fallBackImage)}
84+
onChange={(imgSource) => setImageSource2(imgSource)}
85+
accept=".pdf, .png"
86+
alt="Avatar2"
87+
/>
88+
</>
89+
);
9090
};`;

‎src/components/demo-components/avatar-demo/CodeDemoAvatarLabels.tsx‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import * as React from "react";
2+
import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
3+
4+
const CodeDemoAvatarLabels = () => {
5+
return (
6+
<ShowDemoCode
7+
codeCompleteJS={completeCodeJS}
8+
codeCompleteTS={completeCodeTS}
9+
codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
10+
codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
11+
codeSplittedJS={splittedCodeJS}
12+
codeSplittedTS={splittedCodeTS}
13+
/>
14+
);
15+
};
16+
export default CodeDemoAvatarLabels;
17+
const splittedCodeJS = `<Avatar
18+
alt="Isabella"
19+
emptyLabel={"You can choose an image..."}
20+
onChange={() => {}}
21+
/>
22+
<Avatar
23+
src={imageSrc}
24+
alt="Isabella"
25+
changeLabel={"Do you want to change this amazing picture?"}
26+
onChange={() => {}}
27+
/>
28+
<Avatar
29+
src={imageSrc}
30+
alt="Isabella"
31+
loadingLabel={"You can drink a cup of coffee in the meanwhile"}
32+
isLoading={true}
33+
/>`;
34+
35+
const splittedCodeTS = splittedCodeJS;
36+
const completeCodeJS = `import * as React from "react";
37+
import { Avatar } from "@files-ui/react";
38+
const imageSrc =
39+
"https://i.pinimg.com/564x/9a/8b/cf/9a8bcfaba81783eff9241538b00343b1.jpg";
40+
41+
const DemoAvatarLabels = () => {
42+
return (
43+
<>
44+
<Avatar
45+
alt="Isabella"
46+
emptyLabel={"You can choose an image..."}
47+
onChange={() => {}}
48+
/>
49+
<Avatar
50+
src={imageSrc}
51+
alt="Isabella"
52+
changeLabel={"Do you want to change this amazing picture?"}
53+
onChange={() => {}}
54+
/>
55+
<Avatar
56+
src={imageSrc}
57+
alt="Isabella"
58+
loadingLabel={"You can drink a cup of coffee in the meanwhile"}
59+
isLoading={true}
60+
/>
61+
</>
62+
);
63+
};
64+
export default DemoAvatarLabels;`;
65+
66+
const completeCodeTS = completeCodeJS;

‎src/components/demo-components/avatar-demo/CodeDemoAvatarLoading.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import * as React from "react";
2+
import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
3+
interface CodeDemoAvatarPickFileProps {}
4+
const CodeDemoAvatarLoading: React.FC<CodeDemoAvatarPickFileProps> = (
5+
props: CodeDemoAvatarPickFileProps
6+
) => {
7+
return (
8+
<ShowDemoCode
9+
codeCompleteJS={completeCodeJS}
10+
codeCompleteTS={completeCodeTS}
11+
codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
12+
codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
13+
codeSplittedJS={splittedCodeJS}
14+
codeSplittedTS={splittedCodeTS}
15+
/>
16+
);
17+
};
18+
export default CodeDemoAvatarLoading;
19+
20+
const splittedCodeJS = `<Avatar readOnly src={imageSrc} alt="Isabella" isLoading={true} />`;
21+
const splittedCodeTS = splittedCodeJS;
22+
const completeCodeJS = `import * as React from "react";
23+
import { Avatar } from "@files-ui/react";
24+
25+
const imageSrc =
26+
"https://i.pinimg.com/564x/9a/8b/cf/9a8bcfaba81783eff9241538b00343b1.jpg";
27+
28+
const DemoAvatarLoading = () => {
29+
return <Avatar readOnly src={imageSrc} alt="Isabella" isLoading={true} />;
30+
};
31+
export default DemoAvatarLoading;`;
32+
33+
const completeCodeTS = completeCodeJS;

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

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,12 @@ const splittedCodeJS = `<Avatar src={imageSource} alt="Avatar" onChange={handleC
2020
const splittedCodeTS = splittedCodeJS;
2121
const completeCodeJS = `import * as React from "react";
2222
import { Avatar } from "@files-ui/react";
23-
export default function App = () => {
24-
const [imageSource, setImageSource] = React.useState("https://i.pinimg.com/564x/9a/8b/cf/9a8bcfaba81783eff9241538b00343b1.jpg");
23+
24+
const imageSrc =
25+
"https://i.pinimg.com/564x/9a/8b/cf/9a8bcfaba81783eff9241538b00343b1.jpg";
26+
27+
export default function DemoAvatarPickingFile = () => {
28+
const [imageSource, setImageSource] = React.useState(imageSrc);
2529
const handleChangeSource = (selectedFile) => {
2630
setImageSource(selectedFile);
2731
};
@@ -32,10 +36,13 @@ export default function App = () => {
3236

3337
const completeCodeTS =`import * as React from "react";
3438
import { Avatar, AvatarProps } from "@files-ui/react";
35-
export default function App = () => {
36-
const [imageSource, setImageSource] = React.useState<
37-
AvatarProps["src"] | undefined
38-
>("https://i.pinimg.com/564x/9a/8b/cf/9a8bcfaba81783eff9241538b00343b1.jpg");
39+
40+
const imageSrc =
41+
"https://i.pinimg.com/564x/9a/8b/cf/9a8bcfaba81783eff9241538b00343b1.jpg";
42+
43+
export default function DemoAvatarPickingFile = () => {
44+
const [imageSource, setImageSource]
45+
= React.useState<AvatarProps["src"] | undefined>(imageSrc);
3946
4047
const handleChangeSource = (selectedFile: File) => {
4148
setImageSource(selectedFile);

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

Lines changed: 20 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,14 @@ const CodeDemoAvatarSmartFit: React.FC<CodeDemoAvatarPickFileProps> = (
1717
};
1818
export default CodeDemoAvatarSmartFit;
1919

20-
const splittedCodeJS = ``;
20+
const splittedCodeJS = `<Avatar src={landscapeImage} readOnly smartImgFit={false} />
21+
<Avatar src={landscapeImage} readOnly smartImgFit={"orientation"} />
22+
<Avatar src={landscapeImage} readOnly smartImgFit={"center"} />
23+
24+
<Avatar src={portraitImage} readOnly smartImgFit={false} />
25+
<Avatar src={portraitImage} readOnly smartImgFit={"orientation"} />
26+
<Avatar src={portraitImage} readOnly smartImgFit={"center"} />`;
27+
2128
const splittedCodeTS = splittedCodeJS;
2229
const completeCodeJS = `import * as React from "react";
2330
import { Avatar } from "@files-ui/react";
@@ -27,18 +34,18 @@ const landscapeImage =
2734
const portraitImage =
2835
"https://i.pinimg.com/originals/b6/1d/6a/b61d6a1079d8e54932dcde9dc260dd2e.gif";
2936
30-
export default function App = () => {
31-
return (
32-
<>
33-
<Avatar src={landscapeImage} readOnly smartImgFit={false} />
34-
<Avatar src={landscapeImage} readOnly smartImgFit={"orientation"} />
35-
<Avatar src={landscapeImage} readOnly smartImgFit={"center"} />
36-
37-
<Avatar src={portraitImage} readOnly smartImgFit={false} />
38-
<Avatar src={portraitImage} readOnly smartImgFit={"orientation"} />
39-
<Avatar src={portraitImage} readOnly smartImgFit={"center"} />
40-
</>
41-
);
37+
export default function DemoAvatarSmartImageFit = () => {
38+
return (
39+
<>
40+
<Avatar src={landscapeImage} readOnly smartImgFit={false} />
41+
<Avatar src={landscapeImage} readOnly smartImgFit={"orientation"} />
42+
<Avatar src={landscapeImage} readOnly smartImgFit={"center"} />
43+
44+
<Avatar src={portraitImage} readOnly smartImgFit={false} />
45+
<Avatar src={portraitImage} readOnly smartImgFit={"orientation"} />
46+
<Avatar src={portraitImage} readOnly smartImgFit={"center"} />
47+
</>
48+
);
4249
};`;
4350

4451
const completeCodeTS = completeCodeJS;

0 commit comments

Comments
 (0)