Quest: Rect-owy komponent

Stawianie projektu >>> npm create vite@latest
Uruchamianie projektu >>> npm run dev 

Stawianie projektu >>> npm create vite@latest
Uruchamianie projektu >>> npm run dev 

import Box from "./components/Box";

function App() {
  return (
    <>
      <Box borderColor="#2b6cb0" text="Przykładowy tekst" />
      <Box borderColor="#2b0" text="Inny tekst" />
      <Box borderColor="#b06b2b" text="Zwykły tekst" />
      <Box borderColor="#c52663" text="Jeszcze inny tekst" />
    </>
  )
}

export default App

import Box from "./components/Box";

function App() {
  return (
    <>
      <Box borderColor="#2b6cb0" text="Przykładowy tekst" />
      <Box borderColor="#2b0" text="Inny tekst" />
      <Box borderColor="#b06b2b" text="Zwykły tekst" />
      <Box borderColor="#c52663" text="Jeszcze inny tekst" />
    </>
  )
}

export default App

import React from "react";
import "./Box.css";

// Komponent strzałkowy; '=>' oznacza funkcję anonimową przypisaną do stałej
const Box = ({ borderColor, text }) => {
  return (
    // Podwójne nawiasy {{ }} to przekazanie obiektu JavaScript jako stylu inline
    <div className="box-container" style={{ borderColor }}>
      "{text}" <br />ma {text.length} znaków
    </div>
  );
};

export default Box;

import React from "react";
import "./Box.css";

// Komponent strzałkowy; '=>' oznacza funkcję anonimową przypisaną do stałej
const Box = ({ borderColor, text }) => {
  return (
    // Podwójne nawiasy {{ }} to przekazanie obiektu JavaScript jako stylu inline
    <div className="box-container" style={{ borderColor }}>
      "{text}" <br />ma {text.length} znaków
    </div>
  );
};

export default Box;

.box-container {
  width: 17%;
  min-height: 60px;
  align-items: center;
  justify-content: center;
  border: 1px solid; 
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  text-align: center;
  margin: 3px;
  float: left;
}

.box-text {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  padding: 0 0.25rem;
}

@media (max-width: 480px) {
  .box-container {
    min-height: 40px;
    font-size: 0.875rem;
  }
}

.box-container {
  width: 17%;
  min-height: 60px;
  align-items: center;
  justify-content: center;
  border: 1px solid; 
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  text-align: center;
  margin: 3px;
  float: left;
}

.box-text {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  padding: 0 0.25rem;
}

@media (max-width: 480px) {
  .box-container {
    min-height: 40px;
    font-size: 0.875rem;
  }
}