Skip to content

Commit 3ecfcc3

Browse files
Jaishree2310Jaishree2310
committed
feat: improvement for avatar
1 parent a3b53fc commit 3ecfcc3

File tree

3 files changed

+120
-266
lines changed

3 files changed

+120
-266
lines changed

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

+39-73
Original file line numberDiff line numberDiff line change
@@ -5,64 +5,46 @@ import TabButton from "../../../../../reusecore/Button";
55
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
66
import { CodeBlock } from "../button/code-block";
77

8+
const avatarExamples = [
9+
{
10+
title: "Image Avatar",
11+
description: "Display user profile images",
12+
code: `<Avatar src="/path/to/user-image.jpg" alt="User Name" />`
13+
},
14+
{
15+
title: "Initials Avatar",
16+
description: "Use initials when image is unavailable",
17+
code: `<Avatar>JD</Avatar>`
18+
},
19+
{
20+
title: "Icon Avatar",
21+
description: "Use icons for generic representation",
22+
code: `<Avatar><UserIcon /></Avatar>`
23+
},
24+
{
25+
title: "Sized Avatars",
26+
description: "Adjust avatar sizes for different contexts",
27+
code: `<Avatar size="small" />\n<Avatar size="medium" />\n<Avatar size="large" />`
28+
},
29+
{
30+
title: "Custom Styling",
31+
description: "Apply custom styles and themes",
32+
code: `<Avatar src="/image.jpg" sx={{ border: '2px solid primary.main', boxShadow: 2 }} />`
33+
}
34+
];
835

