Spaces:
Running
Running
File size: 1,578 Bytes
9cd6ddb |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
import { useState } from "react";
import classNames from "classnames";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faShapes, faAnglesRight } from "@fortawesome/free-solid-svg-icons";
import { FormattedMessage } from "react-intl";
const TABS_ELEMENTS = [
{
icon: faShapes,
name: "badgeEditor.tabs.main",
},
{
icon: faAnglesRight,
name: "badgeEditor.tabs.advanced",
},
];
export const EditorTabs = ({
current,
onChange,
}: {
current: number;
onChange: (e: number) => void;
}) => {
return (
// p-2 lg:p-4
<div className="bg-dark-600 rounded-t-2xl">
<ul className="w-full relative z-1 grid grid-cols-2">
{TABS_ELEMENTS.map((tab, index) => (
<li
key={index}
className={classNames(
"hover:bg-blue hover:bg-opacity-50 flex items-center gap-5 lg:gap-4 cursor-pointer text-white text-left text-xs lg:text-sm font-semibold tracking-wide p-4 lg:p-5 justify-center uppercase",
{
"bg-dark-500 hover:!bg-dark-500 hover:!bg-opacity-100":
current === index,
"first-step rounded-t-2xl rounded-r-none": index === 0,
"second-step rounded-t-2xl rounded-l-none": index === 1,
}
)}
onClick={() => onChange(index)}
>
<FontAwesomeIcon icon={tab.icon} className="w-4 min-w-[1rem]" />
<p>
<FormattedMessage id={tab.name} />
</p>
</li>
))}
</ul>
</div>
);
};
|