Control avatar ring visibility

src/components/GitProfile.jsx

@@ -156,7 +156,11 @@ const GitProfile = ({ config }) => {
                           themeConfig={sanitizedConfig.themeConfig}
                         />
                       )}
-                      <AvatarCard profile={profile} loading={loading} />
+                      <AvatarCard
+                        profile={profile}
+                        loading={loading}
+                        avatarRing={!sanitizedConfig.themeConfig.hideAvatarRing}
+                      />
                       <Details
                         profile={profile}
                         loading={loading}
@@ -281,6 +285,7 @@ GitProfile.propTypes = {
       defaultTheme: PropTypes.string,
       disableSwitch: PropTypes.bool,
       respectPrefersColorScheme: PropTypes.bool,
+      hideAvatarRing: PropTypes.bool,
       themes: PropTypes.array,
       customTheme: PropTypes.shape({
         primary: PropTypes.string,

src/components/avatar-card/index.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import { fallbackImage, skeleton } from '../../helpers/utils';
 import LazyImage from '../lazy-image';
 
-const AvatarCard = ({ profile, loading }) => {
+const AvatarCard = ({ profile, loading, avatarRing }) => {
   return (
     <div className="card shadow-lg compact bg-base-100">
       <div className="grid place-items-center py-8">
@@ -18,7 +18,13 @@ const AvatarCard = ({ profile, loading }) => {
           </div>
         ) : (
           <div className="avatar opacity-90">
-            <div className="mb-8 rounded-full w-32 h-32 ring ring-primary ring-offset-base-100 ring-offset-2">
+            <div
+              className={`mb-8 rounded-full w-32 h-32 ${
+                avatarRing
+                  ? 'ring ring-primary ring-offset-base-100 ring-offset-2'
+                  : ''
+              }`}
+            >
               {
                 <LazyImage
                   src={profile.avatar ? profile.avatar : fallbackImage}
@@ -57,6 +63,7 @@ const AvatarCard = ({ profile, loading }) => {
 AvatarCard.propTypes = {
   profile: PropTypes.object,
   loading: PropTypes.bool.isRequired,
+  avatarRing: PropTypes.bool.isRequired,
 };
 
 export default AvatarCard;