Skip to content

Commit 5d2623b

Browse files
LibenHailuLibenHailu
committed
fix: finalize avatar code tab component
Signed-off-by: Liben Hailu <libenhailu04@gmail.com>
1 parent c78799b commit 5d2623b

1 file changed

Lines changed: 211 additions & 61 deletions

File tree

  • src/sections/Projects/Sistent/components/avatar

‎src/sections/Projects/Sistent/components/avatar/code.js‎

Lines changed: 211 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,216 @@
1+
// import React, { useState } from "react";
2+
//
3+
// import { Avatar, SistentThemeProvider } from "@sistent/sistent";
4+
// import { SistentLayout } from "../../sistent-layout";
5+
// import TabButton from "../../../../../reusecore/Button";
6+
// import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
7+
// import { CodeBlock } from "../button/code-block";
8+
// import user from "../../../../../assets/images/sistent/placeholder/user.webp";
9+
// import { FaUser } from "@react-icons/all-files/fa/FaUser";
10+
//
11+
// const AvatarComponent = () => {
12+
// const { isDark } = useStyledDarkMode();
13+
// const [activeTab, setActiveTab] = useState("Overview");
14+
//
15+
// const codes = [
16+
// "<Avatar src='/path/to/user-image.jpg' alt='User Name' />",
17+
// `<Avatar>
18+
// JD
19+
// </Avatar>`,
20+
// `<Avatar>
21+
// <UserIcon />
22+
// </Avatar>`,
23+
// `<Avatar size="small" />
24+
// <Avatar size="medium" />
25+
// <Avatar size="large" />`,
26+
// `<Avatar
27+
// sx={{
28+
// border: 'px solid',
29+
// boxShadow: 2
30+
// }}
31+
// />`,
32+
// ];
33+
// return (
34+
// <SistentLayout title="Avatar">
35+
// <div className="content">
36+
// <a id="Identity">
37+
// <h2>Avatar Component</h2>
38+
// </a>
39+
// <div className="filterBtns">
40+
// {"Overview Guidance Code".split(" ").map((tab) => (
41+
// <TabButton
42+
// key={tab}
43+
// title={tab}
44+
// className={activeTab === tab ? "active" : ""}
45+
// onClick={() => setActiveTab(tab)}
46+
// />
47+
// ))}
48+
// </div>
49+
// <p>
50+
// The Avatar component provides a flexible visual representation of
51+
// users or entities across digital interfaces, supporting images,
52+
// initials, and icons.
53+
// </p>
54+
//
55+
// {activeTab === "Code" && (
56+
// <div className="code-examples">
57+
// <h3>Avatar Implementation Variants</h3>
58+
// <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
59+
// {/* Image avatar */}
60+
// <h4>Image Avatar</h4>
61+
// <p>Display user profile images</p>
62+
// <div className="showcase">
63+
// <div className="items">
64+
// <Avatar src={user} alt="User Name" />
65+
// </div>
66+
// <CodeBlock name="image-avatar" code={codes[0]} />
67+
// </div>
68+
// {/* Initials avatar */}
69+
// <h4>Initials Avatar</h4>
70+
// <p>Use initials when image is unavailable</p>
71+
// <div className="showcase">
72+
// <div className="items">
73+
// <Avatar>JD</Avatar>
74+
// </div>
75+
// <CodeBlock name="initials-avatar" code={codes[1]} />
76+
// </div>
77+
// {/* Icon avatar */}
78+
// <h4>Icon Avatar</h4>
79+
// <p>Use icons for generic representation</p>
80+
// <div className="showcase">
81+
// <div className="items">
82+
// <Avatar>
83+
// <FaUser />
84+
// </Avatar>
85+
// </div>
86+
// <CodeBlock name="icon-avatar" code={codes[2]} />
87+
// </div>
88+
// {/* Sized avatar */}
89+
// <h4>Sized Avatarr</h4>
90+
// <p>Adjust avatar sizes for different context </p>
91+
// <div className="showcase">
92+
// <div className="items">
93+
// <Avatar size="small" />
94+
// <Avatar size="medium" />
95+
// <Avatar size="large" />
96+
// </div>
97+
// <CodeBlock name="sized-avatar" code={codes[3]} />
98+
// </div>
99+
// {/* Custom styling */}
100+
// <h4>Custom Styling</h4>
101+
// <p>Apply custom styles and themes</p>
102+
// <div className="showcase">
103+
// <div className="items">
104+
// <Avatar
105+
// src="/image.jpg"
106+
// sx={{
107+
// border: "px solid primary.main",
108+
// boxShadow: 2,
109+
// }}
110+
// />
111+
// </div>
112+
// <CodeBlock name="custom-avatar" code={codes[4]} />
113+
// </div>
114+
// </SistentThemeProvider>
115+
// </div>
116+
// )}
117+
// </div>
118+
// </SistentLayout>
119+
// );
120+
// };
121+
//
122+
// export default AvatarComponent;
1123
import React, { useState } from "react";
2-
3124
import { Avatar, SistentThemeProvider } from "@sistent/sistent";
4125
import { SistentLayout } from "../../sistent-layout";
5126
import TabButton from "../../../../../reusecore/Button";
6127
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
7128
import { CodeBlock } from "../button/code-block";
8129
import user from "../../../../../assets/images/sistent/placeholder/user.webp";
130+
import { FaUser } from "@react-icons/all-files/fa/FaUser";
131+
132+
const TABS = ["Overview", "Guidance", "Code"];
133+
134+
const avatarExamples = [
135+
{
136+
title: "Image Avatar",
137+
description: "Display user profile images.",
138+
element: <Avatar src={user} alt="User Name" />,
139+
code: `<Avatar src="/path/to/user-image.jpg" alt="User Name" />`,
140+
id: "image-avatar",
141+
},
142+
{
143+
title: "Initials Avatar",
144+
description: "Use initials when an image is unavailable.",
145+
element: <Avatar>JD</Avatar>,
146+
code: `<Avatar>JD</Avatar>`,
147+
id: "initials-avatar",
148+
},
149+
{
150+
title: "Icon Avatar",
151+
description: "Use icons for generic representation.",
152+
element: (
153+
<Avatar>
154+
<FaUser />
155+
</Avatar>
156+
),
157+
code: `<Avatar><UserIcon /></Avatar>`,
158+
id: "icon-avatar",
159+
},
160+
{
161+
title: "Sized Avatars",
162+
description: "Adjust avatar sizes to fit various contexts.",
163+
element: (
164+
<>
165+
<Avatar size="small" />
166+
<Avatar size="medium" />
167+
<Avatar size="large" />
168+
</>
169+
),
170+
code: `<>
171+
<Avatar size="small" />
172+
<Avatar size="medium" />
173+
<Avatar size="large" />
174+
</>`,
175+
id: "sized-avatar",
176+
},
177+
{
178+
title: "Custom Styling",
179+
description: "Apply custom styles using the sx prop.",
180+
element: (
181+
<Avatar
182+
src="/image.jpg"
183+
alt="Styled Avatar"
184+
sx={{
185+
border: "1px solid",
186+
boxShadow: 2,
187+
}}
188+
/>
189+
),
190+
code: `<Avatar
191+
src="/image.jpg"
192+
sx={{
193+
border: '1px solid',
194+
boxShadow: 2,
195+
}}
196+
/>`,
197+
id: "custom-avatar",
198+
},
199+
];
200+
9201
const AvatarComponent = () => {
10202
const { isDark } = useStyledDarkMode();
11203
const [activeTab, setActiveTab] = useState("Overview");
12204

13-
const codes = [
14-
"<Avatar src='/path/to/user-image.jpg' alt='User Name' />",
15-
`<Avatar>
16-
JD
17-
</Avatar>`,
18-
// },
19-
// {
20-
// title: "Icon Avatar",
21-
// description: "Use icons for generic representation",
22-
// code: (
23-
// <Avatar>
24-
// <FaUser />
25-
// </Avatar>
26-
// ),
27-
// snippet: `<Avatar>
28-
// <UserIcon />
29-
// </Avatar>`,
30-
// },
31-
// {
32-
// title: "Sized Avatars",
33-
// description: "Adjust avatar sizes for different contexts",
34-
// code: `<Avatar size="small" />
35-
// <Avatar size="medium" />
36-
// <Avatar size="large" />`,
37-
// },
38-
// {
39-
// title: "Custom Styling",
40-
// description: "Apply custom styles and themes",
41-
// code: `<Avatar
42-
// src="/image.jpg"
43-
// sx={{
44-
// border: 'px solid primary.main',
45-
// boxShadow: 2
46-
// }}
47-
// />`,
48-
// },
49-
];
50205
return (
51206
<SistentLayout title="Avatar">
52-
<div className="content">
207+
<section className="content">
53208
<a id="Identity">
54209
<h2>Avatar Component</h2>
55210
</a>
211+
56212
<div className="filterBtns">
57-
{"Overview Guidance Code".split(" ").map((tab) => (
213+
{TABS.map((tab) => (
58214
<TabButton
59215
key={tab}
60216
title={tab}
@@ -63,37 +219,31 @@ const AvatarComponent = () => {
63219
/>
64220
))}
65221
</div>
222+
66223
<p>
67-
The Avatar component provides a flexible visual representation of
68-
users or entities across digital interfaces, supporting images,
69-
initials, and icons.
224+
The Avatar component offers a flexible visual representation of users
225+
or entities, supporting profile images, initials, icons, and
226+
customizable styles.
70227
</p>
71228

72229
{activeTab === "Code" && (
73230
<div className="code-examples">
74231
<h3>Avatar Implementation Variants</h3>
75232
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
76-
<h4>Image Avatar</h4>
77-
<p>Display user profile images</p>
78-
<div className="showcase">
79-
<div className="items">
80-
<Avatar src={user} alt="User Name" />
81-
</div>
82-
<CodeBlock name="image-avatar" code={codes[0]} />
83-
</div>
84-
85-
<h4>Initials Avatar</h4>
86-
<p>Use initials when image is unavailable</p>
87-
<div className="showcase">
88-
<div className="items">
89-
<Avatar>JD</Avatar>
90-
</div>
91-
<CodeBlock name="initials-avatar" code={codes[1]} />
92-
</div>
233+
{avatarExamples.map(
234+
({ title, description, element, code, id }) => (
235+
<section className="showcase" key={id}>
236+
<h4>{title}</h4>
237+
<p>{description}</p>
238+
<div className="items">{element}</div>
239+
<CodeBlock name={id} code={code} />
240+
</section>
241+
),
242+
)}
93243
</SistentThemeProvider>
94244
</div>
95245
)}
96-
</div>
246+
</section>
97247
</SistentLayout>
98248
);
99249
};

0 commit comments

Comments
 (0)