diff --git a/src/components/CombinationGrid/CombinationGrid.css b/src/components/CombinationGrid/CombinationGrid.css index 20f75a71dba562bf6b1d618213e969d53e304fd6..b0bd0dedd4b354af550ce3970e52f541fd66c617 100644 --- a/src/components/CombinationGrid/CombinationGrid.css +++ b/src/components/CombinationGrid/CombinationGrid.css @@ -41,10 +41,13 @@ .card-title { color: var(--primary-color); - font-size: 1.1rem; font-weight: 600; margin-bottom: 0.75rem; } + + .card-title h2 { + font-size: 1.1rem; + } .card-description { color: var(--text-secondary); @@ -67,4 +70,23 @@ height: 100px; } } - \ No newline at end of file + + + .part-type { + display: inline-block; + font-size: 0.85rem; + font-weight: 600; + color: var(--primary-color); + margin-bottom: 0.25rem; + background-color: var(--background-light); + padding: 0.4rem 0.8rem; + border-radius: 6px; + border: 1px solid var(--primary-light); + letter-spacing: 0.5px; + } + + .part-item:hover .part-type { + background-color: var(--primary-color); + color: white; + border-color: var(--primary-color); + } \ No newline at end of file diff --git a/src/components/CombinationGrid/CombinationGrid.jsx b/src/components/CombinationGrid/CombinationGrid.jsx index b9c721d00b75856474c2b5290744847930c435d7..18435e4f91c7fff3e2cf83f71cf8e75a05b06dad 100644 --- a/src/components/CombinationGrid/CombinationGrid.jsx +++ b/src/components/CombinationGrid/CombinationGrid.jsx @@ -10,9 +10,18 @@ const CombinationGrid = ({ combination }) => { <div className="combination-grid"> {combination.map((combo, index) => ( <div key={index} className="combination-card"> - <img src={combo.image_url} alt={combo.title} className="card-image" /> - <h2 className="card-title">{combo.title}</h2> - <p className="card-description">{combo.description}</p> + <img src={combo.image_url} alt={combo.title} className="card-image" /> + <div className="card-title"> + <div className="part-type"> + {combo.partType} + </div> + <h2> + {combo.title} + </h2> + </div> + <p className="card-description"> + {combo.description} + </p> </div> ))} </div>