Utwórz projekt za pomocą Vite z kodem:
App.jsx
import { WIDOCZKI } from './assets/data';
import { Box } from './components/Box';
import './App.css';
function App() {
return (
<>
<div className="grid">
{ WIDOCZKI.map(item => (
<Box
key={item.id}
nazwa={item.nazwa}
plik={item.plik}
opis={item.opis}
/>
))
}
<div className="box">
<h3>Ranking</h3>...
</div>
</div>
</>
);
}
export default App;
App.css
body {
margin: 0;
font-family: Arial, sans-serif;
background-color: #eeeeee;
}
.grid {
padding: 20px;
display: flex;
flex-wrap: wrap;
gap: 16px;
}components/Box.jsx
import './Box.css';
export function Box({ nazwa, plik, opis }) {
return (
<div className="box">
<img src={plik} alt={nazwa} />
<h3>{nazwa}</h3>
<p>{opis}</p>
</div>
);
}components/Box.css
.box {
width: 300px;
padding: 12px;
background-color: #ffffff;
border: 1px solid #cccccc;
}
.box img {
width: 100%;
height: 150px;
object-fit: cover;
display: block;
}
.box h3 {
margin: 8px 0 4px;
font-size: 16px;
}
.box p {
margin: 0;
font-size: 14px;
}assets/data.js
export const WIDOCZKI = [
{
id: 1,
nazwa: 'Górski Poranek',
plik: 'https://picsum.photos/300?1',
opis: 'Świt wśród szczytów.',
},
{
id: 2,
nazwa: 'Morski Spokój',
plik: 'https://picsum.photos/300?2',
opis: 'Cicha linia horyzontu.',
},
{
id: 3,
nazwa: 'Leśna Ścieżka',
plik: 'https://picsum.photos/300?3',
opis: 'Zielona głębia ciszy.',
},
{
id: 4,
nazwa: 'Złote Pola',
plik: 'https://picsum.photos/300?4',
opis: 'Ciepło letniego dnia.',
},
{
id: 5,
nazwa: 'Jeziorne Odbicie',
plik: 'https://picsum.photos/300?5',
opis: 'Lustro natury.',
}
];
- W każdym Boxie dodaj przycisk polubienia.
- Dodaj posortowany ranking.
- Dodaj do projektu Bootstrapa i zastąp nim css
tuff quest