cut into components

src/components/PendingMembers/PendingMembers.jsx

@@ -0,0 +1,46 @@
+import React from "react";
+import Button from "../ui/button/button";
+import styles from "./PendingMembers.module.css";
+
+function pendingMembers() {
+  const pendingMembers = [
+    { name: "Antoine Ordonneau" },
+    { name: "Giovanni Josserand" },
+    { name: "Quentin T'Jampens" },
+    { name: "Quentin T'Jampens" },
+    { name: "Quentin T'Jampens" },
+    { name: "Quentin T'Jampens" },
+    { name: "Quentin T'Jampens" }
+  ];
+
+  const handleValidate = (name) => {
+    console.log(`Valider ${name}`);
+  };
+
+  const handleReject = (name) => {
+    console.log(`Refuser ${name}`);
+  };
+
+  return (
+    <div className={`${styles.rightBlock} glassCard`}>
+      <h2>Membres en attente de validation</h2>
+      <div className={styles.membersContainer}>
+        {pendingMembers.map((member, index) => (
+          <div key={index} className={`glassCard ${styles.memberCard}`}>
+            <p>{member.name}</p>
+            <div className={styles.buttonGroup}>
+              <Button onClick={() => handleValidate(member.name)} variant="primary">
+                Valider
+              </Button>
+              <Button onClick={() => handleReject(member.name)} variant="danger">
+                Refuser
+              </Button>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default pendingMembers;