Skip to content

Commit c04f10e

Browse files
LibenHailuLibenHailu
committed
add avatar sistent component doc
Signed-off-by: Liben Hailu <libenhailu04@gmail.com>
1 parent 427afc4 commit c04f10e

3 files changed

Lines changed: 136 additions & 1 deletion

File tree

‎src/assets/images/sistent/placeholder/user.webp‎

2.02 KB
Loading

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

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
import React from "react";
2+
import { navigate } from "gatsby";
3+
import { useLocation } from "@reach/router";
4+
import profilePicture from "../../../../../assets/images/sistent/placeholder/user.webp";
5+
import { SistentThemeProvider, Avatar, Button } from "@sistent/sistent";
6+
import TabButton from "../../../../../reusecore/Button";
7+
import { FaUser } from "@react-icons/all-files/fa/FaUser";
8+
import { SistentLayout } from "../../sistent-layout";
9+
import { Col, Row } from "../../../../../reusecore/Layout";
10+
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
11+
12+
const SistentAvatar = () => {
13+
const location = useLocation();
14+
const { isDark } = useStyledDarkMode();
15+
16+
return (
17+
<SistentLayout title="Avatar">
18+
<div className="content">
19+
<a id="Identity">
20+
<h2>Avatar</h2>
21+
</a>
22+
<p>
23+
An Avatar component is used to visually represent a user, profile, or
24+
entity, typically through an image, initials, or icon. It is commonly
25+
used in interfaces to indicate identity.
26+
</p>
27+
<div className="filterBtns">
28+
<TabButton
29+
className={
30+
location.pathname === "/projects/sistent/components/avatar"
31+
? "active"
32+
: ""
33+
}
34+
onClick={() => navigate("/projects/sistent/components/avatar")}
35+
title="Overview"
36+
/>
37+
<TabButton
38+
className={
39+
location.pathname ===
40+
"/projects/sistent/components/avatar/guidance"
41+
? "active"
42+
: ""
43+
}
44+
onClick={() =>
45+
navigate("/projects/sistent/components/avatar/guidance")
46+
}
47+
title="Guidance"
48+
/>
49+
<TabButton
50+
className={
51+
location.pathname === "/projects/sistent/components/avatar/code"
52+
? "active"
53+
: ""
54+
}
55+
onClick={() => navigate("/projects/sistent/components/avatar/code")}
56+
title="Code"
57+
/>
58+
</div>
59+
<div className="main-content">
60+
<p>
61+
Avatars are versatile visual representations that provide instant
62+
visual identification for users, teams, or entities within digital
63+
interfaces. They serve as a quick and intuitive way to personalize
64+
and humanize digital experiences across various applications and
65+
platforms.
66+
</p>
67+
<h3>Image Avatars</h3>
68+
<p>
69+
Image avatars provide the most personalized representation by
70+
displaying actual profile pictures, organizational logos, or
71+
specific user imagery.
72+
</p>
73+
<Row $Hcenter className="image-container">
74+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
75+
<Avatar alt="Profile picture" src={profilePicture} />
76+
</SistentThemeProvider>
77+
</Row>
78+
<h3>Initials Avatar</h3>
79+
<p>
80+
When a profile image is unavailable, initials provide a professional
81+
and clean alternative for user identification.
82+
</p>
83+
<Row $Hcenter className="image-container">
84+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
85+
<Avatar src="/broken.jpg">JS</Avatar>
86+
<Avatar sx={{ ml: 2 }}>AB</Avatar>
87+
<Avatar sx={{ ml: 2 }}>CD</Avatar>
88+
</SistentThemeProvider>
89+
</Row>
90+
<h3>Icon Avatar</h3>
91+
<p>
92+
Icon avatars offer a universal visual representation when specific
93+
imagery isn't available or appropriate.
94+
</p>
95+
<Row $Hcenter className="image-container">
96+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
97+
<Avatar>
98+
<FaUser />
99+
</Avatar>
100+
</SistentThemeProvider>
101+
</Row>
102+
<h3>Flexible Sizing</h3>
103+
<p>
104+
Avatars can be dynamically sized to fit various design requirements
105+
and interface contexts.
106+
</p>
107+
<Row $Hcenter className="image-container">
108+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
109+
<Avatar alt="Small" sx={{ width: 32, height: 32, mr: 2 }} />
110+
<Avatar alt="Medium" sx={{ width: 48, height: 48, mr: 2 }} />
111+
<Avatar alt="Large" sx={{ width: 64, height: 64 }} />
112+
</SistentThemeProvider>
113+
</Row>
114+
<h3>Variants</h3>
115+
<p>If you need square or rounded avatars, use the variant prop.</p>
116+
<Row $Hcenter className="image-container">
117+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
118+
<Avatar alt="Square" variant="square" />
119+
<Avatar alt="Rounded" variant="rounded" sx={{ ml: 2 }} />
120+
</SistentThemeProvider>
121+
</Row>
122+
</div>
123+
</div>
124+
</SistentLayout>
125+
);
126+
};
127+
128+
export default SistentAvatar;

‎src/sections/Projects/Sistent/components/content.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,14 @@ const componentsData = [
133133
url: "/projects/sistent/components/dialog",
134134
src: "/dialog",
135135
},
136-
136+
{
137+
id: 18,
138+
name: "Avatar",
139+
description:
140+
"An Avatar component is used to visually represent a user, profile, or entity, typically through an image, initials, or icon. It is commonly used in interfaces to indicate identity.",
141+
url: "/projects/sistent/components/avatar",
142+
src: "/avatar",
143+
},
137144
];
138145

139146
module.exports = { componentsData };

0 commit comments

Comments
 (0)