import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Button } from '@remotion/design';
import { useState } from 'react';
import { GithubButton } from './GitHubButton';
export const GetStarted = () => {
    const [clicked, setClicked] = useState(null);
    return (_jsxs("div", { className: "flex flex-col lg:flex-row items-center justify-center text-center w-full", children: [_jsx("div", { className: "w-full lg:w-auto", children: _jsxs("div", { className: "flex flex-row w-full relative", children: [clicked ? (_jsx("div", { style: {
                                animation: 'click 0.7s linear',
                                animationFillMode: 'forwards',
                            }, className: "absolute z-0 top-[-10px] font-mono text-sm text-center w-full", children: "Copied!" }, clicked)) : null, _jsx(Button, { className: "bg-[#333] text-white rounded-lg px-4 font-mono hover:[#444] cursor-pointer w-full", onClick: () => {
                                navigator.clipboard.writeText('npx create-video@latest');
                                setClicked(Date.now());
                            }, title: "Click to copy", children: "$ npx create-video@latest" })] }) }), _jsx("div", { style: { width: 10, height: 10 } }), _jsx("div", { className: "w-full lg:w-auto", children: _jsx(Button, { href: "/docs", className: "w-full", children: "Docs" }) }), _jsx("div", { className: "w-2 h-2" }), _jsx("div", { className: "w-full lg:w-auto", children: _jsx(Button, { href: "https://remotion.dev/discord", target: "_blank", className: "w-full", children: "Discord" }) }), _jsx("div", { className: "w-2 h-2" }), _jsx("div", { className: "w-full lg:w-auto", children: _jsx(Button, { href: "https://github.com/remotion-dev/remotion", target: "_blank", className: "w-full", children: _jsx(GithubButton, {}) }) })] }));
};
