26 lines
986 B
JavaScript
26 lines
986 B
JavaScript
import Badge from './components/Badge';
|
|
|
|
function App() {
|
|
return (
|
|
<main>
|
|
<div className="container py-5">
|
|
<h1>Badges</h1>
|
|
<Badge text="Neu" variant="success" />
|
|
<Badge text="Oh oh" variant="danger" />
|
|
<Badge text="new idea" variant="info" />
|
|
<Badge text="Rabatt" variant="warning" />
|
|
<Badge text="Mega" color="tomato" />
|
|
<Badge text="Mega" color="#17537b" />
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|
|
|
|
export default App;
|
|
|
|
// Übung 8: Badge Komponente Part 2
|
|
|
|
// Nachdem Du in Übung 6 die Badge-Komponente erstellt hast, erweitere sie um die Möglichkeit, die Hintergrundfarbe über eine color-Prop mit einem Hex-Farbwert zu definieren. Nutze hierfür die Inline-Styling-Methode.
|
|
|
|
// Die color-Prop hat Priorität vor der variant-Prop. Wenn color gesetzt ist, wird die Hintergrundfarbe des Badges mit diesem Wert festgelegt. Andernfalls wird die Hintergrundfarbe über die variant-Prop bestimmt, wie in Übung 6 beschrieben.
|