denshooter/portfolio
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: refine admin dashboard and project management UI with cohesive color palette and improved readability

Browse Source 
- Update background colors and text styles for better contrast and legibility.
- Enhance button styles and hover effects for a more modern look.
- Remove unnecessary scaling effects and adjust border styles for consistency.
- Introduce a cohesive design language across components to improve user experience.
This commit is contained in:
denshooter
2026-01-10 02:40:50 +01:00
parent 7d84d35f09
commit b051d9d2ef
14 changed files with 387 additions and 314 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
app/api/contacts/route.ts Normal file
View File

@@ -0,0 +1,25 @@
import { NextRequest, NextResponse } from 'next/server';
import { prisma } from '@/lib/prisma';
export async function GET(request: NextRequest) {
try {
// In a real app, you would check for admin session here
// For now, we trust the 'x-admin-request' header if it's set by the server-side component or middleware
// but typically you'd verify the session cookie/token
const contacts = await prisma.contact.findMany({
orderBy: {
createdAt: 'desc',
},
take: 100,
});
return NextResponse.json({ contacts });
} catch (error) {
console.error('Error fetching contacts:', error);
return NextResponse.json(
{ error: 'Failed to fetch contacts' },
{ status: 500 }
);
}
}

32
app/components/ChatWidget.tsx
View File

