170 lines
7.4 KiB
TypeScript
170 lines
7.4 KiB
TypeScript
import Link from "next/link";
|
||
import { Code2, Terminal, Puzzle, Box, ArrowUpRight, CheckCircle2, Sparkles } from "lucide-react";
|
||
|
||
function GithubIcon(props: React.SVGProps<SVGSVGElement>) {
|
||
return (
|
||
<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" {...props}>
|
||
<path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
|
||
<path d="M9 18c-4.51 2-5-2-7-2" />
|
||
</svg>
|
||
);
|
||
}
|
||
|
||
const DEVELOPER_TOOLS = [
|
||
{
|
||
id: "github-repo",
|
||
title: "GitHub Repository",
|
||
badge: "Open Source",
|
||
icon: GithubIcon,
|
||
description: "Der Quellcode des Decision-Kit & Entscheidomat Ökosystems auf GitHub. Sterne, Issues & Contribution Guide.",
|
||
snippet: "git clone https://github.com/knuthtimo-lab/decision-kit.git",
|
||
link: "https://github.com/knuthtimo-lab/decision-kit",
|
||
actionText: "GitHub Repo besuchen",
|
||
highlight: true
|
||
},
|
||
{
|
||
id: "vscode",
|
||
title: "VS Code Extension",
|
||
badge: "Marketplace",
|
||
icon: Puzzle,
|
||
description: "Zufallssieger aus Markierungen ziehen, Würfeln via Befehlspalette (2d6+3) & Glücksrad-Tab direkt in der IDE.",
|
||
link: "https://marketplace.visualstudio.com/items?itemName=TimoKnuth.decisionkit-vscode",
|
||
actionText: "VS Code Store öffnen"
|
||
},
|
||
{
|
||
id: "chrome",
|
||
title: "Chrome Web Store Extension",
|
||
badge: "Live",
|
||
icon: Puzzle,
|
||
description: "Random Picker, Glücksrad, Würfel, Münzwurf und Kontextmenü-Kürzel – direkt als Erweiterung im Chrome Web Store.",
|
||
link: "https://chromewebstore.google.com/detail/decision-kit-random-picke/ehnieppgcoaapbgnilajkcjhakjedlgo",
|
||
actionText: "Im Chrome Web Store öffnen"
|
||
},
|
||
{
|
||
id: "firefox",
|
||
title: "Firefox Add-on",
|
||
badge: "AMO Live",
|
||
icon: Puzzle,
|
||
description: "Random Picker, Glücksrad, Würfel, Münzwurf und Kontextmenü-Kürzel direkt in Firefox als Add-on nutzen.",
|
||
link: "https://addons.mozilla.org/addon/decision-kit-picker-rad-w%C3%BCrfel/",
|
||
actionText: "Im Firefox Store öffnen"
|
||
},
|
||
{
|
||
id: "npm",
|
||
title: "NPM TypeScript Library",
|
||
badge: "npm v1.0.0",
|
||
icon: Box,
|
||
description: "Vose Alias Method für O(1) Zufallswahl, Glücksrad-Physik, RPG-Dice Parser & React 18/19 Hooks.",
|
||
snippet: "npm install decision-kit",
|
||
link: "https://www.npmjs.com/package/decision-kit",
|
||
actionText: "npm Registry öffnen"
|
||
},
|
||
{
|
||
id: "pypi",
|
||
title: "Python SDK & CLI",
|
||
badge: "PyPI v1.0.0",
|
||
icon: Terminal,
|
||
description: "Entscheidungs-Engine & Terminal-CLI für Python-Entwickler, Data Scientists und Automationen.",
|
||
snippet: "pip install decision-kit",
|
||
link: "https://pypi.org/project/decision-kit/",
|
||
actionText: "PyPI Project öffnen"
|
||
},
|
||
{
|
||
id: "github-action",
|
||
title: "GitHub Action",
|
||
badge: "Marketplace",
|
||
icon: Code2,
|
||
description: "Automatisierte Zufallsentscheidungen & Team-Aufteilungen direkt in GitHub CI/CD Actions Workflows.",
|
||
link: "https://github.com/marketplace/actions/decision-kit-action",
|
||
actionText: "GitHub Action ansehen"
|
||
}
|
||
];
|
||
|
||
export default function DeveloperEcosystem() {
|
||
return (
|
||
<section className="my-16 overflow-hidden rounded-3xl border border-line bg-surface p-6 shadow-lift sm:p-10">
|
||
<div className="mx-auto max-w-3xl text-center">
|
||
<div className="inline-flex items-center gap-2 rounded-full border border-[#0d7a57]/20 bg-[#e6f7f0] px-3.5 py-1 text-xs font-semibold uppercase tracking-wider text-[#0d7a57]">
|
||
<Sparkles className="h-3.5 w-3.5" />
|
||
<span>Developer & Extension Suite</span>
|
||
</div>
|
||
<h2 className="mt-4 text-2xl font-bold tracking-tight text-ink sm:text-3xl">
|
||
Entscheidomat überall nutzen: VS Code, Chrome, Firefox, Terminal & Code
|
||
</h2>
|
||
<p className="mt-3 text-sm text-ink-soft sm:text-base">
|
||
Nutze unsere Entscheidungstools direkt in deinem Browser, in deiner Lieblings-IDE oder als Open-Source Package in Node.js, Python & GitHub Actions.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="mt-10 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||
{DEVELOPER_TOOLS.map((tool) => {
|
||
const Icon = tool.icon;
|
||
return (
|
||
<div
|
||
key={tool.id}
|
||
className={`group flex flex-col justify-between rounded-2xl border p-5 transition-all duration-200 hover:-translate-y-1 hover:shadow-soft ${
|
||
tool.highlight
|
||
? "border-[#0d7a57]/40 bg-[#e6f7f0]/30"
|
||
: "border-line bg-paper hover:border-[#0d7a57]/30"
|
||
}`}
|
||
>
|
||
<div>
|
||
<div className="flex items-center justify-between gap-2">
|
||
<div className="flex items-center gap-2.5">
|
||
<div className="flex h-10 w-10 items-center justify-center rounded-xl border border-[#0d7a57]/20 bg-[#e6f7f0] text-[#0d7a57]">
|
||
<Icon className="h-5 w-5" />
|
||
</div>
|
||
<h3 className="font-bold text-ink group-hover:text-[#0d7a57] transition-colors">
|
||
{tool.title}
|
||
</h3>
|
||
</div>
|
||
<span className="rounded-full bg-[#0d7a57]/10 px-2.5 py-0.5 text-xs font-semibold text-[#0d7a57]">
|
||
{tool.badge}
|
||
</span>
|
||
</div>
|
||
|
||
<p className="mt-3 text-xs leading-relaxed text-ink-soft sm:text-sm">
|
||
{tool.description}
|
||
</p>
|
||
|
||
{tool.snippet && (
|
||
<div className="mt-3 overflow-x-auto rounded-xl border border-slate-800 bg-[#111412] px-3.5 py-2 font-mono text-xs shadow-inner">
|
||
<span className="text-[#10b981] font-bold">$ </span>
|
||
<span className="text-emerald-200">{tool.snippet}</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div className="mt-5 flex items-center justify-between border-t border-line/60 pt-3">
|
||
<span className="inline-flex items-center gap-1 text-[11px] font-semibold text-ink-soft">
|
||
<CheckCircle2 className="h-3.5 w-3.5 text-[#0d7a57]" />
|
||
<span>Open Source</span>
|
||
</span>
|
||
<a
|
||
href={tool.link}
|
||
target={tool.link.startsWith("http") ? "_blank" : "_self"}
|
||
rel={tool.link.startsWith("http") ? "noopener noreferrer" : undefined}
|
||
className="inline-flex items-center gap-1 text-xs font-semibold text-[#0d7a57] hover:underline"
|
||
>
|
||
<span>{tool.actionText}</span>
|
||
<ArrowUpRight className="h-3.5 w-3.5" />
|
||
</a>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
|
||
<div className="mt-8 text-center">
|
||
<Link
|
||
href="/developer"
|
||
className="inline-flex items-center gap-2 rounded-full border border-line bg-surface px-6 py-2.5 text-sm font-semibold text-ink shadow-soft transition-all hover:border-[#0d7a57]/40 hover:bg-[#e6f7f0] hover:text-[#0d7a57]"
|
||
>
|
||
<span>Alle Extensions, Repositories & Dokumentation ansehen</span>
|
||
<ArrowUpRight className="h-4 w-4" />
|
||
</Link>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|