Ceratic/project_vollidioten_website
1
0
Fork 0
mirror of https://github.com/ceratic/project_vollidioten_website.git synced 2026-05-14 00:16:47 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: add LogoManagementModal component for logo upload and management

Browse Source
This commit is contained in:
Lars Behrends
2025-12-28 21:19:10 +01:00
parent 2481187fe7
commit 81f1e90b85
13 changed files with 2963 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
pages/ProjectProfile.tsx
View File

@@ -9,6 +9,7 @@ import EditModal from '../components/EditModal';
import ShopManagementModal from '../components/ShopManagementModal';
import EmployeeManagementModal from '../components/EmployeeManagementModal';
import BannerManagementModal from '../components/BannerManagementModal';
import LogoManagementModal from '../components/LogoManagementModal';
import GalleryManagementModal from '../components/GalleryManagementModal';
import DeleteProjectModal from '../components/DeleteProjectModal';
@@ -26,6 +27,7 @@ const ProjectProfile: React.FC = () => {
const [isShopModalOpen, setIsShopModalOpen] = useState(false);
const [isEmployeeModalOpen, setIsEmployeeModalOpen] = useState(false);
const [isBannerModalOpen, setIsBannerModalOpen] = useState(false);
const [isLogoModalOpen, setIsLogoModalOpen] = useState(false);
const [isGalleryModalOpen, setIsGalleryModalOpen] = useState(false);
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
@@ -143,13 +145,21 @@ const ProjectProfile: React.FC = () => {
</div>
<h1 className="text-4xl md:text-5xl font-bold text-white tracking-tight mb-2 drop-shadow-lg">{project.title}</h1>
<div className="flex items-center gap-6 text-sm text-gray-300">
<span
<span
className={`flex items-center gap-2 ${ownerPlayer ? 'cursor-pointer hover:text-white transition-colors group/owner' : ''}`}
onClick={() => ownerPlayer && onSelectPlayer(ownerPlayer.uuid)}
>
<div className="w-5 h-5 rounded-full bg-gradient-to-br from-gray-700 to-gray-900 flex items-center justify-center text-[10px] border border-white/10 font-bold group-hover/owner:border-accentInfo group-hover/owner:text-accentInfo transition-colors">
{project.owner.charAt(0)}
</div>
{project.logoUrl ? (
<img
src={project.logoUrl}
alt={`${project.title} Logo`}
className="w-5 h-5 rounded-full border border-white/10 object-cover group-hover/owner:border-accentInfo transition-colors"
/>
) : (
<div className="w-5 h-5 rounded-full bg-gradient-to-br from-gray-700 to-gray-900 flex items-center justify-center text-[10px] border border-white/10 font-bold group-hover/owner:border-accentInfo group-hover/owner:text-accentInfo transition-colors">
{project.owner.charAt(0)}
</div>
)}
Inhaber: <span className="text-white font-medium group-hover/owner:underline decoration-accentInfo/50 underline-offset-4">{project.owner}</span>
</span>
{project.foundedDate && (
@@ -218,9 +228,9 @@ const ProjectProfile: React.FC = () => {
<Icons.Layers className="w-4 h-4 text-accentInfo" /> Portfolio
</h3>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
{project.gallery.map((url, idx) => (
{project.gallery.map((image, idx) => (
<div key={idx} className="rounded-xl overflow-hidden aspect-video border border-border group relative">
<img src={url} alt={`Portfolio ${idx}`} className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
<img src={image.url} alt={`Portfolio ${idx}`} className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
<div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors" />
</div>
))}
@@ -405,6 +415,20 @@ const ProjectProfile: React.FC = () => {
</button>
</div>
{/* Logo Management */}
<div className="bg-surfaceHighlight/30 border border-border rounded-lg p-4">
<h4 className="text-sm font-semibold text-textMain mb-3">Logo ändern</h4>
<p className="text-xs text-textMuted mb-4">
Setzen Sie ein Logo für Ihr Unternehmen.
</p>
<button
onClick={() => setIsLogoModalOpen(true)}
className="w-full bg-green-500 hover:bg-green-600 text-white text-sm font-medium py-2 px-4 rounded transition-colors"
>
Logo bearbeiten
</button>
</div>
{/* Gallery Management */}
<div className="bg-surfaceHighlight/30 border border-border rounded-lg p-4">
<h4 className="text-sm font-semibold text-textMain mb-3">Galerie verwalten</h4>
@@ -630,6 +654,17 @@ const ProjectProfile: React.FC = () => {
}}
/>
<LogoManagementModal
isOpen={isLogoModalOpen}
onClose={() => setIsLogoModalOpen(false)}
projectId={project.id}
currentLogoUrl={project.logoUrl || ''}
onUpdate={() => {
// Refresh project data
console.log('Logo updated, refreshing project data...');
}}
/>
<GalleryManagementModal
isOpen={isGalleryModalOpen}
onClose={() => setIsGalleryModalOpen(false)}