import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Contributors, DiscordMembers, GitHubStars, InstallsPerMonth, PagesOfDocs, TemplatesAndExamples, } from './CommunityStatsItems';
import { SectionTitle } from './VideoAppsTitle';
const SectionLink = ({ href, children }) => (_jsx("a", { target: "_blank", href: href, className: 'no-underline text-inherit contents', children: children }));
const CommunityStats = () => (_jsxs("div", { className: 'm-auto max-w-[700px] text-center', children: [_jsx(SectionTitle, { children: "Never build alone" }), _jsx("div", { className: 'fontbrand text-center mb-10 -mt-4', children: "Join a thriving community of developers." }), _jsxs("div", { className: 'flex flex-wrap justify-between gap-4 w-full items-center', children: [_jsx(SectionLink, { href: "https://www.npmjs.com/package/remotion", children: _jsx(InstallsPerMonth, {}) }), _jsx(SectionLink, { href: "https://www.remotion.dev/docs/", children: _jsx(PagesOfDocs, {}) }), _jsx(SectionLink, { href: "https://www.remotion.dev/templates", children: _jsx(TemplatesAndExamples, {}) }), _jsx(SectionLink, { href: "https://github.com/remotion-dev/remotion", children: _jsx(GitHubStars, {}) }), _jsx(SectionLink, { href: "https://remotion.dev/discord", children: _jsx(DiscordMembers, {}) }), _jsx(SectionLink, { href: "https://github.com/remotion-dev/remotion/graphs/contributors", children: _jsx(Contributors, {}) })] })] }));
export default CommunityStats;
