import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Button, Card, Counter, InlineCode, Input, Link, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, } from '@remotion/design';
import { useCallback, useState } from 'react';
import { ManageTeamMembers } from './ManageTeamMembers';
const Explainer = ({ children }) => {
    return (_jsx("div", { children: _jsx("div", { className: "text-gray-500 font-brand text-sm mb-2", children: children }) }));
};
export const DesignPage = () => {
    const [count, setCount] = useState(10);
    const [active, setActive] = useState(false);
    const [submitButtonActive, setSubmitButtonActive] = useState(true);
    const [submitButtonPrimaryActive, setSubmitButtonPrimaryActive] = useState(true);
    const onClick = useCallback(() => {
        setSubmitButtonActive(false);
        setTimeout(() => {
            setSubmitButtonActive(true);
        }, 1000);
    }, []);
    const onClickPrimary = useCallback(() => {
        setSubmitButtonPrimaryActive(false);
        setTimeout(() => {
            setSubmitButtonPrimaryActive(true);
        }, 1000);
    }, []);
    const [saving, setSaving] = useState(false);
    const save = useCallback(() => {
        setSaving(true);
        setTimeout(() => {
            setSaving(false);
        }, 1000);
    }, []);
    return (_jsx("div", { className: "bg-[var(--background)] relative", children: _jsxs("div", { className: "max-w-[800px] mx-auto pt-10 pb-10 px-4", children: [_jsx("h1", { children: "@remotion/design" }), _jsx("a", { href: "https://github.com/remotion-dev/remotion/blob/main/packages/promo-pages/src/components/design.tsx", className: "font-brand text-brand", target: "_blank", children: "View source" }), _jsx("br", {}), _jsx("br", {}), _jsx("h2", { className: "text-brand", children: "<Button />" }), _jsx(Explainer, { children: "Button with label" }), _jsx(Button, { children: "Click me" }), _jsx("br", {}), _jsx(Explainer, { children: "Disabled" }), _jsxs(Button, { disabled: true, children: ["Don't", " click me"] }), _jsx("br", {}), _jsx(Explainer, { children: "Primary" }), _jsx(Button, { className: "bg-brand text-white", children: "Primary" }), _jsx("br", {}), _jsx(Explainer, { children: "Click to disable" }), _jsx(Button, { onClick: onClick, loading: !submitButtonActive, children: "Submit" }), _jsx("br", {}), _jsx(Explainer, { children: "Click to disable (primary)" }), _jsx(Button, { onClick: onClickPrimary, className: "bg-brand text-white", loading: !submitButtonPrimaryActive, children: "Submit" }), _jsx("br", {}), _jsx(Explainer, { children: "Loading state" }), _jsx(Button, { onClick: onClick, loading: true, children: "Loading" }), _jsx("br", {}), _jsx(Explainer, { children: "Loading state (primary)" }), _jsx(Button, { onClick: onClick, className: "bg-brand text-white", loading: true, children: "Loading" }), _jsx("br", {}), _jsx(Explainer, { children: "Rounded" }), _jsx(Button, { className: "rounded-full", children: "Rounded" }), _jsx("br", {}), _jsx(Explainer, { children: "Full width" }), _jsx(Button, { className: "w-full", children: "Choose a template" }), _jsx("br", {}), _jsx(Explainer, { children: "Full width rounded" }), _jsx(Button, { className: "w-full rounded-full", children: "Fully rounded" }), _jsx("div", { className: "h-8" }), _jsx(Explainer, { children: "Circular" }), _jsx(Button, { className: "rounded-full bg-brand w-12 h-12" }), _jsx("div", { className: "h-8" }), _jsx(Explainer, { children: "Remove" }), _jsx(Button, { className: "hover:text-white hover:bg-warn transition-colors w-10 h-10 p-0 rounded-full", depth: 0.5, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M1 1L9 9M1 9L9 1", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) }), _jsx("div", { className: "h-8" }), _jsx(Explainer, { children: "Link button" }), _jsx(Button, { href: "/design", children: "Link button" }), _jsx("br", {}), _jsxs(Explainer, { children: ["Link button with ", _jsx("code", { children: "<span>" })] }), _jsx(Button, { href: "/design", children: _jsx("span", { children: "Link button with span child" }) }), _jsx("br", {}), _jsx(Explainer, { children: "External link button" }), _jsx(Button, { href: "https://github.com/remotion-dev/remotion", target: "_blank", children: "GitHub" }), _jsx("div", { className: "h-8" }), _jsx(Explainer, { children: "Remove (small)" }), _jsx(Button, { className: "hover:text-white hover:bg-warn transition-colors w-6 h-6 p-0 rounded-full", depth: 0.5, children: _jsx("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M1 1L9 9M1 9L9 1", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) }), _jsx("div", { className: "h-8" }), _jsx("h2", { className: "text-brand", children: "<Counter />" }), _jsx(Counter, { count: count, setCount: setCount, minCount: 1, step: 1, incrementStep: 1 }), _jsx("br", {}), " ", _jsx("h2", { className: "text-brand", children: "<Switch />" }), _jsx(Switch, { active: active, onToggle: () => setActive((e) => !e) }), _jsx("br", {}), " ", _jsx("h2", { className: "text-brand", children: "<Card />" }), _jsxs(Card, { className: "px-4 py-4", children: [_jsx("h3", { className: "text-text", children: "Card" }), _jsx("div", { className: "text-gray-500", children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." })] }), _jsx("br", {}), _jsx("h2", { className: "text-brand", children: "<Select />" }), _jsxs(Select, { defaultValue: "option1", children: [_jsx(SelectTrigger, { style: { width: '200px' }, children: _jsx(SelectValue, { placeholder: "Select an option" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "option1", children: "Option 1" }), _jsx(SelectItem, { value: "option2", children: "Option 2" }), _jsx(SelectItem, { value: "option3", children: "Option 3" })] })] }), _jsx("br", {}), _jsx("h2", { className: "text-brand", children: "<Tabs />" }), _jsxs(Tabs, { defaultValue: "tab1", children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "tab1", children: "Tab 1" }), _jsx(TabsTrigger, { value: "tab2", children: "Tab 2" }), _jsx(TabsTrigger, { value: "tab3", children: "Tab 3" })] }), _jsx(TabsContent, { value: "tab1", children: _jsx("div", { className: "font-brand", children: "Content for Tab 1" }) }), _jsx(TabsContent, { value: "tab2", children: _jsx("div", { className: "font-brand", children: "Content for Tab 2" }) }), _jsx(TabsContent, { value: "tab3", children: _jsx("div", { className: "font-brand", children: "Content for Tab 3" }) })] }), _jsx("br", {}), _jsx("h2", { className: "text-brand", children: "<Input />" }), _jsx(Input, { placeholder: "Enter your email" }), _jsx("br", {}), _jsx("br", {}), _jsx("h2", { className: "text-brand", children: "<Textarea />" }), _jsx(Textarea, { placeholder: "Enter your message" }), _jsx("br", {}), _jsx("br", {}), _jsx("h2", { className: "text-brand", children: "<InlineCode />" }), _jsxs("p", { className: "font-brand", children: ["Use ", _jsx(InlineCode, { children: "useCurrentFrame()" }), " to get the current frame and ", _jsx(InlineCode, { children: "useVideoConfig()" }), " to get the video configuration."] }), _jsx("br", {}), _jsx("h2", { className: "text-brand", children: "<Link />" }), _jsxs("p", { className: "font-brand", children: ["See the", ' ', _jsx(Link, { href: "https://www.remotion.dev/docs", target: "_blank", rel: "noopener noreferrer", children: "Remotion documentation" }), ' ', "for more information."] }), _jsx("br", {}), _jsx("br", {}), _jsx("h1", { children: "Example form set" }), _jsx("br", {}), _jsx("h2", { children: "Change email" }), _jsx("p", { className: "font-brand", children: "A email will be sent to the new email address. You will need to click on the link in the email to confirm the change." }), _jsx(Input, { placeholder: "Enter your email", className: "w-full block" }), _jsx("div", { className: "h-2" }), _jsx("div", { className: "flex flex-row justify-end", children: _jsx(Button, { className: "bg-brand text-white", loading: saving, onClick: save, children: "Change" }) }), _jsx("br", {}), _jsx("br", {}), _jsx(ManageTeamMembers, {})] }) }));
};
