diff --git a/src/front/Components/Elements/Tabs/HorizontalTab/classes.module.scss b/src/front/Components/Elements/Tabs/HorizontalTab/classes.module.scss index cfbbe33c..871a4a8a 100644 --- a/src/front/Components/Elements/Tabs/HorizontalTab/classes.module.scss +++ b/src/front/Components/Elements/Tabs/HorizontalTab/classes.module.scss @@ -6,6 +6,9 @@ border-bottom: 1px solid var(--tabs-stroke, #d7dce0); cursor: pointer; + display: flex; + align-items: center; + gap: var(--spacing-1-5, 12px); &[data-is-selected="true"] { border-bottom: 2px solid var(--tabs-contrast-actived, #24282e); } diff --git a/src/front/Components/Elements/Tabs/HorizontalTab/index.tsx b/src/front/Components/Elements/Tabs/HorizontalTab/index.tsx index 990e6238..0f6cced0 100644 --- a/src/front/Components/Elements/Tabs/HorizontalTab/index.tsx +++ b/src/front/Components/Elements/Tabs/HorizontalTab/index.tsx @@ -3,6 +3,7 @@ import classes from "./classes.module.scss"; import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography"; import useHoverable from "@Front/Hooks/useHoverable"; import { ITabValue } from ".."; +import { ExclamationCircleIcon } from "@heroicons/react/24/outline"; export type ITab = { label: React.ReactNode; }; @@ -11,6 +12,7 @@ export type IProps = { onSelect: (value: ITabValue) => void; value: ITabValue; isSelected: boolean; + hasWarning?: boolean; } & ITab; export default function HorizontalTabs(props: IProps) { @@ -29,6 +31,7 @@ export default function HorizontalTabs(props: IProps) { color={!isHovered && !props.isSelected ? ETypoColor.TABS_CONTRAST_DEFAULT : ETypoColor.TABS_CONTRAST_ACTIVATED}> {props.label} + {props.hasWarning && } ); } diff --git a/src/front/Components/Elements/Tabs/index.tsx b/src/front/Components/Elements/Tabs/index.tsx index 7906b750..c90dbc36 100644 --- a/src/front/Components/Elements/Tabs/index.tsx +++ b/src/front/Components/Elements/Tabs/index.tsx @@ -8,11 +8,12 @@ import useOpenable from "@Front/Hooks/useOpenable"; export type ITabValue = T & { id: unknown; -} +}; type ITabInternal = ITab & { key?: string; value: ITabValue; + hasWarning?: boolean; }; type IProps = { @@ -100,6 +101,7 @@ export default function Tabs({ onSelect, tabs: propsTabs }: IProps) { value={element.value} onSelect={handleSelect} isSelected={element.value.id === selectedTab.id} + hasWarning={element.hasWarning} /> ))} @@ -112,6 +114,7 @@ export default function Tabs({ onSelect, tabs: propsTabs }: IProps) { value={element.value} onSelect={handleSelect} isSelected={element.value.id === selectedTab.id} + hasWarning={element.hasWarning} /> ))}