update contact & FAQ avec la creation d'un components

2025-01-08 11:59:26 +01:00
parent c2a320b04e
commit 015104ef56
2 changed files with 141 additions and 96 deletions
@@ -0,0 +1,104 @@
+import React, { useState, useEffect } from "react";
+import { Box, TextField, Typography, Collapse } from "@mui/material";
+
+const Faq = ({ showFAQ }) => {
+  const [faqSearch, setFaqSearch] = useState("");
+  const [filteredFaqs, setFilteredFaqs] = useState([]);
+
+  const faqs = [
+    {
+      question: "Comment contacter notre service client ?",
+      answer:
+        "Vous pouvez nous appeler au +33 1 23 45 67 89 ou nous écrire via le formulaire de contact.",
+    },
+    {
+      question: "Quels sont vos horaires d'ouverture ?",
+      answer: "Nous sommes ouverts du lundi au vendredi de 9h00 à 18h00.",
+    },
+    {
+      question: "Où êtes-vous situés ?",
+      answer: "Notre adresse est 123 Rue Exemple, Paris, France.",
+    },
+    {
+      question: "Proposez-vous des services personnalisés ?",
+      answer: "Oui, contactez-nous pour discuter de vos besoins spécifiques.",
+    },
+  ];
+
+  useEffect(() => {
+    setFilteredFaqs(faqs);
+  }, []);
+
+  const handleSearch = (e) => {
+    const searchTerm = e.target.value.toLowerCase();
+    setFaqSearch(searchTerm);
+
+    const filtered = faqs.filter((faq) =>
+      faq.question.toLowerCase().includes(searchTerm)
+    );
+    setFilteredFaqs(filtered);
+  };
+
+  return (
+    <Collapse in={showFAQ}>
+      <Box
+        sx={{
+          padding: "40px 20px",
+          backgroundColor: "#f9f9f9",
+          borderRadius: 2,
+          boxShadow: 2,
+          mt: 4,
+        }}
+      >
+        <Typography
+          variant="h4"
+          sx={{
+            fontWeight: "bold",
+            mb: 4,
+            textAlign: "center",
+            color: "#0e467f",
+          }}
+        >
+          FAQ
+        </Typography>
+
+        {/* Barre de recherche */}
+        <TextField
+          placeholder="Rechercher dans la FAQ..."
+          fullWidth
+          variant="outlined"
+          value={faqSearch}
+          onChange={handleSearch}
+          sx={{
+            mb: 4,
+          }}
+        />
+
+        {/* Liste des FAQs */}
+        <Box>
+          {filteredFaqs.length > 0 ? (
+            filteredFaqs.map((faq, index) => (
+              <Box key={index} sx={{ mb: 3 }}>
+                <Typography variant="h6" sx={{ fontWeight: "bold" }}>
+                  {faq.question}
+                </Typography>
+                <Typography variant="body1" sx={{ color: "#666" }}>
+                  {faq.answer}
+                </Typography>
+              </Box>
+            ))
+          ) : (
+            <Typography
+              variant="body1"
+              sx={{ color: "#999", textAlign: "center" }}
+            >
+              Aucun résultat trouvé.
+            </Typography>
+          )}
+        </Box>
+      </Box>
+    </Collapse>
+  );
+};
+
+export default Faq;