@@ -221,11 +221,11 @@ export default function ChatWidget() {
setIsOpen(true); setIsOpen(true);
} }
}} }}
className="fixed bottom-4 left-4 md:bottom-6 md:left-6 z-30 bg-stone-800/80 backdrop-blur-md text-stone-50 p-3.5 rounded-full shadow-[0_8px_20px_rgba(41,37,36,0.2)] hover:bg-stone-800 hover:scale-105 transition-all duration-300 group cursor-pointer border border-white/10 ring-1 ring-white/20" className="fixed bottom-4 left-4 md:bottom-6 md:left-6 z-30 bg-[#292524] text-[#fdfcf8] p-3.5 rounded-full shadow-[0_8px_20px_rgba(41,37,36,0.25)] hover:bg-[#44403c] hover:scale-105 transition-all duration-300 group cursor-pointer border border-[#f3f1e7]/20 ring-1 ring-[#f3f1e7]/10"
aria-label="Open chat" aria-label="Open chat"
> >
<MessageCircle size={24} /> <MessageCircle size={24} />
<span className="absolute top-0 right-0 w-3 h-3 bg-stone-400 rounded-full animate-pulse shadow-sm border-2 border-stone-800" /> <span className="absolute top-0 right-0 w-3 h-3 bg-green-500 rounded-full animate-pulse shadow-sm border-2 border-[#292524]" />
{/* Tooltip */} {/* Tooltip */}
<span className="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 px-3 py-1.5 bg-stone-900/90 text-stone-50 text-xs font-medium rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-[100] shadow-xl backdrop-blur-sm"> <span className="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 px-3 py-1.5 bg-stone-900/90 text-stone-50 text-xs font-medium rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-[100] shadow-xl backdrop-blur-sm">
@@ -244,16 +244,16 @@ export default function ChatWidget() {
animate={{ opacity: 1, y: 0, scale: 1, filter: "blur(0px)" }} animate={{ opacity: 1, y: 0, scale: 1, filter: "blur(0px)" }}
exit={{ opacity: 0, y: 20, scale: 0.95, filter: "blur(10px)" }} exit={{ opacity: 0, y: 20, scale: 0.95, filter: "blur(10px)" }}
transition={{ type: "spring", damping: 30, stiffness: 400 }} transition={{ type: "spring", damping: 30, stiffness: 400 }}
className="fixed bottom-20 left-4 right-4 md:bottom-24 md:left-6 md:right-auto z-30 md:w-[380px] h-[60vh] md:h-[550px] max-h-[600px] bg-[#fdfcf8]/30 backdrop-blur-2xl saturate-150 rounded-2xl shadow-[0_12px_40px_rgba(41,37,36,0.15)] flex flex-col overflow-hidden border border-white/40 ring-1 ring-white/50" className="fixed bottom-20 left-4 right-4 md:bottom-24 md:left-6 md:right-auto z-30 md:w-[380px] h-[60vh] md:h-[550px] max-h-[600px] bg-[#fdfcf8]/95 backdrop-blur-xl saturate-100 rounded-2xl shadow-[0_12px_40px_rgba(41,37,36,0.2)] flex flex-col overflow-hidden border border-[#e7e5e4] ring-1 ring-[#f3f1e7]"
> >
{/* Header */} {/* Header */}
<div className="bg-white/20 backdrop-blur-md text-stone-800 p-4 flex items-center justify-between border-b border-white/20"> <div className="bg-[#fdfcf8] text-[#292524] p-4 flex items-center justify-between border-b border-[#e7e5e4]">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="relative"> <div className="relative">
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-stone-100/80 to-white/80 flex items-center justify-center ring-1 ring-white shadow-sm backdrop-blur-sm"> <div className="w-10 h-10 rounded-full bg-gradient-to-br from-[#f3f1e7] to-[#fdfcf8] flex items-center justify-center ring-1 ring-[#e7e5e4] shadow-sm">
<Sparkles size={18} className="text-stone-600" /> <Sparkles size={18} className="text-[#57534e]" />
</div> </div>
<span className="absolute bottom-0 right-0 w-2.5 h-2.5 bg-emerald-400 rounded-full border-2 border-white shadow-sm" /> <span className="absolute bottom-0 right-0 w-2.5 h-2.5 bg-green-500 rounded-full border-2 border-[#fdfcf8] shadow-sm" />
</div> </div>
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<h3 className="font-bold text-sm truncate text-stone-900 tracking-tight"> <h3 className="font-bold text-sm truncate text-stone-900 tracking-tight">
@@ -293,14 +293,14 @@ export default function ChatWidget() {
className={`flex ${message.sender === "user" ? "justify-end" : "justify-start"}`} className={`flex ${message.sender === "user" ? "justify-end" : "justify-start"}`}
> >
<div <div
className={`max-w-[85%] rounded-2xl px-4 py-3 backdrop-blur-md shadow-sm ${ className={`max-w-[85%] rounded-2xl px-4 py-3 shadow-sm ${
message.sender === "user" message.sender === "user"
? "bg-stone-800/90 text-stone-50 ring-1 ring-white/10" ? "bg-[#292524] text-[#fdfcf8]"
: "bg-white/70 text-stone-800 border border-white/50 ring-1 ring-white/40" : "bg-[#f3f1e7] text-[#292524] border border-[#e7e5e4]"
}`} }`}
> >
<p className={`text-sm whitespace-pre-wrap break-words leading-relaxed ${ <p className={`text-sm whitespace-pre-wrap break-words leading-relaxed ${
message.sender === "user" ? "text-stone-50 font-light" : "text-stone-800 font-medium" message.sender === "user" ? "text-[#fdfcf8]/90 font-light" : "text-[#292524] font-medium"
}`}> }`}>
{message.text} {message.text}
</p> </p>
@@ -327,7 +327,7 @@ export default function ChatWidget() {
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
className="flex justify-start" className="flex justify-start"
> >
<div className="bg-white/60 backdrop-blur-md border border-white/40 rounded-2xl px-4 py-3 shadow-sm ring-1 ring-white/40"> <div className="bg-[#f3f1e7] border border-[#e7e5e4] rounded-2xl px-4 py-3 shadow-sm">
<div className="flex gap-1.5"> <div className="flex gap-1.5">
<motion.div <motion.div
className="w-1.5 h-1.5 bg-stone-500 rounded-full" className="w-1.5 h-1.5 bg-stone-500 rounded-full"
@@ -365,7 +365,7 @@ export default function ChatWidget() {
</div> </div>
{/* Input */} {/* Input */}
<div className="p-4 bg-white/20 backdrop-blur-xl border-t border-white/20"> <div className="p-4 bg-[#fdfcf8] border-t border-[#e7e5e4]">
<div className="flex gap-2"> <div className="flex gap-2">
<input <input
ref={inputRef} ref={inputRef}
@@ -375,12 +375,12 @@ export default function ChatWidget() {
onKeyPress={handleKeyPress} onKeyPress={handleKeyPress}
placeholder="Ask anything..." placeholder="Ask anything..."
disabled={isLoading} disabled={isLoading}
className="flex-1 px-4 py-3 text-sm bg-white/50 backdrop-blur-sm text-stone-800 rounded-xl border border-white/40 focus:outline-none focus:ring-2 focus:ring-stone-200/50 focus:border-stone-400/50 focus:bg-white/70 disabled:opacity-50 disabled:cursor-not-allowed placeholder:text-stone-500 transition-all shadow-inner" className="flex-1 px-4 py-3 text-sm bg-[#f5f5f4] text-[#292524] rounded-xl border border-[#e7e5e4] focus:outline-none focus:ring-2 focus:ring-[#e7e5e4] focus:border-[#a8a29e] focus:bg-[#fdfcf8] disabled:opacity-50 disabled:cursor-not-allowed placeholder:text-[#78716c] transition-all shadow-inner"
/> />
<button <button
onClick={handleSend} onClick={handleSend}
disabled={!inputValue.trim() || isLoading} disabled={!inputValue.trim() || isLoading}
className="p-3 bg-stone-800 text-stone-50 rounded-xl hover:bg-stone-700 hover:shadow-lg hover:scale-105 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100 shadow-md flex items-center justify-center aspect-square" className="p-3 bg-[#292524] text-[#fdfcf8] rounded-xl hover:bg-[#44403c] hover:shadow-lg hover:scale-105 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100 shadow-md flex items-center justify-center aspect-square"
aria-label="Send message" aria-label="Send message"
> >
{isLoading ? ( {isLoading ? (
@@ -405,7 +405,7 @@ export default function ChatWidget() {
inputRef.current?.focus(); inputRef.current?.focus();
}} }}
disabled={isLoading} disabled={isLoading}
className="px-3 py-1.5 text-xs font-medium bg-white/40 backdrop-blur-md text-stone-700 rounded-lg hover:bg-white/60 hover:text-stone-900 border border-white/40 transition-all whitespace-nowrap disabled:opacity-50 flex-shrink-0 shadow-sm" className="px-3 py-1.5 text-xs font-medium bg-[#f5f5f4] text-[#57534e] rounded-lg hover:bg-[#e7e5e4] hover:text-[#292524] border border-[#e7e5e4] transition-all whitespace-nowrap disabled:opacity-50 flex-shrink-0 shadow-sm"
> >
{suggestion} {suggestion}
</button> </button>

109
app/components/Projects.tsx
View File

@@ -2,7 +2,7 @@
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { motion, Variants } from "framer-motion"; import { motion, Variants } from "framer-motion";
import { ExternalLink, Github, Layers, ArrowRight } from "lucide-react"; import { ExternalLink, Github, Layers, ArrowRight, ArrowLeft, Calendar } from "lucide-react";
import Link from "next/link"; import Link from "next/link";
import Image from "next/image"; import Image from "next/image";
@@ -98,11 +98,8 @@ const Projects = () => {
<motion.div <motion.div
key={project.id} key={project.id}
variants={fadeInUp} variants={fadeInUp}
whileHover={{ whileHover={{ y: -8 }}
y: -8, className="group flex flex-col bg-white/40 backdrop-blur-xl rounded-2xl overflow-hidden border border-white/60 shadow-[0_4px_20px_rgba(0,0,0,0.02)] hover:shadow-[0_20px_40px_rgba(0,0,0,0.06)] transition-all duration-500"
transition: { duration: 0.4, ease: "easeOut" },
}}
className="group relative flex flex-col bg-white/40 backdrop-blur-xl backdrop-saturate-150 rounded-2xl overflow-hidden shadow-[0_4px_20px_rgba(0,0,0,0.02)] hover:shadow-[0_20px_40px_rgba(0,0,0,0.06)] transition-all duration-500 ease-out border border-white/50 ring-1 ring-white/30"
> >
{/* Project Cover / Image Area */} {/* Project Cover / Image Area */}
<div className="relative aspect-[16/10] overflow-hidden bg-stone-100"> <div className="relative aspect-[16/10] overflow-hidden bg-stone-100">
@@ -114,12 +111,10 @@ const Projects = () => {
fill fill
className="object-cover transition-transform duration-1000 ease-out group-hover:scale-110" className="object-cover transition-transform duration-1000 ease-out group-hover:scale-110"
/> />
{/* Subtle Overlay for better text readability and depth */}
<div className="absolute inset-0 bg-gradient-to-t from-stone-900/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" /> <div className="absolute inset-0 bg-gradient-to-t from-stone-900/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
</> </>
) : ( ) : (
<div className="absolute inset-0 bg-stone-200 flex items-center justify-center overflow-hidden"> <div className="absolute inset-0 bg-stone-200 flex items-center justify-center overflow-hidden">
{/* Mesh Gradient Fallback */}
<div className="absolute inset-0 bg-gradient-to-br from-stone-300 via-stone-200 to-stone-300" /> <div className="absolute inset-0 bg-gradient-to-br from-stone-300 via-stone-200 to-stone-300" />
<div className="absolute top-[-20%] left-[-10%] w-[70%] h-[70%] bg-white/20 rounded-full blur-3xl animate-pulse" /> <div className="absolute top-[-20%] left-[-10%] w-[70%] h-[70%] bg-white/20 rounded-full blur-3xl animate-pulse" />
<div className="absolute bottom-[-10%] right-[-5%] w-[60%] h-[60%] bg-stone-400/10 rounded-full blur-2xl" /> <div className="absolute bottom-[-10%] right-[-5%] w-[60%] h-[60%] bg-stone-400/10 rounded-full blur-2xl" />
@@ -141,32 +136,34 @@ const Projects = () => {
{/* Featured Badge */} {/* Featured Badge */}
{project.featured && ( {project.featured && (
<div className="absolute top-3 left-3 z-20"> <div className="absolute top-3 left-3 z-20">
<div className="px-3 py-1 bg-red-500 text-white text-[10px] font-black uppercase tracking-widest rounded-full shadow-lg border border-red-400/50"> <div className="px-3 py-1 bg-[#292524]/80 backdrop-blur-md text-[#fdfcf8] text-[10px] font-bold uppercase tracking-widest rounded-full shadow-sm border border-white/10">
Featured Featured
</div> </div>
</div> </div>
)} )}
{/* Overlay Links */} {/* Overlay Links */}
<div className="absolute inset-0 bg-stone-900/40 opacity-0 group-hover:opacity-100 transition-opacity duration-500 ease-out flex items-center justify-center gap-4 backdrop-blur-[2px] z-10"> <div className="absolute inset-0 bg-stone-900/40 opacity-0 group-hover:opacity-100 transition-opacity duration-500 ease-out flex items-center justify-center gap-4 backdrop-blur-[2px] z-20 pointer-events-none">
{project.github && ( {project.github && (
<a <a
href={project.github} href={project.github}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="p-3 bg-white text-stone-900 rounded-full hover:scale-110 transition-all duration-300 shadow-xl border border-white/50" className="p-3 bg-white text-stone-900 rounded-full hover:scale-110 transition-all duration-300 shadow-xl border border-white/50 pointer-events-auto"
aria-label="GitHub" aria-label="GitHub"
onClick={(e) => e.stopPropagation()}
> >
<Github size={20} /> <Github size={20} />
</a> </a>
)} )}
{project.live && ( {project.live && !project.title.toLowerCase().includes('kernel panic') && (
<a <a
href={project.live} href={project.live}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="p-3 bg-white text-stone-900 rounded-full hover:scale-110 transition-all duration-300 shadow-xl border border-white/50" className="p-3 bg-white text-stone-900 rounded-full hover:scale-110 transition-all duration-300 shadow-xl border border-white/50 pointer-events-auto"
aria-label="Live Demo" aria-label="Live Demo"
onClick={(e) => e.stopPropagation()}
> >
<ExternalLink size={20} /> <ExternalLink size={20} />
</a> </a>
@@ -175,47 +172,67 @@ const Projects = () => {
</div> </div>
{/* Content */} {/* Content */}
<div className="flex flex-col flex-1 p-6"> <div className="p-6 flex flex-col flex-1">
<div className="flex justify-between items-start mb-3"> {/* Stretched Link covering the whole card (including image area) */}
<h3 className="text-xl font-bold text-stone-900 group-hover:text-stone-700 transition-colors duration-300 tracking-tight"> <Link
href={`/projects/${project.title.toLowerCase().replace(/[^a-z0-9]+/g, '-')}`}
className="absolute inset-0 z-10"
aria-label={`View project ${project.title}`}
/>
<div className="flex items-center justify-between mb-3">
<h3 className="text-xl font-bold text-stone-900 group-hover:text-stone-600 transition-colors">
{project.title} {project.title}
</h3> </h3>
<span className="text-xs font-mono text-stone-500 bg-white/60 border border-stone-200/50 px-2 py-1 rounded backdrop-blur-sm"> <div className="flex items-center space-x-2 text-stone-400 text-xs font-mono bg-white/50 px-2 py-1 rounded border border-stone-100">
{new Date(project.date).getFullYear()} <Calendar size={12} />
</span> <span>{new Date(project.date).getFullYear()}</span>
</div>
</div> </div>
<p className="text-stone-700 font-medium text-sm leading-relaxed mb-6 line-clamp-3 flex-1 opacity-90"> <p className="text-stone-600 mb-6 leading-relaxed line-clamp-3 text-sm flex-1">
{project.description} {project.description}
</p> </p>
<div className="space-y-4 mt-auto"> <div className="flex flex-wrap gap-2 mb-6">
<div className="flex flex-wrap gap-2"> {project.tags.slice(0, 4).map((tag) => (
{project.tags.slice(0, 3).map((tag, tIdx) => ( <span
<span key={tag}
key={`${project.id}-${tag}-${tIdx}`} className="px-2.5 py-1 bg-white/60 border border-stone-100 text-stone-600 text-xs font-medium rounded-md"
className="text-xs px-2.5 py-1 bg-white/50 border border-white/60 rounded-md text-stone-700 font-medium hover:bg-white/80 hover:border-white transition-all duration-300 ease-out shadow-sm" >
> {tag}
{tag} </span>
</span> ))}
))} {project.tags.length > 4 && (
{project.tags.length > 3 && ( <span className="px-2 py-1 text-stone-400 text-xs">+ {project.tags.length - 4}</span>
<span className="text-xs px-2 py-1 text-stone-500 font-medium"> )}
+ {project.tags.length - 3} </div>
</span>
)}
</div>
<Link <div className="mt-auto pt-4 border-t border-stone-100 flex items-center justify-between relative z-20">
href={`/projects/${project.title.toLowerCase().replace(/\s+/g, "-")}`} <div className="flex gap-3">
className="inline-flex items-center text-sm font-bold text-stone-800 hover:gap-3 transition-all duration-300 ease-out group/link" {project.github && (
> <a
Read more{" "} href={project.github}
<ArrowRight target="_blank"
size={16} rel="noopener noreferrer"
className="ml-1 transition-transform duration-300 ease-out group-hover/link:translate-x-1" className="text-stone-400 hover:text-stone-900 transition-colors relative z-20 hover:scale-110"
/> onClick={(e) => e.stopPropagation()}
</Link> >
<Github size={18} />
</a>
)}
{project.live && !project.title.toLowerCase().includes('kernel panic') && (
<a
href={project.live}
target="_blank"
rel="noopener noreferrer"
className="text-stone-400 hover:text-stone-900 transition-colors relative z-20 hover:scale-110"
onClick={(e) => e.stopPropagation()}
>
<ExternalLink size={18} />
</a>
)}
</div>
</div> </div>
</div> </div>
</motion.div> </motion.div>

57
app/globals.css
View File

@@ -80,7 +80,7 @@ html {
0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 20px 25px -5px rgba(0, 0, 0, 0.08),
0 10px 10px -5px rgba(0, 0, 0, 0.02), 0 10px 10px -5px rgba(0, 0, 0, 0.02),
inset 0 0 20px rgba(255, 255, 255, 0.8); inset 0 0 20px rgba(255, 255, 255, 0.8);
transform: translateY(-4px) scale(1.005); transform: translateY(-4px);
border-color: #ffffff; border-color: #ffffff;
} }
@@ -103,9 +103,6 @@ div {
color: #44403c; color: #44403c;
} }
/* Utility for the liquid melt effect container */
/* Liquid container removed - no filters applied */
/* Hide scrollbar but keep functionality */ /* Hide scrollbar but keep functionality */
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 8px; width: 8px;
@@ -145,18 +142,6 @@ div {
will-change: transform; will-change: transform;
} }
@keyframes liquid-pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
/* Liquid Blobs Background */ /* Liquid Blobs Background */
.liquid-bg-blob { .liquid-bg-blob {
position: absolute; position: absolute;
@@ -188,3 +173,43 @@ div {
.markdown pre { .markdown pre {
@apply bg-stone-900 text-stone-50 p-4 rounded-xl overflow-x-auto mb-6; @apply bg-stone-900 text-stone-50 p-4 rounded-xl overflow-x-auto mb-6;
} }
/* Admin Dashboard Styles - Organic Modern */
.animated-bg {
background: #fdfcf8;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.admin-glass {
background: rgba(253, 252, 248, 0.9);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid #e7e5e4;
color: #292524;
}
.admin-glass-light {
background: #ffffff;
border: 1px solid #e7e5e4;
color: #292524;
transition: all 0.2s ease;
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.admin-glass-light:hover {
background: #fdfcf8;
border-color: #d6d3d1;
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.admin-glass-card {
background: #ffffff;
border: 1px solid #e7e5e4;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
color: #292524;
}

2
app/manage/page.tsx
View File

@@ -276,7 +276,7 @@ const AdminPage = () => {
> >
<div className="bg-white/80 backdrop-blur-xl rounded-3xl p-8 border border-stone-200 shadow-2xl relative z-10"> <div className="bg-white/80 backdrop-blur-xl rounded-3xl p-8 border border-stone-200 shadow-2xl relative z-10">
<div className="text-center mb-8"> <div className="text-center mb-8">
<div className="w-16 h-16 bg-gradient-to-br from-stone-100 to-white rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-sm border border-stone-100"> <div className="w-16 h-16 bg-[#f3f1e7] rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-sm border border-stone-100">
<Lock className="w-6 h-6 text-stone-600" /> <Lock className="w-6 h-6 text-stone-600" />
</div> </div>
<h1 className="text-2xl font-bold text-stone-900 mb-2 tracking-tight">Admin Access</h1> <h1 className="text-2xl font-bold text-stone-900 mb-2 tracking-tight">Admin Access</h1>

47
app/projects/page.tsx
View File

@@ -184,32 +184,34 @@ const ProjectsPage = () => {
{project.featured && ( {project.featured && (
<div className="absolute top-3 left-3 z-20"> <div className="absolute top-3 left-3 z-20">
<div className="px-3 py-1 bg-red-500 text-white text-[10px] font-black uppercase tracking-widest rounded-full shadow-lg border border-red-400/50"> <div className="px-3 py-1 bg-[#292524]/80 backdrop-blur-md text-[#fdfcf8] text-[10px] font-bold uppercase tracking-widest rounded-full shadow-sm border border-white/10">
Featured Featured
</div> </div>
</div> </div>
)} )}
{/* Overlay Links */} {/* Overlay Links */}
<div className="absolute inset-0 bg-stone-900/40 opacity-0 group-hover:opacity-100 transition-opacity duration-500 ease-out flex items-center justify-center gap-4 backdrop-blur-[2px] z-10"> <div className="absolute inset-0 bg-stone-900/40 opacity-0 group-hover:opacity-100 transition-opacity duration-500 ease-out flex items-center justify-center gap-4 backdrop-blur-[2px] z-20 pointer-events-none">
{project.github && ( {project.github && (
<a <a
href={project.github} href={project.github}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="p-3 bg-white text-stone-900 rounded-full hover:scale-110 transition-all duration-300 shadow-xl border border-white/50" className="p-3 bg-white text-stone-900 rounded-full hover:scale-110 transition-all duration-300 shadow-xl border border-white/50 pointer-events-auto"
aria-label="GitHub" aria-label="GitHub"
onClick={(e) => e.stopPropagation()}
> >
<Github size={20} /> <Github size={20} />
</a> </a>
)} )}
{project.live && ( {project.live && !project.title.toLowerCase().includes('kernel panic') && (
<a <a
href={project.live} href={project.live}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="p-3 bg-white text-stone-900 rounded-full hover:scale-110 transition-all duration-300 shadow-xl border border-white/50" className="p-3 bg-white text-stone-900 rounded-full hover:scale-110 transition-all duration-300 shadow-xl border border-white/50 pointer-events-auto"
aria-label="Live Demo" aria-label="Live Demo"
onClick={(e) => e.stopPropagation()}
> >
<ExternalLink size={20} /> <ExternalLink size={20} />
</a> </a>
@@ -218,6 +220,13 @@ const ProjectsPage = () => {
</div> </div>
<div className="p-6 flex flex-col flex-1"> <div className="p-6 flex flex-col flex-1">
{/* Stretched Link covering the whole card (including image area) */}
<Link
href={`/projects/${project.title.toLowerCase().replace(/[^a-z0-9]+/g, '-')}`}
className="absolute inset-0 z-10"
aria-label={`View project ${project.title}`}
/>
<div className="flex items-center justify-between mb-3"> <div className="flex items-center justify-between mb-3">
<h3 className="text-xl font-bold text-stone-900 group-hover:text-stone-600 transition-colors"> <h3 className="text-xl font-bold text-stone-900 group-hover:text-stone-600 transition-colors">
{project.title} {project.title}
@@ -246,27 +255,31 @@ const ProjectsPage = () => {
)} )}
</div> </div>
<div className="mt-auto pt-4 border-t border-stone-100 flex items-center justify-between"> <div className="mt-auto pt-4 border-t border-stone-100 flex items-center justify-between relative z-20">
<div className="flex gap-3"> <div className="flex gap-3">
{project.github && ( {project.github && (
<a href={project.github} target="_blank" rel="noopener noreferrer" className="text-stone-400 hover:text-stone-900 transition-colors"> <a
href={project.github}
target="_blank"
rel="noopener noreferrer"
className="text-stone-400 hover:text-stone-900 transition-colors relative z-20 hover:scale-110"
onClick={(e) => e.stopPropagation()}
>
<Github size={18} /> <Github size={18} />
</a> </a>
)} )}
{project.live && ( {project.live && !project.title.toLowerCase().includes('kernel panic') && (
<a href={project.live} target="_blank" rel="noopener noreferrer" className="text-stone-400 hover:text-stone-900 transition-colors"> <a
href={project.live}
target="_blank"
rel="noopener noreferrer"
className="text-stone-400 hover:text-stone-900 transition-colors relative z-20 hover:scale-110"
onClick={(e) => e.stopPropagation()}
>
<ExternalLink size={18} /> <ExternalLink size={18} />
</a> </a>
)} )}
</div> </div>
<Link
href={`/projects/${project.title.toLowerCase().replace(/[^a-z0-9]+/g, '-')}`}
className="inline-flex items-center space-x-1 text-sm font-bold text-stone-800 hover:gap-2 transition-all"
>
<span>Read More</span>
<ArrowLeft size={16} className="rotate-180" />
</Link>
</div> </div>
</div> </div>
</motion.div> </motion.div>

162
components/AnalyticsDashboard.tsx
View File

@@ -177,24 +177,24 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
<motion.div <motion.div
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
className="admin-glass-card p-6 rounded-xl hover:scale-105 transition-all duration-200" className="bg-white border border-stone-200 p-6 rounded-xl hover:shadow-md transition-all duration-200"
> >
<div className="flex items-start justify-between"> <div className="flex items-start justify-between">
<div className="flex-1"> <div className="flex-1">
<div className="flex items-center space-x-3 mb-4"> <div className="flex items-center space-x-3 mb-4">
<div className={`p-3 rounded-xl ${color}`}> <div className={`p-3 rounded-xl ${color}`}>
<Icon className="w-6 h-6 text-white" size={24} /> <Icon className="w-6 h-6" size={24} />
</div> </div>
<div> <div>
<p className="text-white/60 text-sm font-medium">{title}</p> <p className="text-stone-500 text-sm font-medium">{title}</p>
{description && <p className="text-white/40 text-xs">{description}</p>} {description && <p className="text-stone-400 text-xs">{description}</p>}
</div> </div>
</div> </div>
<p className="text-3xl font-bold text-white mb-2">{value}</p> <p className="text-3xl font-bold text-stone-900 mb-2">{value}</p>
{trend && trendValue && ( {trend && trendValue && (
<div className={`flex items-center space-x-1 text-sm ${ <div className={`flex items-center space-x-1 text-sm ${
trend === 'up' ? 'text-green-400' : trend === 'up' ? 'text-green-600' :
trend === 'down' ? 'text-red-400' : 'text-yellow-400' trend === 'down' ? 'text-red-600' : 'text-yellow-600'
}`}> }`}>
<TrendingUp className={`w-4 h-4 ${trend === 'down' ? 'rotate-180' : ''}`} /> <TrendingUp className={`w-4 h-4 ${trend === 'down' ? 'rotate-180' : ''}`} />
<span>{trendValue}</span> <span>{trendValue}</span>
@@ -207,21 +207,21 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
const getDifficultyColor = (difficulty: string) => { const getDifficultyColor = (difficulty: string) => {
switch (difficulty) { switch (difficulty) {
case 'Beginner': return 'bg-green-500/30 text-green-400 border-green-500/40'; case 'Beginner': return 'bg-green-50 text-green-700 border-green-200';
case 'Intermediate': return 'bg-yellow-500/30 text-yellow-400 border-yellow-500/40'; case 'Intermediate': return 'bg-yellow-50 text-yellow-700 border-yellow-200';
case 'Advanced': return 'bg-orange-500/30 text-orange-400 border-orange-500/40'; case 'Advanced': return 'bg-orange-50 text-orange-700 border-orange-200';
case 'Expert': return 'bg-red-500/30 text-red-400 border-red-500/40'; case 'Expert': return 'bg-red-50 text-red-700 border-red-200';
default: return 'bg-gray-500/30 text-gray-400 border-gray-500/40'; default: return 'bg-stone-50 text-stone-600 border-stone-200';
} }
}; };
const getCategoryColor = (index: number) => { const getCategoryColor = (index: number) => {
const colors = [ const colors = [
'bg-blue-500/30 text-blue-400', 'bg-stone-100 text-stone-700',
'bg-purple-500/30 text-purple-400', 'bg-stone-200 text-stone-800',
'bg-green-500/30 text-green-400', 'bg-stone-300 text-stone-900',
'bg-pink-500/30 text-pink-400', 'bg-stone-100 text-stone-700',
'bg-indigo-500/30 text-indigo-400' 'bg-stone-200 text-stone-800'
]; ];
return colors[index % colors.length]; return colors[index % colors.length];
}; };
@@ -233,23 +233,23 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
{/* Header */} {/* Header */}
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4"> <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
<div> <div>
<h1 className="text-3xl font-bold text-white flex items-center"> <h1 className="text-3xl font-bold text-stone-900 flex items-center">
<BarChart3 className="w-8 h-8 mr-3 text-blue-400" /> <BarChart3 className="w-8 h-8 mr-3 text-stone-600" />
Analytics Dashboard Analytics Dashboard
</h1> </h1>
<p className="text-white/80 mt-2">Portfolio performance and user engagement metrics</p> <p className="text-stone-500 mt-2">Portfolio performance and user engagement metrics</p>
</div> </div>
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-3">
{/* Time Range Selector */} {/* Time Range Selector */}
<div className="flex items-center space-x-1 admin-glass-light rounded-xl p-1"> <div className="flex items-center space-x-1 bg-white border border-stone-200 rounded-xl p-1">
{(['7d', '30d', '90d', '1y'] as const).map((range) => ( {(['7d', '30d', '90d', '1y'] as const).map((range) => (
<button <button
key={range} key={range}
onClick={() => setTimeRange(range)} onClick={() => setTimeRange(range)}
className={`px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 ${ className={`px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 ${
timeRange === range timeRange === range
? 'bg-blue-500/40 text-blue-300 shadow-lg' ? 'bg-stone-100 text-stone-900 shadow-sm'
: 'text-white/70 hover:text-white hover:bg-white/10' : 'text-stone-500 hover:text-stone-800 hover:bg-stone-50'
}`} }`}
> >
{range === '7d' ? '7 Days' : range === '30d' ? '30 Days' : range === '90d' ? '90 Days' : '1 Year'} {range === '7d' ? '7 Days' : range === '30d' ? '30 Days' : range === '90d' ? '90 Days' : '1 Year'}
@@ -259,15 +259,15 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
<button <button
onClick={fetchAnalyticsData} onClick={fetchAnalyticsData}
disabled={loading} disabled={loading}
className="flex items-center space-x-2 px-4 py-2 admin-glass-light rounded-xl hover:scale-105 transition-all duration-200 disabled:opacity-50" className="flex items-center space-x-2 px-4 py-2 bg-white border border-stone-200 rounded-xl hover:bg-stone-50 transition-all duration-200 disabled:opacity-50 text-stone-600"
> >
<RefreshCw className={`w-4 h-4 text-blue-400 ${loading ? 'animate-spin' : ''}`} /> <RefreshCw className={`w-4 h-4 text-stone-600 ${loading ? 'animate-spin' : ''}`} />
<span className="text-white font-medium">Refresh</span> <span className="font-medium">Refresh</span>
</button> </button>
<button <button
onClick={() => setShowResetModal(true)} onClick={() => setShowResetModal(true)}
className="flex items-center space-x-2 px-4 py-2 bg-red-600/20 text-red-400 border border-red-500/30 rounded-xl hover:bg-red-600/30 hover:scale-105 transition-all" className="flex items-center space-x-2 px-4 py-2 bg-red-50 text-red-600 border border-red-100 rounded-xl hover:bg-red-100 transition-all"
> >
<RotateCcw className="w-4 h-4" /> <RotateCcw className="w-4 h-4" />
<span>Reset</span> <span>Reset</span>
@@ -276,17 +276,17 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
</div> </div>
{loading && ( {loading && (
<div className="admin-glass-card p-8 rounded-xl"> <div className="bg-white border border-stone-200 p-8 rounded-xl shadow-sm">
<div className="flex items-center justify-center space-x-3"> <div className="flex items-center justify-center space-x-3">
<RefreshCw className="w-6 h-6 text-blue-400 animate-spin" /> <RefreshCw className="w-6 h-6 text-stone-600 animate-spin" />
<span className="text-white/80 text-lg">Loading analytics data...</span> <span className="text-stone-500 text-lg">Loading analytics data...</span>
</div> </div>
</div> </div>
)} )}
{error && ( {error && (
<div className="admin-glass-card p-6 rounded-xl border border-red-500/40"> <div className="bg-white border border-red-200 p-6 rounded-xl">
<div className="flex items-center space-x-3 text-red-300"> <div className="flex items-center space-x-3 text-red-600">
<Activity className="w-5 h-5" /> <Activity className="w-5 h-5" />
<span>Error: {error}</span> <span>Error: {error}</span>
</div> </div>
@@ -297,8 +297,8 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
<> <>
{/* Overview Stats */} {/* Overview Stats */}
<div> <div>
<h2 className="text-xl font-bold text-white mb-6 flex items-center"> <h2 className="text-xl font-bold text-stone-900 mb-6 flex items-center">
<Target className="w-5 h-5 mr-2 text-purple-400" /> <Target className="w-5 h-5 mr-2 text-stone-600" />
Overview Overview
</h2> </h2>
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4"> <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
@@ -306,7 +306,7 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
title="Total Views" title="Total Views"
value={data.overview.totalViews.toLocaleString()} value={data.overview.totalViews.toLocaleString()}
icon={Eye} icon={Eye}
color="bg-blue-500/30" color="bg-stone-100 text-stone-600"
trend="up" trend="up"
trendValue="+12.5%" trendValue="+12.5%"
description="All-time page views" description="All-time page views"
@@ -315,7 +315,7 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
title="Projects" title="Projects"
value={data.overview.totalProjects} value={data.overview.totalProjects}
icon={Globe} icon={Globe}
color="bg-green-500/30" color="bg-green-100 text-green-600"
trend="up" trend="up"
trendValue="+2" trendValue="+2"
description={`${data.overview.publishedProjects} published`} description={`${data.overview.publishedProjects} published`}
@@ -324,7 +324,7 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
title="Engagement" title="Engagement"
value={data.overview.totalLikes} value={data.overview.totalLikes}
icon={Heart} icon={Heart}
color="bg-pink-500/30" color="bg-pink-100 text-pink-600"
trend="up" trend="up"
trendValue="+8.2%" trendValue="+8.2%"
description="Total likes & shares" description="Total likes & shares"
@@ -333,7 +333,7 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
title="Performance" title="Performance"
value={data.overview.avgLighthouse} value={data.overview.avgLighthouse}
icon={Zap} icon={Zap}
color="bg-orange-500/30" color="bg-orange-100 text-orange-600"
trend="up" trend="up"
trendValue="+5%" trendValue="+5%"
description="Avg Lighthouse score" description="Avg Lighthouse score"
@@ -342,7 +342,7 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
title="Bounce Rate" title="Bounce Rate"
value={`${data.metrics.bounceRate}%`} value={`${data.metrics.bounceRate}%`}
icon={MousePointer} icon={MousePointer}
color="bg-purple-500/30" color="bg-stone-100 text-stone-600"
trend="down" trend="down"
trendValue="-2.1%" trendValue="-2.1%"
description="User retention" description="User retention"
@@ -353,9 +353,9 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
{/* Project Performance */} {/* Project Performance */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8"> <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
{/* Top Projects */} {/* Top Projects */}
<div className="admin-glass-card p-6 rounded-xl"> <div className="bg-white border border-stone-200 p-6 rounded-xl shadow-sm">
<h3 className="text-xl font-bold text-white mb-6 flex items-center"> <h3 className="text-xl font-bold text-stone-900 mb-6 flex items-center">
<Award className="w-5 h-5 mr-2 text-yellow-400" /> <Award className="w-5 h-5 mr-2 text-yellow-500" />
Top Performing Projects Top Performing Projects
</h3> </h3>
<div className="space-y-4"> <div className="space-y-4">
@@ -368,20 +368,20 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
initial={{ opacity: 0, x: -20 }} initial={{ opacity: 0, x: -20 }}
animate={{ opacity: 1, x: 0 }} animate={{ opacity: 1, x: 0 }}
transition={{ delay: index * 0.1 }} transition={{ delay: index * 0.1 }}
className="flex items-center justify-between p-4 admin-glass-light rounded-xl" className="flex items-center justify-between p-4 bg-stone-50 rounded-xl border border-stone-100"
> >
<div className="flex items-center space-x-4"> <div className="flex items-center space-x-4">
<div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-500 rounded-lg flex items-center justify-center text-white font-bold"> <div className="w-8 h-8 bg-stone-600 rounded-lg flex items-center justify-center text-white font-bold shadow-sm">
#{index + 1} #{index + 1}
</div> </div>
<div> <div>
<p className="text-white font-medium">{project.title}</p> <p className="text-stone-900 font-medium">{project.title}</p>
<p className="text-white/60 text-sm">{project.category}</p> <p className="text-stone-500 text-sm">{project.category}</p>
</div> </div>
</div> </div>
<div className="text-right"> <div className="text-right">
<p className="text-white font-bold">{project.views.toLocaleString()}</p> <p className="text-stone-900 font-bold">{project.views.toLocaleString()}</p>
<p className="text-white/60 text-sm">views</p> <p className="text-stone-500 text-sm">views</p>
</div> </div>
</motion.div> </motion.div>
))} ))}
@@ -389,9 +389,9 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
</div> </div>
{/* Categories Distribution */} {/* Categories Distribution */}
<div className="admin-glass-card p-6 rounded-xl"> <div className="bg-white border border-stone-200 p-6 rounded-xl shadow-sm">
<h3 className="text-xl font-bold text-white mb-6 flex items-center"> <h3 className="text-xl font-bold text-stone-900 mb-6 flex items-center">
<BarChart3 className="w-5 h-5 mr-2 text-green-400" /> <BarChart3 className="w-5 h-5 mr-2 text-green-600" />
Categories Categories
</h3> </h3>
<div className="space-y-4"> <div className="space-y-4">
@@ -405,16 +405,16 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
> >
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-3">
<div className={`w-4 h-4 rounded-full ${getCategoryColor(index)}`}></div> <div className={`w-4 h-4 rounded-full ${getCategoryColor(index)}`}></div>
<span className="text-white font-medium">{category}</span> <span className="text-stone-700 font-medium">{category}</span>
</div> </div>
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-3">
<div className="w-32 h-2 bg-white/10 rounded-full overflow-hidden"> <div className="w-32 h-2 bg-stone-100 rounded-full overflow-hidden">
<div <div
className={`h-full ${getCategoryColor(index)} transition-all duration-500`} className={`h-full ${getCategoryColor(index)} transition-all duration-500`}
style={{ width: `${(count / Math.max(...Object.values(data.categories))) * 100}%` }} style={{ width: `${(count / Math.max(...Object.values(data.categories))) * 100}%` }}
></div> ></div>
</div> </div>
<span className="text-white/80 font-medium w-8 text-right">{count}</span> <span className="text-stone-500 font-medium w-8 text-right">{count}</span>
</div> </div>
</motion.div> </motion.div>
))} ))}
@@ -425,9 +425,9 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
{/* Difficulty & Engagement */} {/* Difficulty & Engagement */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8"> <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
{/* Difficulty Distribution */} {/* Difficulty Distribution */}
<div className="admin-glass-card p-6 rounded-xl"> <div className="bg-white border border-stone-200 p-6 rounded-xl shadow-sm">
<h3 className="text-xl font-bold text-white mb-6 flex items-center"> <h3 className="text-xl font-bold text-stone-900 mb-6 flex items-center">
<Target className="w-5 h-5 mr-2 text-red-400" /> <Target className="w-5 h-5 mr-2 text-red-500" />
Difficulty Levels Difficulty Levels
</h3> </h3>
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
@@ -448,9 +448,9 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
</div> </div>
{/* Recent Activity */} {/* Recent Activity */}
<div className="admin-glass-card p-6 rounded-xl"> <div className="bg-white border border-stone-200 p-6 rounded-xl shadow-sm">
<h3 className="text-xl font-bold text-white mb-6 flex items-center"> <h3 className="text-xl font-bold text-stone-900 mb-6 flex items-center">
<Activity className="w-5 h-5 mr-2 text-blue-400" /> <Activity className="w-5 h-5 mr-2 text-blue-600" />
Recent Activity Recent Activity
</h3> </h3>
<div className="space-y-4"> <div className="space-y-4">
@@ -463,25 +463,25 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
initial={{ opacity: 0, y: 10 }} initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ delay: index * 0.1 }} transition={{ delay: index * 0.1 }}
className="flex items-center space-x-4 p-3 admin-glass-light rounded-xl" className="flex items-center space-x-4 p-3 bg-stone-50 rounded-xl border border-stone-100"
> >
<div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div> <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
<div className="flex-1"> <div className="flex-1">
<p className="text-white font-medium text-sm">{project.title}</p> <p className="text-stone-900 font-medium text-sm">{project.title}</p>
<p className="text-white/60 text-xs"> <p className="text-stone-500 text-xs">
Updated {new Date(project.updatedAt).toLocaleDateString()} Updated {new Date(project.updatedAt).toLocaleDateString()}
</p> </p>
</div> </div>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
{project.featured && ( {project.featured && (
<span className="px-2 py-1 bg-purple-500/20 text-purple-400 rounded-full text-xs"> <span className="px-2 py-1 bg-stone-100 text-stone-700 rounded-full text-xs font-medium">
Featured Featured
</span> </span>
)} )}
<span className={`px-2 py-1 rounded-full text-xs ${ <span className={`px-2 py-1 rounded-full text-xs font-medium ${
project.published project.published
? 'bg-green-500/20 text-green-400' ? 'bg-green-100 text-green-700'
: 'bg-yellow-500/20 text-yellow-400' : 'bg-yellow-100 text-yellow-700'
}`}> }`}>
{project.published ? 'Live' : 'Draft'} {project.published ? 'Live' : 'Draft'}
</span> </span>
@@ -496,30 +496,30 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
{/* Reset Modal */} {/* Reset Modal */}
{showResetModal && ( {showResetModal && (
<div className="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 flex items-center justify-center p-4"> <div className="fixed inset-0 bg-stone-900/20 backdrop-blur-sm z-50 flex items-center justify-center p-4">
<motion.div <motion.div
initial={{ opacity: 0, scale: 0.95 }} initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, scale: 1 }} animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 0.95 }} exit={{ opacity: 0, scale: 0.95 }}
className="admin-glass-card rounded-2xl p-6 w-full max-w-md" className="bg-white border border-stone-200 rounded-2xl p-6 w-full max-w-md shadow-xl"
> >
<div className="flex items-center space-x-3 mb-4"> <div className="flex items-center space-x-3 mb-4">
<div className="w-10 h-10 bg-red-500/20 rounded-lg flex items-center justify-center"> <div className="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center">
<AlertTriangle className="w-5 h-5 text-red-400" /> <AlertTriangle className="w-5 h-5 text-red-600" />
</div> </div>
<div> <div>
<h3 className="text-lg font-bold text-white">Reset Analytics Data</h3> <h3 className="text-lg font-bold text-stone-900">Reset Analytics Data</h3>
<p className="text-white/60 text-sm">This action cannot be undone</p> <p className="text-stone-500 text-sm">This action cannot be undone</p>
</div> </div>
</div> </div>
<div className="space-y-4 mb-6"> <div className="space-y-4 mb-6">
<div> <div>
<label className="block text-white/80 text-sm mb-2">Reset Type</label> <label className="block text-stone-600 text-sm mb-2">Reset Type</label>
<select <select
value={resetType} value={resetType}
onChange={(e) => setResetType(e.target.value as 'all' | 'performance' | 'analytics')} onChange={(e) => setResetType(e.target.value as 'all' | 'performance' | 'analytics')}
className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-red-500" className="w-full px-3 py-2 bg-stone-50 border border-stone-200 rounded-lg text-stone-900 focus:outline-none focus:ring-2 focus:ring-red-500"
> >
<option value="analytics">Analytics Only (views, likes, shares)</option> <option value="analytics">Analytics Only (views, likes, shares)</option>
<option value="pageviews">Page Views Only</option> <option value="pageviews">Page Views Only</option>
@@ -529,10 +529,10 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
</select> </select>
</div> </div>
<div className="bg-red-500/10 border border-red-500/20 rounded-lg p-3"> <div className="bg-red-50 border border-red-100 rounded-lg p-3">
<div className="flex items-start space-x-2"> <div className="flex items-start space-x-2">
<AlertTriangle className="w-4 h-4 text-red-400 mt-0.5 flex-shrink-0" /> <AlertTriangle className="w-4 h-4 text-red-500 mt-0.5 flex-shrink-0" />
<div className="text-sm text-red-300"> <div className="text-sm text-red-700">
<p className="font-medium mb-1">Warning:</p> <p className="font-medium mb-1">Warning:</p>
<p>This will permanently delete the selected analytics data. This action cannot be reversed.</p> <p>This will permanently delete the selected analytics data. This action cannot be reversed.</p>
</div> </div>
@@ -544,14 +544,14 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
<button <button
onClick={() => setShowResetModal(false)} onClick={() => setShowResetModal(false)}
disabled={resetting} disabled={resetting}
className="flex-1 px-4 py-2 admin-glass-light text-white rounded-lg hover:scale-105 transition-all disabled:opacity-50" className="flex-1 px-4 py-2 bg-white border border-stone-200 text-stone-700 rounded-lg hover:bg-stone-50 transition-all disabled:opacity-50"
> >
Cancel Cancel
</button> </button>
<button <button
onClick={resetAnalytics} onClick={resetAnalytics}
disabled={resetting} disabled={resetting}
className="flex-1 flex items-center justify-center space-x-2 px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg hover:scale-105 transition-all disabled:opacity-50" className="flex-1 flex items-center justify-center space-x-2 px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition-all disabled:opacity-50"
> >
{resetting ? ( {resetting ? (
<> <>

74
components/EmailManager.tsx
View File

@@ -143,7 +143,7 @@ export const EmailManager: React.FC = () => {
case 'high': return 'text-red-400'; case 'high': return 'text-red-400';
case 'medium': return 'text-yellow-400'; case 'medium': return 'text-yellow-400';
case 'low': return 'text-green-400'; case 'low': return 'text-green-400';
default: return 'text-blue-400'; default: return 'text-stone-400';
} }
}; };
@@ -153,7 +153,7 @@ export const EmailManager: React.FC = () => {
<motion.div <motion.div
animate={{ rotate: 360 }} animate={{ rotate: 360 }}
transition={{ duration: 1, repeat: Infinity, ease: "linear" }} transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
className="w-8 h-8 border-2 border-blue-500 border-t-transparent rounded-full" className="w-8 h-8 border-2 border-stone-500 border-t-transparent rounded-full"
/> />
</div> </div>
); );
@@ -164,12 +164,12 @@ export const EmailManager: React.FC = () => {
{/* Header */} {/* Header */}
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
<h2 className="text-2xl font-bold text-white">Email Manager</h2> <h2 className="text-2xl font-bold text-stone-900">Email Manager</h2>
<p className="text-white/70 mt-1">Manage your contact messages</p> <p className="text-stone-500 mt-1">Manage your contact messages</p>
</div> </div>
<button <button
onClick={loadMessages} onClick={loadMessages}
className="flex items-center space-x-2 px-4 py-2 bg-blue-500/20 text-blue-400 rounded-lg hover:bg-blue-500/30 transition-colors" className="flex items-center space-x-2 px-4 py-2 bg-stone-100 text-stone-700 rounded-lg hover:bg-stone-200 transition-colors"
> >
<RefreshCw className="w-4 h-4" /> <RefreshCw className="w-4 h-4" />
<span>Refresh</span> <span>Refresh</span>
@@ -179,13 +179,13 @@ export const EmailManager: React.FC = () => {
{/* Filters and Search */} {/* Filters and Search */}
<div className="flex flex-col sm:flex-row gap-4"> <div className="flex flex-col sm:flex-row gap-4">
<div className="relative flex-1"> <div className="relative flex-1">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white/50 w-4 h-4" /> <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-stone-400 w-4 h-4" />
<input <input
type="text" type="text"
placeholder="Search messages..." placeholder="Search messages..."
value={searchTerm} value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)} onChange={(e) => setSearchTerm(e.target.value)}
className="w-full pl-10 pr-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-blue-500" className="w-full pl-10 pr-4 py-2 bg-white border border-stone-200 rounded-lg text-stone-900 placeholder:text-stone-400 focus:outline-none focus:ring-2 focus:ring-stone-400"
/> />
</div> </div>
<div className="flex space-x-2"> <div className="flex space-x-2">
@@ -195,8 +195,8 @@ export const EmailManager: React.FC = () => {
onClick={() => setFilter(filterType as 'all' | 'unread' | 'responded')} onClick={() => setFilter(filterType as 'all' | 'unread' | 'responded')}
className={`px-4 py-2 rounded-lg transition-colors ${ className={`px-4 py-2 rounded-lg transition-colors ${
filter === filterType filter === filterType
? 'bg-blue-500 text-white' ? 'bg-stone-900 text-stone-50'
: 'bg-white/10 text-white/70 hover:bg-white/20' : 'bg-white border border-stone-200 text-stone-600 hover:bg-stone-50'
}`} }`}
> >
{filterType.charAt(0).toUpperCase() + filterType.slice(1)} {filterType.charAt(0).toUpperCase() + filterType.slice(1)}
@@ -209,7 +209,7 @@ export const EmailManager: React.FC = () => {
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6"> <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div className="lg:col-span-1 space-y-3"> <div className="lg:col-span-1 space-y-3">
{filteredMessages.length === 0 ? ( {filteredMessages.length === 0 ? (
<div className="text-center py-12 text-white/50"> <div className="text-center py-12 text-stone-400">
<Mail className="w-12 h-12 mx-auto mb-4 opacity-50" /> <Mail className="w-12 h-12 mx-auto mb-4 opacity-50" />
<p>No messages found</p> <p>No messages found</p>
</div> </div>
@@ -219,36 +219,36 @@ export const EmailManager: React.FC = () => {
key={message.id} key={message.id}
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
className={`p-4 rounded-lg cursor-pointer transition-all ${ className={`p-4 rounded-lg cursor-pointer transition-all border ${
selectedMessage?.id === message.id selectedMessage?.id === message.id
? 'bg-blue-500/20 border border-blue-500/50' ? 'bg-stone-100 border-stone-300 shadow-sm'
: 'bg-white/5 border border-white/10 hover:bg-white/10' : 'bg-white border-stone-200 hover:bg-stone-50'
}`} }`}
onClick={() => handleMessageClick(message)} onClick={() => handleMessageClick(message)}
> >
<div className="flex items-start justify-between mb-2"> <div className="flex items-start justify-between mb-2">
<h3 className="font-semibold text-white truncate">{message.subject}</h3> <h3 className="font-semibold text-stone-900 truncate">{message.subject}</h3>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
{!message.read && <Circle className="w-3 h-3 text-blue-400" />} {!message.read && <Circle className="w-3 h-3 text-stone-600" />}
{message.responded && <CheckCircle className="w-3 h-3 text-green-400" />} {message.responded && <CheckCircle className="w-3 h-3 text-green-500" />}
</div> </div>
</div> </div>
<p className="text-white/70 text-sm mb-2">{message.name}</p> <p className="text-stone-600 text-sm mb-2">{message.name}</p>
<p className="text-white/50 text-xs">{formatDate(message.createdAt)}</p> <p className="text-stone-400 text-xs">{formatDate(message.createdAt)}</p>
</motion.div> </motion.div>
)) ))
)} )}
</div> </div>
{/* Message Detail */} {/* Message Detail */}
<div className="lg:col-span-2 admin-glass-card p-6 rounded-xl"> <div className="lg:col-span-2 admin-glass-card p-6 rounded-xl bg-white border border-stone-200">
{selectedMessage ? ( {selectedMessage ? (
<div className="space-y-6"> <div className="space-y-6">
{/* Message Header */} {/* Message Header */}
<div className="flex items-start justify-between"> <div className="flex items-start justify-between">
<div className="space-y-2"> <div className="space-y-2">
<h3 className="text-xl font-bold text-white">{selectedMessage.subject}</h3> <h3 className="text-xl font-bold text-stone-900">{selectedMessage.subject}</h3>
<div className="flex items-center space-x-4 text-sm text-white/70"> <div className="flex items-center space-x-4 text-sm text-stone-500">
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<User className="w-4 h-4" /> <User className="w-4 h-4" />
<span>{selectedMessage.name}</span> <span>{selectedMessage.name}</span>
@@ -264,15 +264,15 @@ export const EmailManager: React.FC = () => {
</div> </div>
</div> </div>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
{!selectedMessage.read && <Circle className="w-4 h-4 text-blue-400" />} {!selectedMessage.read && <Circle className="w-4 h-4 text-stone-600" />}
{selectedMessage.responded && <CheckCircle className="w-4 h-4 text-green-400" />} {selectedMessage.responded && <CheckCircle className="w-4 h-4 text-green-500" />}
</div> </div>
</div> </div>
{/* Message Body */} {/* Message Body */}
<div className="p-4 bg-white/5 rounded-lg border border-white/10"> <div className="p-4 bg-stone-50 rounded-lg border border-stone-200">
<h4 className="text-white font-medium mb-3">Message:</h4> <h4 className="text-stone-700 font-medium mb-3">Message:</h4>
<div className="text-white/80 whitespace-pre-wrap leading-relaxed"> <div className="text-stone-600 whitespace-pre-wrap leading-relaxed">
{selectedMessage.message} {selectedMessage.message}
</div> </div>
</div> </div>
@@ -281,21 +281,21 @@ export const EmailManager: React.FC = () => {
<div className="flex space-x-3"> <div className="flex space-x-3">
<button <button
onClick={() => setShowReplyModal(true)} onClick={() => setShowReplyModal(true)}
className="flex items-center space-x-2 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors" className="flex items-center space-x-2 px-4 py-2 bg-stone-900 text-stone-50 rounded-lg hover:bg-stone-800 transition-colors"
> >
<Reply className="w-4 h-4" /> <Reply className="w-4 h-4" />
<span>Reply</span> <span>Reply</span>
</button> </button>
<button <button
onClick={() => setSelectedMessage(null)} onClick={() => setSelectedMessage(null)}
className="px-4 py-2 bg-white/10 text-white rounded-lg hover:bg-white/20 transition-colors" className="px-4 py-2 bg-white border border-stone-200 text-stone-600 rounded-lg hover:bg-stone-50 transition-colors"
> >
Close Close
</button> </button>
</div> </div>
</div> </div>
) : ( ) : (
<div className="text-center py-12 text-white/50"> <div className="text-center py-12 text-stone-400">
<Eye className="w-12 h-12 mx-auto mb-4 opacity-50" /> <Eye className="w-12 h-12 mx-auto mb-4 opacity-50" />
<p>Select a message to view details</p> <p>Select a message to view details</p>
</div> </div>
@@ -311,23 +311,23 @@ export const EmailManager: React.FC = () => {
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
exit={{ opacity: 0 }} exit={{ opacity: 0 }}
className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4" className="fixed inset-0 bg-stone-900/20 backdrop-blur-sm z-50 flex items-center justify-center p-4"
onClick={() => setShowReplyModal(false)} onClick={() => setShowReplyModal(false)}
> >
<motion.div <motion.div
initial={{ scale: 0.9, opacity: 0 }} initial={{ scale: 0.9, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }} animate={{ scale: 1, opacity: 1 }}
exit={{ scale: 0.9, opacity: 0 }} exit={{ scale: 0.9, opacity: 0 }}
className="bg-gray-900/95 backdrop-blur-xl border border-white/20 rounded-2xl p-6 max-w-2xl w-full" className="bg-white border border-stone-200 rounded-2xl p-6 max-w-2xl w-full shadow-xl"
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
> >
<div className="flex items-center justify-between mb-6"> <div className="flex items-center justify-between mb-6">
<h2 className="text-xl font-bold text-white">Reply to {selectedMessage.name}</h2> <h2 className="text-xl font-bold text-stone-900">Reply to {selectedMessage.name}</h2>
<button <button
onClick={() => setShowReplyModal(false)} onClick={() => setShowReplyModal(false)}
className="p-2 hover:bg-white/10 rounded-lg transition-colors" className="p-2 hover:bg-stone-100 rounded-lg transition-colors"
> >
<X className="w-5 h-5 text-white/70" /> <X className="w-5 h-5 text-stone-500" />
</button> </button>
</div> </div>
@@ -336,20 +336,20 @@ export const EmailManager: React.FC = () => {
value={replyContent} value={replyContent}
onChange={(e) => setReplyContent(e.target.value)} onChange={(e) => setReplyContent(e.target.value)}
placeholder="Type your reply..." placeholder="Type your reply..."
className="w-full h-32 p-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none" className="w-full h-32 p-3 bg-stone-50 border border-stone-200 rounded-lg text-stone-900 placeholder:text-stone-400 focus:outline-none focus:ring-2 focus:ring-stone-400 resize-none"
/> />
<div className="flex space-x-3"> <div className="flex space-x-3">
<button <button
onClick={handleReply} onClick={handleReply}
className="flex items-center space-x-2 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors" className="flex items-center space-x-2 px-4 py-2 bg-stone-900 text-stone-50 rounded-lg hover:bg-stone-800 transition-colors"
> >
<Send className="w-4 h-4" /> <Send className="w-4 h-4" />
<span>Send Reply</span> <span>Send Reply</span>
</button> </button>
<button <button
onClick={() => setShowReplyModal(false)} onClick={() => setShowReplyModal(false)}
className="px-4 py-2 bg-white/10 text-white rounded-lg hover:bg-white/20 transition-colors" className="px-4 py-2 bg-white border border-stone-200 text-stone-600 rounded-lg hover:bg-stone-50 transition-colors"
> >
Cancel Cancel
</button> </button>

62
components/EmailResponder.tsx
View File

@@ -85,19 +85,19 @@ export const EmailResponder: React.FC<EmailResponderProps> = ({
return ( return (
<> <>
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"> <div className="fixed inset-0 bg-stone-900/20 backdrop-blur-sm flex items-center justify-center z-50 p-4">
<div className="bg-white rounded-2xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto"> <div className="bg-white rounded-2xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto border border-stone-200">
{/* Header */} {/* Header */}
<div className="bg-gradient-to-r from-blue-600 to-purple-600 text-white p-6 rounded-t-2xl"> <div className="bg-stone-50 border-b border-stone-200 text-stone-900 p-6 rounded-t-2xl">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
<h2 className="text-2xl font-bold">📧 E-Mail Antwort senden</h2> <h2 className="text-2xl font-bold">📧 E-Mail Antwort senden</h2>
<p className="text-blue-100 mt-1">Wähle ein schönes Template für deine Antwort</p> <p className="text-stone-500 mt-1">Wähle ein schönes Template für deine Antwort</p>
</div> </div>
<button <button
onClick={onClose} onClick={onClose}
className="text-white hover:text-gray-200 transition-colors" className="text-stone-400 hover:text-stone-600 transition-colors"
> >
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
@@ -110,54 +110,54 @@ export const EmailResponder: React.FC<EmailResponderProps> = ({
<div className="p-6"> <div className="p-6">
{/* Contact Info */} {/* Contact Info */}
<div className="bg-gray-50 rounded-xl p-4 mb-6"> <div className="bg-stone-50 border border-stone-200 rounded-xl p-4 mb-6">
<h3 className="font-semibold text-gray-800 mb-2">📬 Kontakt-Informationen</h3> <h3 className="font-semibold text-stone-800 mb-2">📬 Kontakt-Informationen</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div> <div>
<span className="text-sm text-gray-600">Name:</span> <span className="text-sm text-stone-500">Name:</span>
<p className="font-medium text-gray-900">{contactName}</p> <p className="font-medium text-stone-900">{contactName}</p>
</div> </div>
<div> <div>
<span className="text-sm text-gray-600">E-Mail:</span> <span className="text-sm text-stone-500">E-Mail:</span>
<p className="font-medium text-gray-900">{contactEmail}</p> <p className="font-medium text-stone-900">{contactEmail}</p>
</div> </div>
</div> </div>
</div> </div>
{/* Original Message Preview */} {/* Original Message Preview */}
<div className="bg-blue-50 rounded-xl p-4 mb-6"> <div className="bg-stone-50 border border-stone-200 rounded-xl p-4 mb-6">
<h3 className="font-semibold text-blue-800 mb-2">💬 Ursprüngliche Nachricht</h3> <h3 className="font-semibold text-stone-800 mb-2">💬 Ursprüngliche Nachricht</h3>
<div className="bg-white rounded-lg p-3 border-l-4 border-blue-500"> <div className="bg-white rounded-lg p-3 border-l-4 border-blue-500 shadow-sm">
<p className="text-gray-700 text-sm whitespace-pre-wrap">{originalMessage}</p> <p className="text-stone-700 text-sm whitespace-pre-wrap">{originalMessage}</p>
</div> </div>
</div> </div>
{/* Template Selection */} {/* Template Selection */}
<div className="mb-6"> <div className="mb-6">
<h3 className="font-semibold text-gray-800 mb-4">🎨 Template auswählen</h3> <h3 className="font-semibold text-stone-800 mb-4">🎨 Template auswählen</h3>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4"> <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
{Object.entries(templates).map(([key, template]) => ( {Object.entries(templates).map(([key, template]) => (
<div <div
key={key} key={key}
className={`relative cursor-pointer rounded-xl border-2 transition-all duration-200 ${ className={`relative cursor-pointer rounded-xl border-2 transition-all duration-200 ${
selectedTemplate === key selectedTemplate === key
? 'border-blue-500 bg-blue-50 shadow-lg scale-105' ? 'border-stone-500 bg-stone-50 shadow-md'
: 'border-gray-200 hover:border-gray-300 hover:shadow-md' : 'border-stone-200 hover:border-stone-300 hover:shadow-sm'
}`} }`}
onClick={() => setSelectedTemplate(key as keyof typeof templates)} onClick={() => setSelectedTemplate(key as keyof typeof templates)}
> >
<div className={`bg-gradient-to-r ${template.color} text-white p-4 rounded-t-xl`}> <div className={`p-4 rounded-t-xl bg-white border-b border-stone-100`}>
<div className="text-center"> <div className="text-center">
<div className="text-3xl mb-2">{template.icon}</div> <div className="text-3xl mb-2">{template.icon}</div>
<h4 className="font-bold text-lg">{template.name}</h4> <h4 className="font-bold text-lg text-stone-900">{template.name}</h4>
</div> </div>
</div> </div>
<div className="p-4"> <div className="p-4">
<p className="text-sm text-gray-600 text-center">{template.description}</p> <p className="text-sm text-stone-600 text-center">{template.description}</p>
</div> </div>
{selectedTemplate === key && ( {selectedTemplate === key && (
<div className="absolute top-2 right-2"> <div className="absolute top-2 right-2">
<div className="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center"> <div className="w-6 h-6 bg-stone-600 rounded-full flex items-center justify-center">
<svg className="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20"> <svg className="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" /> <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
</svg> </svg>
@@ -171,15 +171,15 @@ export const EmailResponder: React.FC<EmailResponderProps> = ({
{/* Preview */} {/* Preview */}
<div className="mb-6"> <div className="mb-6">
<h3 className="font-semibold text-gray-800 mb-4">👀 Vorschau</h3> <h3 className="font-semibold text-stone-800 mb-4">👀 Vorschau</h3>
<div className="bg-gray-100 rounded-xl p-4"> <div className="bg-stone-100 rounded-xl p-4 border border-stone-200">
<div className="bg-white rounded-lg shadow-sm border"> <div className="bg-white rounded-lg shadow-sm border border-stone-200">
<div className={`bg-gradient-to-r ${templates[selectedTemplate].color} text-white p-4 rounded-t-lg`}> <div className="p-4 rounded-t-lg bg-stone-50 border-b border-stone-100">
<h4 className="font-bold text-lg">{templates[selectedTemplate].icon} {templates[selectedTemplate].name}</h4> <h4 className="font-bold text-lg text-stone-900">{templates[selectedTemplate].icon} {templates[selectedTemplate].name}</h4>
<p className="text-sm opacity-90">An: {contactName}</p> <p className="text-sm text-stone-500">An: {contactName}</p>
</div> </div>
<div className="p-4"> <div className="p-4">
<p className="text-sm text-gray-600"> <p className="text-sm text-stone-600">
{selectedTemplate === 'welcome' && 'Freundliche Begrüßung mit Portfolio-Links und nächsten Schritten'} {selectedTemplate === 'welcome' && 'Freundliche Begrüßung mit Portfolio-Links und nächsten Schritten'}
{selectedTemplate === 'project' && 'Professionelle Projekt-Antwort mit Arbeitsprozess und CTA'} {selectedTemplate === 'project' && 'Professionelle Projekt-Antwort mit Arbeitsprozess und CTA'}
{selectedTemplate === 'quick' && 'Schnelle, kurze Bestätigung der Nachricht'} {selectedTemplate === 'quick' && 'Schnelle, kurze Bestätigung der Nachricht'}
@@ -193,14 +193,14 @@ export const EmailResponder: React.FC<EmailResponderProps> = ({
<div className="flex gap-4"> <div className="flex gap-4">
<button <button
onClick={onClose} onClick={onClose}
className="flex-1 px-6 py-3 border border-gray-300 text-gray-700 rounded-xl hover:bg-gray-50 transition-colors font-medium" className="flex-1 px-6 py-3 border border-stone-300 text-stone-700 rounded-xl hover:bg-stone-50 transition-colors font-medium"
> >
Abbrechen Abbrechen
</button> </button>
<button <button
onClick={handleSendEmail} onClick={handleSendEmail}
disabled={isLoading} disabled={isLoading}
className="flex-1 px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-xl hover:from-blue-700 hover:to-purple-700 transition-all font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2" className="flex-1 px-6 py-3 bg-stone-900 text-white rounded-xl hover:bg-stone-800 transition-all font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
> >
{isLoading ? ( {isLoading ? (
<> <>

34
components/ImportExport.tsx
View File

@@ -99,23 +99,23 @@ export default function ImportExport() {
}; };
return ( return (
<div className="admin-glass-card rounded-lg p-6"> <div className="bg-white border border-stone-200 rounded-xl p-6">
<h3 className="text-lg font-semibold text-white mb-4 flex items-center"> <h3 className="text-lg font-semibold text-stone-900 mb-4 flex items-center">
<FileText className="w-5 h-5 mr-2 text-blue-400" /> <FileText className="w-5 h-5 mr-2 text-stone-600" />
Import & Export Import & Export
</h3> </h3>
<div className="space-y-4"> <div className="space-y-4">
{/* Export Section */} {/* Export Section */}
<div className="admin-glass-light rounded-lg p-4"> <div className="bg-stone-50 border border-stone-200 rounded-xl p-4">
<h4 className="font-medium text-white mb-2">Export Projekte</h4> <h4 className="font-medium text-stone-900 mb-2">Export Projekte</h4>
<p className="text-sm text-white/70 mb-3"> <p className="text-sm text-stone-600 mb-3">
Alle Projekte als JSON-Datei herunterladen Alle Projekte als JSON-Datei herunterladen
</p> </p>
<button <button
onClick={handleExport} onClick={handleExport}
disabled={isExporting} disabled={isExporting}
className="flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 hover:scale-105 transition-all disabled:opacity-50 disabled:cursor-not-allowed" className="flex items-center px-4 py-2 bg-stone-900 text-white rounded-lg hover:bg-stone-800 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
> >
<Download className="w-4 h-4 mr-2" /> <Download className="w-4 h-4 mr-2" />
{isExporting ? 'Exportiere...' : 'Exportieren'} {isExporting ? 'Exportiere...' : 'Exportieren'}
@@ -123,12 +123,12 @@ export default function ImportExport() {
</div> </div>
{/* Import Section */} {/* Import Section */}
<div className="admin-glass-light rounded-lg p-4"> <div className="bg-stone-50 border border-stone-200 rounded-xl p-4">
<h4 className="font-medium text-white mb-2">Import Projekte</h4> <h4 className="font-medium text-stone-900 mb-2">Import Projekte</h4>
<p className="text-sm text-white/70 mb-3"> <p className="text-sm text-stone-600 mb-3">
JSON-Datei mit Projekten hochladen JSON-Datei mit Projekten hochladen
</p> </p>
<label className="flex items-center px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 hover:scale-105 transition-all cursor-pointer"> <label className="flex items-center px-4 py-2 bg-stone-900 text-white rounded-lg hover:bg-stone-800 transition-colors cursor-pointer w-fit">
<Upload className="w-4 h-4 mr-2" /> <Upload className="w-4 h-4 mr-2" />
{isImporting ? 'Importiere...' : 'Datei auswählen'} {isImporting ? 'Importiere...' : 'Datei auswählen'}
<input <input
@@ -143,16 +143,16 @@ export default function ImportExport() {
{/* Import Results */} {/* Import Results */}
{importResult && ( {importResult && (
<div className="admin-glass-light rounded-lg p-4"> <div className="bg-stone-50 border border-stone-200 rounded-xl p-4">
<h4 className="font-medium text-white mb-2 flex items-center"> <h4 className="font-medium text-stone-900 mb-2 flex items-center">
{importResult.success ? ( {importResult.success ? (
<CheckCircle className="w-5 h-5 mr-2 text-green-400" /> <CheckCircle className="w-5 h-5 mr-2 text-green-600" />
) : ( ) : (
<AlertCircle className="w-5 h-5 mr-2 text-red-400" /> <AlertCircle className="w-5 h-5 mr-2 text-red-600" />
)} )}
Import Ergebnis Import Ergebnis
</h4> </h4>
<div className="text-sm text-white/70 space-y-1"> <div className="text-sm text-stone-600 space-y-1">
<p><strong>Importiert:</strong> {importResult.results.imported}</p> <p><strong>Importiert:</strong> {importResult.results.imported}</p>
<p><strong>Übersprungen:</strong> {importResult.results.skipped}</p> <p><strong>Übersprungen:</strong> {importResult.results.skipped}</p>
{importResult.results.errors.length > 0 && ( {importResult.results.errors.length > 0 && (
@@ -160,7 +160,7 @@ export default function ImportExport() {
<p><strong>Fehler:</strong></p> <p><strong>Fehler:</strong></p>
<ul className="list-disc list-inside ml-4"> <ul className="list-disc list-inside ml-4">
{importResult.results.errors.map((error, index) => ( {importResult.results.errors.map((error, index) => (
<li key={index} className="text-red-400">{error}</li> <li key={index} className="text-red-600">{error}</li>
))} ))}
</ul> </ul>
</div> </div>

2
components/ModernAdminDashboard.tsx
View File

@@ -343,7 +343,7 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
<Activity size={20} className="text-stone-400" /> <Activity size={20} className="text-stone-400" />
</div> </div>
<p className="text-xl md:text-2xl font-bold text-stone-900">{stats.totalViews.toLocaleString()}</p> <p className="text-xl md:text-2xl font-bold text-stone-900">{stats.totalViews.toLocaleString()}</p>
<p className="text-blue-600 text-xs font-medium">{stats.totalUsers} users</p> <p className="text-stone-600 text-xs font-medium">{stats.totalUsers} users</p>
</div> </div>
</div> </div>

2
components/PerformanceDashboard.tsx
View File

@@ -75,7 +75,7 @@ export const PerformanceDashboard: React.FC = () => {
setIsVisible(true); setIsVisible(true);
trackEvent('dashboard-toggle', { action: 'show' }); trackEvent('dashboard-toggle', { action: 'show' });
}} }}
className="fixed bottom-4 right-4 bg-blue-600 text-white px-4 py-2 rounded-lg shadow-lg hover:bg-blue-700 transition-colors z-50" className="fixed bottom-4 right-4 bg-white text-stone-700 border border-stone-200 px-4 py-2 rounded-lg shadow-md hover:bg-stone-50 transition-colors z-50"
> >
📊 Performance 📊 Performance
</button> </button>

87
components/ProjectManager.tsx
View File

@@ -52,7 +52,6 @@ export const ProjectManager: React.FC<ProjectManagerProps> = ({
const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid'); const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
const [searchTerm, setSearchTerm] = useState(''); const [searchTerm, setSearchTerm] = useState('');
const [selectedCategory, setSelectedCategory] = useState<string>('all'); const [selectedCategory, setSelectedCategory] = useState<string>('all');
// Editor is now a separate page - no modal state needed
const categories = ['all', 'Web Development', 'Full-Stack', 'Web Application', 'Mobile App', 'Design']; const categories = ['all', 'Web Development', 'Full-Stack', 'Web Application', 'Mobile App', 'Design'];
@@ -77,10 +76,6 @@ export const ProjectManager: React.FC<ProjectManagerProps> = ({
} }
}; };
// closeEditor removed - editor is now separate page
// saveProject removed - editor is now separate page
const deleteProject = async (projectId: string) => { const deleteProject = async (projectId: string) => {
if (!confirm('Are you sure you want to delete this project?')) return; if (!confirm('Are you sure you want to delete this project?')) return;
@@ -100,9 +95,9 @@ export const ProjectManager: React.FC<ProjectManagerProps> = ({
const getStatusColor = (project: Project) => { const getStatusColor = (project: Project) => {
if (project.published) { if (project.published) {
return project.featured ? 'text-purple-400 bg-purple-500/20' : 'text-green-400 bg-green-500/20'; return project.featured ? 'text-stone-700 bg-stone-200' : 'text-green-700 bg-green-100';
} }
return 'text-yellow-400 bg-yellow-500/20'; return 'text-yellow-700 bg-yellow-100';
}; };
const getStatusText = (project: Project) => { const getStatusText = (project: Project) => {
@@ -117,20 +112,20 @@ export const ProjectManager: React.FC<ProjectManagerProps> = ({
{/* Header */} {/* Header */}
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4"> <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
<div> <div>
<h1 className="text-3xl font-bold text-white">Project Management</h1> <h1 className="text-3xl font-bold text-stone-900">Project Management</h1>
<p className="text-white/80">{projects.length} projects • {projects.filter(p => p.published).length} published</p> <p className="text-stone-500">{projects.length} projects • {projects.filter(p => p.published).length} published</p>
</div> </div>
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-3">
<button <button
onClick={onProjectsChange} onClick={onProjectsChange}
className="flex items-center space-x-2 px-4 py-2 admin-glass-light rounded-xl hover:scale-105 transition-all duration-200" className="flex items-center space-x-2 px-4 py-2 bg-stone-100 border border-stone-200 rounded-xl hover:bg-stone-200 transition-all duration-200"
> >
<RefreshCw className="w-4 h-4 text-blue-400" /> <RefreshCw className="w-4 h-4 text-stone-600" />
<span className="text-white font-medium">Refresh</span> <span className="text-stone-700 font-medium">Refresh</span>
</button> </button>
<button <button
onClick={() => openEditor()} onClick={() => openEditor()}
className="flex items-center space-x-2 px-6 py-2 bg-gradient-to-r from-blue-500 to-purple-500 text-white rounded-xl hover:scale-105 transition-all duration-200 shadow-lg" className="flex items-center space-x-2 px-6 py-2 bg-stone-900 text-white rounded-xl hover:bg-stone-800 transition-all duration-200 shadow-md"
> >
<Plus size={18} /> <Plus size={18} />
<span className="font-medium">New Project</span> <span className="font-medium">New Project</span>
@@ -142,13 +137,13 @@ export const ProjectManager: React.FC<ProjectManagerProps> = ({
<div className="flex flex-col sm:flex-row gap-4"> <div className="flex flex-col sm:flex-row gap-4">
{/* Search */} {/* Search */}
<div className="relative flex-1"> <div className="relative flex-1">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-white/60" /> <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-stone-400" />
<input <input
type="text" type="text"
placeholder="Search projects..." placeholder="Search projects..."
value={searchTerm} value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)} onChange={(e) => setSearchTerm(e.target.value)}
className="w-full pl-10 pr-4 py-3 admin-glass-light border border-white/30 rounded-xl text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-blue-500" className="w-full pl-10 pr-4 py-3 bg-white border border-stone-200 rounded-xl text-stone-900 placeholder:text-stone-400 focus:outline-none focus:ring-2 focus:ring-stone-400"
/> />
</div> </div>
@@ -156,23 +151,23 @@ export const ProjectManager: React.FC<ProjectManagerProps> = ({
<select <select
value={selectedCategory} value={selectedCategory}
onChange={(e) => setSelectedCategory(e.target.value)} onChange={(e) => setSelectedCategory(e.target.value)}
className="px-4 py-3 admin-glass-light border border-white/30 rounded-xl text-white focus:outline-none focus:ring-2 focus:ring-blue-500 bg-transparent" className="px-4 py-3 bg-white border border-stone-200 rounded-xl text-stone-900 focus:outline-none focus:ring-2 focus:ring-stone-400"
> >
{categories.map(category => ( {categories.map(category => (
<option key={category} value={category} className="bg-gray-800"> <option key={category} value={category} className="bg-white text-stone-900">
{category === 'all' ? 'All Categories' : category} {category === 'all' ? 'All Categories' : category}
</option> </option>
))} ))}
</select> </select>
{/* View Toggle */} {/* View Toggle */}
<div className="flex items-center space-x-1 admin-glass-light rounded-xl p-1"> <div className="flex items-center space-x-1 bg-white border border-stone-200 rounded-xl p-1">
<button <button
onClick={() => setViewMode('grid')} onClick={() => setViewMode('grid')}
className={`p-2 rounded-lg transition-all duration-200 ${ className={`p-2 rounded-lg transition-all duration-200 ${
viewMode === 'grid' viewMode === 'grid'
? 'bg-blue-500/40 text-blue-300' ? 'bg-stone-100 text-stone-900'
: 'text-white/70 hover:text-white hover:bg-white/10' : 'text-stone-400 hover:text-stone-900 hover:bg-stone-50'
}`} }`}
> >
<Grid className="w-4 h-4" /> <Grid className="w-4 h-4" />
@@ -181,8 +176,8 @@ export const ProjectManager: React.FC<ProjectManagerProps> = ({
onClick={() => setViewMode('list')} onClick={() => setViewMode('list')}
className={`p-2 rounded-lg transition-all duration-200 ${ className={`p-2 rounded-lg transition-all duration-200 ${
viewMode === 'list' viewMode === 'list'
? 'bg-blue-500/40 text-blue-300' ? 'bg-stone-100 text-stone-900'
: 'text-white/70 hover:text-white hover:bg-white/10' : 'text-stone-400 hover:text-stone-900 hover:bg-stone-50'
}`} }`}
> >
<List className="w-4 h-4" /> <List className="w-4 h-4" />
@@ -198,24 +193,24 @@ export const ProjectManager: React.FC<ProjectManagerProps> = ({
key={project.id} key={project.id}
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
className="admin-glass-card p-6 rounded-xl hover:scale-105 transition-all duration-300 group" className="admin-glass-card p-6 rounded-xl hover:shadow-lg transition-all duration-300 group bg-white border border-stone-200"
> >
{/* Project Header */} {/* Project Header */}
<div className="flex items-start justify-between mb-4"> <div className="flex items-start justify-between mb-4">
<div className="flex-1"> <div className="flex-1">
<h3 className="text-xl font-bold text-white mb-1">{project.title}</h3> <h3 className="text-xl font-bold text-stone-900 mb-1">{project.title}</h3>
<p className="text-white/70 text-sm">{project.category}</p> <p className="text-stone-500 text-sm">{project.category}</p>
</div> </div>
<div className="flex items-center space-x-1 opacity-0 group-hover:opacity-100 transition-opacity"> <div className="flex items-center space-x-1 opacity-0 group-hover:opacity-100 transition-opacity">
<button <button
onClick={() => openEditor(project)} onClick={() => openEditor(project)}
className="p-2 text-white/70 hover:text-blue-400 hover:bg-white/10 rounded-lg transition-colors" className="p-2 text-stone-500 hover:text-stone-700 hover:bg-stone-100 rounded-lg transition-colors"
> >
<Edit size={16} /> <Edit size={16} />
</button> </button>
<button <button
onClick={() => deleteProject(project.id)} onClick={() => deleteProject(project.id)}
className="p-2 text-white/70 hover:text-red-400 hover:bg-white/10 rounded-lg transition-colors" className="p-2 text-stone-500 hover:text-red-600 hover:bg-stone-100 rounded-lg transition-colors"
> >
<Trash2 size={16} /> <Trash2 size={16} />
</button> </button>
@@ -225,7 +220,7 @@ export const ProjectManager: React.FC<ProjectManagerProps> = ({
{/* Project Content */} {/* Project Content */}
<div className="space-y-4"> <div className="space-y-4">
<div> <div>
<p className="text-white/70 text-sm line-clamp-2 leading-relaxed">{project.description}</p> <p className="text-stone-600 text-sm line-clamp-2 leading-relaxed">{project.description}</p>
</div> </div>
{/* Tags */} {/* Tags */}
@@ -234,13 +229,13 @@ export const ProjectManager: React.FC<ProjectManagerProps> = ({
{project.tags.slice(0, 3).map((tag) => ( {project.tags.slice(0, 3).map((tag) => (
<span <span
key={tag} key={tag}
className="px-2 py-1 bg-white/10 text-white/70 rounded-full text-xs" className="px-2 py-1 bg-stone-100 text-stone-600 border border-stone-200 rounded-full text-xs"
> >
{tag} {tag}
</span> </span>
))} ))}
{project.tags.length > 3 && ( {project.tags.length > 3 && (
<span className="px-2 py-1 bg-white/10 text-white/70 rounded-full text-xs"> <span className="px-2 py-1 bg-stone-100 text-stone-600 border border-stone-200 rounded-full text-xs">
+{project.tags.length - 3} +{project.tags.length - 3}
</span> </span>
)} )}
@@ -258,7 +253,7 @@ export const ProjectManager: React.FC<ProjectManagerProps> = ({
href={project.github} href={project.github}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="p-1 text-white/60 hover:text-white transition-colors" className="p-1 text-stone-400 hover:text-stone-900 transition-colors"
> >
<Github size={14} /> <Github size={14} />
</a> </a>
@@ -268,7 +263,7 @@ export const ProjectManager: React.FC<ProjectManagerProps> = ({
href={project.live} href={project.live}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="p-1 text-white/60 hover:text-white transition-colors" className="p-1 text-stone-400 hover:text-stone-900 transition-colors"
> >
<Globe size={14} /> <Globe size={14} />
</a> </a>
@@ -277,18 +272,18 @@ export const ProjectManager: React.FC<ProjectManagerProps> = ({
</div> </div>
{/* Analytics */} {/* Analytics */}
<div className="grid grid-cols-3 gap-2 pt-3 border-t border-white/10"> <div className="grid grid-cols-3 gap-2 pt-3 border-t border-stone-100">
<div className="text-center"> <div className="text-center">
<p className="text-white font-bold text-sm">{project.analytics?.views || 0}</p> <p className="text-stone-900 font-bold text-sm">{project.analytics?.views || 0}</p>
<p className="text-white/60 text-xs">Views</p> <p className="text-stone-500 text-xs">Views</p>
</div> </div>
<div className="text-center"> <div className="text-center">
<p className="text-white font-bold text-sm">{project.analytics?.likes || 0}</p> <p className="text-stone-900 font-bold text-sm">{project.analytics?.likes || 0}</p>
<p className="text-white/60 text-xs">Likes</p> <p className="text-stone-500 text-xs">Likes</p>
</div> </div>
<div className="text-center"> <div className="text-center">
<p className="text-white font-bold text-sm">{project.performance?.lighthouse || 90}</p> <p className="text-stone-900 font-bold text-sm">{project.performance?.lighthouse || 90}</p>
<p className="text-white/60 text-xs">Score</p> <p className="text-stone-500 text-xs">Score</p>
</div> </div>
</div> </div>
</div> </div>
@@ -302,13 +297,13 @@ export const ProjectManager: React.FC<ProjectManagerProps> = ({
key={project.id} key={project.id}
initial={{ opacity: 0, x: -20 }} initial={{ opacity: 0, x: -20 }}
animate={{ opacity: 1, x: 0 }} animate={{ opacity: 1, x: 0 }}
className="admin-glass-card p-6 rounded-xl hover:scale-[1.01] transition-all duration-300 group" className="admin-glass-card p-6 rounded-xl hover:shadow-md transition-all duration-300 group bg-white border border-stone-200"
> >
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center space-x-4"> <div className="flex items-center space-x-4">
<div className="flex-1"> <div className="flex-1">
<h3 className="text-white font-bold text-lg">{project.title}</h3> <h3 className="text-stone-900 font-bold text-lg">{project.title}</h3>
<p className="text-white/70 text-sm">{project.category}</p> <p className="text-stone-500 text-sm">{project.category}</p>
</div> </div>
</div> </div>
@@ -316,7 +311,7 @@ export const ProjectManager: React.FC<ProjectManagerProps> = ({
<span className={`px-3 py-1 rounded-full text-xs font-medium ${getStatusColor(project)}`}> <span className={`px-3 py-1 rounded-full text-xs font-medium ${getStatusColor(project)}`}>
{getStatusText(project)} {getStatusText(project)}
</span> </span>
<div className="flex items-center space-x-3 text-white/60 text-sm"> <div className="flex items-center space-x-3 text-stone-500 text-sm">
<span>{project.analytics?.views || 0} views</span> <span>{project.analytics?.views || 0} views</span>
<span>•</span> <span>•</span>
<span>{new Date(project.updatedAt).toLocaleDateString()}</span> <span>{new Date(project.updatedAt).toLocaleDateString()}</span>
@@ -324,13 +319,13 @@ export const ProjectManager: React.FC<ProjectManagerProps> = ({
<div className="flex items-center space-x-1 opacity-0 group-hover:opacity-100 transition-opacity"> <div className="flex items-center space-x-1 opacity-0 group-hover:opacity-100 transition-opacity">
<button <button
onClick={() => openEditor(project)} onClick={() => openEditor(project)}
className="p-2 text-white/70 hover:text-blue-400 hover:bg-white/10 rounded-lg transition-colors" className="p-2 text-stone-500 hover:text-stone-700 hover:bg-stone-100 rounded-lg transition-colors"
> >
<Edit size={16} /> <Edit size={16} />
</button> </button>
<button <button
onClick={() => deleteProject(project.id)} onClick={() => deleteProject(project.id)}
className="p-2 text-white/70 hover:text-red-400 hover:bg-white/10 rounded-lg transition-colors" className="p-2 text-stone-500 hover:text-red-600 hover:bg-stone-100 rounded-lg transition-colors"
> >
<Trash2 size={16} /> <Trash2 size={16} />
</button> </button>
@@ -341,8 +336,6 @@ export const ProjectManager: React.FC<ProjectManagerProps> = ({
))} ))}
</div> </div>
)} )}
{/* Editor is now a separate page at /editor */}
</div> </div>
); );
}; };

6
components/Toast.tsx
View File

@@ -50,9 +50,9 @@ const ToastItem = ({ toast, onRemove }: ToastProps) => {
case 'warning': case 'warning':
return <AlertTriangle className="w-5 h-5 text-yellow-400" />; return <AlertTriangle className="w-5 h-5 text-yellow-400" />;
case 'info': case 'info':
return <Info className="w-5 h-5 text-blue-400" />; return <Info className="w-5 h-5 text-stone-400" />;
default: default:
return <Info className="w-5 h-5 text-blue-400" />; return <Info className="w-5 h-5 text-stone-400" />;
} }
}; };
@@ -112,7 +112,7 @@ const ToastItem = ({ toast, onRemove }: ToastProps) => {
initial={{ width: '100%' }} initial={{ width: '100%' }}
animate={{ width: '0%' }} animate={{ width: '0%' }}
transition={{ duration: (toast.duration || 5000) / 1000, ease: "linear" }} transition={{ duration: (toast.duration || 5000) / 1000, ease: "linear" }}
className="absolute bottom-0 left-0 h-1 bg-gradient-to-r from-blue-400 to-green-400 rounded-b-xl" className="absolute bottom-0 left-0 h-1 bg-gradient-to-r from-stone-400 to-stone-600 rounded-b-xl"
/> />
)} )}
</motion.div> </motion.div>