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.