I need a bit of help with programming some visual elements for my User Profile UI

Answered

Sun bear posted this in #help-forum

Sun bearOP

2024-06-10T20:11:59.046Z

Hey, I have a user profile card in which I have 2 sections:

- Work History
- Education History

1. For the most recent entry in both of those sections I'd like the code to spawn a line segment element which looks like a corner. For this segment there's a few spawning rules that the code needs to follow:

- The horizontal line of the corner should be vertically centred to the middle of the height of the text row, and its starting position should be to the horizontal middle of the length of the Icon of the Section Title, basically if the icon is 24px by 24px, the horizontal line should start from the 12px point and expand for another 12px, basically for half of the length of the icon.

- The vertical line should start from the same position as the horizontal line, and it should expand down until between it and the logo element there's a spacing of a fixed value, which can be set, such as 2px, 6px or whatnot.

For the logo element, it should be spawned next to the row that contains the company name and it should have a fixed size which can be set, such as 16x16px for example.

2. For the rest of the entries of each of the sections, instead of spawning a corner element we would instead spawn a circle element with a fixed radius which will be horizontally centred to the middle of the logo (since both would be the same size anyway)

In between these circles there would be additional line segments added, with a fixed spacing between them and the circle elements / company logos. The length of these lines needs to be adaptive, in the sense that if the spacing between rows is changed, the spawned segments should grow or shrink in size automatically.

For the last entry in either section, bellow the logo element no line should be spawned.

This is my code for the User Profile Card component:
https://paste.ec/paste/r9icuqTT#9p41hcde2ibUKNEtrWOl0sgA1j9AEY7TZ9GsEsp+Ojw

Answered by Anay-208

There'll be basically 3 if conditions for each item

View full answer

391 Replies

Anay-208

2024-06-10T20:17:36.783Z

Well, For horizontal lines, You can use horizontal hr, and check if its the first item

an {index === 1 || index === arr.length - 1 ? <Horizontal/> : <Dot/> }

and if you ask for some vertical line disappearing, the dot could have a background

Sun bearOP

2024-06-10T20:19:47.724Z

The last entry in the list would have no vertical line spawned bellow the logo basically.

Anay-208

2024-06-10T20:20:06.478Z

Yes, that can also be achieved by an if condition easily

Anay-208

2024-06-10T20:20:20.578Z

There'll be basically 3 if conditions for each item

Answer

Anay-208

2024-06-10T20:20:33.167Z

For The horizontal line/Dot, vertical line 1, vertical line 2

If you want, I can provide you a github repo tomorrow

@Anay-208 If you want, I can provide you a github repo tomorrow

Sun bearOP

2024-06-10T20:26:12.797Z

That would be awesome, cause I think this is going to be quite complex to implement.

You could add some placeholders for the text:
- Job Date
- Job Title
- Company Name
- Job Location
- Job Schedule

And then add the code for the segments. Also it needs to work like if you increase the size between the placeholders, as in the vertical spacing, the lines should adapt to that automatically (if possible), so basically they should go or shrink in size until they meet the spacing between them and the net vertical element.

Theoretically that should be possible if the Job Date text in each entry can be made to act as an anchor point, and I think the company logo can be its own anchor to in combination with the Company Name text cause the company logo should always spawn in relation to that, just like the segments do for the Job Date row, and since there would need to be vertical space between the circle and the line segments and between the logo and the line segments that should be possible to set-up programatically.

Let me know if you can make it to work like that 😁

Anay-208

2024-06-10T20:28:45.867Z

@Sun bear Within 2 days, I'll surely try to do that.

For now, I'll use placeholders only.

I'll adjust everything accordingly.

Sun bearOP

2024-06-10T20:31:43.856Z

That sounds awesome. The reason why I'd really like the segment lines to automatically grow/shrink is because I may need to play around with the spacing between the rows or between each entry, and if the segments don't adapt automatically but have fixed sizes, then I'd have to manually change their size and it would be pretty cumbersome to do that everytime I may make changes to the spacing between stuff.

Also I think I over complicated my explanation a bit. As long as the circle elements for example always spawn on the same row or next to the Job Date, and there is a fixed spacing of let's say 2px between the circle and the segments bellow and above it, the lines should automatically grow or shrink in size.

Cause if the line knows that between it and the logo elements it needs to be a vertical spacing of 2px, and between it and the circle elements needs to be a vertical spacing of 2px then if the spacing between the text rows would change the line would simply grow or shrink until it meets that 2px vertical spacing value.

Anay-208

2024-06-10T20:34:55.251Z

Hey there,
I just want to tell you that, I'll just give you an example of how its exactly gonna work.

So you might have to do some optimizations yourself.

If you're unable to do, you're free to ask!

Sun bearOP

2024-06-10T20:36:33.369Z

No worries, that helps too. Also if it's going to be too difficult to do just let me know and I'll try to do it by myself 😁

I'll try doing it by myself anyway in the meantime, so if I manage to do it in the meantime I'll let you know.

@Anay-208 Yes, that can also be achieved by an if condition easily

Anay-208

2024-06-10T20:38:44.570Z

You can surely try this. I'd recommend you to try it yourself.

And anyways, I'll be getting free to do this tomorrow only, so you can let me know if you're done or not

@Anay-208 You can surely try this. I'd recommend you to try it yourself. And anyways, I'll be getting free to do this tomorrow only, so you can let me know if you're done or not

Sun bearOP

2024-06-10T20:39:20.239Z

Perfect, thank you very much Anay 🙏🏻

Sun bearOP

2024-06-11T10:34:12.329Z

I managed to add the circle elements and center them but Claude has issues with placing the company logo squares like the circles. I'm not sure what I need to update in the code for that to happen.

Array.from({ length: numJobHistoryEntries }).map((_, index) => (
                <div key={index} style={{ marginBottom: '20px', display: 'flex', alignItems: 'flex-start' }}>
                  <span style={{ fontSize: '12px', verticalAlign: 'middle', marginRight: '14px' }}>&#9675;</span>
                  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
                    <p style={{ color: 'var(--text-default)', fontSize: '14px' }}>Job Date</p>
                    <p style={{ color: 'var(--text-default)', fontSize: '16px' }}>Job Title</p>
                    <div style={{ display: 'inline-flex', alignItems: 'center' }}>
                      <div style={{ width: '24px', height: '24px', backgroundColor: 'black', marginRight: '4px' }}></div>
                      <p style={{ color: 'var(--text-default)', fontSize: '14px' }}>Company Name</p>
                    </div>
                    <p style={{ color: 'var(--text-default)', fontSize: '14px' }}>Job Location</p>
                    <p style={{ color: 'var(--text-default)', fontSize: '14px' }}>Job Schedule</p>
                  </div>
                </div>
              ))
            )}
          </div>
          <div style={{ marginLeft: 'auto' }}>
            <div style={{ display: 'flex', alignItems: 'center', marginBottom: '12px' }}>

Sun bearOP

2024-06-11T12:14:25.727Z

@riský Claude says this should work as an independent page which can be imported in an empty project and it should work

https://paste.ec/paste/UJ8bkU0D#wHHlZxdeivc57qs6T1wcwjL8JafrzoYyPqElYcrHdYh