Convert to tsx + move file

src/pages/Volunteers/VolunteerCard.jsx

@@ -1,78 +0,0 @@
-import React, {useState} from "react";
-import styles from "./VolunteersPage.module.css";
-import formatDate from "../../utils/date/formatDate.js";
-import { useNavigate } from "react-router";
-import Button from "../../components/ui/button/button.tsx";
-
-export default function VolunteerCard({ user }) {
-
-    const [isExpanded, setIsExpanded] = useState(false);
-
-    const toggleExpand = () => {
-        setIsExpanded(!isExpanded);
-    };
-
-    const navigate = useNavigate();
-
-    return (
-        <div className={`${styles.profileboard} glassCard`} onClick={(() => setIsExpanded(!isExpanded))}>
-
-            <div className={styles.header}>
-                <h2 className={styles.userName}>
-                    <span className={styles.firstName}>{user?.name}</span>{" "}
-                    <span className={styles.lastName}>{user?.lastname}</span>
-                </h2>
-
-                 <Button
-                    variant={"transparent"}
-                    onClick={toggleExpand}
-                    className={`${isExpanded ? styles.moreButtonClicked : ""}`}
-                >
-                    {">"}
-                </Button>
-            </div>
-
-            <div className={styles.mainContent}>
-                {!isExpanded ? (
-                    <div className={styles.basicInfo}>
-                        <p><strong>Rôle :</strong> {user?.role}</p>
-                        <p><strong>Membre depuis :</strong> {user?.created_at && formatDate(user.created_at)}</p>
-                    </div>
-                ) : (
-                    <div className={styles.expandedContent}>
-                        <div className={styles.profilePictureContainer}>
-                            <img src={"/react.svg"} alt="profile" className={styles.profilePicture} />
-                        </div>
-
-                        <div className={styles.textInfo}>
-                            <div className={styles.basicInfo}>
-                                <p><strong>Rôle :</strong> {user?.role}</p>
-                                <p><strong>Membre depuis :</strong> {user?.created_at && formatDate(user.created_at)}</p>
-                            </div>
-
-                            <div className={styles.contactInfo}>
-                                <p><strong>Email :</strong> {user?.email}</p>
-                                {user?.phone && <p><strong>Téléphone :</strong> {user.phone}</p>}
-                            </div>
-                        </div>
-                    </div>
-                )}
-            </div>
-
-            {isExpanded && (
-                <div className={styles.bottomBar}>
-                    <Button
-                        onClick={() => navigate(`/profile/${user.id}`)}
-                        variant="primary"
-                    >
-                        Voir plus
-                    </Button>
-                </div>
-            )}
-
-        </div>
-    );
-
-
-
-}

src/pages/Volunteers/components/VolunteersCard/VolunteerCard.tsx

@@ -0,0 +1,18 @@
+import styles from "./VolunteersCard.module.css";
+import { useNavigate } from "react-router";
+import Button from "../../../../components/ui/button/button";
+import User from "../../interfaces/user.interface"
+
+
+interface VolunteersCardProps {
+    user: User;
+}
+
+export default function VolunteerCard({ user }: VolunteersCardProps) {
+    const navigate = useNavigate();
+
+    return (
+        <div>
+        </div>
+    );
+}