How to design a UI Component like this in React?

Question

I got the requirement for developing a UI component for teams-info like this.

I have just started using React with React-Bootstrap, but I couldn't find a UI layout which can render this. I have used react-responsive-carousel, but It's a flat icon at the bottom of the image as Thumbnail not like a half-circular option shown in the image.

Update: On selecting another image the image positions must not change. Like this. Can anyone guide me how can I achieve this?

Thanks in advance.

position of the images are fixed. They should not rotate. only the content must changes on selecting the image. Updated my Question. — Debhere, Jun 16 '22 at 16:41
Does this answer your question? [Position icons into circle](https://stackoverflow.com/questions/12813573/position-icons-into-circle) — Giorgi Moniava, Jun 16 '22 at 16:47
Remember that `transform` and `transform-origin` exist. put your images in spans, rotate the spans relative to the center of your card, and then counter-rotate the images inside the spans using the opposite angle so they stay upright. And of course, `transform: rotate(calc(180deg / 5))` is entirely valid, no need to calculate things by hand. — Mike 'Pomax' Kamermans, Jun 16 '22 at 17:52

score 1 · Answer 1 · answered Jun 16 '22 at 17:09

Something like this may bring you closer to the result. One way of mapping the user information in the middle would be through utilizing different pieces of content in an array.


function Circle() {
    function elementMethod(){
         return (
              <span onMouseEnter={...} onMouseLeave={...} className='individual--circ'><img src={...}></img> </span>
    }

    return (
<React.Fragment>
   { circleElement.map((element) => {
    <div classname='cir-menu'>
      {element}
    </div>
        }
</React.Fragment>
    )
}

I've built something similar before which has a similar appearance (animated, however). The CSS looked like this:

    .contact-icon{
        background-color: #000000;
        border-radius: 50%;
        padding: 20px;
        box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.1),
                    2px 2px 2px 2px rgba(0,0,0,0.1),
                    4px 4px 4px 4px rgba(0,0,0,0.1);
    }

    .middle-cir{
        position: relative;

    }



    .contact-outer{
        background-color: #611427;
        color: white;
        height: 100vh;
        width: 100vw;
        position: fixed;
        display: flex;  
        flex-direction: column;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        margin: 0;
        opacity: 100;
        visibility: visible;
        z-index: 4;
        transition: visibility .5s, opacity 1s ease;
    }

    .contact-outer h1{
        top: 0;
        margin-top: 4em;
        position: absolute;
        opacity: 100
    }


    .contact-outer-none h1{
        top: 0;
        margin-top: 4em;
        position: absolute;
    }

    .contact-outer-none{
        background-color: #611427;
        color: #F2F2E9;
        height: 100vh;
        width: 100vw;
        position: fixed;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        margin: 0;
        opacity: 0;
        visibility:hidden;
        z-index: 4;
        transition: visibility .5s,opacity 1s ease;

    }

    .cir-menu{
        position: relative;
        justify-self: center;   
        display: flex;
        justify-content: center;
        align-items: center;
        transform: rotate(-87deg);

    }

    .cir-a{
        position: absolute; 
        transform: rotate(72deg) translateX(80px) rotate(10deg);
        transition: transform 1s;
    }


    .cir-a:hover{
        position: absolute; 
        transform: rotate(72deg) translateX(110px) rotate(10deg);
        
    }   


    .cir-a-min{
        position: absolute; 
        transform: rotate(72-20deg) translateX(0px) rotate(-72deg);
        transition: transform 1s;
    }

    .cir-b{
        position: absolute;
        transform: rotate(144deg) translateX(80px) rotate(-60deg);
        transition: transform 1s;
    }


    .cir-b:hover{
        position: absolute; 
        transform: rotate(144deg) translateX(110px) rotate(-60deg);
        
    }   

    .cir-b-min{
        position: absolute;
        transform: rotate(144-20deg) translateX(0px) rotate(-144deg);
        transition: transform 1s;
    }

    .cir-c{
        position: absolute;
        transform: rotate(216deg)translateX(80px) rotate(-132deg);
        transition: transform 1s;
    }

    .cir-c:hover{
        position: absolute; 
        transform: rotate(216deg) translateX(110px) rotate(-132deg);
        
    }   

    .cir-c-min{
        position: absolute;
        transform: rotate(216-20deg) translateX(0px) rotate(-216deg);
        transition: transform 1s;
    }

    .cir-d{
        position: absolute;
        transform:rotate(288deg) translateX(80px) rotate(-204deg);
        transition: transform 1s;
    }

    .cir-d:hover{
        position: absolute; 
        transform: rotate(288deg) translateX(110px) rotate(-204deg);
        
    }   

    .cir-d-min{
        position: absolute;
        transform:rotate(288-20deg) translateX(0px) rotate(-288deg);
        transition: transform 1s;
    }

    .cir-e{
        position: absolute;
        transform: rotate(360deg) translateX(80px) rotate(-276deg);
        transition: transform 1s;
    }

    .cir-e:hover{
        position: absolute; 
        transform: rotate(360deg) translateX(110px) rotate(-276deg);
        
    }   

    .cir-e-min{
        position: absolute;
        transform: rotate(360-20deg) translateX(0px) rotate(-360deg);
        transition: transform 1s;
    }

    .nav-icon-ctr{
        visibility: visible !important;
        background-color: #F2F2E9;
        position: relative;
        justify-self: center;
        align-self: center;
        z-index: 99;
        border-radius: 50%;
        color: black;
        height: 20px;
        width: 20px;
        padding: 1rem;
        
        transform: rotate(87deg);
        
        box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.2),
                    3px 3px 3px 3px rgba(0,0,0,0.2);
    }

How to design a UI Component like this in React?

1 Answers1