mirror of
https://github.com/Ladebeze66/devsite.git
synced 2025-12-13 12:46:49 +01:00
comok
This commit is contained in:
parent
ae85204879
commit
7e1369b329
@ -1,63 +1,71 @@
|
||||
import Link from "next/link";
|
||||
|
||||
async function getAllCompetences() {
|
||||
try {
|
||||
const response = await fetch("http://localhost:1337/api/competences?populate=*");
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to fetch competences");
|
||||
}
|
||||
const competences = await response.json();
|
||||
return competences.data;
|
||||
} catch (error) {
|
||||
console.error("Error fetching competences:", error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
export default async function Page() {
|
||||
const competences = await getAllCompetences();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 className="text-3xl mb-6 font-bold text-grey-700">Mes Compétences</h1>
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
{competences.map((competence) => {
|
||||
const picture = competence.picture?.[0]; // Récupère la première image si elle existe
|
||||
const largeImageUrl = picture?.formats?.large?.url; // Vérifie que le format "large" existe
|
||||
const originalImageUrl = picture?.url; // URL de l'image originale
|
||||
|
||||
// Utilisez l'URL de l'image originale si disponible, sinon l'URL de l'image large
|
||||
const imageUrl = originalImageUrl
|
||||
? `http://localhost:1337${originalImageUrl}`
|
||||
: `http://localhost:1337${largeImageUrl}`;
|
||||
|
||||
return (
|
||||
<div key={competence.id} className="bg-white rounded-lg shadow-md overflow-hidden transform transition-transform duration-300 hover:scale-105 hover:shadow-lg hover:bg-blue-100">
|
||||
<Link href={`/competences/${competence.slug}`}>
|
||||
<div className="overflow-hidden">
|
||||
{imageUrl ? (
|
||||
<img
|
||||
src={imageUrl}
|
||||
alt={picture?.name || "Competence image"}
|
||||
className="w-full h-48 object-cover transform transition-transform duration-300 hover:scale-125 hover:rotate-12"
|
||||
/>
|
||||
) : (
|
||||
<div className="bg-gray-200 text-gray-500 text-center rounded-md shadow-md p-4">
|
||||
Image indisponible
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<p className="font-bold text-xl mb-2">{competence.name}</p>
|
||||
<p className="text-gray-700">{competence.description}</p>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
import Link from "next/link";
|
||||
|
||||
// Fonction pour récupérer toutes les compétences depuis l'API Strapi
|
||||
async function getAllCompetences() {
|
||||
try {
|
||||
const response = await fetch("http://localhost:1337/api/competences?populate=*");
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to fetch competences");
|
||||
}
|
||||
const competences = await response.json();
|
||||
return competences.data;
|
||||
} catch (error) {
|
||||
console.error("Error fetching competences:", error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
// Composant principal de la page des compétences
|
||||
export default async function Page() {
|
||||
const competences = await getAllCompetences();
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* Titre de la page */}
|
||||
<h1 className="text-3xl mb-6 font-bold text-grey-700">Mes Compétences</h1>
|
||||
{/* Grille pour afficher les compétences */}
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
{competences.map((competence) => {
|
||||
const picture = competence.picture?.[0]; // Récupère la première image si elle existe
|
||||
const largeImageUrl = picture?.formats?.large?.url; // Vérifie que le format "large" existe
|
||||
const originalImageUrl = picture?.url; // URL de l'image originale
|
||||
|
||||
// Utilisez l'URL de l'image originale si disponible, sinon l'URL de l'image large
|
||||
const imageUrl = originalImageUrl
|
||||
? `http://localhost:1337${originalImageUrl}`
|
||||
: `http://localhost:1337${largeImageUrl}`;
|
||||
|
||||
return (
|
||||
<div key={competence.id} className="bg-white rounded-lg shadow-md overflow-hidden transform transition-transform duration-300 hover:scale-105 hover:shadow-lg hover:bg-blue-100">
|
||||
{/* Lien vers la page de détail de la compétence */}
|
||||
<Link href={`/competences/${competence.slug}`}>
|
||||
<div className="overflow-hidden">
|
||||
{/* Affichage de l'image de la compétence */}
|
||||
{imageUrl ? (
|
||||
<img
|
||||
src={imageUrl}
|
||||
alt={picture?.name || "Competence image"}
|
||||
className="w-full h-48 object-cover transform transition-transform duration-300 hover:scale-125 hover:rotate-12"
|
||||
/>
|
||||
) : (
|
||||
<div className="bg-gray-200 text-gray-500 text-center rounded-md shadow-md p-4">
|
||||
Image indisponible
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="p-4">
|
||||
{/* Affichage du nom de la compétence */}
|
||||
<p className="font-bold text-xl mb-2">{competence.name}</p>
|
||||
{/* Affichage de la description de la compétence */}
|
||||
<p className="text-gray-700">{competence.description}</p>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -1,24 +1,32 @@
|
||||
export default async function MessagesPage() {
|
||||
const res = await fetch("http://localhost:1337/api/messages");
|
||||
const { data } = await res.json();
|
||||
|
||||
return (
|
||||
<div className="max-w-3xl mx-auto p-6">
|
||||
<h1 className="text-3xl font-bold text-center mb-6">📬 Messages reçus</h1>
|
||||
{data.length === 0 ? (
|
||||
<p className="text-center text-gray-600">Aucun message reçu.</p>
|
||||
) : (
|
||||
<ul className="space-y-4">
|
||||
{data.map((msg: any) => (
|
||||
<li key={msg.id} className="p-4 border rounded shadow">
|
||||
<p><strong>👤 {msg.name}</strong> ({msg.email})</p>
|
||||
<p>📅 {new Date(msg.createdAt).toLocaleString("fr-FR")}</p>
|
||||
<p className="mt-2">{msg.message}</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Composant principal de la page des messages
|
||||
export default async function MessagesPage() {
|
||||
// Récupération des messages depuis l'API Strapi
|
||||
const res = await fetch("http://localhost:1337/api/messages");
|
||||
const { data } = await res.json();
|
||||
|
||||
return (
|
||||
<div className="max-w-3xl mx-auto p-6">
|
||||
{/* Titre de la page */}
|
||||
<h1 className="text-3xl font-bold text-center mb-6">📬 Messages reçus</h1>
|
||||
|
||||
{/* Affichage d'un message si aucun message n'est reçu */}
|
||||
{data.length === 0 ? (
|
||||
<p className="text-center text-gray-600">Aucun message reçu.</p>
|
||||
) : (
|
||||
<ul className="space-y-4">
|
||||
{/* Boucle sur les messages pour les afficher */}
|
||||
{data.map((msg: any) => (
|
||||
<li key={msg.id} className="p-4 border rounded shadow">
|
||||
{/* Affichage du nom et de l'email de l'expéditeur */}
|
||||
<p><strong>👤 {msg.name}</strong> ({msg.email})</p>
|
||||
{/* Affichage de la date de réception du message */}
|
||||
<p>📅 {new Date(msg.createdAt).toLocaleString("fr-FR")}</p>
|
||||
{/* Affichage du contenu du message */}
|
||||
<p className="mt-2">{msg.message}</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,66 +1,74 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@400;700&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Audiowide&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
.bg-wallpaper {
|
||||
background-image: url('./images/wallpapersite.png');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.homepage-content {
|
||||
min-height: 50vh; /* Hauteur minimale de 50% de la hauteur de la fenêtre */
|
||||
max-height: 80vh; /* Hauteur maximale de 80% de la hauteur de la fenêtre */
|
||||
}
|
||||
|
||||
.circle-one {
|
||||
animation: move1 10s linear infinite;
|
||||
}
|
||||
|
||||
.circle-two {
|
||||
animation: move2 10s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes move1 {
|
||||
0% {
|
||||
transform: translate(0, 0) scale 1;
|
||||
}
|
||||
25% {
|
||||
transform: translate(200px, 200px) scale(1);
|
||||
}
|
||||
50%{
|
||||
transform: translate(100px, 400px) scale(1.2);
|
||||
}
|
||||
75%{
|
||||
transform: translate(-100px, -200px) scale(1.1);
|
||||
}
|
||||
100% {
|
||||
transform: translate(0, 0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes move2 {
|
||||
0% {
|
||||
transform: translate(0, 0) scale 1;
|
||||
}
|
||||
25% {
|
||||
transform: translate(-30px, -300px) scale(1);
|
||||
}
|
||||
50%{
|
||||
transform: translate(-200px, -100px) scale(1.2);
|
||||
}
|
||||
75%{
|
||||
transform: translate(30px, 70px) scale(1.1);
|
||||
}
|
||||
100% {
|
||||
transform: translate(0, 0) scale(1);
|
||||
}
|
||||
}
|
||||
/* Importation des polices Google Fonts */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@400;700&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Audiowide&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
|
||||
|
||||
/* Importation des styles de base, des composants et des utilitaires de Tailwind CSS */
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* Classe pour définir l'image de fond */
|
||||
.bg-wallpaper {
|
||||
background-image: url('./images/wallpapersite.png'); /* Chemin de l'image de fond */
|
||||
background-size: cover; /* L'image couvre toute la zone */
|
||||
background-position: center; /* L'image est centrée */
|
||||
background-repeat: no-repeat; /* L'image ne se répète pas */
|
||||
}
|
||||
|
||||
/* Classe pour définir la hauteur minimale et maximale du contenu de la page d'accueil */
|
||||
.homepage-content {
|
||||
min-height: 50vh; /* Hauteur minimale de 50% de la hauteur de la fenêtre */
|
||||
max-height: 80vh; /* Hauteur maximale de 80% de la hauteur de la fenêtre */
|
||||
}
|
||||
|
||||
/* Classe pour animer le premier cercle */
|
||||
.circle-one {
|
||||
animation: move1 10s linear infinite; /* Animation infinie avec une durée de 10s */
|
||||
}
|
||||
|
||||
/* Classe pour animer le deuxième cercle */
|
||||
.circle-two {
|
||||
animation: move2 10s linear infinite; /* Animation infinie avec une durée de 10s */
|
||||
}
|
||||
|
||||
/* Définition de l'animation pour le premier cercle */
|
||||
@keyframes move1 {
|
||||
0% {
|
||||
transform: translate(0, 0) scale(1); /* Position et échelle initiales */
|
||||
}
|
||||
25% {
|
||||
transform: translate(200px, 200px) scale(1); /* Déplacement et échelle */
|
||||
}
|
||||
50% {
|
||||
transform: translate(100px, 400px) scale(1.2); /* Déplacement et échelle */
|
||||
}
|
||||
75% {
|
||||
transform: translate(-100px, -200px) scale(1.1); /* Déplacement et échelle */
|
||||
}
|
||||
100% {
|
||||
transform: translate(0, 0) scale(1); /* Retour à la position et échelle initiales */
|
||||
}
|
||||
}
|
||||
|
||||
/* Définition de l'animation pour le deuxième cercle */
|
||||
@keyframes move2 {
|
||||
0% {
|
||||
transform: translate(0, 0) scale(1); /* Position et échelle initiales */
|
||||
}
|
||||
25% {
|
||||
transform: translate(-200px, -200px) scale(1); /* Déplacement et échelle */
|
||||
}
|
||||
50% {
|
||||
transform: translate(-100px, -400px) scale(1.2); /* Déplacement et échelle */
|
||||
}
|
||||
75% {
|
||||
transform: translate(100px, 200px) scale(1.1); /* Déplacement et échelle */
|
||||
}
|
||||
100% {
|
||||
transform: translate(0, 0) scale(1); /* Retour à la position et échelle initiales */
|
||||
}
|
||||
}
|
||||
@ -1,74 +1,75 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { createPortal } from "react-dom"; // 🟢 Import du Portal
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
import { Navigation, Pagination, Autoplay } from "swiper/modules";
|
||||
import "swiper/css";
|
||||
import "swiper/css/navigation";
|
||||
import "swiper/css/pagination";
|
||||
|
||||
interface CarouselProps {
|
||||
images: Array<{ url: string; alt: string }>;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export default function Carousel({ images, className }: CarouselProps) {
|
||||
const [selectedImage, setSelectedImage] = useState<string | null>(null);
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Carrousel principal */}
|
||||
<div className={`relative w-full ${className || "h-64"} rounded-md shadow-md`}>
|
||||
<Swiper
|
||||
modules={[Navigation, Pagination, Autoplay]}
|
||||
spaceBetween={10}
|
||||
slidesPerView={1}
|
||||
navigation
|
||||
pagination={{ clickable: true }}
|
||||
autoplay={{ delay: 3000 }}
|
||||
className={`w-full ${className || "h-64"}`}
|
||||
>
|
||||
{images.map((img, index) => (
|
||||
<SwiperSlide key={index} className="flex items-center justify-center h-full">
|
||||
{/* Image cliquable pour affichage en plein écran */}
|
||||
<img
|
||||
src={img.url}
|
||||
alt={img.alt}
|
||||
className="w-full h-full object-cover rounded-md cursor-pointer transition-transform duration-300 hover:scale-105"
|
||||
onClick={() => setSelectedImage(img.url)} // 🟢 Ouvre l’image en plein écran
|
||||
/>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
</div>
|
||||
|
||||
{/* 🟢 Modal plein écran inséré DANS `<body>` grâce à `createPortal` */}
|
||||
{selectedImage &&
|
||||
createPortal(
|
||||
<div
|
||||
className="fixed inset-0 flex items-center justify-center w-screen h-screen bg-black bg-opacity-10 backdrop-blur-2xl transition-opacity duration-300 z-[1000]"
|
||||
onClick={() => setSelectedImage(null)} // 🔴 Fermer au clic
|
||||
>
|
||||
<div className="relative w-full max-w-6xl p-6 bg-transparent">
|
||||
{/* Bouton de fermeture */}
|
||||
<button
|
||||
className="absolute top-6 right-6 text-white text-3xl bg-gray-900/70 p-2 rounded-full"
|
||||
onClick={() => setSelectedImage(null)}
|
||||
>
|
||||
✖
|
||||
</button>
|
||||
|
||||
{/* Image affichée en grand */}
|
||||
<img
|
||||
src={selectedImage}
|
||||
alt="Agrandissement"
|
||||
className="w-full max-h-[90vh] object-contain rounded-lg shadow-lg"
|
||||
/>
|
||||
</div>
|
||||
</div>,
|
||||
document.body // 🟢 Place le `modal` en dehors de `<main>` dans `<body>`
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { createPortal } from "react-dom"; // Importation de createPortal pour les modals
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
import { Navigation, Pagination, Autoplay } from "swiper/modules";
|
||||
import "swiper/css";
|
||||
import "swiper/css/navigation";
|
||||
import "swiper/css/pagination";
|
||||
|
||||
interface CarouselProps {
|
||||
images: Array<{ url: string; alt: string }>; // Propriétés des images du carrousel
|
||||
className?: string; // Classe CSS optionnelle pour personnaliser le style
|
||||
}
|
||||
|
||||
export default function Carousel({ images, className }: CarouselProps) {
|
||||
const [selectedImage, setSelectedImage] = useState<string | null>(null); // État pour l'image sélectionnée
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Carrousel principal */}
|
||||
<div className={`relative w-full ${className || "h-64"} rounded-md shadow-md`}>
|
||||
<Swiper
|
||||
modules={[Navigation, Pagination, Autoplay]} // Modules Swiper utilisés
|
||||
spaceBetween={10} // Espace entre les slides
|
||||
slidesPerView={1} // Nombre de slides visibles en même temps
|
||||
navigation // Activation de la navigation
|
||||
pagination={{ clickable: true }} // Activation de la pagination cliquable
|
||||
autoplay={{ delay: 3000 }} // Activation de l'autoplay avec un délai de 3 secondes
|
||||
className={`w-full ${className || "h-64"}`}
|
||||
>
|
||||
{/* Boucle sur les images pour les afficher dans le carrousel */}
|
||||
{images.map((img, index) => (
|
||||
<SwiperSlide key={index} className="flex items-center justify-center h-full">
|
||||
{/* Image cliquable pour affichage en plein écran */}
|
||||
<img
|
||||
src={img.url}
|
||||
alt={img.alt}
|
||||
className="w-full h-full object-cover rounded-md cursor-pointer transition-transform duration-300 hover:scale-105"
|
||||
onClick={() => setSelectedImage(img.url)} // Ouvre l’image en plein écran
|
||||
/>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
</div>
|
||||
|
||||
{/* Modal plein écran inséré dans <body> grâce à createPortal */}
|
||||
{selectedImage &&
|
||||
createPortal(
|
||||
<div
|
||||
className="fixed inset-0 flex items-center justify-center w-screen h-screen bg-black bg-opacity-10 backdrop-blur-2xl transition-opacity duration-300 z-[1000]"
|
||||
onClick={() => setSelectedImage(null)} // Fermer au clic
|
||||
>
|
||||
<div className="relative w-full max-w-6xl p-6 bg-transparent">
|
||||
{/* Bouton de fermeture */}
|
||||
<button
|
||||
className="absolute top-6 right-6 text-white text-3xl bg-gray-900/70 p-2 rounded-full"
|
||||
onClick={() => setSelectedImage(null)} // Fermer au clic
|
||||
>
|
||||
✖
|
||||
</button>
|
||||
|
||||
{/* Image affichée en grand */}
|
||||
<img
|
||||
src={selectedImage}
|
||||
alt="Agrandissement"
|
||||
className="w-full h-full object-cover rounded-md"
|
||||
/>
|
||||
</div>
|
||||
</div>,
|
||||
document.body
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,70 +1,75 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
import { Navigation, Pagination, Autoplay } from "swiper/modules";
|
||||
import "swiper/css";
|
||||
import "swiper/css/navigation";
|
||||
import "swiper/css/pagination";
|
||||
|
||||
interface CarouselProps {
|
||||
images: Array<{ url: string; alt: string }>;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export default function CarouselCompetences({ images, className }: CarouselProps) {
|
||||
const [selectedImage, setSelectedImage] = useState<string | null>(null);
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Carrousel compétences */}
|
||||
<div className={`relative w-full ${className || "h-64"} rounded-md shadow-md`}>
|
||||
<Swiper
|
||||
modules={[Navigation, Pagination, Autoplay]}
|
||||
spaceBetween={10}
|
||||
slidesPerView={1}
|
||||
navigation
|
||||
pagination={{ clickable: true }}
|
||||
autoplay={{ delay: 3000 }}
|
||||
className={`w-full ${className || "h-64"}`}
|
||||
>
|
||||
{images.map((img, index) => (
|
||||
<SwiperSlide key={index} className="flex items-center justify-center h-full">
|
||||
<img
|
||||
src={img.url}
|
||||
alt={img.alt}
|
||||
className="w-full h-full object-cover rounded-md cursor-pointer transition-transform duration-300 hover:scale-105"
|
||||
onClick={() => setSelectedImage(img.url)}
|
||||
/>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
</div>
|
||||
|
||||
{/* Modal plein écran pour agrandir les images */}
|
||||
{selectedImage &&
|
||||
createPortal(
|
||||
<div
|
||||
className="fixed inset-0 flex items-center justify-center w-screen h-screen bg-black bg-opacity-10 backdrop-blur-2xl transition-opacity duration-300 z-[1000]"
|
||||
onClick={() => setSelectedImage(null)}
|
||||
>
|
||||
<div className="relative w-full max-w-6xl p-6 bg-transparent">
|
||||
<button
|
||||
className="absolute top-6 right-6 text-white text-3xl bg-gray-900/70 p-2 rounded-full"
|
||||
onClick={() => setSelectedImage(null)}
|
||||
>
|
||||
✖
|
||||
</button>
|
||||
<img
|
||||
src={selectedImage}
|
||||
alt="Agrandissement"
|
||||
className="w-full max-h-[90vh] object-contain rounded-lg shadow-lg"
|
||||
/>
|
||||
</div>
|
||||
</div>,
|
||||
document.body
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { createPortal } from "react-dom"; // Importation de createPortal pour les modals
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
import { Navigation, Pagination, Autoplay } from "swiper/modules";
|
||||
import "swiper/css";
|
||||
import "swiper/css/navigation";
|
||||
import "swiper/css/pagination";
|
||||
|
||||
interface CarouselProps {
|
||||
images: Array<{ url: string; alt: string }>; // Propriétés des images du carrousel
|
||||
className?: string; // Classe CSS optionnelle pour personnaliser le style
|
||||
}
|
||||
|
||||
export default function CarouselCompetences({ images, className }: CarouselProps) {
|
||||
const [selectedImage, setSelectedImage] = useState<string | null>(null); // État pour l'image sélectionnée
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Carrousel compétences */}
|
||||
<div className={`relative w-full ${className || "h-64"} rounded-md shadow-md`}>
|
||||
<Swiper
|
||||
modules={[Navigation, Pagination, Autoplay]} // Modules Swiper utilisés
|
||||
spaceBetween={10} // Espace entre les slides
|
||||
slidesPerView={1} // Nombre de slides visibles en même temps
|
||||
navigation // Activation de la navigation
|
||||
pagination={{ clickable: true }} // Activation de la pagination cliquable
|
||||
autoplay={{ delay: 3000 }} // Activation de l'autoplay avec un délai de 3 secondes
|
||||
className={`w-full ${className || "h-64"}`}
|
||||
>
|
||||
{/* Boucle sur les images pour les afficher dans le carrousel */}
|
||||
{images.map((img, index) => (
|
||||
<SwiperSlide key={index} className="flex items-center justify-center h-full">
|
||||
{/* Image cliquable pour affichage en plein écran */}
|
||||
<img
|
||||
src={img.url}
|
||||
alt={img.alt}
|
||||
className="w-full h-full object-cover rounded-md cursor-pointer transition-transform duration-300 hover:scale-105"
|
||||
onClick={() => setSelectedImage(img.url)} // Ouvre l’image en plein écran
|
||||
/>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
</div>
|
||||
|
||||
{/* Modal plein écran pour agrandir les images */}
|
||||
{selectedImage &&
|
||||
createPortal(
|
||||
<div
|
||||
className="fixed inset-0 flex items-center justify-center w-screen h-screen bg-black bg-opacity-10 backdrop-blur-2xl transition-opacity duration-300 z-[1000]"
|
||||
onClick={() => setSelectedImage(null)} // Fermer au clic
|
||||
>
|
||||
<div className="relative w-full max-w-6xl p-6 bg-transparent">
|
||||
{/* Bouton de fermeture */}
|
||||
<button
|
||||
className="absolute top-6 right-6 text-white text-3xl bg-gray-900/70 p-2 rounded-full"
|
||||
onClick={() => setSelectedImage(null)} // Fermer au clic
|
||||
>
|
||||
✖
|
||||
</button>
|
||||
|
||||
{/* Image affichée en grand */}
|
||||
<img
|
||||
src={selectedImage}
|
||||
alt="Agrandissement"
|
||||
className="w-full h-full object-cover rounded-md"
|
||||
/>
|
||||
</div>
|
||||
</div>,
|
||||
document.body
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,102 +1,103 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { sendMessage } from "../utils/sendMessage";
|
||||
|
||||
export default function ContactForm() {
|
||||
const [name, setName] = useState("");
|
||||
const [email, setEmail] = useState("");
|
||||
const [message, setMessage] = useState("");
|
||||
const [status, setStatus] = useState("");
|
||||
const [isSuccess, setIsSuccess] = useState<boolean | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(false); // ✅ Nouvel état pour désactiver le bouton
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!name.trim() || !email.trim() || !message.trim()) {
|
||||
setStatus("❌ Tous les champs sont obligatoires.");
|
||||
setIsSuccess(false);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
|
||||
setStatus("❌ Email invalide.");
|
||||
setIsSuccess(false);
|
||||
return;
|
||||
}
|
||||
|
||||
setStatus("⏳ Envoi en cours...");
|
||||
setIsSuccess(null);
|
||||
setIsLoading(true); // ✅ Désactive le bouton pendant l'envoi
|
||||
|
||||
try {
|
||||
await sendMessage(name, email, message);
|
||||
setStatus("✅ Message envoyé avec succès !");
|
||||
setIsSuccess(true);
|
||||
setName("");
|
||||
setEmail("");
|
||||
setMessage("");
|
||||
} catch (error) {
|
||||
setStatus("❌ Erreur lors de l'envoi du message.");
|
||||
setIsSuccess(false);
|
||||
} finally {
|
||||
setIsLoading(false); // ✅ Réactive le bouton après l'envoi
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<form
|
||||
onSubmit={handleSubmit}
|
||||
className="max-w-lg mx-auto p-6 bg-white shadow-lg rounded-lg animate-fade-in"
|
||||
>
|
||||
<h2 className="text-2xl font-bold mb-4 text-center">📩 Contactez-moi</h2>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Votre nom"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
className="w-full p-3 border border-gray-300 rounded mb-3 focus:outline-none focus:ring-2 focus:ring-blue-400"
|
||||
required
|
||||
/>
|
||||
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Votre email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className="w-full p-3 border border-gray-300 rounded mb-3 focus:outline-none focus:ring-2 focus:ring-blue-400"
|
||||
required
|
||||
/>
|
||||
|
||||
<textarea
|
||||
placeholder="Votre message"
|
||||
value={message}
|
||||
onChange={(e) => setMessage(e.target.value)}
|
||||
className="w-full p-3 border border-gray-300 rounded mb-3 focus:outline-none focus:ring-2 focus:ring-blue-400"
|
||||
required
|
||||
/>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading} // ✅ Désactive le bouton pendant l'envoi
|
||||
className={`w-full py-3 rounded transition ${
|
||||
isLoading ? "bg-gray-400 cursor-not-allowed" : "bg-blue-500 hover:bg-blue-600 text-white"
|
||||
}`}
|
||||
>
|
||||
{isLoading ? "⏳ Envoi..." : "Envoyer"}
|
||||
</button>
|
||||
|
||||
{/* ✅ Affichage du message de confirmation */}
|
||||
{status && (
|
||||
<p
|
||||
className={`mt-4 text-center ${isSuccess ? "text-green-600" : "text-red-600"}`}
|
||||
aria-live="polite" // ✅ Accessibilité pour les lecteurs d’écran
|
||||
>
|
||||
{status}
|
||||
</p>
|
||||
)}
|
||||
</form>
|
||||
);
|
||||
}
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { sendMessage } from "../utils/sendMessage";
|
||||
|
||||
export default function ContactForm() {
|
||||
// États pour gérer les valeurs des champs de formulaire
|
||||
const [name, setName] = useState("");
|
||||
const [email, setEmail] = useState("");
|
||||
const [message, setMessage] = useState("");
|
||||
const [status, setStatus] = useState("");
|
||||
const [isSuccess, setIsSuccess] = useState<boolean | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(false); // ✅ Nouvel état pour désactiver le bouton
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!name.trim() || !email.trim() || !message.trim()) {
|
||||
setStatus("❌ Tous les champs sont obligatoires.");
|
||||
setIsSuccess(false);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
|
||||
setStatus("❌ Email invalide.");
|
||||
setIsSuccess(false);
|
||||
return;
|
||||
}
|
||||
|
||||
setStatus("⏳ Envoi en cours...");
|
||||
setIsSuccess(null);
|
||||
setIsLoading(true); // ✅ Désactive le bouton pendant l'envoi
|
||||
|
||||
try {
|
||||
await sendMessage(name, email, message);
|
||||
setStatus("✅ Message envoyé avec succès !");
|
||||
setIsSuccess(true);
|
||||
setName("");
|
||||
setEmail("");
|
||||
setMessage("");
|
||||
} catch (error) {
|
||||
setStatus("❌ Erreur lors de l'envoi du message.");
|
||||
setIsSuccess(false);
|
||||
} finally {
|
||||
setIsLoading(false); // ✅ Réactive le bouton après l'envoi
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<form
|
||||
onSubmit={handleSubmit}
|
||||
className="max-w-lg mx-auto p-6 bg-white shadow-lg rounded-lg animate-fade-in"
|
||||
>
|
||||
<h2 className="text-2xl font-bold mb-4 text-center">📩 Contactez-moi</h2>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Votre nom"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
className="w-full p-3 border border-gray-300 rounded mb-3 focus:outline-none focus:ring-2 focus:ring-blue-400"
|
||||
required
|
||||
/>
|
||||
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Votre email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className="w-full p-3 border border-gray-300 rounded mb-3 focus:outline-none focus:ring-2 focus:ring-blue-400"
|
||||
required
|
||||
/>
|
||||
|
||||
<textarea
|
||||
placeholder="Votre message"
|
||||
value={message}
|
||||
onChange={(e) => setMessage(e.target.value)}
|
||||
className="w-full p-3 border border-gray-300 rounded mb-3 focus:outline-none focus:ring-2 focus:ring-blue-400"
|
||||
required
|
||||
/>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading} // ✅ Désactive le bouton pendant l'envoi
|
||||
className={`w-full py-3 rounded transition ${
|
||||
isLoading ? "bg-gray-400 cursor-not-allowed" : "bg-blue-500 hover:bg-blue-600 text-white"
|
||||
}`}
|
||||
>
|
||||
{isLoading ? "⏳ Envoi..." : "Envoyer"}
|
||||
</button>
|
||||
|
||||
{/* ✅ Affichage du message de confirmation */}
|
||||
{status && (
|
||||
<p
|
||||
className={`mt-4 text-center ${isSuccess ? "text-green-600" : "text-red-600"}`}
|
||||
aria-live="polite" // ✅ Accessibilité pour les lecteurs d’écran
|
||||
>
|
||||
{status}
|
||||
</p>
|
||||
)}
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,54 +1,60 @@
|
||||
import { fetchData } from "../utils/fetchData";
|
||||
import Carousel from "./Carousel";
|
||||
import ReactMarkdown from "react-markdown";
|
||||
|
||||
interface ContentSectionProps {
|
||||
collection: string; // Nom de la collection (projects, events, blog, etc.)
|
||||
slug: string;
|
||||
titleClass?: string; // Permet de modifier le style du titre
|
||||
contentClass?: string; // Permet de modifier le style du contenu
|
||||
}
|
||||
|
||||
export default async function ContentSection({ collection, slug, titleClass, contentClass }: ContentSectionProps) {
|
||||
const data = await fetchData(collection, slug);
|
||||
|
||||
if (!data) {
|
||||
return <div>Contenu introuvable.</div>;
|
||||
}
|
||||
|
||||
const { name, Resum: richText, picture, link, linkText } = data;
|
||||
|
||||
// Transformer les images de Strapi en format attendu par le carrousel
|
||||
const images = picture?.map((img: any) => ({
|
||||
url: `http://localhost:1337${img?.formats?.large?.url || img?.url}`,
|
||||
alt: img.name || "Image",
|
||||
})) || [];
|
||||
|
||||
return (
|
||||
<div className="max-w-3xl mx-auto p-6">
|
||||
<h1 className={titleClass || "text-3xl mb-6 font-bold text-gray-700"}>{name}</h1>
|
||||
|
||||
{/* Carrousel réutilisable */}
|
||||
<Carousel images={images} className="w-full h-64" />
|
||||
|
||||
{/* Contenu en Markdown */}
|
||||
<div className={contentClass || "bg-gray-100 rounded-md p-4 shadow-md mt-6"}>
|
||||
<ReactMarkdown>{richText}</ReactMarkdown>
|
||||
</div>
|
||||
|
||||
{/* Lien externe */}
|
||||
{link && (
|
||||
<div className="mt-6">
|
||||
<a
|
||||
href={link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-blue-500 hover:underline transition duration-300 ease-in-out transform hover:scale-105 hover:text-blue-700"
|
||||
>
|
||||
{linkText || "Voir plus/lien externe"}
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
import { fetchData } from "../utils/fetchData"; // Importation de la fonction fetchData pour récupérer les données depuis l'API
|
||||
import Carousel from "./Carousel"; // Importation du composant Carousel pour afficher les images
|
||||
import ReactMarkdown from "react-markdown"; // Importation de ReactMarkdown pour rendre le texte riche en Markdown
|
||||
|
||||
// Définition des propriétés du composant ContentSection
|
||||
interface ContentSectionProps {
|
||||
collection: string; // Nom de la collection (projects, events, blog, etc.)
|
||||
slug: string; // Identifiant unique pour récupérer les données spécifiques
|
||||
titleClass?: string; // Permet de modifier le style du titre
|
||||
contentClass?: string; // Permet de modifier le style du contenu
|
||||
}
|
||||
|
||||
// Composant principal ContentSection
|
||||
export default async function ContentSection({ collection, slug, titleClass, contentClass }: ContentSectionProps) {
|
||||
// Récupération des données depuis l'API en utilisant la fonction fetchData
|
||||
const data = await fetchData(collection, slug);
|
||||
|
||||
// Affichage d'un message si les données ne sont pas disponibles
|
||||
if (!data) {
|
||||
return <div>Contenu introuvable.</div>;
|
||||
}
|
||||
|
||||
// Déstructuration des données récupérées
|
||||
const { name, Resum: richText, picture, link, linkText } = data;
|
||||
|
||||
// Transformation des images de Strapi en format attendu par le carrousel
|
||||
const images = picture?.map((img: any) => ({
|
||||
url: `http://localhost:1337${img?.formats?.large?.url || img?.url}`, // Utilisation de l'URL de l'image en format large ou originale
|
||||
alt: img.name || "Image", // Texte alternatif pour l'image
|
||||
})) || [];
|
||||
|
||||
return (
|
||||
<div className="max-w-3xl mx-auto p-6">
|
||||
{/* Titre de la section */}
|
||||
<h1 className={titleClass || "text-3xl mb-6 font-bold text-gray-700"}>{name}</h1>
|
||||
|
||||
{/* Carrousel réutilisable pour afficher les images */}
|
||||
<Carousel images={images} className="w-full h-64" />
|
||||
|
||||
{/* Contenu en Markdown */}
|
||||
<div className={contentClass || "bg-gray-100 rounded-md p-4 shadow-md mt-6"}>
|
||||
<ReactMarkdown>{richText}</ReactMarkdown>
|
||||
</div>
|
||||
|
||||
{/* Lien externe */}
|
||||
{link && (
|
||||
<div className="mt-6">
|
||||
<a
|
||||
href={link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-blue-500 hover:underline transition duration-300 ease-in-out transform hover:scale-105 hover:text-blue-700"
|
||||
>
|
||||
{linkText || "Voir plus/lien externe"}
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,91 +1,98 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import CarouselCompetences from "./CarouselCompetences";
|
||||
import ReactMarkdown from "react-markdown";
|
||||
import rehypeRaw from "rehype-raw"; // ✅ Permet d'interpréter le HTML dans ReactMarkdown
|
||||
import ModalGlossaire from "./ModalGlossaire";
|
||||
|
||||
interface ContentSectionProps {
|
||||
competenceData: any;
|
||||
glossaireData: any[];
|
||||
titleClass?: string;
|
||||
contentClass?: string;
|
||||
}
|
||||
|
||||
// ✅ Définition du type Glossaire
|
||||
interface GlossaireItem {
|
||||
mot_clef: string;
|
||||
slug: string;
|
||||
variantes: string[];
|
||||
description: string;
|
||||
images?: any[];
|
||||
}
|
||||
|
||||
export default function ContentSectionCompetences({ competenceData, glossaireData, titleClass, contentClass }: ContentSectionProps) {
|
||||
const [selectedMot, setSelectedMot] = useState<GlossaireItem | null>(null);
|
||||
|
||||
if (!competenceData) {
|
||||
return <div className="text-red-500 text-center">❌ Compétence introuvable.</div>;
|
||||
}
|
||||
|
||||
const { name, content, picture } = competenceData;
|
||||
|
||||
const images = picture?.map((img: any) => ({
|
||||
url: `http://localhost:1337${img?.formats?.large?.url || img?.url}`,
|
||||
alt: img.name || "Image de compétence",
|
||||
})) || [];
|
||||
|
||||
// 🔥 Transformation du texte riche avec des <span> cliquables
|
||||
function transformMarkdownWithKeywords(text: string) {
|
||||
if (!glossaireData || glossaireData.length === 0) return text;
|
||||
|
||||
let modifiedText = text;
|
||||
|
||||
glossaireData.forEach(({ mot_clef, variantes }) => {
|
||||
const regexVariants = (variantes || []).map((v: string) => v.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("|");
|
||||
const regex = new RegExp(`\\b(${mot_clef}|${regexVariants})\\b`, "gi");
|
||||
|
||||
modifiedText = modifiedText.replace(regex, (match) => {
|
||||
return `<span class="keyword" data-mot="${mot_clef}" style="color: blue; cursor: pointer;">${match}</span>`; // ✅ Span cliquable
|
||||
});
|
||||
});
|
||||
|
||||
return modifiedText;
|
||||
}
|
||||
|
||||
const contentWithLinks = transformMarkdownWithKeywords(content);
|
||||
|
||||
// ✅ Gestion des clics sur les mots-clés
|
||||
useEffect(() => {
|
||||
function handleKeywordClick(event: any) {
|
||||
const target = event.target as HTMLElement;
|
||||
if (target.classList.contains("keyword")) {
|
||||
const mot = target.getAttribute("data-mot");
|
||||
if (mot) {
|
||||
const glossaireMot = glossaireData.find((g) => g.mot_clef === mot);
|
||||
setSelectedMot(glossaireMot || null);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("click", handleKeywordClick);
|
||||
return () => document.removeEventListener("click", handleKeywordClick);
|
||||
}, [glossaireData]);
|
||||
|
||||
return (
|
||||
<div className="max-w-3xl mx-auto p-6">
|
||||
<h1 className={titleClass || "text-3xl mb-6 font-bold text-gray-700"}>{name}</h1>
|
||||
|
||||
<CarouselCompetences images={images} className="w-full h-64" />
|
||||
|
||||
{/* 🔥 Affichage du texte riche avec mots-clés cliquables */}
|
||||
<div className={contentClass || "mt-6 text-lg text-black-700"}>
|
||||
<ReactMarkdown rehypePlugins={[rehypeRaw]}>{contentWithLinks}</ReactMarkdown> {/* ✅ Permet d'interpréter le HTML */}
|
||||
</div>
|
||||
|
||||
{/* 🚀 Modale pour afficher les infos des mots-clés */}
|
||||
{selectedMot && <ModalGlossaire mot={selectedMot} onClose={() => setSelectedMot(null)} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import CarouselCompetences from "./CarouselCompetences";
|
||||
import ReactMarkdown from "react-markdown";
|
||||
import rehypeRaw from "rehype-raw"; // ✅ Permet d'interpréter le HTML dans ReactMarkdown
|
||||
import ModalGlossaire from "./ModalGlossaire";
|
||||
|
||||
// Définition des propriétés du composant ContentSectionCompetences
|
||||
interface ContentSectionProps {
|
||||
competenceData: any;
|
||||
glossaireData: any[];
|
||||
titleClass?: string;
|
||||
contentClass?: string;
|
||||
}
|
||||
|
||||
// ✅ Définition du type Glossaire
|
||||
interface GlossaireItem {
|
||||
mot_clef: string;
|
||||
slug: string;
|
||||
variantes: string[];
|
||||
description: string;
|
||||
images?: any[];
|
||||
}
|
||||
|
||||
// Composant principal ContentSectionCompetences
|
||||
export default function ContentSectionCompetences({ competenceData, glossaireData, titleClass, contentClass }: ContentSectionProps) {
|
||||
const [selectedMot, setSelectedMot] = useState<GlossaireItem | null>(null);
|
||||
|
||||
if (!competenceData) {
|
||||
return <div className="text-red-500 text-center">❌ Compétence introuvable.</div>;
|
||||
}
|
||||
|
||||
// Déstructuration des données de la compétence
|
||||
const { name, content, picture } = competenceData;
|
||||
|
||||
// Transformation des images de Strapi en format attendu par le carrousel
|
||||
const images = picture?.map((img: any) => ({
|
||||
url: `http://localhost:1337${img?.formats?.large?.url || img?.url}`,
|
||||
alt: img.name || "Image de compétence",
|
||||
})) || [];
|
||||
|
||||
// 🔥 Transformation du texte riche avec des <span> cliquables
|
||||
function transformMarkdownWithKeywords(text: string) {
|
||||
if (!glossaireData || glossaireData.length === 0) return text;
|
||||
|
||||
let modifiedText = text;
|
||||
|
||||
glossaireData.forEach(({ mot_clef, variantes }) => {
|
||||
const regexVariants = (variantes || []).map((v: string) => v.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("|");
|
||||
const regex = new RegExp(`\\b(${mot_clef}|${regexVariants})\\b`, "gi");
|
||||
|
||||
modifiedText = modifiedText.replace(regex, (match) => {
|
||||
return `<span class="keyword" data-mot="${mot_clef}" style="color: blue; cursor: pointer;">${match}</span>`; // ✅ Span cliquable
|
||||
});
|
||||
});
|
||||
|
||||
return modifiedText;
|
||||
}
|
||||
|
||||
const contentWithLinks = transformMarkdownWithKeywords(content);
|
||||
|
||||
// ✅ Gestion des clics sur les mots-clés
|
||||
useEffect(() => {
|
||||
function handleKeywordClick(event: any) {
|
||||
const target = event.target as HTMLElement;
|
||||
if (target.classList.contains("keyword")) {
|
||||
const mot = target.getAttribute("data-mot");
|
||||
if (mot) {
|
||||
const glossaireMot = glossaireData.find((g) => g.mot_clef === mot);
|
||||
setSelectedMot(glossaireMot || null);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("click", handleKeywordClick);
|
||||
return () => document.removeEventListener("click", handleKeywordClick);
|
||||
}, [glossaireData]);
|
||||
|
||||
return (
|
||||
// ✅ Affichage de la compétence
|
||||
<div className="max-w-3xl mx-auto p-6">
|
||||
{/* Titre de la section */}
|
||||
<h1 className={titleClass || "text-3xl mb-6 font-bold text-gray-700"}>{name}</h1>
|
||||
|
||||
{/* Carrousel pour afficher les images */}
|
||||
<CarouselCompetences images={images} className="w-full h-64" />
|
||||
|
||||
{/* 🔥 Affichage du texte riche avec mots-clés cliquables */}
|
||||
<div className={contentClass || "mt-6 text-lg text-black-700"}>
|
||||
<ReactMarkdown rehypePlugins={[rehypeRaw]}>{contentWithLinks}</ReactMarkdown> {/* ✅ Permet d'interpréter le HTML */}
|
||||
</div>
|
||||
|
||||
{/* 🚀 Modale pour afficher les infos des mots-clés */}
|
||||
{selectedMot && <ModalGlossaire mot={selectedMot} onClose={() => setSelectedMot(null)} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,23 +1,25 @@
|
||||
import { fetchDataCompetences, fetchDataGlossaire } from "../utils/fetchDataCompetences";
|
||||
import ContentSectionCompetences from "./ContentSectionCompetences";
|
||||
|
||||
interface ContentSectionProps {
|
||||
collection: string;
|
||||
slug: string;
|
||||
titleClass?: string;
|
||||
contentClass?: string;
|
||||
}
|
||||
|
||||
export default async function ContentSectionCompetencesContainer({ collection, slug, titleClass, contentClass }: ContentSectionProps) {
|
||||
const competenceData = await fetchDataCompetences(collection, slug);
|
||||
const glossaireData = await fetchDataGlossaire();
|
||||
|
||||
return (
|
||||
<ContentSectionCompetences
|
||||
competenceData={competenceData}
|
||||
glossaireData={glossaireData}
|
||||
titleClass={titleClass}
|
||||
contentClass={contentClass}
|
||||
/>
|
||||
);
|
||||
}
|
||||
import { fetchDataCompetences, fetchDataGlossaire } from "../utils/fetchDataCompetences";
|
||||
import ContentSectionCompetences from "./ContentSectionCompetences";
|
||||
|
||||
// Définition des propriétés du composant ContentSection
|
||||
interface ContentSectionProps {
|
||||
collection: string;
|
||||
slug: string;
|
||||
titleClass?: string;
|
||||
contentClass?: string;
|
||||
}
|
||||
|
||||
// Composant principal ContentSection
|
||||
export default async function ContentSectionCompetencesContainer({ collection, slug, titleClass, contentClass }: ContentSectionProps) {
|
||||
const competenceData = await fetchDataCompetences(collection, slug);
|
||||
const glossaireData = await fetchDataGlossaire();
|
||||
|
||||
return (
|
||||
<ContentSectionCompetences
|
||||
competenceData={competenceData}
|
||||
glossaireData={glossaireData}
|
||||
titleClass={titleClass}
|
||||
contentClass={contentClass}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,18 +1,26 @@
|
||||
"use client"
|
||||
|
||||
import {useState} from "react"
|
||||
|
||||
export default function Footer() {
|
||||
const [count, setCount] = useState(0)
|
||||
function handleClick() {
|
||||
setCount(count + 1)}
|
||||
|
||||
return (
|
||||
<footer className="bg-white/50 backdrop-blur rounded-lg">
|
||||
<div className="max-w-4xl mx-auto flex flex-col items-center py-6 text-sm text-gray-400">
|
||||
<p>© {new Date().getFullYear()} Our Company.</p>
|
||||
<p>Vous avez cliqué {count} fois sur le boutton.<button onClick={handleClick}>Click Me</button></p>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"; // Importation du hook useState pour gérer l'état
|
||||
|
||||
export default function Footer() {
|
||||
const [count, setCount] = useState(0); // État pour suivre le nombre de clics
|
||||
|
||||
// Fonction pour gérer les clics sur le bouton
|
||||
function handleClick() {
|
||||
setCount(count + 1); // Incrémente le compteur de clics
|
||||
}
|
||||
|
||||
return (
|
||||
<footer className="bg-white/50 backdrop-blur rounded-lg">
|
||||
<div className="max-w-4xl mx-auto flex flex-col items-center py-6 text-sm text-gray-400">
|
||||
{/* Affichage de l'année actuelle */}
|
||||
<p>© {new Date().getFullYear()} Our Company.</p>
|
||||
{/* Affichage du compteur de clics et du bouton */}
|
||||
<p>
|
||||
Vous avez cliqué {count} fois sur le bouton.
|
||||
<button onClick={handleClick}>Click Me</button>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
@ -1,58 +1,60 @@
|
||||
import { useEffect } from "react";
|
||||
import { createPortal } from "react-dom"; // ✅ Insère la modale dans <body>
|
||||
import CarouselCompetences from "./CarouselCompetences";
|
||||
|
||||
interface ModalGlossaireProps {
|
||||
mot: {
|
||||
mot_clef: string;
|
||||
description: string;
|
||||
images?: any[];
|
||||
};
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export default function ModalGlossaire({ mot, onClose }: ModalGlossaireProps) {
|
||||
// 🔥 Désactiver le scroll du `body` quand la modale est ouverte
|
||||
useEffect(() => {
|
||||
document.body.classList.add("overflow-hidden");
|
||||
return () => {
|
||||
document.body.classList.remove("overflow-hidden");
|
||||
};
|
||||
}, []);
|
||||
|
||||
// ✅ Debug : Vérifier les images reçues
|
||||
console.log("🖼️ Images reçues dans la modale :", mot.images);
|
||||
|
||||
// ✅ Vérifier si `mot.images` est bien un tableau et contient des images
|
||||
const images = mot.images?.map((img: any) => {
|
||||
return {
|
||||
url: `http://localhost:1337${img.formats?.large?.url || img.url}`,
|
||||
alt: img.name || "Illustration",
|
||||
};
|
||||
}) || [];
|
||||
|
||||
return createPortal(
|
||||
<div className="fixed inset-0 w-screen h-screen bg-black bg-opacity-75 flex items-center justify-center z-[1000]">
|
||||
<div className="bg-white p-6 rounded-lg shadow-lg w-[90vw] max-w-4xl relative">
|
||||
{/* Bouton de fermeture */}
|
||||
<button className="absolute top-3 right-3 text-gray-700 text-2xl" onClick={onClose}>
|
||||
✖
|
||||
</button>
|
||||
|
||||
{/* Titre */}
|
||||
<h2 className="text-3xl font-bold mb-4">{mot.mot_clef}</h2>
|
||||
|
||||
{/* Description */}
|
||||
<p className="text-gray-700 mb-6">{mot.description}</p>
|
||||
|
||||
{/* 🚀 Carrousel d'images si disponible */}
|
||||
{images.length > 0 ? (
|
||||
<CarouselCompetences images={images} className="w-full h-80" />
|
||||
) : (
|
||||
<p className="text-gray-500 text-center">Aucune image disponible</p>
|
||||
)}
|
||||
</div>
|
||||
</div>,
|
||||
document.body // ✅ Fixe la modale au `body` pour qu'elle couvre toute la page
|
||||
);
|
||||
}
|
||||
import { useEffect } from "react";
|
||||
import { createPortal } from "react-dom"; // Insère la modale dans <body>
|
||||
import CarouselCompetences from "./CarouselCompetences"; // Importation du composant CarouselCompetences pour afficher les images
|
||||
|
||||
// Définition des propriétés du composant ModalGlossaire
|
||||
interface ModalGlossaireProps {
|
||||
mot: {
|
||||
mot_clef: string; // Mot-clé du glossaire
|
||||
description: string; // Description du mot-clé
|
||||
images?: any[]; // Images associées au mot-clé
|
||||
};
|
||||
onClose: () => void; // Fonction pour fermer la modale
|
||||
}
|
||||
|
||||
// Composant principal ModalGlossaire
|
||||
export default function ModalGlossaire({ mot, onClose }: ModalGlossaireProps) {
|
||||
// Désactiver le scroll du `body` quand la modale est ouverte
|
||||
useEffect(() => {
|
||||
document.body.classList.add("overflow-hidden");
|
||||
return () => {
|
||||
document.body.classList.remove("overflow-hidden");
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Debug : Vérifier les images reçues
|
||||
console.log("🖼️ Images reçues dans la modale :", mot.images);
|
||||
|
||||
// Vérifier si `mot.images` est bien un tableau et contient des images
|
||||
const images = mot.images?.map((img: any) => {
|
||||
return {
|
||||
url: `http://localhost:1337${img.formats?.large?.url || img.url}`,
|
||||
alt: img.name || "Illustration",
|
||||
};
|
||||
}) || [];
|
||||
|
||||
return createPortal(
|
||||
<div className="fixed inset-0 w-screen h-screen bg-black bg-opacity-75 flex items-center justify-center z-[1000]">
|
||||
<div className="bg-white p-6 rounded-lg shadow-lg w-[90vw] max-w-4xl relative">
|
||||
{/* Bouton de fermeture */}
|
||||
<button className="absolute top-3 right-3 text-gray-700 text-2xl" onClick={onClose}>
|
||||
✖
|
||||
</button>
|
||||
|
||||
{/* Titre */}
|
||||
<h2 className="text-3xl font-bold mb-4">{mot.mot_clef}</h2>
|
||||
|
||||
{/* Description */}
|
||||
<p className="text-gray-700 mb-6">{mot.description}</p>
|
||||
|
||||
{/* Carrousel d'images si disponible */}
|
||||
{images.length > 0 ? (
|
||||
<CarouselCompetences images={images} className="w-full h-80" />
|
||||
) : (
|
||||
<p className="text-gray-500">Aucune image disponible.</p>
|
||||
)}
|
||||
</div>
|
||||
</div>,
|
||||
document.body
|
||||
);
|
||||
}
|
||||
@ -1,14 +1,18 @@
|
||||
"use client"
|
||||
|
||||
import Link from "next/link"
|
||||
import {usePathname} from "next/navigation"
|
||||
|
||||
export default function NavLink(props){
|
||||
const pathname = usePathname()
|
||||
const active = pathname === props.path
|
||||
return(
|
||||
<Link className={active ? "opacity-100" : "opacity-50 hover:opacity-65"} href={props.path}>
|
||||
{props.text}
|
||||
</Link>
|
||||
)
|
||||
"use client"
|
||||
|
||||
import Link from "next/link"; // Importation du composant Link de Next.js pour la navigation
|
||||
import { usePathname } from "next/navigation"; // Importation du hook usePathname pour obtenir le chemin actuel
|
||||
|
||||
export default function NavLink(props) {
|
||||
const pathname = usePathname(); // Obtention du chemin actuel
|
||||
const active = pathname === props.path; // Vérification si le lien est actif
|
||||
|
||||
return (
|
||||
<Link
|
||||
className={active ? "opacity-100" : "opacity-50 hover:opacity-65"} // Classes CSS pour le style du lien
|
||||
href={props.path} // Chemin de navigation
|
||||
>
|
||||
{props.text} {/* Texte du lien */}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
@ -1,22 +1,25 @@
|
||||
import ContactForm from "../components/ContactForm";
|
||||
|
||||
export default function ContactPage() {
|
||||
return (
|
||||
<div className="max-w-3xl mx-auto p-6">
|
||||
<h1 className="text-3xl font-bold text-center mb-6">Contactez-moi</h1>
|
||||
<p className="text-lg text-center mb-4">
|
||||
Vous pouvez me contacter via ce formulaire ou sur mes réseaux sociaux.
|
||||
</p>
|
||||
|
||||
{/* Liens vers les réseaux sociaux */}
|
||||
<div className="flex justify-center space-x-4 mb-6">
|
||||
<a href="https://linkedin.com/in/votreprofil" className="text-blue-500">LinkedIn</a>
|
||||
<a href="https://twitter.com/votreprofil" className="text-blue-500">Twitter</a>
|
||||
<a href="mailto:votre@email.com" className="text-blue-500">Email</a>
|
||||
</div>
|
||||
|
||||
{/* Formulaire de contact */}
|
||||
<ContactForm />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
import ContactForm from "../components/ContactForm"; // Importation du composant ContactForm
|
||||
|
||||
export default function ContactPage() {
|
||||
return (
|
||||
<div className="max-w-3xl mx-auto p-6">
|
||||
{/* Titre de la page */}
|
||||
<h1 className="text-3xl font-bold text-center mb-6">Contactez-moi</h1>
|
||||
|
||||
{/* Texte d'introduction */}
|
||||
<p className="text-lg text-center mb-4">
|
||||
Vous pouvez me contacter via ce formulaire ou sur mes réseaux sociaux.
|
||||
</p>
|
||||
|
||||
{/* Liens vers les réseaux sociaux */}
|
||||
<div className="flex justify-center space-x-4 mb-6">
|
||||
<a href="https://linkedin.com/in/votreprofil" className="text-blue-500">LinkedIn</a>
|
||||
<a href="https://twitter.com/votreprofil" className="text-blue-500">Twitter</a>
|
||||
<a href="mailto:votre@email.com" className="text-blue-500">Email</a>
|
||||
</div>
|
||||
|
||||
{/* Formulaire de contact */}
|
||||
<ContactForm />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,37 +1,42 @@
|
||||
/* Importation des styles de base, des composants et des utilitaires de Tailwind CSS */
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* Définition des variables CSS pour les couleurs de fond et de premier plan */
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
--background: #ffffff; /* Couleur de fond par défaut (clair) */
|
||||
--foreground: #171717; /* Couleur de premier plan par défaut (foncé) */
|
||||
}
|
||||
|
||||
/* Définition des variables CSS pour le mode sombre */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
--background: #0a0a0a; /* Couleur de fond pour le mode sombre */
|
||||
--foreground: #ededed; /* Couleur de premier plan pour le mode sombre */
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles globaux pour le corps de la page */
|
||||
body {
|
||||
color: var(--foreground);
|
||||
background: var(--background);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
color: var(--foreground); /* Utilisation de la couleur de premier plan définie */
|
||||
background: var(--background); /* Utilisation de la couleur de fond définie */
|
||||
font-family: Arial, Helvetica, sans-serif; /* Police de caractères par défaut */
|
||||
}
|
||||
|
||||
/* Définition d'une animation de fondu en entrée */
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
opacity: 0; /* Opacité initiale à 0 (invisible) */
|
||||
transform: translateY(-10px); /* Déplacement initial vers le haut */
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
opacity: 1; /* Opacité finale à 1 (visible) */
|
||||
transform: translateY(0); /* Position finale */
|
||||
}
|
||||
}
|
||||
|
||||
/* Classe utilitaire pour appliquer l'animation de fondu en entrée */
|
||||
.animate-fade-in {
|
||||
animation: fade-in 0.5s ease-out;
|
||||
}
|
||||
|
||||
animation: fade-in 0.5s ease-out; /* Animation de 0.5s avec une courbe de transition */
|
||||
}
|
||||
@ -6,16 +6,17 @@ import "./assets/main.css";
|
||||
import NavLink from "./components/NavLink";
|
||||
|
||||
export default function RootLayout({ children }) {
|
||||
// États pour gérer la largeur et la hauteur du conteneur principal
|
||||
const [numElements, setNumElements] = useState(0);
|
||||
const [containerWidth, setContainerWidth] = useState("max-w-4xl");
|
||||
const [containerHeight, setContainerHeight] = useState("min-h-[50vh]");
|
||||
|
||||
useEffect(() => {
|
||||
// Supposons que children soit un tableau d'éléments
|
||||
// Compter le nombre d'éléments enfants
|
||||
const elementsCount = React.Children.count(children);
|
||||
setNumElements(elementsCount);
|
||||
|
||||
// Ajustez la largeur en fonction du nombre d'éléments
|
||||
// Ajuster la largeur et la hauteur en fonction du nombre d'éléments
|
||||
if (elementsCount > 5) {
|
||||
setContainerWidth("max-w-6xl");
|
||||
setContainerHeight("min-h-[80vh]");
|
||||
@ -31,11 +32,14 @@ export default function RootLayout({ children }) {
|
||||
return (
|
||||
<html lang="fr">
|
||||
<body>
|
||||
{/* Conteneur principal avec image de fond */}
|
||||
<div className="bg-wallpaper min-h-[100dvh] grid grid-rows-[auto_1fr_auto]">
|
||||
{/* Cercles de fond pour l'effet visuel */}
|
||||
<div className="absolute z-0 inset-0 overflow-hidden">
|
||||
<div className="circle-one blur-3xl w-64 h-64 rounded-full bg-rose-400/60 top-0 right-28 absolute"></div>
|
||||
<div className="circle-two blur-3xl w-64 h-64 rounded-full bg-indigo-400/60 bottom-0 left-28 absolute"></div>
|
||||
</div>
|
||||
{/* En-tête avec navigation */}
|
||||
<header className="z-10 bg-white/50 backdrop-blur rounded-lg border-2 border-gray-500">
|
||||
<div className="max-w-4xl mx-auto flex items-center justify-between p-4">
|
||||
<h2 className="text-2xl font-bold">Portofolio Gras-Calvet Fernand</h2>
|
||||
@ -57,9 +61,11 @@ export default function RootLayout({ children }) {
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
{/* Conteneur principal pour le contenu */}
|
||||
<main className={`backdrop-blur z-10 ${containerWidth} ${containerHeight} mx-auto bg-white/20 rounded-xl py-7 px-8 m-6 overflow-hidden`}>
|
||||
{children}
|
||||
</main>
|
||||
{/* Pied de page */}
|
||||
<Footer />
|
||||
</div>
|
||||
</body>
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
import ContentSection from "../../components/ContentSection";
|
||||
|
||||
export default function Page({ params }: { params: { slug: string } }) {
|
||||
return <ContentSection collection="projects" slug={params.slug} />;
|
||||
}
|
||||
import ContentSection from "../../components/ContentSection"; // Importation du composant ContentSection
|
||||
|
||||
// Composant principal de la page de détail du projet
|
||||
export default function Page({ params }: { params: { slug: string } }) {
|
||||
// Rendu du composant ContentSection avec les paramètres de la collection et du slug
|
||||
return <ContentSection collection="projects" slug={params.slug} />;
|
||||
}
|
||||
@ -1,59 +1,69 @@
|
||||
import Link from "next/link";
|
||||
|
||||
async function getAllprojects() {
|
||||
try {
|
||||
const response = await fetch("http://localhost:1337/api/projects?populate=*");
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to fetch projects");
|
||||
}
|
||||
const projects = await response.json();
|
||||
return projects.data;
|
||||
} catch (error) {
|
||||
console.error("Error fetching projects:", error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
export default async function Page() {
|
||||
const projects = await getAllprojects();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 className="text-3xl mb-6 font-bold text-grey-700">Portfolio formation 42</h1>
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
{projects.map((project) => {
|
||||
const picture = project.picture?.[0]; // Récupère la première image si elle existe
|
||||
const largeImageUrl = picture?.formats?.large?.url; // Vérifie que le format "large" existe
|
||||
const originalImageUrl = picture?.url; // URL de l'image originale
|
||||
|
||||
// Utilisez l'URL de l'image originale si disponible, sinon l'URL de l'image large
|
||||
const imageUrl = originalImageUrl ? `http://localhost:1337${originalImageUrl}` : `http://localhost:1337${largeImageUrl}`;
|
||||
|
||||
return (
|
||||
<div key={project.id} className="bg-white rounded-lg shadow-md overflow-hidden transform transition-transform duration-300 hover:scale-105 hover:shadow-lg hover:bg-blue-100">
|
||||
<Link href={`/portfolio/${project.slug}`}>
|
||||
<div className="overflow-hidden">
|
||||
{imageUrl ? (
|
||||
<img
|
||||
src={imageUrl}
|
||||
alt={picture?.name || "Project image"}
|
||||
className="w-full h-48 object-cover transform transition-transform duration-300 hover:scale-125 hover:rotate-12"
|
||||
/>
|
||||
) : (
|
||||
<div className="bg-gray-200 text-gray-500 text-center rounded-md shadow-md p-4">
|
||||
Image indisponible
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<p className="font-bold text-xl mb-2">{project.name}</p>
|
||||
<p className="text-gray-700">{project.description}</p>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
import Link from "next/link";
|
||||
|
||||
// Fonction pour récupérer tous les projets depuis l'API Strapi
|
||||
async function getAllprojects() {
|
||||
try {
|
||||
const response = await fetch("http://localhost:1337/api/projects?populate=*");
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to fetch projects");
|
||||
}
|
||||
const projects = await response.json();
|
||||
return projects.data;
|
||||
} catch (error) {
|
||||
console.error("Error fetching projects:", error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
// Composant principal de la page des projets
|
||||
export default async function Page() {
|
||||
const projects = await getAllprojects();
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* Titre de la page */}
|
||||
<h1 className="text-3xl mb-6 font-bold text-grey-700">Portfolio formation 42</h1>
|
||||
|
||||
{/* Grille pour afficher les projets */}
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
{/* Boucle sur les projets pour les afficher */}
|
||||
{projects.map((project) => {
|
||||
const picture = project.picture?.[0]; // Récupère la première image si elle existe
|
||||
const largeImageUrl = picture?.formats?.large?.url; // Vérifie que le format "large" existe
|
||||
const originalImageUrl = picture?.url; // URL de l'image originale
|
||||
|
||||
// Utilisez l'URL de l'image originale si disponible, sinon l'URL de l'image large
|
||||
const imageUrl = originalImageUrl ? `http://localhost:1337${originalImageUrl}` : `http://localhost:1337${largeImageUrl}`;
|
||||
|
||||
return (
|
||||
<div key={project.id} className="bg-white rounded-lg shadow-md overflow-hidden transform transition-transform duration-300 hover:scale-105 hover:shadow-lg hover:bg-blue-100">
|
||||
{/* Lien vers la page de détail du projet */}
|
||||
<Link href={`/portfolio/${project.slug}`}>
|
||||
<div className="overflow-hidden">
|
||||
{/* Affichage de l'image du projet */}
|
||||
{imageUrl ? (
|
||||
<img
|
||||
src={imageUrl}
|
||||
alt={picture?.name || "Project image"}
|
||||
className="w-full h-48 object-cover transform transition-transform duration-300 hover:scale-125 hover:rotate-12"
|
||||
/>
|
||||
) : (
|
||||
<div className="bg-gray-200 text-gray-500 text-center rounded-md shadow-md p-4">
|
||||
Image indisponible
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="p-4">
|
||||
{/* Affichage du nom du projet */}
|
||||
<p className="font-bold text-xl mb-2">{project.name}</p>
|
||||
{/* Affichage de la description du projet */}
|
||||
<p className="text-gray-700">{project.description}</p>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,24 +1,30 @@
|
||||
import qs from "qs";
|
||||
|
||||
export async function fetchData(collection: string, slug: string) {
|
||||
const query = qs.stringify({
|
||||
filters: { slug },
|
||||
populate: "picture",
|
||||
});
|
||||
|
||||
try {
|
||||
const response = await fetch(`http://localhost:1337/api/${collection}?${query}`, {
|
||||
cache: "no-store",
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to fetch data");
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
return data.data[0] || null;
|
||||
} catch (error) {
|
||||
console.error(`Error fetching ${collection} data:`, error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
import qs from "qs"; // Importation de qs pour construire des requêtes de chaîne de requête
|
||||
|
||||
// Fonction pour récupérer des données spécifiques depuis l'API Strapi
|
||||
export async function fetchData(collection: string, slug: string) {
|
||||
// Construction de la requête avec des filtres et des relations à peupler
|
||||
const query = qs.stringify({
|
||||
filters: { slug }, // Filtre basé sur le slug
|
||||
populate: "picture", // On garde les images associées
|
||||
});
|
||||
|
||||
try {
|
||||
// Envoi de la requête à l'API Strapi
|
||||
const response = await fetch(`http://localhost:1337/api/${collection}?${query}`, {
|
||||
cache: "no-store", // Désactivation du cache pour obtenir les données les plus récentes
|
||||
});
|
||||
|
||||
// Vérification de la réponse de l'API
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to fetch data");
|
||||
}
|
||||
|
||||
// Récupération des données de la réponse
|
||||
const data = await response.json();
|
||||
return data.data[0] || null; // Retourne la première entrée ou null si aucune donnée n'est trouvée
|
||||
} catch (error) {
|
||||
// Gestion des erreurs et log des erreurs
|
||||
console.error(`Error fetching ${collection} data:`, error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
@ -1,54 +1,67 @@
|
||||
import qs from "qs";
|
||||
|
||||
// ✅ Fonction pour récupérer une compétence spécifique
|
||||
export async function fetchDataCompetences(collection: string, slug: string) {
|
||||
const query = qs.stringify({
|
||||
filters: {
|
||||
slug: { $eq: slug },
|
||||
},
|
||||
populate: "picture", // On garde les images des compétences
|
||||
});
|
||||
|
||||
console.log(`🛠️ Requête API Compétence : http://localhost:1337/api/${collection}?${query}`);
|
||||
|
||||
try {
|
||||
const response = await fetch(`http://localhost:1337/api/${collection}?${query}`, {
|
||||
cache: "no-store",
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to fetch competences data: ${response.status}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
console.log("✅ Données reçues (Compétence) :", data);
|
||||
|
||||
return data.data[0] || null;
|
||||
} catch (error) {
|
||||
console.error("❌ Erreur lors de la récupération des compétences :", error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export async function fetchDataGlossaire() {
|
||||
try {
|
||||
console.log("🛠️ Requête API Glossaire : http://localhost:1337/api/glossaires?populate=images");
|
||||
|
||||
const response = await fetch("http://localhost:1337/api/glossaires?populate=images", {
|
||||
cache: "no-store",
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to fetch glossaire data: ${response.status}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
console.log("✅ Données reçues (Glossaire) :", data);
|
||||
|
||||
return data.data || [];
|
||||
} catch (error) {
|
||||
console.error("❌ Erreur lors de la récupération du glossaire :", error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
import qs from "qs"; // Importation de qs pour construire des requêtes de chaîne de requête
|
||||
|
||||
// Fonction pour récupérer une compétence spécifique
|
||||
export async function fetchDataCompetences(collection: string, slug: string) {
|
||||
// Construction de la requête avec des filtres et des relations à peupler
|
||||
const query = qs.stringify({
|
||||
filters: {
|
||||
slug: { $eq: slug },
|
||||
},
|
||||
populate: "picture", // On garde les images des compétences
|
||||
});
|
||||
|
||||
// Log de la requête API pour le débogage
|
||||
console.log(`🛠️ Requête API Compétence : http://localhost:1337/api/${collection}?${query}`);
|
||||
|
||||
try {
|
||||
// Envoi de la requête à l'API Strapi
|
||||
const response = await fetch(`http://localhost:1337/api/${collection}?${query}`, {
|
||||
cache: "no-store",
|
||||
});
|
||||
|
||||
// Vérification de la réponse de l'API
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to fetch competences data: ${response.status}`);
|
||||
}
|
||||
|
||||
// Récupération des données de la réponse
|
||||
const data = await response.json();
|
||||
console.log("✅ Données reçues (Compétence) :", data);
|
||||
|
||||
// Retourne la première compétence ou null si aucune donnée n'est trouvée
|
||||
return data.data[0] || null;
|
||||
} catch (error) {
|
||||
// Gestion des erreurs et log des erreurs
|
||||
console.error("❌ Erreur lors de la récupération des compétences :", error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
// Fonction pour récupérer les données du glossaire
|
||||
export async function fetchDataGlossaire() {
|
||||
try {
|
||||
// Log de la requête API pour le débogage
|
||||
console.log("🛠️ Requête API Glossaire : http://localhost:1337/api/glossaires?populate=images");
|
||||
|
||||
// Envoi de la requête à l'API Strapi
|
||||
const response = await fetch("http://localhost:1337/api/glossaires?populate=images", {
|
||||
cache: "no-store",
|
||||
});
|
||||
|
||||
// Vérification de la réponse de l'API
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to fetch glossaire data: ${response.status}`);
|
||||
}
|
||||
|
||||
// Récupération des données de la réponse
|
||||
const data = await response.json();
|
||||
console.log("✅ Données reçues (Glossaire) :", data);
|
||||
|
||||
// Retourne les données du glossaire ou un tableau vide si aucune donnée n'est trouvée
|
||||
return data.data || [];
|
||||
} catch (error) {
|
||||
// Gestion des erreurs et log des erreurs
|
||||
console.error("❌ Erreur lors de la récupération du glossaire :", error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
@ -1,32 +1,39 @@
|
||||
export async function sendMessage(name: string, email: string, message: string) {
|
||||
const dateTime = new Date().toLocaleString("fr-FR", { timeZone: "Europe/Paris" }); // ✅ Date formatée en français
|
||||
|
||||
const messageWithDate = `${message}\n\n📅 Envoyé le : ${dateTime}`; // ✅ Ajout de la date à la fin du message
|
||||
|
||||
console.log("📨 Envoi du message...", { name, email, messageWithDate });
|
||||
|
||||
const res = await fetch("http://localhost:1337/api/messages", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
data: {
|
||||
name: name,
|
||||
email: email,
|
||||
message: messageWithDate, // ✅ Message modifié avec la date
|
||||
},
|
||||
}),
|
||||
});
|
||||
|
||||
const responseData = await res.json();
|
||||
|
||||
if (!res.ok) {
|
||||
console.error("❌ Erreur API Strapi :", responseData);
|
||||
throw new Error(`Échec de l'envoi du message: ${responseData.error.message}`);
|
||||
}
|
||||
|
||||
console.log("✅ Message envoyé avec succès !", responseData);
|
||||
return responseData;
|
||||
}
|
||||
|
||||
// Fonction pour envoyer un message à l'API Strapi
|
||||
export async function sendMessage(name: string, email: string, message: string) {
|
||||
// Formatage de la date et de l'heure en français
|
||||
const dateTime = new Date().toLocaleString("fr-FR", { timeZone: "Europe/Paris" }); // ✅ Date formatée en français
|
||||
|
||||
// Ajout de la date à la fin du message
|
||||
const messageWithDate = `${message}\n\n📅 Envoyé le : ${dateTime}`; // ✅ Ajout de la date à la fin du message
|
||||
|
||||
// Log des informations du message avant l'envoi
|
||||
console.log("📨 Envoi du message...", { name, email, messageWithDate });
|
||||
|
||||
// Envoi du message à l'API Strapi
|
||||
const res = await fetch("http://localhost:1337/api/messages", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
data: {
|
||||
name: name,
|
||||
email: email,
|
||||
message: messageWithDate, // ✅ Message modifié avec la date
|
||||
},
|
||||
}),
|
||||
});
|
||||
|
||||
// Récupération de la réponse de l'API
|
||||
const responseData = await res.json();
|
||||
|
||||
// Gestion des erreurs de l'API
|
||||
if (!res.ok) {
|
||||
console.error("❌ Erreur API Strapi :", responseData);
|
||||
throw new Error(`Échec de l'envoi du message: ${responseData.error.message}`);
|
||||
}
|
||||
|
||||
// Log de la réussite de l'envoi du message
|
||||
console.log("✅ Message envoyé avec succès !", responseData);
|
||||
return responseData;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user