johanolsson
-
Joined
-
Last visited
About Me
From Sweden love to press all buttobs on the computer and trying to code but atm ny computer is probably worse then a commodor 64 😀
Aibrowser.info
// HumanityManifest.jsx
import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { Play, Code, ChevronRight } from 'lucide-react';
import { chaptersData } from './data/chaptersData';
import './HumanityManifest.css'; // Importera separat CSS-fil för animationer
const HumanityManifest = () => {
const [activeChapter, setActiveChapter] = useState(null);
const [runningChapterId, setRunningChapterId] = useState(null);
const handleRunCode = (chapterId, delay = 800) => {
if (activeChapter === chapterId) {
setActiveChapter(null);
setRunningChapterId(null);
return () => {};
}
setRunningChapterId(chapterId);
const timer = setTimeout(() => {
setActiveChapter(chapterId);
setRunningChapterId(null);
}, delay);
return () => clearTimeout(timer);
};
// Säkerställ att timers rensas vid avmontering
useEffect(() => {
return () => {
// Detta är en extra säkerhetsåtgärd för att rensa eventuella kvarvarande timers
};
}, []);
return (
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 text-white p-8">
{/* Header */}
<div className="max-w-6xl mx-auto mb-12">
<div className="flex items-center gap-4 mb-4">
<Code className="w-12 h-12 text-cyan-400" />
<h1 className="text-5xl font-bold bg-gradient-to-r from-cyan-400 to-purple-400 bg-clip-text text-transparent">
Humanity.exe
</h1>
</div>
<p className="text-xl text-gray-300 italic mb-2">
En kodad essä om mänsklighetens paradox
</p>
<p className="text-gray-400">
Det här är inte ett program. Det är en spegel.
</p>
</div>
{/* Chapters */}
<div className="max-w-6xl mx-auto space-y-6">
{chaptersData.map((chapter) => {
const Icon = chapter.icon || Code; // Fallback till Code-ikon
const isActive = activeChapter === chapter.id;
const isRunning = runningChapterId === chapter.id;
const delay = chapter.delay || 800; // Konfigurerbar fördröjning
return (
<div
key={chapter.id}
className={`bg-slate-800/50 backdrop-blur rounded-xl overflow-hidden border-2 transition-all duration-300 ${
isActive ? 'border-cyan-400 shadow-lg shadow-cyan-400/20' : 'border-slate-700'
}`}
>
{/* Chapter Header */}
<div
className="p-6 cursor-pointer hover:bg-slate-800/70 transition-colors"
onClick={() => handleRunCode(chapter.id, delay)}
>
<div className="flex items-center justify-between">
<div className="flex items-center gap-4">
<div className={`p-3 rounded-lg bg-gradient-to-br ${chapter.color}`}>
<Icon className="w-6 h-6" />
</div>
<div>
<h2 className="text-2xl font-bold text-white mb-1">
{chapter.title}
</h2>
<p className="text-gray-400">{chapter.subtitle}</p>
</div>
</div>
<button
className={`flex items-center gap-2 px-6 py-3 rounded-lg font-semibold transition-all ${
isActive || isRunning
? 'bg-cyan-400 text-slate-900'
: 'bg-slate-700 text-white hover:bg-slate-600'
}`}
disabled={isRunning}
aria-label={isActive ? `Stäng ${chapter.title}` : `Kör ${chapter.title}`}
aria-expanded={isActive}
>
<Play className="w-5 h-5" />
{isRunning ? 'Running...' : isActive ? 'Close' : 'Run'}
</button>
</div>
</div>
{/* Code & Result */}
{isActive && (
<div className="border-t border-slate-700">
<div className="grid md:grid-cols-2 divide-x divide-slate-700">
{/* Code Block */}
<div className="p-6 bg-slate-900/50">
<div className="flex items-center gap-2 mb-4">
<Code className="w-4 h-4 text-cyan-400" />
<span className="text-sm text-cyan-400 font-mono">source.py</span>
</div>
<pre className="text-sm text-gray-300 font-mono overflow-x-auto">
<code>{chapter.code}</code>
</pre>
</div>
{/* Result */}
<div className="p-6">
<div className="flex items-center gap-2 mb-4">
<ChevronRight className="w-4 h-4 text-green-400" />
<span className="text-sm text-green-400 font-mono">output</span>
</div>
<h3 className="text-xl font-bold mb-4 text-cyan-300">
{chapter.result.title}
</h3>
<div className="space-y-3">
{chapter.result.content.map((item, idx) => (
<div
key={idx}
className="text-gray-300 leading-relaxed pl-4 border-l-2 border-purple-500/50 fade-in"
style={{ animationDelay: `${idx * 0.1}s` }}
>
{item}
</div>
))}
</div>
</div>
</div>
</div>
)}
</div>
);
})}
</div>
{/* Footer */}
<div className="max-w-6xl mx-auto mt-16 text-center">
<div className="bg-slate-800/30 backdrop-blur rounded-xl p-8 border border-slate-700">
<h3 className="text-2xl font-bold mb-4 bg-gradient-to-r from-cyan-400 to-purple-400 bg-clip-text text-transparent">
Slutgiltig Exekvering
</h3>
<p className="text-gray-300 text-lg mb-4">
Om du läser detta som kod, ser du klasser och metoder.
</p>
<p className="text-gray-300 text-lg mb-6">
Om du läser detta som text, ser du frågor och visioner.
</p>
<p className="text-cyan-400 font-semibold text-xl mb-4">
Humanity.exe är inte en slutpunkt. Det är en signal.
</p>
<p className="text-gray-400 text-sm italic">
Version 2.0 - Nu med motargument och balansperspektiv
</p>
</div>
</div>
</div>
);
};
// PropTypes för typsäkerhet
HumanityManifest.propTypes = {
chaptersData: PropTypes.arrayOf(
PropTypes.shape({
id: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
subtitle: PropTypes.string.isRequired,
icon: PropTypes.elementType, // Valfri pga fallback
color: PropTypes.string.isRequired,
code: PropTypes.string.isRequired,
delay: PropTypes.number, // Valfri fördröjning
result: PropTypes.shape({
title: PropTypes.string.isRequired,
content: PropTypes.arrayOf(PropTypes.string).isRequired,
}).isRequired,
})
).isRequired,
};
// DefaultProps för att hantera tom chaptersData
HumanityManifest.defaultProps = {
chaptersData: [],
};
export default HumanityManifest;
By Johan Olsson "Johansduck" how i see it
