Skip to content

Commit 2a8199d

Browse files
vr-varadvr-varad
authored
Merge branch 'master' into master
2 parents 68b545e + 21d7ce1 commit 2a8199d

13 files changed

Lines changed: 2246 additions & 272 deletions

File tree

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

2.02 KB
Loading

‎src/components/SistentNavigation/content.js‎

Lines changed: 29 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -45,41 +45,42 @@ export const content = [
4545
{ id: 31, link: "/projects/sistent/components/link/code", text: "Link" },
4646

4747
{ id: 32, link: "/projects/sistent/components/modal", text: "Modal" },
48-
{ id: 33, link: "/projects/sistent/components/modal/code", text: "Modal" },
48+
{ id: 33, link: "/projects/sistent/components/modal/guidance", text: "Modal" },
49+
{ id: 34, link: "/projects/sistent/components/modal/code", text: "Modal" },
4950

50-
{ id: 34, link: "/projects/sistent/components/pagination", text: "Pagination" },
51-
{ id: 35, link: "/projects/sistent/components/pagination/guidance", text: "Pagination" },
52-
{ id: 36, link: "/projects/sistent/components/pagination/code", text: "Pagination" },
51+
{ id: 35, link: "/projects/sistent/components/pagination", text: "Pagination" },
52+
{ id: 36, link: "/projects/sistent/components/pagination/guidance", text: "Pagination" },
53+
{ id: 37, link: "/projects/sistent/components/pagination/code", text: "Pagination" },
5354

54-
{ id: 37, link: "/projects/sistent/components/paper", text: "Paper" },
55-
{ id: 38, link: "/projects/sistent/components/paper/guidance", text: "Paper" },
56-
{ id: 39, link: "/projects/sistent/components/paper/code", text: "Paper" },
55+
{ id: 38, link: "/projects/sistent/components/paper", text: "Paper" },
56+
{ id: 39, link: "/projects/sistent/components/paper/guidance", text: "Paper" },
57+
{ id: 40, link: "/projects/sistent/components/paper/code", text: "Paper" },
5758

58-
{ id: 40, link: "/projects/sistent/components/popper", text: "Popper" },
59-
{ id: 41, link: "/projects/sistent/components/popper/guidance", text: "Popper" },
60-
{ id: 42, link: "/projects/sistent/components/popper/code", text: "Popper" },
59+
{ id: 41, link: "/projects/sistent/components/popper", text: "Popper" },
60+
{ id: 42, link: "/projects/sistent/components/popper/guidance", text: "Popper" },
61+
{ id: 43, link: "/projects/sistent/components/popper/code", text: "Popper" },
6162

62-
{ id: 43, link: "/projects/sistent/components/select", text: "Select" },
63-
{ id: 44, link: "/projects/sistent/components/select/guidance", text: "Select" },
64-
{ id: 45, link: "/projects/sistent/components/select/code", text: "Select" },
63+
{ id: 44, link: "/projects/sistent/components/select", text: "Select" },
64+
{ id: 45, link: "/projects/sistent/components/select/guidance", text: "Select" },
65+
{ id: 46, link: "/projects/sistent/components/select/code", text: "Select" },
6566

66-
{ id: 46, link: "/projects/sistent/components/switch", text: "Switch" },
67-
{ id: 47, link: "/projects/sistent/components/switch/guidance", text: "Switch" },
68-
{ id: 48, link: "/projects/sistent/components/switch/code", text: "Switch" },
67+
{ id: 47, link: "/projects/sistent/components/switch", text: "Switch" },
68+
{ id: 48, link: "/projects/sistent/components/switch/guidance", text: "Switch" },
69+
{ id: 49, link: "/projects/sistent/components/switch/code", text: "Switch" },
6970

70-
{ id: 49, link: "/projects/sistent/components/tabs", text: "Tabs" },
71-
{ id: 50, link: "/projects/sistent/components/tabs/guidance", text: "Tabs" },
72-
{ id: 51, link: "/projects/sistent/components/tabs/code", text: "Tabs" },
71+
{ id: 50, link: "/projects/sistent/components/tabs", text: "Tabs" },
72+
{ id: 51, link: "/projects/sistent/components/tabs/guidance", text: "Tabs" },
73+
{ id: 52, link: "/projects/sistent/components/tabs/code", text: "Tabs" },
7374

74-
{ id: 52, link: "/projects/sistent/components/text-field", text: "Text Field" },
75-
{ id: 53, link: "/projects/sistent/components/text-field/guidance", text: "Text Field" },
76-
{ id: 54, link: "/projects/sistent/components/text-field/code", text: "Text Field" },
75+
{ id: 53, link: "/projects/sistent/components/text-field", text: "Text Field" },
76+
{ id: 54, link: "/projects/sistent/components/text-field/guidance", text: "Text Field" },
77+
{ id: 55, link: "/projects/sistent/components/text-field/code", text: "Text Field" },
7778

78-
{ id: 55, link: "/projects/sistent/components/text-input", text: "Text Input" },
79-
{ id: 56, link: "/projects/sistent/components/text-input/guidance", text: "Text Input" },
80-
{ id: 57, link: "/projects/sistent/components/text-input/code", text: "Text Input" },
79+
{ id: 56, link: "/projects/sistent/components/text-input", text: "Text Input" },
80+
{ id: 57, link: "/projects/sistent/components/text-input/guidance", text: "Text Input" },
81+
{ id: 58, link: "/projects/sistent/components/text-input/code", text: "Text Input" },
8182

82-
{ id: 58, link: "/projects/sistent/components/tooltip", text: "Tooltip" },
83-
{ id: 59, link: "/projects/sistent/components/tooltip/guidance", text: "Tooltip" },
84-
{ id: 60, link: "/projects/sistent/components/tooltip/code", text: "Tooltip" },
83+
{ id: 59, link: "/projects/sistent/components/tooltip", text: "Tooltip" },
84+
{ id: 60, link: "/projects/sistent/components/tooltip/guidance", text: "Tooltip" },
85+
{ id: 61, link: "/projects/sistent/components/tooltip/code", text: "Tooltip" },
8586
];

