zrozumiecReact.pl

import { useState } from "react";
import styled from "styled-components";
import { colors } from "./theme.js";

const StyledHeading = styled.h1`
    font-size: 36px;
    color: ${colors.dark};
    text-align: center;
`;

const StyledSection = styled.section`
    margin: 24px 0;
    padding: 24px;
    background-color: ${colors.background};
    border-radius: 4px;
`;

const StyledSubtitle = styled.h2`
    font-size: 24px;
    /* Dodaj kolor odpowiadający wybranej opcji w select */
`;

const StyledText = styled.p`
    font-size: 16px;
    color: ${colors.grey};
`;

export default function App() {
    const [selectedOption, setSelectedOption] = useState("");

    function handleChange(e) {
        setSelectedOption(e.target.value);
    }

    return <>
        <StyledHeading>Koniec szkaradnych apek!</StyledHeading>
        <StyledSection>  
            <StyledSubtitle>CSS</StyledSubtitle>
            <StyledText>
                CSS (Cascading Style Sheets) to język używany do projektowania i 
                układania stron internetowych, nadając im kolor, styl i układ.
            </StyledText>            
        </StyledSection>
        <select onChange={handleChange}>
            <option disabled selected value>Wybierz brand kolor</option>
            <option value="blue">Niebieski</option>
            <option value="orange">Pomarańczowy</option>
            <option value="green">Zielony</option>
        </select>
    </>;
}