Можно ли это назвать одним компонентом и как правильно сделать?

Question

[temakorolev1]

В макете присутствуют 2 разных товара в виде карточек.
Карточки одинаковы с такими критериями:
- Ширина карточки;
- Цвет карточки;
- Верстка цены с кнопкой т.е футер;
- Блок с фотографией (отличаются лишь градиентом у одного есть у другого нет);
Меня смущает что у них высота разная. Я только изучаю React и где только не читал статьи, каждый пишет по разному. Кто-то говорит компонент должен быть конкретно к одной карточки, другие говорят сделать универсально. Как мне поступить в данном случае?
Сам я вижу картину так:
Card/Card.jsx - Обвертка карточки, где укажу цвет карточки и ширину т.к эти параметры присутствуют у обоих карточек.
Card/Price.jsx - Цена и кнопка купить
Card/ProductOne.jsx - Контент первого товара
Card/ProductTwo.jsx - Контент второго товара
Как считаете это правильный подход?

Comments

[Вадим]

Так как визуальной информации Вы не предоставили, то

Как считаете это правильный подход?

Нет, считаю что не правильный. Если единственной реальное отличие это наличие градиента - то это один компонент с определённым модификатором.
По поводу того, что они разной высоты - компонент это про структуру и логику, а не про количество вмещаемого контента.