108 lines
3.3 KiB
HTML
108 lines
3.3 KiB
HTML
Voici un exemple de composant React complet avec un design moderne, responsive et animations CSS. Le composant représente une statistique avec un graphique circulaire et des informations de statut.
|
|
|
|
**Statistique.js** (le code du composant React)
|
|
```jsx
|
|
import React from 'react';
|
|
|
|
const Statistique = ({ title, value, status, max, min }) => {
|
|
return (
|
|
<div className="flex items-center justify-center mb-8">
|
|
<div className="relative h-24 w-24 rounded-full border-gray-400">
|
|
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex items-center justify-center text-4xl font-bold text-gray-600">
|
|
<span className="h-16 w-16 rounded-full bg-green-500"></span>
|
|
</div>
|
|
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-4xl font-bold text-gray-600">
|
|
{value}%
|
|
</div>
|
|
</div>
|
|
<div className="ml-8 text-2xl font-bold text-gray-600">
|
|
{title}
|
|
</div>
|
|
<div className="ml-4 text-lg text-gray-600">
|
|
{status} | {min} à {max}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Statistique;
|
|
```
|
|
**style.css** (le code CSS pour les animations et la mise en forme)
|
|
```css
|
|
@ Tailwind utilities
|
|
|
|
._statistique {
|
|
@apply flex items-center justify-center mb-8;
|
|
}
|
|
|
|
.statistique-graphique {
|
|
@apply relative h-24 w-24 rounded-full border-gray-400;
|
|
}
|
|
|
|
.statistique-graphique > div:nth-child(2) {
|
|
@apply absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex items-center justify-center text-4xl font-bold text-gray-600;
|
|
}
|
|
|
|
.statistique-graphique > div:nth-child(3) {
|
|
@apply absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-4xl font-bold text-gray-600;
|
|
}
|
|
|
|
.statistique-valeur {
|
|
@apply ml-8 text-2xl font-bold text-gray-600;
|
|
}
|
|
|
|
.statistique-statut {
|
|
@apply ml-4 text-lg text-gray-600;
|
|
}
|
|
|
|
.animate-scale-up {
|
|
animation: scale-up 2s;
|
|
}
|
|
|
|
@keyframes scale-up {
|
|
from {
|
|
transform: scale(0);
|
|
}
|
|
to {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
```
|
|
**index.html** (le code HTML pour l'exemple)
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Statistique</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
<div class="container mx-auto p-4">
|
|
<Statistique
|
|
title="Nombre de clients"
|
|
value="85"
|
|
status="En cours"
|
|
max="100"
|
|
min="0"
|
|
className="animate-scale-up"
|
|
/>
|
|
<Statistique
|
|
title="Nombre de ventes"
|
|
value="120"
|
|
status="En cours de réalisation"
|
|
max="150"
|
|
min="0"
|
|
className="animate-scale-up"
|
|
/>
|
|
</div>
|
|
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
|
|
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
|
|
<script src="Statistique.js"></script>
|
|
</body>
|
|
</html>
|
|
```
|
|
Ceci est un exemple de composant React complet avec un design moderne, responsive et animations CSS. Le composant représente une statistique avec un graphique circulaire et des informations de statut.
|
|
|
|
Vous pouvez télécharger le fichier `index.html` dans votre navigateur pour voir l'exemple en action. N'oubliez pas d'autoriser les scripts externes pour que le composant s'affiche correctement. |