bender/5a137a99-b673-4ea4-a6e1-23795bb12526
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_8 into main #11

Merged
bender merged 1 commits from version_8 into main 2026-03-12 12:37:17 +00:00
Conversation 0 Commits 1 Files Changed 1 +45 -127
1 changed files with 45 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

172
src/app/portfolio/page.tsx
View File

@@ -3,6 +3,7 @@
import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
import ContactText from "@/components/sections/contact/ContactText";
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
import { Camera, Upload, Trash2, Play, Maximize2 } from "lucide-react";
@@ -56,8 +57,6 @@ export default function PortfolioPage() {
>([]);
const [uploadError, setUploadError] = useState("");
const [uploadSuccess, setUploadSuccess] = useState(false);
const [selectedMedia, setSelectedMedia] = useState<string | null>(null);
const [isFullscreen, setIsFullscreen] = useState(false);
const handleMediaUpload = (
e: React.ChangeEvent<HTMLInputElement>,
@@ -103,12 +102,14 @@ export default function PortfolioPage() {
const handleDeleteMedia = (id: string) => {
setUploadedMedia((prev) => prev.filter((media) => media.id !== id));
if (selectedMedia === id) {
setSelectedMedia(null);
}
};
const selectedMediaItem = uploadedMedia.find((m) => m.id === selectedMedia);
const featureItems = uploadedMedia.map((media) => ({
id: media.id,
title: media.name,
description: media.type === "photo" ? "📷 Photo du projet" : "🎥 Vidéo du projet", imageSrc: media.src,
imageAlt: media.name,
}));
return (
<ThemeProvider
@@ -133,8 +134,8 @@ export default function PortfolioPage() {
/>
</div>
{/* Large Format Media Gallery Section */}
<div id="media-gallery" data-section="media-gallery">
{/* Media Upload Section */}
<div id="media-upload" data-section="media-upload">
<div className="w-full py-20 px-4 md:px-8">
<div className="max-w-7xl mx-auto">
{/* Header */}
@@ -152,71 +153,7 @@ export default function PortfolioPage() {
</div>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
{/* Large Format Viewer - Takes 2 columns on desktop */}
<div className="lg:col-span-2">
<div className="bg-[var(--card)] rounded-3xl p-8 border border-[var(--accent)] border-opacity-20 shadow-lg overflow-hidden">
{selectedMediaItem ? (
<div className="relative">
{/* Large Format Display */}
<div className="relative w-full bg-[var(--background)] rounded-2xl overflow-hidden">
<div className="relative w-full" style={{ paddingBottom: "75%" }}>
{selectedMediaItem.type === "photo" ? (
<img
src={selectedMediaItem.src}
alt={selectedMediaItem.name}
className="absolute inset-0 w-full h-full object-cover"
/>
) : (
<video
src={selectedMediaItem.src}
controls
className="absolute inset-0 w-full h-full object-contain bg-black"
aria-label={selectedMediaItem.name}
/>
)}
</div>
</div>
{/* Media Info */}
<div className="mt-6 p-6 bg-[var(--background)] rounded-xl border border-[var(--accent)] border-opacity-20">
<div className="flex items-start justify-between mb-4">
<div>
<div className="flex items-center gap-2 mb-2">
<span className="px-3 py-1 bg-[var(--primary-cta)] text-[var(--primary-cta-text)] text-xs font-semibold rounded-full">
{selectedMediaItem.type === "photo" ? "📷 Photo" : "🎥 Vidéo"}
</span>
</div>
<h3 className="text-xl font-bold text-[var(--foreground)]">
{selectedMediaItem.name}
</h3>
<p className="text-sm text-[var(--foreground)] opacity-60 mt-1">
{selectedMediaItem.type === "photo" ? "Photo de projet" : "Vidéo de projet"}
</p>
</div>
<button
onClick={() => handleDeleteMedia(selectedMediaItem.id)}
className="p-2 bg-red-500 hover:bg-red-600 text-white rounded-lg transition-colors"
aria-label="Supprimer ce média"
>
<Trash2 size={20} />
</button>
</div>
</div>
</div>
) : (
<div className="flex items-center justify-center" style={{ minHeight: "600px" }}>
<div className="text-center">
<Camera size={64} className="mx-auto text-[var(--accent)] opacity-20 mb-4" />
<p className="text-[var(--foreground)] opacity-60 text-lg">
Sélectionnez une photo ou vidéo à partir de la liste ci-dessous
</p>
</div>
</div>
)}
</div>
</div>
{/* Sidebar - Media List and Upload Controls */}
{/* Upload Controls - Sidebar */}
<div className="lg:col-span-1 space-y-6">
{/* Upload Controls */}
<div className="bg-[var(--card)] rounded-3xl p-6 border border-[var(--accent)] border-opacity-20 shadow-lg space-y-4">
@@ -274,67 +211,48 @@ export default function PortfolioPage() {
)}
</div>
{/* Media List */}
{/* Media Count */}
<div className="bg-[var(--card)] rounded-3xl p-6 border border-[var(--accent)] border-opacity-20 shadow-lg">
<div className="flex items-center justify-between mb-4">
<h3 className="text-lg font-bold text-[var(--foreground)]">
Galerie ({uploadedMedia.length})
</h3>
<div className="text-center">
<p className="text-3xl font-bold text-[var(--primary-cta)] mb-2">
{uploadedMedia.length}
</p>
<p className="text-sm text-[var(--foreground)] opacity-60">
{uploadedMedia.length === 1 ? "Média" : "Médias"} ajoutés
</p>
{uploadedMedia.length > 0 && (
<span className="text-xs text-[var(--foreground)] opacity-60 bg-[var(--background)] px-2 py-1 rounded">
<p className="text-xs text-[var(--foreground)] opacity-40 mt-3">
{uploadedMedia.filter((m) => m.type === "photo").length}📷 {uploadedMedia.filter((m) => m.type === "video").length}🎥
</span>
</p>
)}
</div>
{uploadedMedia.length === 0 ? (
<div className="text-center py-12">
<Camera size={32} className="mx-auto text-[var(--accent)] opacity-20 mb-2" />
<p className="text-sm text-[var(--foreground)] opacity-60">
Aucun média ajouté
</p>
</div>
) : (
<div className="space-y-2 max-h-96 overflow-y-auto">
{uploadedMedia.map((media) => (
<button
key={media.id}
onClick={() => setSelectedMedia(media.id)}
className={`w-full flex items-start gap-3 p-3 rounded-lg border transition-all ${
selectedMedia === media.id
? "bg-[var(--primary-cta)] bg-opacity-10 border-[var(--primary-cta)]"
: "border-[var(--accent)] border-opacity-20 hover:border-opacity-40"
}`}
>
{/* Thumbnail */}
<div className="w-12 h-12 rounded overflow-hidden flex-shrink-0 bg-[var(--background)]">
{media.type === "photo" ? (
<img
src={media.src}
alt={media.name}
className="w-full h-full object-cover"
/>
) : (
<div className="w-full h-full flex items-center justify-center bg-black bg-opacity-20">
<Play size={16} className="text-white" />
</div>
)}
</div>
{/* Info */}
<div className="min-w-0 flex-1 text-left">
<p className="text-xs font-semibold text-[var(--foreground)] truncate">
{media.name}
</p>
<p className="text-xs text-[var(--foreground)] opacity-60">
{media.type === "photo" ? "Photo" : "Vidéo"}
</p>
</div>
</button>
))}
</div>
)}
</div>
</div>
{/* Feature Card Gallery - Takes 2 columns */}
<div className="lg:col-span-2">
{featureItems.length > 0 ? (
<FeatureCardOne
features={featureItems}
title="Vos Réalisations"
description="Galerie complète de vos projets de construction et rénovation"
tag="Projets"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
) : (
<div className="bg-[var(--card)] rounded-3xl p-12 border border-[var(--accent)] border-opacity-20 shadow-lg text-center">
<Camera size={48} className="mx-auto text-[var(--accent)] opacity-20 mb-4" />
<p className="text-[var(--foreground)] opacity-60 text-lg">
Aucun média ajouté pour le moment
</p>
<p className="text-[var(--foreground)] opacity-40 text-sm mt-2">
Commencez à ajouter des photos et vidéos de vos projets ci-contre
</p>
</div>
)}
</div>
</div>
</div>
</div>