175 lines
3.9 KiB
HTML
175 lines
3.9 KiB
HTML
Voici un exemple de composant React complet avec un design moderne, responsive et animations CSS. Je vous propose un composant de carrousel pour afficher des images.
|
|
|
|
**index.html**
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Carrousel</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<div id="carrousel"></div>
|
|
<script src="index.js"></script>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
**styles.css** (Tailwind-like utility classes)
|
|
```css
|
|
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap');
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Open Sans', sans-serif;
|
|
background-color: #f0f0f0;
|
|
}
|
|
|
|
#carrousel {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 400px;
|
|
background-color: #fff;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.carousel-container {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.carousel-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.carousel-item {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: #fff;
|
|
color: #333;
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.carousel-item img {
|
|
width: 200px;
|
|
height: 200px;
|
|
object-fit: cover;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.carousel-pagination {
|
|
position: absolute;
|
|
bottom: 10px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: fit-content;
|
|
}
|
|
|
|
.carousel-pagination li {
|
|
margin: 0 10px;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.carousel-pagination li.active {
|
|
color: #333;
|
|
}
|
|
|
|
.carousel-pagination li button {
|
|
border: none;
|
|
padding: 10px 20px;
|
|
background-color: #fff;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.carousel-pagination li button:hover {
|
|
background-color: #f0f0f0;
|
|
}
|
|
```
|
|
|
|
**index.js (React)**
|
|
```javascript
|
|
import React, { useState } from 'react';
|
|
import './styles.css';
|
|
|
|
function Carrousel() {
|
|
const [activeIndex, setActiveIndex] = useState(0);
|
|
const images = [
|
|
"https://picsum.photos/200/300",
|
|
"https://picsum.photos/200/301",
|
|
"https://picsum.photos/200/302",
|
|
"https://picsum.photos/200/303",
|
|
"https://picsum.photos/200/304",
|
|
];
|
|
|
|
const handleSlideClick = (index) => {
|
|
setActiveIndex(index);
|
|
};
|
|
|
|
return (
|
|
<div id="carrousel">
|
|
<div className="carousel-container">
|
|
<ul className="carousel-list">
|
|
{images.map((image, index) => (
|
|
<li key={index} className={`carousel-item ${activeIndex === index ? "active" : ""}`}>
|
|
<img src={image} alt="Image Carrousel" onClick={() => handleSlideClick(index)} />
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<div className="carousel-pagination">
|
|
{images.map((_, index) => (
|
|
<li key={index}>
|
|
<button className={`pagination-button ${activeIndex === index ? "active" : ""}`} onClick={() => handleSlideClick(index)}>{index + 1}</button>
|
|
</li>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Carrousel;
|
|
```
|
|
|
|
**Utiliser le composant**
|
|
|
|
Pour utiliser le composant, vous allez devoir insérer votre balise HTML dans votre fichier index.html. Le composant est exporté par défaut donc vous pouvez l'utiliser comme suit :
|
|
|
|
```javascript
|
|
import React from 'react';
|
|
import ReactDOM from 'react-dom';
|
|
import Carrousel from './index';
|
|
|
|
ReactDOM.render(
|
|
<React.StrictMode>
|
|
<Carrousel />
|
|
</React.StrictMode>,
|
|
document.getElementById('root')
|
|
);
|
|
```
|
|
|
|
Je vous souhaite un bon départ avec ce composant ! |