In a project I have two similar components for displaying/selecting time (hours, minutes and seconds). Both of them will look the same in the UI, here's an example when hours = 1, seconds = 20 and minutes = 0
Time01:20:00
Both of them will have a saying "Time" and both of them will have a display for hours, minutes and seconds
But they differ in terms of functionality
One is just for displaying the time and isn't interactable. I was thinking of passing down hours, minutes and seconds via the props and then just displaying each of them with .
The second component will have three custom components (for hours, minutes and seconds) that will show the selected value and allow the user to select a new value. In this component there will also be three state variables to keep track of the current selected value of each of the s and there will be a callback function passed down in the props that will be called whenever either hours minutes or seconds changes
One of the solutions is to make two seperate components, lets say and , but then it would maybe be more difficult to maintain since there are a lot of simularities between them.
Another thing I thought of was making a component that can be used where you just want to display the time and a component that would keep track of hours minutes and seconds and then inside there I would use to show the current value of hours, minutes and seconds, but the problem with that is that each of values don't only need to be displayed but also be interactable so you can select a different value, so basically if I want to just display the time I could use spans but when it also needs to be selectable I need to use my custom Select component because I also need to specify the list of options
A third option would be to make one component that can both be just a component that displays something or a one where you could also select things depending on for example if selectable = true (which will be a variable passed down via the props). I dont think this is a really good idea because you're doing to much in one component and its kind of being used for two things (displaying or selecting) which I think would be confusing.
Do you have any better solutions? (if you want to give a code example, i am familiar with react and svelte)