Add avatar component by Docux

docs/component-library/new/Simplecard/index.mdx

@@ -39,29 +39,29 @@ Creating the file and adding the source code for the component.
 <Tabs groupId="js-ts">
   <TabItem value="js" label="JS">
 
-```javascript title='\src\components\SimpleCard\Card\index.js'
-import React,  { CSSProperties } from 'react'; // CSSProperties allows inline styling with better type checking.
-import clsx from 'clsx'; // clsx helps manage conditional className names in a clean and concise manner.
-
+```javascript title='\src\components\Avatar\AvatarContainer\index.js'
+import React,  { CSSProperties } from 'react';
+import clsx from 'clsx'; // Assurez-vous d'avoir clsx installé et importé correctement
 
 
-const Card = ({
-  className, // classNamees for the container card
-  style, // Custom styles for the container card
-  children,  // for include others parts in
-  shadow,  // for add shadow under your card Shadow levels: low (lw), medium (md), top-level (tl)
-}) => {
-  const cardShadow = shadow ? `item shadow--${shadow}` :'';
+const AvatarContainer = ({
+  className, // Classes personnalisées pour le composant
+  style, // Styles personnalisés pour le composant
+  children, // Contenu du composant
+  vertical = false, 
+}) => {   
+  const avatarPosition = vertical ? `avatar--vertical` :'';
   return (
-    <div className="card-demo">
-    <div className={clsx("card", className, cardShadow)} style={style}>
+    <div className={clsx("avatar", className, avatarPosition)} style={style}>
+
     {children}
-  </div></div>
+  </div>
   );
-};
+}
 
 
-export default  Card;
+export default AvatarContainer ;
+
 ```
 
 </TabItem>

src/components/Avatar/AvatarContainer/index.tsx

@@ -0,0 +1,33 @@
+import React, { CSSProperties, ReactNode } from 'react';
+import clsx from 'clsx';
+
+interface AvatarContainerProps {
+  className?: string; // Custom classes for the component
+  style?: CSSProperties; // Custom styles for the component
+  children: ReactNode; // Content of the component
+  vertical?: boolean; // Option for vertical position
+}
+
+const AvatarContainer: React.FC<AvatarContainerProps> = ({
+  className, // Custom classes for the component
+  style, // Custom styles for the component
+  children, // Content of the component
+  vertical = false, // Default to false for vertical position
+}) => {   
+  const avatarPosition = vertical ? 'avatar--vertical' : '';
+
+  return (
+    <div className={clsx(
+        "avatar", 
+        className, 
+        avatarPosition
+        )} 
+
+        style={style}>
+
+      {children}
+    </div>
+  );
+}
+
+export default AvatarContainer;

src/components/Avatar/AvatarImage/index.tsx

@@ -0,0 +1,54 @@
+import React, { CSSProperties } from 'react';
+import clsx from 'clsx'; 
+import useBaseUrl from '@docusaurus/useBaseUrl'; // Import the useBaseUrl function from Docusaurus for generate valide image url
+
+interface AvatarImageProps {
+  className?: string; // Custom classes for the component
+  style?: CSSProperties; // Custom styles for the component
+  avatarImageUrl: string; // URL of the avatar image
+  alt: string; // Alt text for the image
+  title?: string; // Title text for the image
+  link?: boolean; // Determines if the image should be a link
+  destination?: string; // Link URL if link = true
+  avatarSize?: string; // Size class for the avatar image
+}
+
+const AvatarImage: React.FC<AvatarImageProps> = ({
+  className, // Custom classes for the component
+  style, // Custom styles for the component
+  avatarImageUrl, // URL of the avatar image
+  alt, // Alt text for the image
+  title, // Title text for the image
+  link = false, // Default to false Determines if the image should be a link
+  destination = '#', // Link URL if link = true, default value if destination is not provided
+  avatarSize, // Size class for the avatar image
+}) => {   
+  const generatedAvatarUrl = useBaseUrl(avatarImageUrl);
+  const avatarImageSizeClass = avatarSize ? `avatar__photo--${avatarSize}` : '';
+
+  const imgElement = (
+    <img
+      className={clsx(
+      "avatar__photo", 
+      className, 
+      avatarImageSizeClass
+      )}
+
+      style={style}
+      src={generatedAvatarUrl}
+      alt={alt}
+      title={title}
+
+    />
+  );
+
+  return link ? (
+    <a className="avatar__photo-link" href={destination}>
+      {imgElement}
+    </a>
+  ) : (
+    imgElement
+  );
+};
+
+export default AvatarImage;

src/components/Avatar/AvatarIntro/index.tsx

@@ -0,0 +1,62 @@
+import React, { CSSProperties, ReactNode } from 'react';
+import clsx from 'clsx'; 
+
+interface AvatarIntroProps {
+  className?: string; // Custom classes for the component
+  style?: CSSProperties; // Custom styles for the component
+  children: ReactNode; // Content of the component
+  textAlign?: 'left' | 'center' | 'right'; // Text alignment options
+  variant?: 'primary' | 'secondary' | 'danger' | 'warning' | 'success' | 'info' | 'link' | string;
+  italic?: boolean; // Determines if the text is italic
+  noDecoration?: boolean; // Determines if the text has no decoration
+  transform?: string; // Text transform option
+  breakWord?: boolean; // Determines if the text breaks words
+  truncate?: boolean; // Determines if the text is truncated
+  weight?: string; // Weight of the text 
+}
+
+const AvatarIntro: React.FC<AvatarIntroProps> = ({
+  className, // Custom classes for the component
+  style, // Custom styles for the component
+  children, // Content of the component
+  textAlign, // Text alignment 
+  variant, // Variant for text color or style
+  italic = false, // Default to false for italic text
+  noDecoration = false, // Default to false for no decoration
+  transform, // Text transform option
+  breakWord = false, // Default to false for break words
+  truncate = false, // Default to false for truncate
+  weight, // Weight of the text 
+}) => {   
+
+  const textAlignClass = textAlign ? `text--${textAlign}` : '';
+  const textColor = variant ? `text--${variant}` : '';
+  const textItalic = italic ? 'text--italic' : '';
+  const textDecoration = noDecoration ? 'text-no-decoration' : '';
+  const textType = transform ? `text--${transform}` : '';
+  const textBreak = breakWord ? 'text--break' : '';
+  const textTruncate = truncate ? 'text--truncate' : '';
+  const textWeight = weight ? `text--${weight}` : '';
+
+  return (
+    <div 
+      className={clsx(
+        "avatar__intro",
+        className,
+        textAlignClass,
+        textType,
+        textColor,
+        textItalic,
+        textDecoration,
+        textBreak,
+        textTruncate,
+        textWeight
+      )}
+      style={style}
+    >
+      {children}
+    </div>
+  );
+}
+
+export default AvatarIntro;

src/components/Avatar/AvatarName/index.tsx

@@ -0,0 +1,61 @@
+import React, { CSSProperties, ReactNode } from 'react';
+import clsx from 'clsx'; 
+
+interface AvatarNameProps {
+  className?: string; // Custom classes for the component
+  style?: CSSProperties; // Custom styles for the component
+  children: ReactNode; // Content of the component
+  textAlign?: 'left' | 'center' | 'right'; // Text alignment options
+  variant?: 'primary' | 'secondary' | 'danger' | 'warning' | 'success' | 'info' | 'link' | string;
+  italic?: boolean; // Determines if the text is italic
+  noDecoration?: boolean; // Determines if the text has no decoration
+  transform?: string; // Text transform option 
+  breakWord?: boolean; // Determines if the text breaks words
+  truncate?: boolean; // Determines if the text is truncated
+  weight?: string; // Weight of the text
+}
+
+const AvatarName: React.FC<AvatarNameProps> = ({
+  className, // Custom classes for the component
+  style, // Custom styles for the component
+  children, // Content of the component
+  textAlign, // Text alignment 
+  variant, // Variant for text color or style
+  italic = false, // Default to false for italic text
+  noDecoration = false, // Default to false for no decoration
+  transform, // Text transform option
+  breakWord = false, // Default to false for break words
+  truncate = false, // Default to false for truncate
+  weight, // Weight of the text 
+}) => {   
+  const textAlignClass = textAlign ? `text--${textAlign}` : '';
+  const textColor = variant ? `text--${variant}` : '';
+  const textItalic = italic ? 'text--italic' : '';
+  const textDecoration = noDecoration ? 'text-no-decoration' : '';
+  const textType = transform ? `text--${transform}` : '';
+  const textBreak = breakWord ? 'text--break' : '';
+  const textTruncate = truncate ? 'text--truncate' : '';
+  const textWeight = weight ? `text--${weight}` : '';
+
+  return (
+    <div 
+      className={clsx(
+        "avatar__name", 
+        className, 
+        textAlignClass, 
+        textType, 
+        textColor, 
+        textItalic, 
+        textDecoration, 
+        textBreak, 
+        textTruncate, 
+        textWeight
+      )} 
+      style={style}
+    >
+      {children}
+    </div>
+  );
+}
+
+export default AvatarName;

src/components/Avatar/AvatarSubtitle/index.tsx

@@ -0,0 +1,61 @@
+import React, { CSSProperties, ReactNode } from 'react';
+import clsx from 'clsx'; 
+
+interface AvatarSubtitleProps {
+  className?: string; // Custom classes for the component
+  style?: CSSProperties; // Custom styles for the component
+  children: ReactNode; // Content of the component
+  textAlign?: 'left' | 'center' | 'right'; // Text alignment options
+  variant?: 'primary' | 'secondary' | 'danger' | 'warning' | 'success' | 'info' | 'link' | string;
+  italic?: boolean; // Determines if the text is italic
+  noDecoration?: boolean; // Determines if the text has no decoration
+  transform?: string; // Text transform option 
+  breakWord?: boolean; // Determines if the text breaks words
+  truncate?: boolean; // Determines if the text is truncated
+  weight?: string; // Weight of the text
+}
+
+const AvatarSubtitle: React.FC<AvatarSubtitleProps> = ({
+  className, // Custom classes for the component
+  style, // Custom styles for the component
+  children, // Content of the component
+  textAlign, // Text alignment
+  variant, // Variant for text color or style
+  italic = false, // Default to false for italic text
+  noDecoration = false, // Default to false for no decoration
+  transform, // Text transform option
+  breakWord = false, // Default to false for break words
+  truncate = false, // Default to false for truncate
+  weight, // Weight of the text 
+}) => {   
+  const textAlignClass = textAlign ? `text--${textAlign}` : '';
+  const textColor = variant ? `text--${variant}` : '';
+  const textItalic = italic ? 'text--italic' : '';
+  const textDecoration = noDecoration ? 'text-no-decoration' : '';
+  const textType = transform ? `text--${transform}` : '';
+  const textBreak = breakWord ? 'text--break' : '';
+  const textTruncate = truncate ? 'text--truncate' : '';
+  const textWeight = weight ? `text--${weight}` : '';
+
+  return (
+    <small
+      className={clsx(
+        "avatar__subtitle",
+        className,
+        textAlignClass,
+        textType,
+        textColor,
+        textItalic,
+        textDecoration,
+        textBreak,
+        textTruncate,
+        textWeight
+      )}
+      style={style}
+    >
+      {children}
+    </small>
+  );
+}
+
+export default AvatarSubtitle;

src/theme/MDXComponents.tsx

@@ -26,6 +26,12 @@ import CardHeader from '@site/src/components/SimpleCard/CardHeader';
 import CardImage from '@site/src/components/SimpleCard/CardImage';
 import Timeline from '@site/src/components/Timeline';
 import TimelineItem from '@site/src/components/Timeline/TimelineItem';
+import AvatarContainer from '@site/src/components/Avatar/AvatarContainer';
+import AvatarImage from '@site/src/components/Avatar/AvatarImage';
+import AvatarIntro from '@site/src/components/Avatar/AvatarIntro';
+import AvatarName from '@site/src/components/Avatar/AvatarName';
+import AvatarSubtitle from '@site/src/components/Avatar/AvatarSubtitle';
+
 
 library.add(fab, fas);
 
@@ -48,4 +54,9 @@ export default {
     CardImage,
     Timeline,
     TimelineItem,
+    AvatarContainer, 
+    AvatarImage,
+    AvatarIntro,
+    AvatarName,
+    AvatarSubtitle,
 };