feat: add setting and Active devices

src/features/profile/components/security/PasswordValidation.tsx

@@ -0,0 +1,41 @@
+import { Box, Typography } from '@mui/material';
+import { TickCircle } from 'iconsax-react';
+
+interface ValidationItemProps {
+  isValid: boolean;
+  label: string;
+}
+
+export function PasswordValidationItem({
+  isValid,
+  label,
+}: ValidationItemProps) {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 1,
+        mb: 0.5,
+        flexWrap: 'wrap',
+      }}
+    >
+      <TickCircle
+        size="16"
+        color={isValid ? '#14AE5C' : '#2979FF'}
+        variant={isValid ? 'Bold' : 'Outline'}
+      />
+      <Typography
+        variant="body2"
+        color="text.primary"
+        sx={{
+          fontSize: { xs: '0.85rem', sm: '0.875rem' },
+          wordBreak: 'break-word',
+          flex: 1,
+        }}
+      >
+        {label}
+      </Typography>
+    </Box>
+  );
+}