import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Anchor, Group, MANTINE_COLORS, Header as MantineHeader, Title, createStyles, Text, } from "@mantine/core";
import { ThemeToggle } from "./components/ThemeToggle";
import { IconBrandNpm } from "@tabler/icons-react";
import { Analytics, EventAction, EventCategory } from "../../../utils";
var HEADER_HEIGHT = 56;
var useStyles = createStyles(function (theme) { return ({
    link: {
        display: "block",
        lineHeight: 1,
        borderRadius: theme.radius.sm,
        textDecoration: "none",
        color: theme.colorScheme === "dark"
            ? theme.colors.dark[0]
            : theme.colors.gray[7],
        fontSize: 15,
        fontWeight: 550,
        "&:hover": {
            color: theme.colorScheme === "dark"
                ? theme.colors.gray[1]
                : theme.colors.indigo[6],
            textDecoration: "none",
        },
    },
}); });
export var Header = function () {
    var classes = useStyles().classes;
    return (_jsx(MantineHeader, { height: HEADER_HEIGHT, mb: 24, children: _jsxs(Group, { sx: {
                justifyContent: "space-between",
                paddingLeft: 24,
            }, children: [_jsx(Anchor, { href: "https://react-mantine-table.vercel.app/", underline: false, color: MANTINE_COLORS[1], children: _jsx(Title, { order: 4, children: "React Mantine Table" }) }), _jsxs(Group, { children: [_jsx(Anchor, { href: "https://npmjs.com/package/react-mantine-table", className: classes.link, target: "_blank", rel: "noopener noreferrer", onClick: function () {
                                return Analytics.trackEvent({
                                    category: EventCategory.NPMPackage,
                                    action: EventAction.Click,
                                    label: "Header | Navbar",
                                });
                            }, children: _jsxs(Group, { children: [_jsx(IconBrandNpm, { size: 20 }), _jsx(Text, { ml: -8, children: "NPM Package" })] }) }), _jsx(ThemeToggle, {})] })] }) }));
};
