Kentavr16

Видел тут: https://ant.design/components/progress/
Но это часть системы, придётся расковырять сырцы, если нужно отдельно.

"Чистую" версию тоже когда-то вроде встречал, но тут, увы, ссылок не дам.

Если Вам нужно чтобы заливка обрезалась по дуге с картинки, то бы сделал как-то так:
header, внутри которого nav.
Задал бы хедеру логотип(с вот этой дугой вметсе) фоновой картинкой, а на основную высоту логотипа задал бы padding сверху. Соответственно, спозиционировал бы правильным образом фоновую картинку с помощью background-position: center top XXpx; (где XX это вот тот зазор сверху между логотипом и самым верхом страницы, пикселей 20 на глаз)
Ну а теперь самое интересное.
Обрезал бы nav с помощью clip-path, в соотвествии с розовой линией, указав клюевые координаты, чтобы было плюс минус-дуга. При этом крайние координаты указывал бы в процентах, что позволит nav расти вниз, при добавлении ссылок.


UPD: мне стало интересно и я решил набросать простенькую демку по описанному выше. Правда картинку выбрал по сложнее :-)
Откройте в новой вкладке и сделайте ширину в 768пикселей, чтобы более менее адекватно выглядело(хотя тут в фрэйме тоже пойдёт).
Более плавной дуги можно достичь увеличением количества точек в полигоне. В этом может помочь иллюстратор.
Можно нарисовать этот полигон прямыми линиями в нём, экспортировать в свг, а потом посмотреть оттуда координаты точек.
Ну а для более лёгкого адаптива точки нужно рисовать в процентах, а не пиксилях.

Marsy - отличный вариант.

Грузите свои таски в массив, и мапом проходитесь по нему
псевдокод
tasks.map((task) => <div>{task....}<div/>)
p.s
Ну и не забываем про key
p.s
doc

Повторение двух цветов, наклон и транслейт с помощью - transform: skew, translate
https://webref.ru/css/value/skew

Вместо нескольких стейтов пусть будет один - объект. Общий обработчик onChange достаёт из целевого объекта помимо значения ещё и имя инпута, одновременно являющегося именем обновляемого свойства (его придётся передавать в экземпляры CustomTextField, а внутри самого CustomTextField прокидывать внутрь TextField). Вот так (как добавить два других свойства - думаю, сами догадаетесь):

interface IFormData {
  firstName: string;
  lastName: string;
}

const [ formData, setFormData ] = React.useState<IFormData>({
  firstName: '',
  lastName: '',
});

const onChange = (e: React.ChangeEvent<HTMLInputElement>) => setFormData({
  ...formData,
  [e.target.name]: e.target.value,
});

<CustomTextField name="firstName" value={formData.firstName} onChange={onChange} />
<CustomTextField name="lastName" value={formData.lastName} onChange={onChange} />

<!-- или -->

{Object.entries(formData).map(([ k, v ]) => (
  <CustomTextField key={k} name={k} value={v} onChange={onChange} />
))}

Вообще удобно смотреть по realworld app - там стандартизован интерфейс, есть разные имплементации фронтов и бэка
https://codebase.show/projects/realworld
Бэк по nodejs+mongo там сейчас не поддерживается.
Но ознакомиться можно тут: https://github.com/gothinkster/node-express-realwo...
Впрочем есть свежий пример на базе SQL БД: https://github.com/Varun-Hegde/Conduit_NodeJS
С реактом там 3 варианта на выбор

Все дело в замыкании. Переданная в setInterval функция замыкает в себе переменную seconds в значении ноль. Интервал работает, но при каждом следующем вызове функции переменная seconds имеет прежнее значение.

В setSeconds нужно передать функцию, которая будет вызвана с актуальным значением seconds.

Вот так:

function App() {
    
    const [ seconds, setSeconds ] = React.useState(0)

    // старый вариант, не работает
    const startTimer = () => {
        setInterval(() => {
            setSeconds(seconds + 1)
        }, 1000)
    }

    // новый вариант, работает
    const startTimer = () => {
        setInterval(() => {
            setSeconds((seconds) => {
                return seconds + 1
            })
        }, 1000)
    }

    return (
        <div>
            <button onClick={startTimer}>start</button>
            <h1>{seconds}</h1>
        </div>
    )
}