‎src/sections/Community/Handbook/contributing.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,9 +70,9 @@ const contributingGuide = () => {
7070
To do this, you'll need to add a remote. An example of the
7171
command is given below:
7272
<div className="codes">
73-
<Code codeString="git remote add upstream https://github.com/layer5io/meshery.git " />
73+
<Code codeString="git remote add upstream https://github.com/layer5io/layer5.git " />
7474
</div>
75-
Here “meshery" is used as the example repo. Be sure to
75+
Here “layer5" is used as the example repo. Be sure to
7676
reference the actual repo you are contributing to.
7777
</span>
7878
</li>

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

Lines changed: 229 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,229 @@
1+
import React, { useState } from "react";
2+
import { Avatar, AvatarGroup, SistentThemeProvider } from "@sistent/sistent";
3+
import { SistentLayout } from "../../sistent-layout";
4+
import TabButton from "../../../../../reusecore/Button";
5+
import { CodeBlock } from "../button/code-block";
6+
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
7+
8+
import user1 from "../../../../../assets/images/sistent/placeholder/user.webp";
9+
import user2 from "../../../../../assets/images/sistent/placeholder/user.webp";
10+
import user3 from "../../../../../assets/images/sistent/placeholder/user.webp";
11+
import user4 from "../../../../../assets/images/sistent/placeholder/user.webp";
12+
13+
const TABS = ["Overview", "Guidance", "Code"];
14+
15+
const avatarGroupExamples = [
16+
{
17+
title: "Basic AvatarGroup",
18+
description: "Display a horizontal group of avatars with default overlap.",
19+
element: (
20+
<AvatarGroup>
21+
<Avatar src={user1} alt="User 1" />
22+
<Avatar src={user2} alt="User 2" />
23+
<Avatar src={user3} alt="User 3" />
24+
</AvatarGroup>
25+
),
26+
code: `<AvatarGroup>
27+
<Avatar src="/user1.jpg" alt="User 1" />
28+
<Avatar src="/user2.jpg" alt="User 2" />
29+
<Avatar src="/user3.jpg" alt="User 3" />
30+
</AvatarGroup>`,
31+
id: "basic-group",
32+
},
33+
{
34+
title: "Max Avatars",
35+
description: "Limit the number of visible avatars using the `max` prop.",
36+
element: (
37+
<AvatarGroup max={3}>
38+
<Avatar src={user1} alt="User 1" />
39+
<Avatar src={user2} alt="User 2" />
40+
<Avatar src={user3} alt="User 3" />
41+
<Avatar src={user4} alt="User 4" />
42+
</AvatarGroup>
43+
),
44+
code: `<AvatarGroup max={3}>
45+
<Avatar src="/user1.jpg" />
46+
<Avatar src="/user2.jpg" />
47+
<Avatar src="/user3.jpg" />
48+
<Avatar src="/user4.jpg" />
49+
</AvatarGroup>`,
50+
id: "max-group",
51+
},
52+
{
53+
title: "Custom Spacing",
54+
description: "Control the spacing between avatars.",
55+
element: (
56+
<AvatarGroup spacing="medium">
57+
<Avatar src={user1} />
58+
<Avatar src={user2} />
59+
<Avatar src={user3} />
60+
</AvatarGroup>
61+
),
62+
code: `<AvatarGroup spacing="medium">
63+
<Avatar src="/user1.jpg" />
64+
<Avatar src="/user2.jpg" />
65+
<Avatar src="/user3.jpg" />
66+
</AvatarGroup>`,
67+
id: "spacing-group",
68+
},
69+
{
70+
title: "Shape Variants",
71+
description: "Mix avatar shape variants like square and rounded.",
72+
element: (
73+
<AvatarGroup>
74+
<Avatar variant="rounded" src={user1} />
75+
<Avatar variant="square" src={user2} />
76+
<Avatar src={user3} />
77+
</AvatarGroup>
78+
),
79+
code: `<AvatarGroup>
80+
<Avatar variant="rounded" src="/user1.jpg" />
81+
<Avatar variant="square" src="/user2.jpg" />
82+
<Avatar src="/user3.jpg" />
83+
</AvatarGroup>`,
84+
id: "variant-group",
85+
},
86+
{
87+
title: "Total Avatars",
88+
description:
89+
"You can indicate the total number of avatars using the `total` prop, even if not all are rendered.",
90+
element: (
91+
<AvatarGroup total={7}>
92+
<Avatar src={user1} />
93+
<Avatar src={user2} />
94+
<Avatar src={user3} />
95+
</AvatarGroup>
96+
),
97+
code: `<AvatarGroup total={7}>
98+
<Avatar src="/user1.jpg" />
99+
<Avatar src="/user2.jpg" />
100+
<Avatar src="/user3.jpg" />
101+
</AvatarGroup>`,
102+
id: "total-avatars",
103+
},
104+
{
105+
title: "Custom Surplus Renderer",
106+
description:
107+
"Customize the overflow display using the `renderSurplus` prop for more control over surplus appearance.",
108+
element: (
109+
<AvatarGroup
110+
max={2}
111+
renderSurplus={(surplus) => <span>+{surplus.toString()[0]}k</span>}
112+
total={4251}
113+
>
114+
<Avatar src={user1} />
115+
<Avatar src={user2} />
116+
<Avatar src={user3} />
117+
<Avatar src={user4} />
118+
</AvatarGroup>
119+
),
120+
code: `<AvatarGroup
121+
max={2}
122+
renderSurplus={(surplus) => (
123+
<Avatar sx={{ bgcolor: 'secondary.main' }}>{\`+\${surplus} more\`}</Avatar>
124+
)}
125+
>
126+
<Avatar src="/user1.jpg" />
127+
<Avatar src="/user2.jpg" />
128+
<Avatar src="/user3.jpg" />
129+
<Avatar src="/user4.jpg" />
130+
</AvatarGroup>`,
131+
id: "custom-surplus",
132+
},
133+
];
134+
135+
const AvatarGroupComponent = () => {
136+
const { isDark } = useStyledDarkMode();
137+
const [activeTab, setActiveTab] = useState("Overview");
138+
139+
return (
140+
<SistentLayout title="Avatar Group">
141+
<section className="content">
142+
<a id="Identity">
143+
<h2>Avatar Group</h2>
144+
</a>
145+
<p>
146+
Below are practical implementation examples of the
147+
<code>AvatarGroup</code> component, showcasing different
148+
configurations such as max user limit, spacing, variant styling, and
149+
accessibility-friendly usage. These examples are designed to help you
150+
apply <code>AvatarGroup</code> effectively across team or user-related
151+
interfaces.
152+
</p>
153+
154+
<div className="filterBtns">
155+
{TABS.map((tab) => (
156+
<TabButton
157+
key={tab}
158+
title={tab}
159+
className={activeTab === tab ? "active" : ""}
160+
onClick={() => setActiveTab(tab)}
161+
/>
162+
))}
163+
</div>
164+
165+
<p>
166+
The AvatarGroup component helps visually group multiple avatars in a
167+
compact and meaningful layout, often representing users in a shared
168+
context.
169+
</p>
170+
171+
{activeTab === "Code" && (
172+
<div className="code-examples">
173+
<h3>AvatarGroup Implementation Variants</h3>
174+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
175+
{avatarGroupExamples.map(
176+
({ title, description, element, code, id }) => (
177+
<section key={id}>
178+
<h4>{title}</h4>
179+
<p>{description}</p>
180+
<div className="showcase">
181+
<div className="items">{element}</div>
182+
<CodeBlock name={id} code={code} />
183+
</div>
184+
</section>
185+
),
186+
)}
187+
</SistentThemeProvider>
188+
</div>
189+
)}
190+
191+
{activeTab === "Overview" && (
192+
<div className="overview">
193+
<h3>Usage</h3>
194+
<p>
195+
Use AvatarGroup when you want to display a group of users or
196+
entities visually. It's useful for team indicators,
197+
collaborations, or contributors. You can adjust overlap, limit
198+
display with `max`, or even indicate a total with `total`.
199+
</p>
200+
</div>
201+
)}
202+
203+
{activeTab === "Guidance" && (
204+
<div className="guidance">
205+
<h3>Design Guidance</h3>
206+
<p>
207+
Keep avatar count minimal (ideally &lt; 5) to reduce clutter.
208+
Surplus avatars should indicate remaining count clearly (e.g.
209+
"+3"). Consider consistent shapes, sizes, and padding across your
210+
app.
211+
</p>
212+
<ul>
213+
<li>
214+
Use `max` and `total` for clear grouping when avatars exceed
215+
space.
216+
</li>
217+
<li>
218+
Use `renderSurplus` to match branding or add tooltips/custom UI.
219+
</li>
220+
<li>Maintain consistent alt texts for accessibility.</li>
221+
</ul>
222+
</div>
223+
)}
224+
</section>
225+
</SistentLayout>
226+
);
227+
};
228+
229+
export default AvatarGroupComponent;

0 commit comments

Comments
 (0)