php – Create situation for Writer bio Social Hyperlinks

I made Social Hyperlinks for Writer bio
Now, I wish to make a situation that each time Social is added, the <ul class="social-area social-area-2"> </ul> class ought to be created. If no Social is added, the social-area social-area-2 class shouldn’t be added.
Thanks for serving to me

code file author-bio.php

<?php

    $fb  = get_the_author_meta('fb', $author_id);
    $twitter = get_the_author_meta('twitter', $author_id);
    
    if ( (bool) get_the_author_meta( 'description' ) && (bool) get_theme_mod( 'show_author_bio', true ) ) : ?>
    <div class="author-area">
    <div class="media">
        <?php echo get_avatar( get_the_author_meta( 'ID' ), 120 ); ?>

        <div class="media-body align-self-center">
            <div class="text-author">
                <h4>
                    <a category="author-link"
                        href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ); ?>" rel="writer">
                        <?php printf(get_the_author() ); ?>
                    </a>
                </h4>
                <?php echo wp_kses_post( wpautop( get_the_author_meta( 'description' ) ) ); ?>
            </div>        

            <ul class="social-area social-area-2">

                <?php
                if(!empty($fb)) {
                echo '<li><a title="Observe me on Fb" href="'.$fb.'"><i class="fab fa-facebook-f"></i></a></li>'; }
                ?> 

                <?php   
                if(!empty($twitter)) {
                echo '<li><a title="Observe me on Twitter" href="'.$twitter.'"><i class="fab fa-twitter"></i></a></li>'; }
                ?>

            </ul>
        </div>
    </div>
</div>
<?php endif; ?>

code file features.php

    perform my_new_contactmethods( $contactmethods ) {

    $contactmethods['facebook'] = 'Fb';
    $contactmethods['twitter'] = 'Twitter';
    
    return $contactmethods;
    }
    add_filter('user_contactmethods','my_new_contactmethods',10,1);