936
const AvatarComponent = () => {
1037
const { isDark } = useStyledDarkMode();
1138
const [activeTab, setActiveTab] = useState("Overview");
1239

13-
14-
const avatarExamples = [
15-
{
16-
title: "Image Avatar",
17-
description: "Display user profile images",
18-
code: `<Avatar
19-
src="/path/to/user-image.jpg"
20-
alt="User Name"
21-
/>`
22-
},
23-
{
24-
title: "Initials Avatar",
25-
description: "Use initials when image is unavailable",
26-
code: `<Avatar>
27-
JD
28-
</Avatar>`
29-
},
30-
{
31-
title: "Icon Avatar",
32-
description: "Use icons for generic representation",
33-
code: `<Avatar>
34-
<UserIcon />
35-
</Avatar>`
36-
},
37-
{
38-
title: "Sized Avatars",
39-
description: "Adjust avatar sizes for different contexts",
40-
code: `<Avatar size="small" />
41-
<Avatar size="medium" />
42-
<Avatar size="large" />`
43-
},
44-
{
45-
title: "Custom Styling",
46-
description: "Apply custom styles and themes",
47-
code: `<Avatar
48-
src="/image.jpg"
49-
sx={{
50-
border: '2px solid primary.main',
51-
boxShadow: 2
52-
}}
53-
/>`
54-
}
55-
];
56-
57-
5840
return (
5941
<SistentLayout title="Avatar">
6042
<div className="content">
6143
<a id="Identity">
6244
<h2>Avatar Component</h2>
6345
</a>
6446
<div className="filterBtns">
65-
{"Overview Guidance Code".split(" ").map((tab) => (
47+
{["Overview", "Guidance", "Code"].map((tab) => (
6648
<TabButton
6749
key={tab}
6850
title={tab}
@@ -78,40 +60,25 @@ const AvatarComponent = () => {
7860
{activeTab === "Code" && (
7961
<div className="code-examples">
8062
<h3>Avatar Implementation Variants</h3>
81-
{avatarExamples.map((example, index) => (
63+
{avatarExamples.map(({ title, description, code }, index) => (
8264
<div key={index} className="code-example">
83-
<h4>{example.title}</h4>
84-
<p>{example.description}</p>
85-
<CodeBlock
86-
name={`avatar-example-${index}`}
87-
code={example.code}
88-
/>
65+
<h4>{title}</h4>
66+
<p>{description}</p>
67+
<CodeBlock name={`avatar-example-${index}`} code={code} />
8968
<div className="live-preview">
9069
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
91-
{example.title === "Image Avatar" && (
92-
<Avatar src="https://via.placeholder.com/150" alt="User Avatar" />
93-
)}
94-
{example.title === "Initials Avatar" && (
95-
<Avatar>JD</Avatar>
96-
)}
97-
{example.title === "Icon Avatar" && (
98-
<Avatar>👤</Avatar>
99-
)}
100-
{example.title === "Sized Avatars" && (
70+
{title === "Image Avatar" && <Avatar src="https://via.placeholder.com/150" alt="User Avatar" />}
71+
{title === "Initials Avatar" && <Avatar>JD</Avatar>}
72+
{title === "Icon Avatar" && <Avatar>👤</Avatar>}
73+
{title === "Sized Avatars" && (
10174
<>
10275
<Avatar size="small" src="https://via.placeholder.com/50" />
10376
<Avatar size="medium" src="https://via.placeholder.com/75" sx={{ mx: 2 }} />
10477
<Avatar size="large" src="https://via.placeholder.com/100" />
10578
</>
10679
)}
107-
{example.title === "Custom Styling" && (
108-
<Avatar
109-
src="https://via.placeholder.com/150"
110-
sx={{
111-
border: "2px solid primary.main",
112-
boxShadow: 2
113-
}}
114-
/>
80+
{title === "Custom Styling" && (
81+
<Avatar src="https://via.placeholder.com/150" sx={{ border: "2px solid primary.main", boxShadow: 2 }} />
11582
)}
11683
</SistentThemeProvider>
11784
</div>
@@ -124,5 +91,4 @@ const AvatarComponent = () => {
12491
);
12592
};
12693

127-
128-
export default AvatarComponent;
94+
export default AvatarComponent;

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

+54-92
Original file line numberDiff line numberDiff line change
@@ -4,142 +4,104 @@ import { useLocation } from "@reach/router";
44
import { SistentLayout } from "../../sistent-layout";
55
import TabButton from "../../../../../reusecore/Button";
66

7-
87
const Guidance = () => {
98
const location = useLocation();
109

10+
const tabs = [
11+
{ title: "Overview", path: "/projects/sistent/components/avatar/overview" },
12+
{ title: "Guidance", path: "/projects/sistent/components/avatar/guidance" },
13+
{ title: "Code", path: "/projects/sistent/components/avatar/code" }
14+
];
1115

1216
return (
1317
<SistentLayout title="Avatar">
1418
<div className="content">
15-
<a id="identity">
16-
<h2>Avatar Usage Guidelines</h2>
17-
</a>
19+
<h2 id="identity">Avatar Usage Guidelines</h2>
1820
<p>
19-
The Avatar component represents a user using an image, initials, or an icon.
20-
It is a crucial UI element for providing visual identity across digital platforms.
21+
The Avatar component visually represents a user through an image, initials, or an icon.
22+
It enhances recognition and identity across digital platforms.
2123
</p>
2224

23-
2425
<div className="filterBtns">
25-
<TabButton
26-
className={location.pathname === "/projects/sistent/components/avatar/overview" ? "active" : ""}
27-
onClick={() => navigate("/projects/sistent/components/avatar/overview")}
28-
title="Overview"
29-
/>
30-
<TabButton
31-
className={location.pathname === "/projects/sistent/components/avatar/guidance" ? "active" : ""}
32-
onClick={() => navigate("/projects/sistent/components/avatar/guidance")}
33-
title="Guidance"
34-
/>
35-
<TabButton
36-
className={location.pathname === "/projects/sistent/components/avatar/code" ? "active" : ""}
37-
onClick={() => navigate("/projects/sistent/components/avatar/code")}
38-
title="Code"
39-
/>
26+
{tabs.map((tab) => (
27+
<TabButton
28+
key={tab.title}
29+
className={location.pathname === tab.path ? "active" : ""}
30+
onClick={() => navigate(tab.path)}
31+
title={tab.title}
32+
/>
33+
))}
4034
</div>
4135

42-
43-
<div className="main-content">
44-
<a id="BestPractices">
45-
<h3>Best Practices</h3>
46-
</a>
36+
<section>
37+
<h3 id="BestPractices">Best Practices</h3>
4738
<ul>
48-
<li>
49-
<strong>Visual Representation:</strong> Choose clear, recognizable images that authentically represent the user or entity.
50-
</li>
51-
<li>
52-
<strong>Fallback Mechanisms:</strong> Implement robust fallback strategies:
53-
<code>
54-
{"<Avatar src={userImage} alt={userName} fallback={<Avatar>{userInitials}</Avatar>}/>"}
55-
</code>
56-
</li>
57-
<li>Maintain consistent avatar sizing and style across the application.</li>
58-
<li>Optimize image resolution for performance and clarity.</li>
39+
<li><strong>Visual Clarity:</strong> Use clear, recognizable images for representation.</li>
40+
<li><strong>Fallback Mechanisms:</strong> Implement alternative displays when an image is unavailable.</li>
41+
<li><strong>Consistency:</strong> Maintain uniform avatar sizes and styles across your UI.</li>
42+
<li><strong>Performance:</strong> Optimize image resolution for better loading times.</li>
5943
</ul>
44+
</section>
6045

61-
62-
<a id="Accessibility">
63-
<h3>Accessibility Considerations</h3>
64-
</a>
46+
<section>
47+
<h3 id="Accessibility">Accessibility Considerations</h3>
6548
<ul>
66-
<li>Mandatory <code>alt</code> text for screen reader compatibility.</li>
67-
<li>Ensure 4.5:1 color contrast ratio for initials and icons.</li>
68-
<li>Add meaningful aria labels for context.</li>
49+
<li>Ensure meaningful <code>alt</code> text for screen readers.</li>
50+
<li>Maintain a 4.5:1 color contrast ratio for initials/icons.</li>
51+
<li>Use ARIA labels to provide additional context.</li>
6952
</ul>
53+
</section>
7054

71-
72-
<a id="PerformanceOptimization">
73-
<h3>Performance Optimization</h3>
74-
</a>
55+
<section>
56+
<h3 id="PerformanceOptimization">Performance Optimization</h3>
7557
<ul>
76-
<li>Use image compression techniques.</li>
77-
<li>Implement lazy loading for avatar images.</li>
78-
<li>Cache avatar images to reduce network requests.</li>
79-
<li>
80-
Example lazy loading implementation:
81-
<code>
82-
{"<Avatar loading=\"lazy\" src=\"/path/to/optimized/image.jpg\"/>"}
83-
</code>
84-
</li>
58+
<li>Utilize image compression techniques to reduce file sizes.</li>
59+
<li>Implement lazy loading to enhance page speed.</li>
60+
<li>Cache frequently used avatars to minimize network requests.</li>
8561
</ul>
62+
</section>
8663

87-
88-
<a id="AdvancedCustomization">
89-
<h3>Advanced Customization</h3>
90-
</a>
64+
<section>
65+
<h3 id="AdvancedCustomization">Advanced Customization</h3>
9166
<ul>
92-
<li>Theme-aware color generation for initial avatars.</li>
93-
<li>Status indicators (online/offline/away).</li>
94-
<li>
95-
Example status badge:
96-
<code>
97-
{"<Avatar src={userImage} status=\"online\" statusProps={{ color: 'green', position: 'bottom-right' }}/>"}
98-
</code>
99-
</li>
67+
<li>Enable theme-aware color generation for text-based avatars.</li>
68+
<li>Support user status indicators (online, offline, away).</li>
10069
</ul>
70+
</section>
10171

102-
103-
<a id="IntegrationPatterns">
104-
<h3>Common Integration Patterns</h3>
105-
</a>
72+
<section>
73+
<h3 id="IntegrationPatterns">Common Integration Patterns</h3>
10674
<ul>
107-
<li>User profile headers</li>
108-
<li>Team member lists</li>
109-
<li>Comment and messaging interfaces</li>
110-
<li>Collaboration platform user representations</li>
75+
<li>Profile headers</li>
76+
<li>Team directories</li>
77+
<li>Comment sections</li>
78+
<li>Messaging applications</li>
11179
</ul>
80+
</section>
11281

113-
114-
<a id="CodeSnippets">
115-
<h3>Code Snippet: Flexible Avatar Usage</h3>
116-
</a>
117-
<pre><code>
118-
{`// Image Avatar
82+
<section>
83+
<h3 id="CodeSnippets">Code Snippet: Flexible Avatar Usage</h3>
84+
<pre><code>{`
85+
// Image Avatar
11986
<Avatar src="/user-profile.jpg" alt="John Doe" />
12087
121-
12288
// Initials Avatar
12389
<Avatar>JD</Avatar>
12490
125-
12691
// Icon Avatar
12792
<Avatar>
12893
<UserIcon />
12994
</Avatar>
13095
131-
13296
// Sized Avatars
13397
<Avatar size="small" />
13498
<Avatar size="medium" />
13599
<Avatar size="large" />
136-
`}
137-
</code></pre>
138-
</div>
100+
`}</code></pre>
101+
</section>
139102
</div>
140103
</SistentLayout>
141104
);
142105
};
143106

144-
145-
export default Guidance;
107+
export default Guidance;

0 commit comments

Comments
 (0)