add: settings page locales

src/components/utils/Accordion.tsx

@@ -1,21 +1,22 @@
 'use client';
 
 import useToggle from '@/hooks/helpers/useToggle';
+import { renderIcon } from '@/lib/helpers/smartIcon';
+import { IconType } from '@/types/iconType';
 import clsx from 'clsx'
 import { motion } from 'framer-motion';
-import { Icon } from 'iconsax-react'
 import { ChevronDown } from 'lucide-react';
 import React, { useEffect } from 'react'
 
-interface DropdownProps extends React.HTMLAttributes<HTMLDivElement> {
-    initial?: boolean,
+interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
+    initial?: boolean
     children?: React.ReactNode
     title?: string
-    icon?: Icon
+    icon?: IconType;
     group?: string
 };
 
-function Accordion({ initial, group, title, icon: Icon, children, className, ...rest }: DropdownProps) {
+function Accordion({ initial, group, title, icon, children, className, ...rest }: AccordionProps) {
     const { state, toggle, set } = useToggle(initial);
 
     useEffect(() => {
@@ -36,6 +37,7 @@ function Accordion({ initial, group, title, icon: Icon, children, className, ...
         };
     }, [group, set, state]);
 
+    
 
     return (
         <div
@@ -56,9 +58,7 @@ function Accordion({ initial, group, title, icon: Icon, children, className, ...
                 )}
             >
                 <div className='flex items-center gap-2'>
-                    {Icon &&
-                        <Icon size={16} className='stroke-foreground mb-0.5' />
-                    }
+                    {renderIcon(icon)}
                     <span className='text-sm2'>{title ?? ''}</span>
                 </div>
                 <ChevronDown
@@ -83,7 +83,7 @@ function Accordion({ initial, group, title, icon: Icon, children, className, ...
                     !state && 'pointer-events-none'
                 )}
             >
-                <div className='py-2'> 
+                <div className='py-2'>
                     {children}
                 </div>
             </motion.div>

src/components/utils/SmartIcon.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import React from "react";
+import * as Iconsax from "iconsax-react";
+import { SmartIconType } from "@/types/iconType";
+
+type IconsaxIconProps = {
+  size?: number;
+  color?: string;
+  className?: string;
+  variant?: string;
+};
+
+type IconComponentType = React.FC<IconsaxIconProps>;
+
+export interface SmartIconProps {
+  icon?: SmartIconType;
+  name?: string;
+  size?: number;
+  color?: string;
+  className?: string;
+  variant?: string;
+}
+
+export const SmartIcon: React.FC<SmartIconProps> = ({
+  icon,
+  name,
+  size,
+  color,
+  className,
+  variant,
+}) => {
+  const iconName = (icon?.Name || name || "").charAt(0).toUpperCase() + (icon?.Name || name || "").slice(1);
+
+  if (!iconName) return null;
+
+  const IconComponent = Iconsax[iconName as keyof typeof Iconsax] as IconComponentType | undefined;
+
+  if (!IconComponent) return null;
+
+  return (
+    <IconComponent
+      variant={icon?.Variant ?? variant ?? 'lineat'}
+      size={icon?.Size ?? size ?? 20}
+      color={icon?.Color ?? color ?? "currentColor"}
+      className={icon?.ClassName ?? className}
+    />
+  );
+};