full upgrade to dev
This commit is contained in:
@@ -1,19 +1,21 @@
|
||||
"use client";
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
import Image from "next/image";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import {
|
||||
Code2,
|
||||
Disc3,
|
||||
Gamepad2,
|
||||
ExternalLink,
|
||||
Cpu,
|
||||
Zap,
|
||||
Clock,
|
||||
Music
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
Activity,
|
||||
X,
|
||||
} from "lucide-react";
|
||||
|
||||
// Types passend zu deinem n8n Output
|
||||
// Types matching your n8n output
|
||||
interface StatusData {
|
||||
status: {
|
||||
text: string;
|
||||
@@ -38,6 +40,7 @@ interface StatusData {
|
||||
isActive: boolean;
|
||||
project?: string;
|
||||
file?: string;
|
||||
language?: string;
|
||||
stats?: {
|
||||
time: string;
|
||||
topLang: string;
|
||||
@@ -48,213 +51,517 @@ interface StatusData {
|
||||
|
||||
export default function ActivityFeed() {
|
||||
const [data, setData] = useState<StatusData | null>(null);
|
||||
const [isExpanded, setIsExpanded] = useState(true);
|
||||
const [isMinimized, setIsMinimized] = useState(false);
|
||||
const [hasActivity, setHasActivity] = useState(false);
|
||||
const [quote, setQuote] = useState<{
|
||||
content: string;
|
||||
author: string;
|
||||
} | null>(null);
|
||||
|
||||
// Daten abrufen (alle 10 Sekunden für schnelleres Feedback)
|
||||
// Fetch data every 30 seconds (optimized to match server cache)
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const res = await fetch("/api/n8n/status");
|
||||
// Add timestamp to prevent aggressive caching but respect server cache
|
||||
const res = await fetch("/api/n8n/status", {
|
||||
cache: "default",
|
||||
});
|
||||
if (!res.ok) return;
|
||||
const json = await res.json();
|
||||
let json = await res.json();
|
||||
|
||||
console.log("ActivityFeed data (raw):", json);
|
||||
|
||||
// Handle array response if API returns it wrapped
|
||||
if (Array.isArray(json)) {
|
||||
json = json[0] || null;
|
||||
}
|
||||
|
||||
console.log("ActivityFeed data (processed):", json);
|
||||
|
||||
setData(json);
|
||||
|
||||
// Check if there's any active activity
|
||||
const hasActiveActivity =
|
||||
json.coding?.isActive ||
|
||||
json.gaming?.isPlaying ||
|
||||
json.music?.isPlaying;
|
||||
|
||||
console.log("Has activity:", hasActiveActivity, {
|
||||
coding: json.coding?.isActive,
|
||||
gaming: json.gaming?.isPlaying,
|
||||
music: json.music?.isPlaying,
|
||||
});
|
||||
|
||||
setHasActivity(hasActiveActivity);
|
||||
|
||||
// Auto-expand if there's new activity and not minimized
|
||||
if (hasActiveActivity && !isMinimized) {
|
||||
setIsExpanded(true);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Failed to fetch activity", e);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
const interval = setInterval(fetchData, 10000); // 10s Refresh
|
||||
// Optimized: Poll every 30 seconds instead of 10 to reduce server load
|
||||
// The n8n API already has 30s cache, so faster polling doesn't help
|
||||
const interval = setInterval(fetchData, 30000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
}, [isMinimized]);
|
||||
|
||||
// Fetch nerdy quote when idle
|
||||
useEffect(() => {
|
||||
if (!hasActivity && !quote) {
|
||||
const techQuotes = [
|
||||
{
|
||||
content: "Simplicity is the soul of efficiency.",
|
||||
author: "Austin Freeman",
|
||||
},
|
||||
{
|
||||
content: "Talk is cheap. Show me the code.",
|
||||
author: "Linus Torvalds",
|
||||
},
|
||||
{
|
||||
content: "Code is like humor. When you have to explain it, it’s bad.",
|
||||
author: "Cory House",
|
||||
},
|
||||
{
|
||||
content: "Fix the cause, not the symptom.",
|
||||
author: "Steve Maguire",
|
||||
},
|
||||
{
|
||||
content:
|
||||
"Optimism is an occupational hazard of programming: feedback is the treatment.",
|
||||
author: "Kent Beck",
|
||||
},
|
||||
{
|
||||
content: "Make it work, make it right, make it fast.",
|
||||
author: "Kent Beck",
|
||||
},
|
||||
{
|
||||
content: "First, solve the problem. Then, write the code.",
|
||||
author: "John Johnson",
|
||||
},
|
||||
{
|
||||
content: "Experience is the name everyone gives to their mistakes.",
|
||||
author: "Oscar Wilde",
|
||||
},
|
||||
{
|
||||
content:
|
||||
"In order to be irreplaceable, one must always be different.",
|
||||
author: "Coco Chanel",
|
||||
},
|
||||
{
|
||||
content: "Java is to JavaScript what car is to Carpet.",
|
||||
author: "Chris Heilmann",
|
||||
},
|
||||
{
|
||||
content: "Knowledge is power.",
|
||||
author: "Francis Bacon",
|
||||
},
|
||||
{
|
||||
content: "Before software can be reusable it first has to be usable.",
|
||||
author: "Ralph Johnson",
|
||||
},
|
||||
{
|
||||
content: "It’s not a bug – it’s an undocumented feature.",
|
||||
author: "Anonymous",
|
||||
},
|
||||
{
|
||||
content: "Deleted code is debugged code.",
|
||||
author: "Jeff Sickel",
|
||||
},
|
||||
{
|
||||
content:
|
||||
"Walking on water and developing software from a specification are easy if both are frozen.",
|
||||
author: "Edward V. Berard",
|
||||
},
|
||||
{
|
||||
content:
|
||||
"If debugging is the process of removing software bugs, then programming must be the process of putting them in.",
|
||||
author: "Edsger Dijkstra",
|
||||
},
|
||||
{
|
||||
content:
|
||||
"A user interface is like a joke. If you have to explain it, it’s not that good.",
|
||||
author: "Martin Leblanc",
|
||||
},
|
||||
{
|
||||
content: "The best error message is the one that never shows up.",
|
||||
author: "Thomas Fuchs",
|
||||
},
|
||||
{
|
||||
content:
|
||||
"The most damaging phrase in the language is.. it's always been done this way",
|
||||
author: "Grace Hopper",
|
||||
},
|
||||
{
|
||||
content: "Stay hungry, stay foolish.",
|
||||
author: "Steve Jobs",
|
||||
},
|
||||
];
|
||||
setQuote(techQuotes[Math.floor(Math.random() * techQuotes.length)]);
|
||||
}
|
||||
}, [hasActivity, quote]);
|
||||
|
||||
if (!data) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed bottom-6 right-6 flex flex-col items-end gap-3 z-50 font-sans pointer-events-none">
|
||||
<AnimatePresence mode="popLayout">
|
||||
|
||||
{/* --------------------------------------------------------------------------------
|
||||
1. CODING CARD
|
||||
Zeigt entweder "Live Coding" (Grün) oder "Tagesstatistik" (Grau/Blau)
|
||||
-------------------------------------------------------------------------------- */}
|
||||
{data.coding && (
|
||||
<motion.div
|
||||
key="coding"
|
||||
initial={{ opacity: 0, x: 20, scale: 0.95 }}
|
||||
animate={{ opacity: 1, x: 0, scale: 1 }}
|
||||
exit={{ opacity: 0, x: 20, scale: 0.95 }}
|
||||
layout
|
||||
className={`pointer-events-auto backdrop-blur-xl border p-3 rounded-2xl flex items-center gap-3 w-72 shadow-2xl transition-colors
|
||||
${data.coding.isActive
|
||||
? "bg-black/80 border-green-500/20 shadow-green-900/10"
|
||||
: "bg-black/60 border-white/10"}`}
|
||||
>
|
||||
{/* Icon Box */}
|
||||
<div className={`shrink-0 p-2.5 rounded-xl border flex items-center justify-center
|
||||
${data.coding.isActive
|
||||
? "bg-green-500/10 border-green-500/20 text-green-400"
|
||||
: "bg-white/5 border-white/10 text-gray-400"}`}
|
||||
>
|
||||
{data.coding.isActive ? <Zap size={18} fill="currentColor" /> : <Code2 size={18} />}
|
||||
</div>
|
||||
const activeCount = [
|
||||
data.coding?.isActive,
|
||||
data.gaming?.isPlaying,
|
||||
data.music?.isPlaying,
|
||||
].filter(Boolean).length;
|
||||
|
||||
<div className="flex flex-col min-w-0">
|
||||
{data.coding.isActive ? (
|
||||
// --- LIVE STATUS ---
|
||||
<>
|
||||
<div className="flex items-center gap-2 mb-0.5">
|
||||
<span className="relative flex h-2 w-2">
|
||||
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
|
||||
<span className="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
|
||||
</span>
|
||||
<span className="text-[10px] font-bold text-green-400 uppercase tracking-widest">
|
||||
Coding Now
|
||||
// If minimized, show only a small indicator
|
||||
if (isMinimized) {
|
||||
return (
|
||||
<motion.button
|
||||
initial={{ scale: 0 }}
|
||||
animate={{ scale: 1 }}
|
||||
onClick={() => setIsMinimized(false)}
|
||||
className="fixed bottom-4 right-4 md:bottom-6 md:right-6 z-40 pointer-events-auto bg-black/80 backdrop-blur-xl border border-white/10 p-3 rounded-full shadow-2xl hover:scale-110 transition-transform"
|
||||
>
|
||||
<Activity size={20} className="text-white" />
|
||||
{activeCount > 0 && (
|
||||
<span className="absolute -top-1 -right-1 bg-green-500 text-white text-[10px] font-bold rounded-full w-5 h-5 flex items-center justify-center">
|
||||
{activeCount}
|
||||
</span>
|
||||
)}
|
||||
</motion.button>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed bottom-4 right-4 md:bottom-6 md:right-6 flex flex-col items-end gap-3 z-40 font-sans pointer-events-none w-[280px] sm:w-[320px] max-w-[calc(100vw-2rem)]">
|
||||
{/* Main Container */}
|
||||
<motion.div
|
||||
layout
|
||||
className="pointer-events-auto bg-black/90 backdrop-blur-2xl border border-white/10 rounded-2xl shadow-2xl overflow-hidden w-full"
|
||||
>
|
||||
{/* Header - Always Visible - Changed from button to div to fix nesting error */}
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => setIsExpanded(!isExpanded)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.preventDefault();
|
||||
setIsExpanded(!isExpanded);
|
||||
}
|
||||
}}
|
||||
className="w-full px-4 py-3 flex items-center justify-between hover:bg-white/5 transition-colors cursor-pointer"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="relative">
|
||||
<Activity size={18} className="text-white" />
|
||||
{hasActivity && (
|
||||
<span className="absolute -top-1 -right-1 w-2 h-2 bg-green-500 rounded-full animate-pulse" />
|
||||
)}
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<h3 className="text-sm font-bold text-white">Live Activity</h3>
|
||||
<p className="text-[10px] text-white/50">
|
||||
{activeCount > 0 ? `${activeCount} active now` : "No activity"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setIsMinimized(true);
|
||||
}}
|
||||
className="p-1 hover:bg-white/10 rounded-lg transition-colors cursor-pointer"
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.stopPropagation();
|
||||
setIsMinimized(true);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<X size={14} className="text-white/60" />
|
||||
</div>
|
||||
{isExpanded ? (
|
||||
<ChevronUp size={18} className="text-white/60" />
|
||||
) : (
|
||||
<ChevronDown size={18} className="text-white/60" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Expandable Content */}
|
||||
<AnimatePresence>
|
||||
{isExpanded && (
|
||||
<motion.div
|
||||
initial={{ height: 0, opacity: 0 }}
|
||||
animate={{ height: "auto", opacity: 1 }}
|
||||
exit={{ height: 0, opacity: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="overflow-y-auto max-h-[calc(100vh-200px)]"
|
||||
>
|
||||
<div className="border-t border-white/10 p-3 sm:p-4 space-y-3">
|
||||
{/* CODING CARD */}
|
||||
{data.coding && (
|
||||
<motion.div
|
||||
layout
|
||||
className={`relative border rounded-xl p-3 transition-all ${
|
||||
data.coding.isActive
|
||||
? "bg-gradient-to-br from-green-500/10 to-emerald-500/5 border-green-500/30 shadow-lg shadow-green-500/10"
|
||||
: "bg-white/5 border-white/10"
|
||||
}`}
|
||||
>
|
||||
{/* "RIGHT NOW" Indicator */}
|
||||
{data.coding.isActive && (
|
||||
<div className="absolute -top-2 -right-2 bg-green-500 text-black text-[9px] font-black px-2 py-0.5 rounded-full uppercase tracking-wider shadow-lg">
|
||||
Right Now
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-start gap-3">
|
||||
<div
|
||||
className={`shrink-0 p-2 rounded-lg border flex items-center justify-center ${
|
||||
data.coding.isActive
|
||||
? "bg-green-500/20 border-green-500/30 text-green-400"
|
||||
: "bg-white/5 border-white/10 text-gray-400"
|
||||
}`}
|
||||
>
|
||||
{data.coding.isActive ? (
|
||||
<Zap size={16} fill="currentColor" />
|
||||
) : (
|
||||
<Code2 size={16} />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
{data.coding.isActive ? (
|
||||
<>
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className="relative flex h-2 w-2">
|
||||
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
|
||||
<span className="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
|
||||
</span>
|
||||
<span className="text-[10px] font-bold text-green-400 uppercase tracking-wider">
|
||||
Coding Live
|
||||
</span>
|
||||
</div>
|
||||
<p className="font-bold text-sm text-white truncate mb-0.5">
|
||||
{data.coding.project || "Active Project"}
|
||||
</p>
|
||||
<p className="text-xs text-white/60 truncate">
|
||||
{data.coding.file || "Writing code..."}
|
||||
</p>
|
||||
{data.coding.language && (
|
||||
<div className="mt-2 inline-flex items-center gap-1 px-2 py-0.5 bg-green-500/10 border border-green-500/20 rounded-full">
|
||||
<span className="text-[10px] font-semibold text-green-400">
|
||||
{data.coding.language}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex items-center gap-1.5 mb-1">
|
||||
<Clock size={10} className="text-gray-400" />
|
||||
<span className="text-[10px] font-bold text-gray-400 uppercase tracking-wider">
|
||||
Today's Coding
|
||||
</span>
|
||||
</div>
|
||||
<p className="font-bold text-sm text-white mb-0.5">
|
||||
{data.coding.stats?.time || "0m"}
|
||||
</p>
|
||||
<p className="text-xs text-white/60">
|
||||
{data.coding.stats?.topLang || "No activity yet"}
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* GAMING CARD */}
|
||||
{data.gaming?.isPlaying && (
|
||||
<motion.div
|
||||
layout
|
||||
initial={{ scale: 0.9, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
exit={{ scale: 0.9, opacity: 0 }}
|
||||
className="relative bg-gradient-to-br from-indigo-500/10 to-purple-500/5 border border-indigo-500/30 rounded-xl p-3 overflow-hidden shadow-lg shadow-indigo-500/10"
|
||||
>
|
||||
{/* "RIGHT NOW" Indicator */}
|
||||
<div className="absolute -top-2 -right-2 bg-indigo-500 text-white text-[9px] font-black px-2 py-0.5 rounded-full uppercase tracking-wider shadow-lg">
|
||||
Right Now
|
||||
</div>
|
||||
|
||||
{/* Background Glow */}
|
||||
<div className="absolute -right-8 -top-8 w-32 h-32 bg-indigo-500/20 blur-3xl rounded-full pointer-events-none" />
|
||||
|
||||
<div className="relative flex items-start gap-3">
|
||||
<div className="shrink-0">
|
||||
{data.gaming.image ? (
|
||||
<Image
|
||||
src={data.gaming.image}
|
||||
alt="Game"
|
||||
width={48}
|
||||
height={48}
|
||||
className="w-12 h-12 rounded-lg shadow-md object-cover ring-2 ring-indigo-500/30"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-12 h-12 rounded-lg bg-indigo-500/20 border border-indigo-500/30 flex items-center justify-center">
|
||||
<Gamepad2 className="text-indigo-400" size={20} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className="relative flex h-2 w-2">
|
||||
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-indigo-400 opacity-75"></span>
|
||||
<span className="relative inline-flex rounded-full h-2 w-2 bg-indigo-500"></span>
|
||||
</span>
|
||||
<span className="text-[10px] font-bold text-indigo-300 uppercase tracking-wider">
|
||||
Gaming Now
|
||||
</span>
|
||||
</div>
|
||||
<p className="font-bold text-sm text-white truncate mb-0.5">
|
||||
{data.gaming.name}
|
||||
</p>
|
||||
<p className="text-xs text-indigo-200/60 truncate">
|
||||
{data.gaming.details ||
|
||||
data.gaming.state ||
|
||||
"Playing..."}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* MUSIC CARD */}
|
||||
{data.music?.isPlaying && (
|
||||
<motion.div
|
||||
layout
|
||||
initial={{ scale: 0.9, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
exit={{ scale: 0.9, opacity: 0 }}
|
||||
>
|
||||
<a
|
||||
href={data.music.url}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="relative block bg-gradient-to-br from-green-500/10 to-emerald-500/5 border border-green-500/30 rounded-xl p-3 hover:border-green-500/50 transition-all group shadow-lg shadow-green-500/10"
|
||||
>
|
||||
{/* "RIGHT NOW" Indicator */}
|
||||
<div className="absolute -top-2 -right-2 bg-green-500 text-black text-[9px] font-black px-2 py-0.5 rounded-full uppercase tracking-wider shadow-lg">
|
||||
Right Now
|
||||
</div>
|
||||
|
||||
<div className="relative flex items-start gap-3">
|
||||
<div className="shrink-0 relative">
|
||||
<Image
|
||||
src={data.music.albumArt}
|
||||
alt="Album"
|
||||
width={48}
|
||||
height={48}
|
||||
className="w-12 h-12 rounded-lg shadow-md group-hover:scale-105 transition-transform ring-2 ring-green-500/30"
|
||||
/>
|
||||
<div className="absolute -bottom-1 -right-1 bg-black rounded-full p-1 border border-green-500/30 shadow-lg">
|
||||
<Disc3
|
||||
size={10}
|
||||
className="text-green-400"
|
||||
style={{
|
||||
animation: "spin 3s linear infinite",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<span className="text-[10px] font-bold text-green-400 uppercase tracking-wider">
|
||||
Spotify
|
||||
</span>
|
||||
{/* Equalizer Animation */}
|
||||
<div className="flex gap-[3px] h-3 items-end">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
className="w-[3px] bg-green-500 rounded-full"
|
||||
animate={{
|
||||
height: ["30%", "100%", "50%"],
|
||||
}}
|
||||
transition={{
|
||||
duration: 0.6,
|
||||
repeat: Infinity,
|
||||
repeatType: "reverse",
|
||||
delay: i * 0.12,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<p className="font-bold text-sm text-white truncate mb-0.5 group-hover:text-green-400 transition-colors">
|
||||
{data.music.track}
|
||||
</p>
|
||||
<p className="text-xs text-white/60 truncate">
|
||||
{data.music.artist}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* Quote of the Day (when idle) */}
|
||||
{!hasActivity && quote && (
|
||||
<div className="bg-white/5 rounded-lg p-3 border border-white/10 relative overflow-hidden group hover:bg-white/10 transition-colors">
|
||||
<div className="absolute top-0 right-0 p-2 opacity-10 group-hover:opacity-20 transition-opacity">
|
||||
<Code2 size={40} />
|
||||
</div>
|
||||
<p className="text-[10px] font-bold text-white/40 uppercase tracking-wider mb-2">
|
||||
Quote of the moment
|
||||
</p>
|
||||
<p className="text-sm text-white/90 italic font-serif leading-relaxed">
|
||||
"{quote.content}"
|
||||
</p>
|
||||
<p className="text-xs text-white/50 mt-2 text-right">
|
||||
— {quote.author}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Status Footer */}
|
||||
<div className="pt-3 border-t border-white/10 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className={`w-2 h-2 rounded-full ${
|
||||
data.status.color === "green"
|
||||
? "bg-green-500"
|
||||
: data.status.color === "red"
|
||||
? "bg-red-500"
|
||||
: data.status.color === "yellow"
|
||||
? "bg-yellow-500"
|
||||
: "bg-gray-500"
|
||||
}`}
|
||||
/>
|
||||
<span className="text-[11px] font-medium text-white/50 capitalize">
|
||||
{data.status.text === "dnd"
|
||||
? "Do Not Disturb"
|
||||
: data.status.text}
|
||||
</span>
|
||||
</div>
|
||||
<span className="font-bold text-sm text-white truncate">
|
||||
{data.coding.project || "Unknown Project"}
|
||||
<span className="text-[10px] text-white/30">
|
||||
Updates every 30s
|
||||
</span>
|
||||
<span className="text-xs text-white/50 truncate">
|
||||
{data.coding.file || "Writing code..."}
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
// --- STATS STATUS ---
|
||||
<>
|
||||
<span className="text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-0.5 flex items-center gap-1">
|
||||
<Clock size={10} /> Today's Stats
|
||||
</span>
|
||||
<span className="font-bold text-sm text-white">
|
||||
{data.coding.stats?.time || "0m"}
|
||||
</span>
|
||||
<span className="text-xs text-white/50 truncate">
|
||||
Focus: {data.coding.stats?.topLang}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
|
||||
{/* --------------------------------------------------------------------------------
|
||||
2. GAMING CARD
|
||||
Erscheint nur, wenn du spielst
|
||||
-------------------------------------------------------------------------------- */}
|
||||
{data.gaming?.isPlaying && (
|
||||
<motion.div
|
||||
key="gaming"
|
||||
initial={{ opacity: 0, x: 20, scale: 0.95 }}
|
||||
animate={{ opacity: 1, x: 0, scale: 1 }}
|
||||
exit={{ opacity: 0, x: 20, scale: 0.95 }}
|
||||
layout
|
||||
className="pointer-events-auto bg-indigo-950/80 backdrop-blur-xl border border-indigo-500/20 p-3 rounded-2xl flex items-center gap-3 w-72 shadow-2xl relative overflow-hidden"
|
||||
>
|
||||
{/* Background Glow */}
|
||||
<div className="absolute -right-4 -top-4 w-24 h-24 bg-indigo-500/20 blur-2xl rounded-full pointer-events-none" />
|
||||
|
||||
<div className="relative shrink-0">
|
||||
{data.gaming.image ? (
|
||||
<img
|
||||
src={data.gaming.image}
|
||||
alt="Game Art"
|
||||
className="w-12 h-12 rounded-lg shadow-sm object-cover bg-indigo-900"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-12 h-12 rounded-lg bg-indigo-500/20 flex items-center justify-center">
|
||||
<Gamepad2 className="text-indigo-400" size={24} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col min-w-0 z-10">
|
||||
<span className="text-[10px] font-bold text-indigo-300 uppercase tracking-widest mb-0.5">
|
||||
In Game
|
||||
</span>
|
||||
<span className="font-bold text-sm text-white truncate">
|
||||
{data.gaming.name}
|
||||
</span>
|
||||
<span className="text-xs text-indigo-200/60 truncate">
|
||||
{data.gaming.details || data.gaming.state || "Playing..."}
|
||||
</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
|
||||
{/* --------------------------------------------------------------------------------
|
||||
3. MUSIC CARD (Spotify)
|
||||
Erscheint nur, wenn Musik läuft
|
||||
-------------------------------------------------------------------------------- */}
|
||||
{data.music?.isPlaying && (
|
||||
<motion.div
|
||||
key="music"
|
||||
initial={{ opacity: 0, x: 20, scale: 0.95 }}
|
||||
animate={{ opacity: 1, x: 0, scale: 1 }}
|
||||
exit={{ opacity: 0, x: 20, scale: 0.95 }}
|
||||
layout
|
||||
className="pointer-events-auto group bg-black/80 backdrop-blur-md border border-white/10 p-3 rounded-2xl flex items-center gap-3 w-72 shadow-2xl hover:bg-black/90 transition-all"
|
||||
>
|
||||
<div className="relative shrink-0">
|
||||
<img
|
||||
src={data.music.albumArt}
|
||||
alt="Album"
|
||||
className="w-12 h-12 rounded-lg shadow-sm group-hover:scale-105 transition-transform duration-500"
|
||||
/>
|
||||
<div className="absolute -bottom-1 -right-1 bg-black rounded-full p-1 border border-white/10 shadow-sm z-10">
|
||||
<Disc3 size={10} className="text-green-400 animate-spin-slow" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col min-w-0 flex-1">
|
||||
<div className="flex items-center justify-between mb-0.5">
|
||||
<span className="text-[10px] font-bold text-green-400 uppercase tracking-widest flex items-center gap-1">
|
||||
Spotify
|
||||
</span>
|
||||
{/* Equalizer Animation */}
|
||||
<div className="flex gap-[2px] h-2 items-end">
|
||||
{[1,2,3].map(i => (
|
||||
<motion.div
|
||||
key={i}
|
||||
className="w-0.5 bg-green-500 rounded-full"
|
||||
animate={{ height: ["20%", "100%", "40%"] }}
|
||||
transition={{ duration: 0.5, repeat: Infinity, repeatType: "reverse", delay: i * 0.1 }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a
|
||||
href={data.music.url}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="font-bold text-sm text-white truncate hover:underline decoration-white/30 underline-offset-2"
|
||||
>
|
||||
{data.music.track}
|
||||
</a>
|
||||
<span className="text-xs text-white/50 truncate">
|
||||
{data.music.artist}
|
||||
</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* --------------------------------------------------------------------------------
|
||||
4. STATUS BADGE (Optional)
|
||||
Kleiner Indikator ganz unten, falls nichts anderes da ist oder als Abschluss
|
||||
-------------------------------------------------------------------------------- */}
|
||||
<motion.div layout className="pointer-events-auto bg-black/40 backdrop-blur-sm border border-white/5 px-3 py-1.5 rounded-full flex items-center gap-2">
|
||||
<div className={`w-2 h-2 rounded-full ${
|
||||
data.status.color === 'green' ? 'bg-green-500' :
|
||||
data.status.color === 'red' ? 'bg-red-500' :
|
||||
data.status.color === 'yellow' ? 'bg-yellow-500' : 'bg-gray-500'
|
||||
}`} />
|
||||
<span className="text-xs font-medium text-white/60 capitalize">
|
||||
{data.status.text === 'dnd' ? 'Do not disturb' : data.status.text}
|
||||
</span>
|
||||
</motion.div>
|
||||
|
||||
</AnimatePresence>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user