remove unwanted commented code

Signed-off-by: Liben Hailu <libenhailu04@gmail.com>

Author: LibenHailu

src/sections/Projects/Sistent/components/avatar-group/guidance.js

@@ -1,163 +1,3 @@
-// import React from "react";
-// import { navigate } from "gatsby";
-// import { useLocation } from "@reach/router";
-// import { SistentLayout } from "../../sistent-layout";
-// import TabButton from "../../../../../reusecore/Button";
-// import { Row } from "../../../../../reusecore/Layout";
-// import { Avatar, AvatarGroup, SistentThemeProvider } from "@sistent/sistent";
-// import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
-//
-// import user1 from "../../../../../assets/images/sistent/placeholder/user.webp";
-// import user2 from "../../../../../assets/images/sistent/placeholder/user.webp";
-// import user3 from "../../../../../assets/images/sistent/placeholder/user.webp";
-// import user4 from "../../../../../assets/images/sistent/placeholder/user.webp";
-//
-// const AvatarGroupGuidance = () => {
-//   const location = useLocation();
-//   const { isDark } = useStyledDarkMode();
-//
-//   return (
-//     <SistentLayout title="Avatar Group">
-//       <div className="content">
-//         <a id="Identity">
-//           <h2>Avatar Group</h2>
-//         </a>
-//         <p>
-//           The AvatarGroup component is used to represent a collection of users
-//           or entities visually grouped together. It is ideal for team-based
-//           representations, collaborative interfaces, or participant listings in
-//           a compact form.
-//         </p>
-//
-//         {/* Tab Navigation */}
-//         <div className="filterBtns">
-//           <TabButton
-//             className={
-//               location.pathname === "/projects/sistent/components/avatar-group"
-//                 ? "active"
-//                 : ""
-//             }
-//             onClick={() =>
-//               navigate("/projects/sistent/components/avatar-group")
-//             }
-//             title="Overview"
-//           />
-//           <TabButton
-//             className={
-//               location.pathname ===
-//               "/projects/sistent/components/avatar-group/guidance"
-//                 ? "active"
-//                 : ""
-//             }
-//             onClick={() =>
-//               navigate("/projects/sistent/components/avatar-group/guidance")
-//             }
-//             title="Guidance"
-//           />
-//           <TabButton
-//             className={
-//               location.pathname ===
-//               "/projects/sistent/components/avatar-group/code"
-//                 ? "active"
-//                 : ""
-//             }
-//             onClick={() =>
-//               navigate("/projects/sistent/components/avatar-group/code")
-//             }
-//             title="Code"
-//           />
-//         </div>
-//
-//         <div className="main-content">
-//           <p>
-//             To use AvatarGroup effectively, consider the number of users, the
-//             available space, and the visual emphasis. This ensures the grouping
-//             is clear, non-intrusive, and enhances usability across contexts.
-//           </p>
-//
-//           <a id="Usage">
-//             <h2>Usage Patterns</h2>
-//           </a>
-//
-//           <h3>Default Behavior</h3>
-//           <p>
-//             AvatarGroup automatically arranges avatars in a horizontal layout
-//             with overlapping positioning for visual compactness. It's perfect
-//             for showing contributors or team members.
-//           </p>
-//           <Row $Hcenter className="image-container">
-//             <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
-//               <AvatarGroup>
-//                 <Avatar src={user1} alt="User 1" />
-//                 <Avatar src={user2} alt="User 2" />
-//                 <Avatar src={user3} alt="User 3" />
-//               </AvatarGroup>
-//             </SistentThemeProvider>
-//           </Row>
-//
-//           <h3>Limiting Avatars (max)</h3>
-//           <p>
-//             Use the <code>max</code> prop to show a maximum number of avatars.
-//             Any excess is summarized into a counter (e.g., +2) for cleaner
-//             display.
-//           </p>
-//           <Row $Hcenter className="image-container">
-//             <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
-//               <AvatarGroup max={3}>
-//                 <Avatar src={user1} />
-//                 <Avatar src={user2} />
-//                 <Avatar src={user3} />
-//                 <Avatar src={user4} />
-//               </AvatarGroup>
-//             </SistentThemeProvider>
-//           </Row>
-//
-//           <h3>Spacing</h3>
-//           <p>
-//             AvatarGroup supports adjustable spacing between avatars. Use the{" "}
-//             <code>spacing</code> prop with values like <code>"small"</code>,{" "}
-//             <code>"medium"</code>, or custom units to control layout density.
-//           </p>
-//           <Row $Hcenter className="image-container">
-//             <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
-//               <AvatarGroup spacing="medium">
-//                 <Avatar src={user1} />
-//                 <Avatar src={user2} />
-//                 <Avatar src={user3} />
-//               </AvatarGroup>
-//             </SistentThemeProvider>
-//           </Row>
-//
-//           <h3>Shape Variants</h3>
-//           <p>
-//             Each Avatar in the group can have a <code>variant</code> like{" "}
-//             <code>rounded</code> or <code>square</code>, offering flexibility in
-//             adapting to different visual styles.
-//           </p>
-//           <Row $Hcenter className="image-container">
-//             <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
-//               <AvatarGroup>
-//                 <Avatar variant="rounded" src={user1} />
-//                 <Avatar variant="square" src={user2} />
-//                 <Avatar src={user3} />
-//               </AvatarGroup>
-//             </SistentThemeProvider>
-//           </Row>
-//
-//           <h3>Accessibility</h3>
-//           <p>
-//             Always include <code>alt</code> text for each avatar to improve
-//             accessibility. Use meaningful labels (e.g., full names or roles)
-//             where possible.
-//           </p>
-//         </div>
-//       </div>
-//     </SistentLayout>
-//   );
-// };
-//
-// export default AvatarGroupGuidance;
-
 import React from "react";
 import { navigate } from "gatsby";
 import { useLocation } from "@reach/router";