Background change based on active and inactive elements - ChatGPT Prompt
Mon May 22 2023 06:44:29 GMT+0000 (Coordinated Universal Time)
Saved by @JISSMONJOSE #react.js #css #javascript
""" <div className="top"> <div className="left-container"> <div className="file-upload-icon"> <img src={FileUploadIcon} alt="File Uploader Icon" /> </div> <div className="document-title">Testator Passport</div> </div> <div className="tick-icon"> <img src={TickMarkIconGreen} alt="Tick Mark" /> </div> </div> <div className="middle"> <div className="left-container"> <div className="file-upload-icon"> <img src={FileUploadIconDark} alt="File Uploader Icon Dark" /> </div> <div className="document-title text-black">Additional Document</div> </div> <div className="tick-icon"> <img src={TickMarkIconGrey} alt="Tick Mark" /> </div> </div> <div className="bottom"> <div className="left-container"> <div className="file-upload-icon"> <img src={FileUploadIconDark} alt="File Uploader Icon Dark" /> </div> <div className="document-title text-black">Executor Passport</div> </div> <div className="tick-icon tick-icon-last"> <img src={TickMarkIconGrey} alt="Tick Mark" /> </div> <div /> </div> """ You are an experienced React Developer. I want to implement a UI change. On clicking top, middle or bottom div elements, 1. its backgound should be changed to #023979. 2. Its document-title element color should be changed to #FFFFFF. For example. middle div element is clicked, it is active and the backgound changes to #023979. While background of Inactive elements changes to default color #f4f4f4. Initially when component loads, top element background is #023979, and bottom 2 element background is #f4f4f4. you can use react hooks and state if needed. Help me to achieve this change by modiyfinh current version of code I will give styles for reference below. .container { display: flex; flex-direction: column; gap: 2px; } .top, .middle, .bottom { display: flex; justify-content: space-between; background-color: #f4f4f4; border-radius: 5px 0px 0px 5px; } .top { display: flex; align-items: center; background-color: #023979; } .container div { padding: 5px; text-align: center; cursor: pointer; } .document-title { font-family: 'Basis Grotesque Arabic Pro'; font-style: normal; font-weight: 700; font-size: 0.875rem; line-height: 14px; color: #FFFFFF; } .left-container { display: flex; align-items: center; margin-right: 12px; } .file-upload-icon, .document-title { margin-right: 12px; } .tick-icon { margin-left: auto; margin-right: 12px; } .document-title { flex-grow: 1; } .tick-icon-last { margin-right: 2px !important; }
Comments