Developer
This commit is contained in:
164
components/developer-ecosystem.tsx
Normal file
164
components/developer-ecosystem.tsx
Normal file
@@ -0,0 +1,164 @@
|
||||
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: "Soon",
|
||||
icon: Puzzle,
|
||||
description: "Random Picker, Glücksrad, Würfel, Münzwurf und Kontextmenü-Kürzel – die Veröffentlichung im Chrome Web Store ist in Vorbereitung.",
|
||||
link: "/developer",
|
||||
actionText: "Demnächst verfügbar"
|
||||
},
|
||||
{
|
||||
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, 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>
|
||||
{tool.id === "chrome" ? (
|
||||
<span className="text-xs font-semibold text-ink-soft">Chrome Web Store · Soon</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>
|
||||
);
|
||||
}
|
||||
@@ -16,7 +16,11 @@ export default function Footer() {
|
||||
<p>
|
||||
Gebaut für alle, die sich (manchmal) nicht entscheiden können.
|
||||
</p>
|
||||
<nav aria-label="Rechtliches" className="flex items-center gap-4">
|
||||
<nav aria-label="Rechtliches und Erweiterungen" className="flex flex-wrap items-center justify-center gap-4">
|
||||
<span className="inline-flex items-center gap-1.5 text-ink-soft">
|
||||
Chrome Extension
|
||||
<span className="rounded-full border border-[#0d7a57]/20 bg-[#e6f7f0] px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-[#0d7a57]">Soon</span>
|
||||
</span>
|
||||
<Link href="/impressum" className="transition-colors hover:text-[#0d7a57]">
|
||||
Impressum
|
||||
</Link>
|
||||
|
||||
@@ -323,4 +323,3 @@ export default function Hero() {
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -106,6 +106,7 @@ export default function Nav() {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Link href="/developer" className="rounded-full px-4 py-2 text-sm font-medium text-ink-soft transition-colors duration-200 hover:bg-[#e6f7f0] hover:text-[#0d7a57]">Extensions & API</Link>
|
||||
<Link href="/#features" className="rounded-full px-4 py-2 text-sm font-medium text-ink-soft transition-colors duration-200 hover:bg-[#e6f7f0] hover:text-[#0d7a57]">Features</Link>
|
||||
{soundButton}
|
||||
</div>
|
||||
@@ -125,7 +126,8 @@ export default function Nav() {
|
||||
<div className="grid gap-1">
|
||||
{TOOLS.map((tool) => <Link key={tool.href} href={tool.href} onClick={closeMenus} className="flex items-center justify-between rounded-2xl px-4 py-3 hover:bg-[#e6f7f0]"><span><span className="block font-semibold text-ink">{tool.label}</span><span className="text-xs text-ink-soft">{tool.hint}</span></span><span className="text-[#0d7a57]">→</span></Link>)}
|
||||
</div>
|
||||
<Link href="/#features" onClick={closeMenus} className="mt-3 block rounded-2xl border border-line px-4 py-3 font-semibold text-ink">Features</Link>
|
||||
<Link href="/developer" onClick={closeMenus} className="mt-3 block rounded-2xl border border-line bg-[#e6f7f0] px-4 py-3 font-semibold text-[#0d7a57]">Extensions & Developer Suite</Link>
|
||||
<Link href="/#features" onClick={closeMenus} className="mt-2 block rounded-2xl border border-line px-4 py-3 font-semibold text-ink">Features</Link>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -387,4 +387,3 @@ export default function ScrollFlourishes() {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user