diff --git a/src/pages/setting/personality/components/SocialRenderer.tsx b/src/pages/setting/personality/components/SocialRenderer.tsx index bd867d3..f945da6 100644 --- a/src/pages/setting/personality/components/SocialRenderer.tsx +++ b/src/pages/setting/personality/components/SocialRenderer.tsx @@ -1,6 +1,7 @@ -import { FC } from 'react' +import React, { FC } from 'react' import { SocialType, SocialNetworkType, SocialIconSize, SocialIconStyle, ElementType, PersonalityDataType, HorizontalAlignment, VerticalAlignment } from '../types/Types' import { usePersonalityStore } from '../store/Store' +import { getSocialIconPath, hasPngIcon, getSocialColor as getSocialColorFromUtils, getSocialSvgIcon } from '../utils/socialIcons' interface SocialRendererProps { socials: SocialType[] @@ -26,109 +27,28 @@ const SocialRenderer: FC = ({ socials, itemId, sectionKey } } const getSocialIcon = (networkType: SocialNetworkType) => { - const getSvgIcon = (networkType: SocialNetworkType) => { - switch (networkType) { - case SocialNetworkType.FACEBOOK: - return ( - - - - ) - case SocialNetworkType.TWITTER: - return ( - - - - ) - case SocialNetworkType.INSTAGRAM: - return ( - - - - ) - case SocialNetworkType.LINKEDIN: - return ( - - - - ) - case SocialNetworkType.YOUTUBE: - return ( - - - - ) - case SocialNetworkType.TELEGRAM: - return ( - - - - ) - case SocialNetworkType.WHATSAPP: - return ( - - - - ) - case SocialNetworkType.TIKTOK: - return ( - - - - ) - case SocialNetworkType.PINTEREST: - return ( - - - - ) - case SocialNetworkType.SNAPCHAT: - return ( - - - - ) - case SocialNetworkType.GITHUB: - return ( - - - - ) - case SocialNetworkType.DISCORD: - return ( - - - - ) - default: - return ( - - - - ) - } + // Check if PNG icon is available, if so use it + if (hasPngIcon(networkType)) { + const iconPath = getSocialIconPath(networkType) + return ( + {`${networkType} + ) } - return getSvgIcon(networkType) + // Use shared SVG function + return getSocialSvgIcon(networkType, true) as React.ReactElement } - const getSocialColor = (networkType: SocialNetworkType) => { - const colors = { - [SocialNetworkType.FACEBOOK]: '#1877F2', - [SocialNetworkType.TWITTER]: '#1DA1F2', - [SocialNetworkType.INSTAGRAM]: '#E4405F', - [SocialNetworkType.LINKEDIN]: '#0A66C2', - [SocialNetworkType.YOUTUBE]: '#FF0000', - [SocialNetworkType.TELEGRAM]: '#0088CC', - [SocialNetworkType.WHATSAPP]: '#25D366', - [SocialNetworkType.TIKTOK]: '#000000', - [SocialNetworkType.PINTEREST]: '#BD081C', - [SocialNetworkType.SNAPCHAT]: '#FFFC00', - [SocialNetworkType.GITHUB]: '#333333', - [SocialNetworkType.DISCORD]: '#5865F2', - } - return colors[networkType] || '#000000' - } + const getSocialColor = getSocialColorFromUtils const getIconSize = (size: SocialIconSize) => { switch (size) { @@ -152,7 +72,6 @@ const SocialRenderer: FC = ({ socials, itemId, sectionKey } justifyContent: 'center', textDecoration: 'none', color: social.color || getSocialColor(social.networkType), - backgroundColor: social.backgroundColor || 'transparent', transition: 'all 0.2s ease', margin: '2px', cursor: 'pointer', @@ -164,19 +83,16 @@ const SocialRenderer: FC = ({ socials, itemId, sectionKey } return { ...baseStyle, borderRadius: '50%', - border: `1px solid ${social.color || getSocialColor(social.networkType)}`, } case SocialIconStyle.SQUARE: return { ...baseStyle, borderRadius: '0', - border: `1px solid ${social.color || getSocialColor(social.networkType)}`, } case SocialIconStyle.ROUNDED: return { ...baseStyle, borderRadius: '8px', - border: `1px solid ${social.color || getSocialColor(social.networkType)}`, } default: return baseStyle diff --git a/src/pages/setting/personality/components/SocialSidebar.tsx b/src/pages/setting/personality/components/SocialSidebar.tsx index 872eb56..f76a4f6 100644 --- a/src/pages/setting/personality/components/SocialSidebar.tsx +++ b/src/pages/setting/personality/components/SocialSidebar.tsx @@ -3,10 +3,11 @@ import ColorPicker from '@/components/ColorPicker' import Input from '@/components/Input' import Select from '@/components/Select' import { AlignRight, AlignBottom, AlignHorizontally, AlignLeft, AlignTop, AlignVertically, Add, Edit, Trash, Link2 } from 'iconsax-react' -import { FC, useState, useEffect } from 'react' +import React, { FC, useState, useEffect } from 'react' import { useTranslation } from 'react-i18next' import { usePersonalityStore } from '../store/Store' import { SocialNetworkType, SocialIconSize, SocialIconStyle, HorizontalAlignment, VerticalAlignment, ElementType } from '../types/Types' +import { getSocialIconPath, hasPngIcon, getSocialSvgIcon } from '../utils/socialIcons' const SocialSidebar: FC = () => { @@ -25,7 +26,6 @@ const SocialSidebar: FC = () => { const [size, setSize] = useState(SocialIconSize.MEDIUM) const [style, setStyle] = useState(SocialIconStyle.CIRCLE) const [color, setColor] = useState('#000000') - const [backgroundColor, setBackgroundColor] = useState('#ffffff') const [horizontalAlignment, setHorizontalAlignment] = useState(HorizontalAlignment.CENTER) const [verticalAlignment, setVerticalAlignment] = useState(VerticalAlignment.MIDDLE) @@ -57,7 +57,6 @@ const SocialSidebar: FC = () => { setSize(social.size); setStyle(social.style); setColor(social.color || '#000000'); - setBackgroundColor(social.backgroundColor || '#ffffff'); setHorizontalAlignment(social.alignment || HorizontalAlignment.CENTER); setVerticalAlignment(social.verticalAlignment || VerticalAlignment.MIDDLE); } else { @@ -73,7 +72,6 @@ const SocialSidebar: FC = () => { setSize(SocialIconSize.MEDIUM) setStyle(SocialIconStyle.CIRCLE) setColor('#000000') - setBackgroundColor('#ffffff') setHorizontalAlignment(HorizontalAlignment.CENTER) setVerticalAlignment(VerticalAlignment.MIDDLE) } @@ -114,7 +112,6 @@ const SocialSidebar: FC = () => { size, style, color, - backgroundColor, alignment: horizontalAlignment, verticalAlignment, }) @@ -125,7 +122,6 @@ const SocialSidebar: FC = () => { setSize(SocialIconSize.MEDIUM) setStyle(SocialIconStyle.CIRCLE) setColor('#000000') - setBackgroundColor('#ffffff') setHorizontalAlignment(HorizontalAlignment.CENTER) setVerticalAlignment(VerticalAlignment.MIDDLE) } @@ -143,7 +139,6 @@ const SocialSidebar: FC = () => { size, style, color, - backgroundColor, alignment: horizontalAlignment, verticalAlignment, } @@ -171,6 +166,86 @@ const SocialSidebar: FC = () => { setSelectedElement(null); } + // Preview component for selected social network + const renderPreview = () => { + const getIconSize = () => { + switch (size) { + case SocialIconSize.SMALL: + return { width: '24px', height: '24px' } + case SocialIconSize.MEDIUM: + return { width: '32px', height: '32px' } + case SocialIconSize.LARGE: + return { width: '40px', height: '40px' } + default: + return { width: '32px', height: '32px' } + } + } + + const getIconStyle = () => { + const iconSize = getIconSize() + const baseStyle = { + ...iconSize, + display: 'inline-flex', + alignItems: 'center', + justifyContent: 'center', + color: color, + transition: 'all 0.2s ease', + } + + switch (style) { + case SocialIconStyle.CIRCLE: + return { + ...baseStyle, + borderRadius: '50%', + } + case SocialIconStyle.SQUARE: + return { + ...baseStyle, + borderRadius: '0', + } + case SocialIconStyle.ROUNDED: + return { + ...baseStyle, + borderRadius: '8px', + } + default: + return baseStyle + } + } + + const renderIcon = () => { + if (hasPngIcon(networkType)) { + const iconPath = getSocialIconPath(networkType) + return ( + {`${networkType} + ) + } + + // Use shared SVG function for fallback + return getSocialSvgIcon(networkType, true) as React.ReactElement + } + + return ( +
+
{t('setting.preview')}
+
+
+ {renderIcon()} +
+
+
+ ) + } + return (
@@ -193,6 +268,9 @@ const SocialSidebar: FC = () => { />
+ {/* Preview of selected social network */} + {renderPreview()} +
{ />
-
- -
+
diff --git a/src/pages/setting/personality/store/Store.ts b/src/pages/setting/personality/store/Store.ts index b63b301..9a13f8c 100644 --- a/src/pages/setting/personality/store/Store.ts +++ b/src/pages/setting/personality/store/Store.ts @@ -250,7 +250,7 @@ export const usePersonalityStore = create((set) => ({ item.id === itemId ? { ...item, - texts: [...item.texts, { ...text, id: uuidv4() }], + texts: [...(item.texts || []), { ...text, id: uuidv4() }], } : item ), @@ -272,7 +272,7 @@ export const usePersonalityStore = create((set) => ({ index === activeIndex ? { ...item, - texts: [...item.texts, { ...text, id: uuidv4() }], + texts: [...(item.texts || []), { ...text, id: uuidv4() }], } : item ); @@ -302,7 +302,10 @@ export const usePersonalityStore = create((set) => ({ item.id === itemId ? { ...item, - buttons: [...item.buttons, { ...button, id: uuidv4() }], + buttons: [ + ...(item.buttons || []), + { ...button, id: uuidv4() }, + ], } : item ), @@ -324,7 +327,7 @@ export const usePersonalityStore = create((set) => ({ index === activeIndex ? { ...item, - buttons: [...item.buttons, { ...button, id: uuidv4() }], + buttons: [...(item.buttons || []), { ...button, id: uuidv4() }], } : item ); @@ -355,7 +358,7 @@ export const usePersonalityStore = create((set) => ({ item.id === itemId ? { ...item, - texts: item.texts.map((text) => + texts: (item.texts || []).map((text) => text.id === textId ? { ...text, ...updates } : text ), } @@ -380,7 +383,7 @@ export const usePersonalityStore = create((set) => ({ item.id === itemId ? { ...item, - buttons: item.buttons.map((button) => + buttons: (item.buttons || []).map((button) => button.id === buttonId ? { ...button, ...updates } : button ), } @@ -404,7 +407,7 @@ export const usePersonalityStore = create((set) => ({ item.id === itemId ? { ...item, - images: [...item.images, { ...image, id: uuidv4() }], + images: [...(item.images || []), { ...image, id: uuidv4() }], } : item ), @@ -426,7 +429,7 @@ export const usePersonalityStore = create((set) => ({ index === activeIndex ? { ...item, - images: [...item.images, { ...image, id: uuidv4() }], + images: [...(item.images || []), { ...image, id: uuidv4() }], } : item ); @@ -457,7 +460,7 @@ export const usePersonalityStore = create((set) => ({ item.id === itemId ? { ...item, - images: item.images.map((image) => + images: (item.images || []).map((image) => image.id === imageId ? { ...image, ...updates } : image ), } @@ -481,7 +484,9 @@ export const usePersonalityStore = create((set) => ({ item.id === itemId ? { ...item, - texts: item.texts.filter((text) => text.id !== textId), + texts: (item.texts || []).filter( + (text) => text.id !== textId + ), } : item ), @@ -505,7 +510,7 @@ export const usePersonalityStore = create((set) => ({ item.id === itemId ? { ...item, - buttons: item.buttons.filter( + buttons: (item.buttons || []).filter( (button) => button.id !== buttonId ), } @@ -531,7 +536,9 @@ export const usePersonalityStore = create((set) => ({ item.id === itemId ? { ...item, - images: item.images.filter((image) => image.id !== imageId), + images: (item.images || []).filter( + (image) => image.id !== imageId + ), } : item ), @@ -555,7 +562,10 @@ export const usePersonalityStore = create((set) => ({ item.id === itemId ? { ...item, - socials: [...item.socials, { ...social, id: uuidv4() }], + socials: [ + ...(item.socials || []), + { ...social, id: uuidv4() }, + ], } : item ), @@ -577,7 +587,7 @@ export const usePersonalityStore = create((set) => ({ index === activeIndex ? { ...item, - socials: [...item.socials, { ...social, id: uuidv4() }], + socials: [...(item.socials || []), { ...social, id: uuidv4() }], } : item ); @@ -608,7 +618,7 @@ export const usePersonalityStore = create((set) => ({ item.id === itemId ? { ...item, - socials: item.socials.map((social) => + socials: (item.socials || []).map((social) => social.id === socialId ? { ...social, ...updates } : social ), } @@ -632,7 +642,7 @@ export const usePersonalityStore = create((set) => ({ item.id === itemId ? { ...item, - socials: item.socials.filter( + socials: (item.socials || []).filter( (social) => social.id !== socialId ), } diff --git a/src/pages/setting/personality/types/Types.ts b/src/pages/setting/personality/types/Types.ts index b9fb9b4..4ef41a7 100644 --- a/src/pages/setting/personality/types/Types.ts +++ b/src/pages/setting/personality/types/Types.ts @@ -168,7 +168,6 @@ export type SocialType = { size: SocialIconSize; style: SocialIconStyle; color?: string; - backgroundColor?: string; alignment?: HorizontalAlignment; verticalAlignment?: VerticalAlignment; }; diff --git a/src/pages/setting/personality/utils/ExportHTML.ts b/src/pages/setting/personality/utils/ExportHTML.ts index 263961e..59cc226 100644 --- a/src/pages/setting/personality/utils/ExportHTML.ts +++ b/src/pages/setting/personality/utils/ExportHTML.ts @@ -8,7 +8,17 @@ import { ButtonType, ImageType, SectionType, + SocialType, + SocialNetworkType, + SocialIconSize, + SocialIconStyle, } from "../types/Types"; +import { + getSocialIconPath, + hasPngIcon, + getSocialColor, + getSocialSvgIcon, +} from "./socialIcons"; export const exportPersonalityToHTML = async ( data: PersonalityDataType @@ -233,6 +243,80 @@ export const exportPersonalityToHTML = async ( .join(""); }; + // Render SocialRenderer equivalent + const renderSocials = (socials: SocialType[]) => { + if (!socials || socials.length === 0) return ""; + + const getIconSize = (size: SocialIconSize) => { + switch (size) { + case SocialIconSize.SMALL: + return "24px"; + case SocialIconSize.MEDIUM: + return "32px"; + case SocialIconSize.LARGE: + return "40px"; + default: + return "32px"; + } + }; + + const getIconStyle = (social: SocialType) => { + const size = getIconSize(social.size); + const baseStyle = `width: ${size}; height: ${size}; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; color: ${ + social.color || getSocialColor(social.networkType) + }; margin: 2px;`; + + switch (social.style) { + case SocialIconStyle.CIRCLE: + return `${baseStyle} border-radius: 50%;`; + case SocialIconStyle.SQUARE: + return `${baseStyle} border-radius: 0;`; + case SocialIconStyle.ROUNDED: + return `${baseStyle} border-radius: 8px;`; + default: + return baseStyle; + } + }; + + const getSocialIcon = (networkType: SocialNetworkType) => { + // Check if PNG icon is available, if so use it + if (hasPngIcon(networkType)) { + const iconPath = getSocialIconPath(networkType); + return `${networkType} icon`; + } + + // Use shared SVG function + return getSocialSvgIcon(networkType, false) as string; + }; + + return ` + + + + + +
+
+ ${socials + .map( + (social) => + ` + ${getSocialIcon(social.networkType)} + ` + ) + .join("")} +
+
`; + }; + // Helper functions for button alignment (same as in React components) const getButtonHorizontalAlign = (button?: { alignment?: HorizontalAlignment; @@ -289,6 +373,10 @@ export const exportPersonalityToHTML = async ( item?.buttons && item.buttons.length > 0; const hasTexts = item?.texts && item.texts.length > 0; + const hasImages = + item?.images && item.images.length > 0; + const hasSocials = + item?.socials && item.socials.length > 0; let result = ` `; - // اگر فقط دکمه داریم و متن نداریم - if (!hasTexts && hasButtons) { - result += ` - - ${renderButtons(item.buttons)} - - `; - } else { - // ردیف اصلی برای متن و تصاویر - const mainHeight = hasButtons - ? sectionHeight === "123px" - ? "60" + // اگر محتوایی وجود دارد (متن، دکمه، تصویر، یا شبکه اجتماعی) + if ( + hasTexts || + hasButtons || + hasImages || + hasSocials + ) { + // اگر فقط دکمه داریم و متن نداریم + if (!hasTexts && hasButtons) { + result += ` + + ${renderImages(item?.images || [])} + ${renderSocials(item?.socials || [])} + ${renderButtons(item.buttons)} + + `; + } else { + // ردیف اصلی برای متن و تصاویر + const mainHeight = hasButtons + ? sectionHeight === "123px" + ? "60" + : sectionHeight === "246px" + ? "203" + : "40" + : sectionHeight === "123px" + ? "87" : sectionHeight === "246px" - ? "203" - : "40" - : sectionHeight === "123px" - ? "87" - : sectionHeight === "246px" - ? "230" - : "67"; + ? "230" + : "67"; - result += ` + result += ` ${renderTexts(item?.texts || [])} ${renderImages(item?.images || [])} + ${renderSocials(item?.socials || [])} ${ isContentSection ? '
{{content}}
' @@ -347,17 +445,18 @@ export const exportPersonalityToHTML = async ( `; - // ردیف دکمه‌ها - if (hasButtons) { - result += ` + // ردیف دکمه‌ها + if (hasButtons) { + result += ` + item.buttons[0] + )}" style="padding: 0 8px 8px 8px;"> ${renderButtons(item.buttons)} `; + } } } diff --git a/src/pages/setting/personality/utils/socialIcons.ts b/src/pages/setting/personality/utils/socialIcons.ts new file mode 100644 index 0000000..ea3c84b --- /dev/null +++ b/src/pages/setting/personality/utils/socialIcons.ts @@ -0,0 +1,98 @@ +import React from "react"; +import { SocialNetworkType } from "../types/Types"; + +// Map social network types to their corresponding icon file names +export const getSocialIconPath = (networkType: SocialNetworkType): string => { + const iconMap: Record = { + [SocialNetworkType.FACEBOOK]: + "https://dmail-admin.danakcorp.com/facebook.png", + [SocialNetworkType.TWITTER]: + "https://dmail-admin.danakcorp.com/twitter.png", + [SocialNetworkType.INSTAGRAM]: + "https://dmail-admin.danakcorp.com/instagram.png", + [SocialNetworkType.LINKEDIN]: + "https://dmail-admin.danakcorp.com/linkedin.png", + [SocialNetworkType.TELEGRAM]: + "https://dmail-admin.danakcorp.com/telegram.png", + [SocialNetworkType.WHATSAPP]: + "https://dmail-admin.danakcorp.com/whatsapp.png", + // For social networks without PNG icons, we'll use a default or keep SVG + [SocialNetworkType.YOUTUBE]: "", // Will fallback to SVG + [SocialNetworkType.TIKTOK]: "", // Will fallback to SVG + [SocialNetworkType.PINTEREST]: "", // Will fallback to SVG + [SocialNetworkType.SNAPCHAT]: "", // Will fallback to SVG + [SocialNetworkType.GITHUB]: "", // Will fallback to SVG + [SocialNetworkType.DISCORD]: "", // Will fallback to SVG + }; + + return iconMap[networkType] || ""; +}; + +// Check if a PNG icon is available for the social network +export const hasPngIcon = (networkType: SocialNetworkType): boolean => { + const iconPath = getSocialIconPath(networkType); + return iconPath !== ""; +}; + +// Get social network colors (keeping the existing colors) +export const getSocialColor = (networkType: SocialNetworkType): string => { + const colors = { + [SocialNetworkType.FACEBOOK]: "#1877F2", + [SocialNetworkType.TWITTER]: "#1DA1F2", + [SocialNetworkType.INSTAGRAM]: "#E4405F", + [SocialNetworkType.LINKEDIN]: "#0A66C2", + [SocialNetworkType.YOUTUBE]: "#FF0000", + [SocialNetworkType.TELEGRAM]: "#0088CC", + [SocialNetworkType.WHATSAPP]: "#25D366", + [SocialNetworkType.TIKTOK]: "#000000", + [SocialNetworkType.PINTEREST]: "#BD081C", + [SocialNetworkType.SNAPCHAT]: "#FFFC00", + [SocialNetworkType.GITHUB]: "#333333", + [SocialNetworkType.DISCORD]: "#5865F2", + }; + return colors[networkType] || "#000000"; +}; + +// Get SVG icons for social networks that don't have PNG icons +export const getSocialSvgIcon = ( + networkType: SocialNetworkType, + isReactElement = true +): string | React.ReactElement => { + const svgContent: Record = { + [SocialNetworkType.YOUTUBE]: + "M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z", + [SocialNetworkType.TIKTOK]: + "M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z", + [SocialNetworkType.PINTEREST]: + "M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.174-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.097.118.112.222.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.402.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.357-.629-2.746-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24.009 12.017 24c6.624 0 11.99-5.367 11.99-12C24.007 5.367 18.641.001.017 0z", + [SocialNetworkType.SNAPCHAT]: + "M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.174-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.097.118.112.222.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.402.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.357-.629-2.746-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24.009 12.017 24c6.624 0 11.99-5.367 11.99-12C24.007 5.367 18.641.001.017 0z", + [SocialNetworkType.GITHUB]: + "M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12", + [SocialNetworkType.DISCORD]: + "M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419-.0002 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1568 2.4189Z", + default: + "M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z", + }; + + const pathData = svgContent[networkType] || svgContent.default; + + if (isReactElement) { + // برای استفاده در React components + return React.createElement( + "svg", + { + viewBox: "0 0 24 24", + width: "100%", + height: "100%", + fill: "currentColor", + }, + React.createElement("path", { d: pathData }) + ) as React.ReactElement; + } else { + // برای استفاده در HTML strings + return ` + + `; + } +};