Untitled
unknown
plain_text
12 days ago
32 kB
4
Indexable
"use client"
import React, { useState } from "react"
import { motion, useScroll, useMotionValueEvent } from "framer-motion"
import { Slider } from "@/components/ui/slider"
import { Button } from "@/components/ui/button"
import {
Search,
List,
ChevronUp,
ZoomIn,
ZoomOut,
UserRound,
Mail,
Instagram,
Filter,
Heart,
Check,
MessageCircle,
Download,
Trash2,
AlertTriangle,
Share2,
HelpCircle
} from "lucide-react"
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover"
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
} from "@/components/ui/alert-dialog"
import { ShareDialog } from "./share-dialog"
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;
handleResetAllFavorites: () => void;
handleCreateSharedLink: (password: string, requirePassword: boolean) => Promise<string>;
clientId: string;
}
export const ScrollToolbar = ({
gridSize,
setGridSize,
sections,
inView = false,
clientConfig,
favorites,
showFavoritesOnly,
setShowFavoritesOnly,
commentCounts,
showCommentsOnly,
setShowCommentsOnly,
handleDownloadAllFavorites,
handleResetAllFavorites,
handleCreateSharedLink,
clientId
}: ToolbarProps) => {
const [variant, setVariant] = useState("hidden");
const { scrollY } = useScroll();
const [isResetDialogOpen, setIsResetDialogOpen] = useState(false);
const [isShareDialogOpen, setIsShareDialogOpen] = useState(false);
// Add state to track which popover is currently open
const [activePopover, setActivePopover] = useState<string | null>(null);
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;
// Function to handle popover open state
const handlePopoverOpenChange = (id: string, isOpen: boolean) => {
setActivePopover(isOpen ? id : null);
};
return (
<>
{/* Overlay to prevent clicks outside when a popover is open */}
{activePopover && (
<div
className="fixed inset-0 z-30 bg-transparent"
onClick={(e) => {
e.stopPropagation(); // Prevent the click from reaching elements below
setActivePopover(null); // Close the popover
}}
style={{ cursor: 'default' }}
/>
)}
{/* Alert Dialog for Reset Confirmation */}
<AlertDialog open={isResetDialogOpen} onOpenChange={setIsResetDialogOpen}>
<AlertDialogContent className="bg-[hsl(var(--toolbar-popover-bg))] border-[hsl(var(--toolbar-popover-border))] text-[hsl(var(--toolbar-popover-text))]">
<AlertDialogHeader>
<AlertDialogTitle className="flex items-center gap-2">
<AlertTriangle className="h-5 w-5 text-[hsl(var(--toolbar-alert-icon))]" />
Favoriten zurücksetzen
</AlertDialogTitle>
<AlertDialogDescription className="text-[hsl(var(--toolbar-alert-text))]">
Sind Sie sicher, dass Sie alle Favoriten zurücksetzen möchten?
Diese Aktion kann nicht rückgängig gemacht werden und alle markierten Favoriten gehen verloren.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel className="bg-[hsl(var(--toolbar-cancel-bg))] text-[hsl(var(--toolbar-cancel-text))] hover:bg-[hsl(var(--toolbar-cancel-hover-bg))] hover:text-[hsl(var(--toolbar-cancel-hover-text))] border-[hsl(var(--toolbar-popover-border))]">
Abbrechen
</AlertDialogCancel>
<AlertDialogAction
className="bg-[hsl(var(--toolbar-destructive))] hover:bg-[hsl(var(--toolbar-destructive-hover))] text-[hsl(var(--toolbar-destructive-text))] border-0"
onClick={() => {
handleResetAllFavorites();
setIsResetDialogOpen(false);
}}
>
Ja, alle zurücksetzen
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
{/* Share Dialog */}
<ShareDialog
open={isShareDialogOpen}
onOpenChange={setIsShareDialogOpen}
favoriteCount={favoriteCount}
clientId={clientId}
handleCreateSharedLink={handleCreateSharedLink}
/>
<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-[hsl(var(--toolbar-bg))] backdrop-blur-sm flex px-2 sm:px-4 py-4 border-[hsl(var(--toolbar-border))] border shadow-lg pointer-events-auto">
{/* Image Size Adjustment */}
<Popover
open={activePopover === 'search'}
onOpenChange={(open) => handlePopoverOpenChange('search', open)}
>
<PopoverTrigger asChild>
<div className="px-2 sm:px-3 md:px-4 flex items-center justify-center cursor-pointer hover:bg-[hsl(var(--toolbar-icon-hover-bg))] rounded-full transition-colors">
<Search className="h-5 w-5 text-[hsl(var(--toolbar-icon))]" />
</div>
</PopoverTrigger>
<PopoverContent
className="w-72 p-4 bg-[hsl(var(--toolbar-popover-bg))] border-[hsl(var(--toolbar-popover-border))] text-[hsl(var(--toolbar-popover-text))]"
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-[hsl(var(--toolbar-popover-text-muted))]" />
<Slider
value={[gridSize]}
min={1}
max={6}
step={1}
onValueChange={(value) => setGridSize(value[0])}
className="flex-1"
/>
<ZoomOut className="h-4 w-4 text-[hsl(var(--toolbar-popover-text-muted))]" />
</div>
</div>
</PopoverContent>
</Popover>
<div className="h-6 w-px bg-[hsl(var(--toolbar-divider))] mx-1 sm:mx-2" />
{/* Filter Options */}
<Popover
open={activePopover === 'filter'}
onOpenChange={(open) => handlePopoverOpenChange('filter', open)}
>
<PopoverTrigger asChild>
<div className={`
px-2 sm:px-3 md:px-4 flex items-center justify-center cursor-pointer rounded-full transition-colors relative
${showFavoritesOnly || showCommentsOnly ? 'bg-[hsl(var(--toolbar-filter-active-bg))] text-[hsl(var(--toolbar-filter-active-text))]' : 'hover:bg-[hsl(var(--toolbar-icon-hover-bg))] text-[hsl(var(--toolbar-icon))]'}
`}>
<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-[hsl(var(--toolbar-popover-text))]"></span>
</span>
) : null}
</div>
</PopoverTrigger>
<PopoverContent
className="w-72 p-4 bg-[hsl(var(--toolbar-popover-bg))] border-[hsl(var(--toolbar-popover-border))] text-[hsl(var(--toolbar-popover-text))]"
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-[hsl(var(--toolbar-icon-hover-bg))] cursor-pointer transition-colors"
onClick={() => {
setShowFavoritesOnly(!showFavoritesOnly);
if (!showFavoritesOnly) setShowCommentsOnly(false);
}}
>
<div className={`p-1.5 rounded-full ${showFavoritesOnly ? 'bg-[hsl(var(--toolbar-heart-active))]/.2' : 'bg-[hsl(var(--toolbar-icon-hover-bg))]'}`}>
<Heart
className={`h-4 w-4 ${showFavoritesOnly ? 'text-[hsl(var(--toolbar-heart-active))]' : 'text-[hsl(var(--toolbar-popover-text-muted))]'}`}
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-[hsl(var(--toolbar-heart-active))] border-[hsl(var(--toolbar-heart-active))]/.8' : 'border-[hsl(var(--toolbar-popover-border))]'} 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-[hsl(var(--toolbar-icon-hover-bg))] cursor-pointer transition-colors"
onClick={() => {
setShowCommentsOnly(!showCommentsOnly);
if (!showCommentsOnly) setShowFavoritesOnly(false);
}}
>
<div className={`p-1.5 rounded-full ${showCommentsOnly ? 'bg-[hsl(var(--toolbar-share-gradient-1))]/.2' : 'bg-[hsl(var(--toolbar-icon-hover-bg))]'}`}>
<MessageCircle
className={`h-4 w-4 ${showCommentsOnly ? 'text-[hsl(var(--toolbar-share-gradient-1))]' : 'text-[hsl(var(--toolbar-popover-text-muted))]'}`}
/>
</div>
<span className="text-sm flex-1">Nur Bilder mit Kommentaren anzeigen</span>
<div className={`w-4 h-4 rounded-full border ${showCommentsOnly ? 'bg-[hsl(var(--toolbar-share-gradient-1))] border-[hsl(var(--toolbar-share-gradient-1))]/.8' : 'border-[hsl(var(--toolbar-popover-border))]'} 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-[hsl(var(--toolbar-popover-text-muted))] 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-[hsl(var(--toolbar-popover-text-muted))] 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-[hsl(var(--toolbar-divider))] mx-1 sm:mx-2" />
{/* Favorites Heart with Popover */}
<Popover
open={activePopover === 'favorites'}
onOpenChange={(open) => handlePopoverOpenChange('favorites', open)}
>
<PopoverTrigger asChild>
<div className={`
px-2 sm:px-3 md:px-4 flex items-center justify-center cursor-pointer rounded-full transition-colors
${favoriteCount > 0 ? 'hover:bg-[hsl(var(--toolbar-heart-active-hover-bg))] text-[hsl(var(--toolbar-heart-active))]' : 'hover:bg-[hsl(var(--toolbar-icon-hover-bg))] text-[hsl(var(--toolbar-heart-inactive))]'}
`}>
<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-72 p-0 bg-[hsl(var(--toolbar-popover-bg))] border-[hsl(var(--toolbar-popover-border))] text-[hsl(var(--toolbar-popover-text))] shadow-xl"
sideOffset={16}
side="top"
align="center"
>
<div className="p-3 border-b border-[hsl(var(--toolbar-popover-border))]">
<h4 className="font-medium">Favoriten</h4>
</div>
<div className="p-4">
{favoriteCount > 0 ? (
<div className="space-y-3">
<p className="text-sm text-[hsl(var(--toolbar-popover-text))]">
Sie haben {favoriteCount} {favoriteCount === 1 ? 'Bild' : 'Bilder'} als Favorit markiert.
</p>
<Button
className="w-full bg-gradient-to-r from-[hsl(var(--toolbar-action-gradient-1))] to-[hsl(var(--toolbar-action-gradient-2))] hover:from-[hsl(var(--toolbar-action-hover-gradient-1))] hover:to-[hsl(var(--toolbar-action-hover-gradient-2))] text-white border-0"
onClick={handleDownloadAllFavorites}
>
<Download className="mr-2 h-4 w-4" />
Alle Favoriten herunterladen
</Button>
<Button
className="w-full bg-gradient-to-r from-[hsl(var(--toolbar-share-gradient-1))] to-[hsl(var(--toolbar-share-gradient-2))] hover:from-[hsl(var(--toolbar-share-hover-gradient-1))] hover:to-[hsl(var(--toolbar-share-hover-gradient-2))] text-white border-0"
onClick={() => {
setActivePopover(null); // Close the popover first
setIsShareDialogOpen(true);
}}
>
<Share2 className="mr-2 h-4 w-4" />
Favoriten teilen
</Button>
<div className="pt-2 border-t border-[hsl(var(--toolbar-popover-border))]">
<Button
variant="ghost"
className="w-full text-[hsl(var(--toolbar-destructive))] hover:text-[hsl(var(--toolbar-destructive))]/.8 hover:bg-[hsl(var(--toolbar-destructive))]/.2"
onClick={() => {
setActivePopover(null); // Close the popover first
setIsResetDialogOpen(true);
}}
>
<Trash2 className="mr-2 h-4 w-4" />
Alle Favoriten zurücksetzen
</Button>
</div>
</div>
) : (
<div className="py-2 text-center">
<Heart className="h-8 w-8 text-[hsl(var(--toolbar-popover-text-muted))] mx-auto mb-2" />
<p className="text-sm text-[hsl(var(--toolbar-popover-text-muted))] max-w-[200px] mx-auto">
Klicken Sie auf das Herz-Symbol bei den Bildern, um Favoriten hinzuzufügen.
</p>
</div>
)}
</div>
</PopoverContent>
</Popover>
<div className="h-6 w-px bg-[hsl(var(--toolbar-divider))] mx-1 sm:mx-2" />
{/* Table of Contents */}
<Popover
open={activePopover === 'contents'}
onOpenChange={(open) => handlePopoverOpenChange('contents', open)}
>
<PopoverTrigger asChild>
<div className="px-2 sm:px-3 md:px-4 flex items-center justify-center cursor-pointer hover:bg-[hsl(var(--toolbar-icon-hover-bg))] rounded-full transition-colors">
<List className="h-5 w-5 text-[hsl(var(--toolbar-icon))]" />
</div>
</PopoverTrigger>
<PopoverContent
className="w-72 p-0 bg-[hsl(var(--toolbar-popover-bg))] border-[hsl(var(--toolbar-popover-border))] text-[hsl(var(--toolbar-popover-text))] max-h-96 overflow-y-auto"
sideOffset={16}
side="top"
align="center"
>
<div className="p-3 border-b border-[hsl(var(--toolbar-popover-border))]">
<h4 className="font-medium">Inhaltsverzeichnis</h4>
</div>
<div className="p-2">
{sections.map((section, index) => (
<div
key={index}
onClick={() => {
scrollToSection(section.title);
setActivePopover(null); // Close the popover after clicking
}}
className="p-2 hover:bg-[hsl(var(--toolbar-icon-hover-bg))] rounded cursor-pointer transition-colors"
>
{section.title}
</div>
))}
</div>
</PopoverContent>
</Popover>
<div className="h-6 w-px bg-[hsl(var(--toolbar-divider))] mx-1 sm:mx-2" />
{/* Personal Info */}
<Popover
open={activePopover === 'userinfo'}
onOpenChange={(open) => handlePopoverOpenChange('userinfo', open)}
>
<PopoverTrigger asChild>
<div className="px-2 sm:px-3 md:px-4 flex items-center justify-center cursor-pointer hover:bg-[hsl(var(--toolbar-icon-hover-bg))] rounded-full transition-colors">
<UserRound className="h-5 w-5 text-[hsl(var(--toolbar-icon))]" />
</div>
</PopoverTrigger>
<PopoverContent
className="w-80 p-0 bg-[hsl(var(--toolbar-popover-bg))]/95 border-[hsl(var(--toolbar-popover-border))] text-[hsl(var(--toolbar-popover-text))] 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-[hsl(var(--toolbar-popover-bg))]/80 to-[hsl(var(--toolbar-popover-bg))]/10"></div>
<img
src="/background-image.jpg"
alt="Background"
className="w-full h-full object-cover object-center opacity-80"
/>
</div>
{/* Circular avatar image */}
<div className="w-16 h-16 rounded-full bg-[hsl(var(--toolbar-icon-hover-bg))] 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-[hsl(var(--toolbar-share-gradient-1))] 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-[hsl(var(--toolbar-popover-bg))] to-[hsl(var(--toolbar-popover-bg))]">
{/* Contact details with null checks */}
<div className="space-y-3 pt-1">
<div className="flex items-center gap-3 text-[hsl(var(--toolbar-popover-text))] p-2 rounded-md hover:bg-[hsl(var(--toolbar-icon-hover-bg))]/50 transition-colors">
<div className="bg-[hsl(var(--toolbar-share-gradient-1))]/30 p-2 rounded-md">
<Mail className="h-4 w-4 text-[hsl(var(--toolbar-share-gradient-1))]" />
</div>
<a
href={`mailto:${clientConfig?.photographerEmail || "info@example.com"}`}
className="text-sm hover:text-[hsl(var(--toolbar-share-gradient-1))] transition-colors flex-1"
>
{clientConfig?.photographerEmail || "info@example.com"}
</a>
</div>
<div className="flex items-center gap-3 text-[hsl(var(--toolbar-popover-text))] p-2 rounded-md hover:bg-[hsl(var(--toolbar-icon-hover-bg))]/50 transition-colors">
<div className="bg-[hsl(var(--toolbar-share-gradient-1))]/30 p-2 rounded-md">
<Instagram className="h-4 w-4 text-[hsl(var(--toolbar-share-gradient-1))]" />
</div>
<a
href={clientConfig?.photographerInstagram || "#"}
target="_blank"
rel="noopener noreferrer"
className="text-sm hover:text-[hsl(var(--toolbar-share-gradient-1))] 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-[hsl(var(--toolbar-popover-border))]"></div>
<span className="flex-shrink mx-3 text-[hsl(var(--toolbar-popover-text-muted))] text-xs">FOTOGRAF</span>
<div className="flex-grow border-t border-[hsl(var(--toolbar-popover-border))]"></div>
</div>
{/* Brief description */}
<p className="text-sm text-[hsl(var(--toolbar-popover-text))]">
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-[hsl(var(--toolbar-share-gradient-1))] to-[hsl(var(--toolbar-share-gradient-2))] hover:from-[hsl(var(--toolbar-share-hover-gradient-1))] hover:to-[hsl(var(--toolbar-share-hover-gradient-2))] border-0 text-white"
onClick={() => {
window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
setActivePopover(null); // Close the popover
}}
>
Kontaktieren
</Button>
</div>
</div>
</PopoverContent>
</Popover>
<div className="h-6 w-px bg-[hsl(var(--toolbar-divider))] mx-1 sm:mx-2" />
{/* Help Menu */}
<Popover
open={activePopover === 'help'}
onOpenChange={(open) => handlePopoverOpenChange('help', open)}
>
<PopoverTrigger asChild>
<PopoverTrigger asChild>
<div className="px-2 sm:px-3 md:px-4 flex items-center justify-center cursor-pointer hover:bg-[hsl(var(--toolbar-icon-hover-bg))] rounded-full transition-colors">
<HelpCircle className="h-5 w-5 text-[hsl(var(--toolbar-icon))]" />
</div>
</PopoverTrigger>
<PopoverContent
className="w-80 p-0 bg-[hsl(var(--toolbar-popover-bg))] border-[hsl(var(--toolbar-popover-border))] text-[hsl(var(--toolbar-popover-text))] shadow-xl"
sideOffset={16}
side="top"
align="center"
>
<div className="p-3 border-b border-[hsl(var(--toolbar-popover-border))]">
<h4 className="font-medium">Hilfe & Anleitung</h4>
</div>
<div className="p-4 max-h-[70vh] overflow-y-auto">
<div className="space-y-6">
<div>
<h5 className="font-medium mb-2 text-[hsl(var(--toolbar-popover-text))]">Allgemeine Bedienung</h5>
<p className="text-sm text-[hsl(var(--toolbar-popover-text-muted))]">
Auf dieser Seite finden Sie alle Fotos, die für Sie bereitgestellt wurden. Sie können durch die Galerie scrollen oder die Navigationshilfen verwenden.
</p>
</div>
<div>
<h5 className="font-medium mb-2 text-[hsl(var(--toolbar-popover-text))]">Bilder vergrößern</h5>
<p className="text-sm text-[hsl(var(--toolbar-popover-text-muted))]">
Klicken Sie auf ein Bild, um es in voller Größe anzuzeigen. In der Vollbildansicht können Sie mit den Pfeiltasten oder den Bildschirmtasten zwischen den Bildern navigieren.
</p>
</div>
<div>
<h5 className="font-medium mb-2 text-[hsl(var(--toolbar-popover-text))]">Favoriten markieren</h5>
<p className="text-sm text-[hsl(var(--toolbar-popover-text-muted))]">
Klicken Sie auf das Herz-Symbol bei einem Bild, um es als Favorit zu markieren. Alle Favoriten können später gemeinsam heruntergeladen oder geteilt werden.
</p>
</div>
<div>
<h5 className="font-medium mb-2 text-[hsl(var(--toolbar-popover-text))]">Bilder herunterladen</h5>
<p className="text-sm text-[hsl(var(--toolbar-popover-text-muted))]">
Sie können einzelne Bilder über das Download-Symbol herunterladen oder alle Bilder/Favoriten über die entsprechenden Schaltflächen.
</p>
</div>
<div>
<h5 className="font-medium mb-2 text-[hsl(var(--toolbar-popover-text))]">Kommentare</h5>
<p className="text-sm text-[hsl(var(--toolbar-popover-text-muted))]">
Zu jedem Bild können Sie Kommentare und Bewertungen hinterlassen. Klicken Sie dazu auf ein Bild und wechseln Sie zum Reiter "Kommentare".
</p>
</div>
<div>
<h5 className="font-medium mb-2 text-[hsl(var(--toolbar-popover-text))]">Favoriten teilen</h5>
<p className="text-sm text-[hsl(var(--toolbar-popover-text-muted))]">
Über das Herz-Symbol in der Toolbar können Sie alle Favoriten herunterladen oder einen Link erstellen, um Ihre Auswahl mit anderen zu teilen.
</p>
</div>
<div>
<h5 className="font-medium mb-2 text-[hsl(var(--toolbar-popover-text))]">Ansicht anpassen</h5>
<p className="text-sm text-[hsl(var(--toolbar-popover-text-muted))]">
Mit dem Lupen-Symbol können Sie die Größe der Bildvorschauen anpassen. Mit dem Filter-Symbol können Sie nur Favoriten oder Bilder mit Kommentaren anzeigen.
</p>
</div>
<div>
<h5 className="font-medium mb-2 text-[hsl(var(--toolbar-popover-text))]">Kontakt</h5>
<p className="text-sm text-[hsl(var(--toolbar-popover-text-muted))]">
Bei Fragen oder Wünschen können Sie gerne über das Formular am Ende der Seite oder über die Kontaktinformationen im Personen-Symbol Kontakt aufnehmen.
</p>
</div>
</div>
</div>
</PopoverContent>
</Popover>
<div className="h-6 w-px bg-[hsl(var(--toolbar-divider))] 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-[hsl(var(--toolbar-icon-hover-bg))] rounded-full transition-colors"
onClick={scrollToTop}
>
<ChevronUp className="h-5 w-5 text-[hsl(var(--toolbar-icon))]" />
</div>
</div>
</motion.div>
</>
)
}
export default ScrollToolbarEditor is loading...
Leave a Comment