Untitled
unknown
plain_text
2 months ago
19 kB
4
Indexable
"use client" import React, { useState, useRef } from "react" import { motion, useScroll, useMotionValueEvent } from "framer-motion" import { Slider } from "@/components/ui/slider" import { Button } from "@/components/ui/button" import { Search, Moon, Sun, List, X, ChevronUp, ZoomIn, ZoomOut, UserRound, Mail, Instagram, Filter, Heart, Check, MessageCircle, Download } from "lucide-react" import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover" interface ToolbarProps { gridSize: number; setGridSize: (value: number) => void; sections: { title: string; description?: string; }[]; inView?: boolean; clientConfig: any; favorites: {[key: string]: boolean}; showFavoritesOnly: boolean; setShowFavoritesOnly: (value: boolean) => void; commentCounts: {[key: string]: number}; showCommentsOnly: boolean; setShowCommentsOnly: (value: boolean) => void; handleDownloadAllFavorites: () => void; } export const ScrollToolbar = ({ gridSize, setGridSize, sections, inView = false, clientConfig, favorites, showFavoritesOnly, setShowFavoritesOnly, commentCounts, showCommentsOnly, setShowCommentsOnly, handleDownloadAllFavorites }: ToolbarProps) => { const [variant, setVariant] = useState("hidden") const { scrollY } = useScroll() const scrollToSection = (sectionTitle: string) => { const element = document.getElementById(`section-${sectionTitle}`) if (element) { element.scrollIntoView({ behavior: "smooth" }) } } const scrollToTop = () => { window.scrollTo({ top: 0, behavior: "smooth" }) } useMotionValueEvent(scrollY, "change", (latest) => { if (inView) return setVariant("absolute") if (latest > 300) setVariant("visible") else setVariant("hidden") }) // Calculate the number of favorited images const favoriteCount = Object.values(favorites).filter(Boolean).length; return ( <motion.div variants={{ hidden: { position: 'fixed', bottom: "-100px", left: 0, right: 0 }, visible: { position: 'fixed', bottom: '20px', left: 0, right: 0 }, absolute: { position: 'absolute', bottom: '20px', left: 0, right: 0 } }} animate={variant} transition={{ duration: 0.3, ease: "easeInOut" }} className="z-40 flex w-full justify-center pointer-events-none" > <div className="rounded-full bg-zinc-900/90 backdrop-blur-sm flex px-2 sm:px-4 py-4 border-zinc-800 border shadow-lg pointer-events-auto"> {/* Image Size Adjustment */} <Popover> <PopoverTrigger asChild> <div className="px-2 sm:px-3 md:px-4 flex items-center justify-center cursor-pointer hover:bg-zinc-800 rounded-full transition-colors"> <Search className="h-5 w-5 text-zinc-300" /> </div> </PopoverTrigger> <PopoverContent className="w-72 p-4 bg-zinc-900 border-zinc-800 text-zinc-300" sideOffset={16} side="top" align="center" > <div className="space-y-4"> <h4 className="font-medium text-sm">Fotogröße anpassen</h4> <div className="flex items-center gap-3"> <ZoomIn className="h-4 w-4 text-zinc-400" /> <Slider value={[gridSize]} min={1} max={6} step={1} onValueChange={(value) => setGridSize(value[0])} className="flex-1" /> <ZoomOut className="h-4 w-4 text-zinc-400" /> </div> </div> </PopoverContent> </Popover> <div className="h-6 w-px bg-zinc-700 mx-1 sm:mx-2" /> {/* Filter Options */} <Popover> <PopoverTrigger asChild> <div className={` px-2 sm:px-3 md:px-4 flex items-center justify-center cursor-pointer ${showFavoritesOnly || showCommentsOnly ? 'bg-zinc-800 text-zinc-200' : 'hover:bg-zinc-800 text-zinc-300'} rounded-full transition-colors relative `}> <Filter className="h-5 w-5" /> {(favoriteCount > 0 && showFavoritesOnly) || (Object.keys(commentCounts).length > 0 && showCommentsOnly) ? ( <span className="absolute -top-1 -right-1 flex h-3 w-3"> <span className="relative inline-flex rounded-full h-3 w-3 bg-zinc-200"></span> </span> ) : null} </div> </PopoverTrigger> <PopoverContent className="w-72 p-4 bg-zinc-900 border-zinc-800 text-zinc-300" sideOffset={16} side="top" align="center" > <div className="space-y-4"> <h4 className="font-medium text-sm">Filter Optionen</h4> <div className="space-y-2"> <div className="flex items-center gap-3 p-2 rounded-md hover:bg-zinc-800 cursor-pointer transition-colors" onClick={() => { setShowFavoritesOnly(!showFavoritesOnly); if (!showFavoritesOnly) setShowCommentsOnly(false); }} > <div className={`p-1.5 rounded-full ${showFavoritesOnly ? 'bg-pink-500/20' : 'bg-zinc-800'}`}> <Heart className={`h-4 w-4 ${showFavoritesOnly ? 'text-pink-500' : 'text-zinc-400'}`} fill={showFavoritesOnly ? 'currentColor' : 'none'} /> </div> <span className="text-sm flex-1">Nur Favoriten anzeigen</span> <div className={`w-4 h-4 rounded-full border ${showFavoritesOnly ? 'bg-pink-500 border-pink-600' : 'border-zinc-600'} flex items-center justify-center`}> {showFavoritesOnly && <Check className="h-3 w-3 text-white" />} </div> </div> <div className="flex items-center gap-3 p-2 rounded-md hover:bg-zinc-800 cursor-pointer transition-colors" onClick={() => { setShowCommentsOnly(!showCommentsOnly); if (!showCommentsOnly) setShowFavoritesOnly(false); }} > <div className={`p-1.5 rounded-full ${showCommentsOnly ? 'bg-blue-500/20' : 'bg-zinc-800'}`}> <MessageCircle className={`h-4 w-4 ${showCommentsOnly ? 'text-blue-500' : 'text-zinc-400'}`} /> </div> <span className="text-sm flex-1">Nur Bilder mit Kommentaren anzeigen</span> <div className={`w-4 h-4 rounded-full border ${showCommentsOnly ? 'bg-blue-500 border-blue-600' : 'border-zinc-600'} flex items-center justify-center`}> {showCommentsOnly && <Check className="h-3 w-3 text-white" />} </div> </div> {favoriteCount > 0 && showFavoritesOnly && ( <div className="flex items-center gap-3 p-2 text-xs text-zinc-400 italic"> {favoriteCount} {favoriteCount === 1 ? 'Favorit' : 'Favoriten'} ausgewählt </div> )} {Object.keys(commentCounts).length > 0 && showCommentsOnly && ( <div className="flex items-center gap-3 p-2 text-xs text-zinc-400 italic"> {Object.keys(commentCounts).length} {Object.keys(commentCounts).length === 1 ? 'Bild' : 'Bilder'} mit Kommentaren </div> )} </div> </div> </PopoverContent> </Popover> <div className="h-6 w-px bg-zinc-700 mx-1 sm:mx-2" /> {/* Favorites Heart with Popover */} <Popover> <PopoverTrigger asChild> <div className={` px-2 sm:px-3 md:px-4 flex items-center justify-center cursor-pointer ${favoriteCount > 0 ? 'hover:bg-pink-500/20 text-pink-500' : 'hover:bg-zinc-800/50 text-zinc-500'} rounded-full transition-colors `}> <Heart className="h-5 w-5" fill={favoriteCount > 0 ? "currentColor" : "none"} /> {favoriteCount > 0 && ( <span className="ml-1 text-xs hidden sm:inline-block">{favoriteCount}</span> )} </div> </PopoverTrigger> <PopoverContent className="w-64 p-0 bg-zinc-900 border-zinc-800 text-zinc-300 shadow-xl" sideOffset={16} side="top" align="center" > <div className="p-3 border-b border-zinc-800"> <h4 className="font-medium">Favoriten</h4> </div> <div className="p-4"> {favoriteCount > 0 ? ( <div className="space-y-4"> <p className="text-sm text-zinc-300"> Sie haben {favoriteCount} {favoriteCount === 1 ? 'Bild' : 'Bilder'} als Favorit markiert. </p> <Button className="w-full bg-gradient-to-r from-pink-500 to-rose-500 hover:from-pink-600 hover:to-rose-600 text-white border-0" onClick={handleDownloadAllFavorites} > <Download className="mr-2 h-4 w-4" /> Alle Favoriten herunterladen </Button> {/* Placeholder for future functionality */} <p className="text-xs text-zinc-500 text-center"> Weitere Optionen kommen in Kürze </p> </div> ) : ( <div className="py-4 text-center space-y-2"> <Heart className="h-8 w-8 text-zinc-500 mx-auto mb-2" /> <p className="text-sm text-zinc-400"> Sie haben noch keine Favoriten ausgewählt. </p> <p className="text-xs text-zinc-500"> Klicken Sie auf das Herz-Symbol bei den Bildern, um sie zu Ihren Favoriten hinzuzufügen. </p> </div> )} </div> </PopoverContent> </Popover> <div className="h-6 w-px bg-zinc-700 mx-1 sm:mx-2" /> {/* Dark/Light Mode Toggle - Hide on mobile */} <div className="hidden sm:flex px-2 sm:px-3 md:px-4 items-center justify-center cursor-pointer hover:bg-zinc-800 rounded-full transition-colors"> <Sun className="h-5 w-5 text-zinc-300" /> </div> <div className="hidden sm:block h-6 w-px bg-zinc-700 mx-1 sm:mx-2" /> {/* Table of Contents */} <Popover> <PopoverTrigger asChild> <div className="px-2 sm:px-3 md:px-4 flex items-center justify-center cursor-pointer hover:bg-zinc-800 rounded-full transition-colors"> <List className="h-5 w-5 text-zinc-300" /> </div> </PopoverTrigger> <PopoverContent className="w-72 p-0 bg-zinc-900 border-zinc-800 text-zinc-300 max-h-96 overflow-y-auto" sideOffset={16} side="top" align="center" > <div className="p-3 border-b border-zinc-800"> <h4 className="font-medium">Inhaltsverzeichnis</h4> </div> <div className="p-2"> {sections.map((section, index) => ( <div key={index} onClick={() => scrollToSection(section.title)} className="p-2 hover:bg-zinc-800 rounded cursor-pointer transition-colors" > {section.title} </div> ))} </div> </PopoverContent> </Popover> <div className="h-6 w-px bg-zinc-700 mx-1 sm:mx-2" /> {/* Personal Info */} <Popover> <PopoverTrigger asChild> <div className="px-2 sm:px-3 md:px-4 flex items-center justify-center cursor-pointer hover:bg-zinc-800 rounded-full transition-colors"> <UserRound className="h-5 w-5 text-zinc-300" /> </div> </PopoverTrigger> <PopoverContent className="w-80 p-0 bg-zinc-900/95 border-zinc-800 text-zinc-300 shadow-xl" sideOffset={16} side="top" align="center" > <div className="overflow-hidden rounded-md"> {/* Card header with background image */} <div className="relative p-6"> {/* Background image - dark overlay applied */} <div className="absolute inset-0 z-0"> <div className="absolute inset-0 bg-gradient-to-r from-zinc-900/80 to-zinc-900/10"></div> <img src="/background-image.jpg" alt="Background" className="w-full h-full object-cover object-center opacity-90" /> </div> {/* Circular avatar image */} <div className="w-16 h-16 rounded-full bg-zinc-800 flex items-center justify-center mb-3 ring-2 ring-white/20 shadow-lg overflow-hidden relative z-10"> <img src="/avatar.jpg" alt="Avatar" className="w-full h-full object-cover object-center" onError={(e) => { // Fallback if image fails to load e.currentTarget.style.display = 'none'; e.currentTarget.parentElement.innerHTML = '<span class="text-white text-xl font-bold">P</span>'; }} /> </div> <h3 className="font-bold text-white text-xl relative z-10"> {clientConfig?.photographerName || "Fotograf"} </h3> <div className="flex items-center gap-2 mt-1 relative z-10"> <div className="h-1 w-6 bg-indigo-400 rounded-full"></div> <p className="text-white/90 text-sm font-medium"> {clientConfig?.photographerCredit || "Professionelle Fotografie"} </p> </div> </div> {/* Card body */} <div className="p-4 space-y-4 bg-gradient-to-b from-zinc-900 to-zinc-950"> {/* Contact details with null checks */} <div className="space-y-3 pt-1"> <div className="flex items-center gap-3 text-zinc-300 p-2 rounded-md hover:bg-zinc-800/50 transition-colors"> <div className="bg-indigo-800/30 p-2 rounded-md"> <Mail className="h-4 w-4 text-indigo-300" /> </div> <a href={`mailto:${clientConfig?.photographerEmail || "info@example.com"}`} className="text-sm hover:text-indigo-300 transition-colors flex-1" > {clientConfig?.photographerEmail || "info@example.com"} </a> </div> <div className="flex items-center gap-3 text-zinc-300 p-2 rounded-md hover:bg-zinc-800/50 transition-colors"> <div className="bg-indigo-800/30 p-2 rounded-md"> <Instagram className="h-4 w-4 text-indigo-300" /> </div> <a href={clientConfig?.photographerInstagram || "#"} target="_blank" rel="noopener noreferrer" className="text-sm hover:text-indigo-300 transition-colors flex-1" > Instagram </a> </div> </div> {/* Decorated separator */} <div className="relative flex items-center py-2"> <div className="flex-grow border-t border-zinc-800"></div> <span className="flex-shrink mx-3 text-zinc-500 text-xs">FOTOGRAF</span> <div className="flex-grow border-t border-zinc-800"></div> </div> {/* Brief description */} <p className="text-sm text-zinc-400"> Hallo, mein Name ist Justin Faltus, ich bin ein perfektionistischer Fotograf, mit Sitz in Heidenheim, Baden-Württemberg. Meine Liebe zur Fotografie wurde durch magische Momente und wertvolle Erinnerungen geprägt. Ich arbeite stets mit höchster Professionalität und Perfektionismus, um Ihnen atemberaubende Bilder zu liefern, die unvergesslich bleiben. </p> {/* Contact button with gradient */} <Button className="w-full mt-2 bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 border-0 text-indigo-100" onClick={() => window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' })} > Kontaktieren </Button> </div> </div> </PopoverContent> </Popover> <div className="h-6 w-px bg-zinc-700 mx-1 sm:mx-2" /> {/* Scroll to Top */} <div className="px-2 sm:px-3 md:px-4 flex items-center justify-center cursor-pointer hover:bg-zinc-800 rounded-full transition-colors" onClick={scrollToTop} > <ChevronUp className="h-5 w-5 text-zinc-300" /> </div> </div> </motion.div> ) } export default ScrollToolbar
Editor is loading...
Leave a Comment